@charset "utf-8";


 /*공통*/
.loading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999
}

.loading img {
    width: 6vw
}

.loading.none {
    display: none
}

.sub_main_tit {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--hd_h));
    background-color: #fff;
}

.sub_main_tit.bk {
    position: relative;
    background-color: var(--bk);
}

.sub_main_tit .tit {
    position: fixed;
    left: 52%;
    top: calc(55% - var(--hd_h));
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    font-size: 7.8125vw;
    color: var(--purp);
    font-weight: 800;
    transform: translate(-50%, -50%);
    text-align: center;
    overflow: hidden;
}

.sub_main_tit .tit.bk {
    color: var(--bk);
}

.sub_main_tit .tit span {
    transform: translateY(50%);
    opacity: 0;
    transition: transform 0.5s ease-in-out calc(var(--sub-tit-idx)* 0.07s), opacity 0.4s ease-in-out calc(var(--sub-tit-idx)* 0.07s);
}

.sub_main_tit .tit span.en {
    font-family: var(--pop);
}

.sub_main_tit.active .tit span {
    transform: unset;
    opacity: 1;
}

.sub_main_tit .tit span.space {
    display: inline-block;
    margin-left: 0.3em;
}

.sub_main_tit .tit.en {
    font-family: var(--pop);
}

.tit.slideUp {
    overflow: hidden;
    line-height: 1.4;
}

.tit.slideUp span {
    display: inline-block;
    transform: translateY(115%);
    transition: transform 0.8s;
    transition-delay: 0.3s;
}

.tit.slideUp.active span {
    transform: unset;
}


/*.sub_main_tit + div { margin-top: -20vh; }*/
/*서브 컨텐츠 타이틀*/
.sub_cont_tit {
    color: var(--bk);
}

.sub_cont_tit.center {
    text-align: center;
}

.sub_cont_tit.org {
    color: var(--purp2);
}

.sub_cont_tit.purp {
    color: var(--purp);
}

.sub_cont_tit.wh {
    color: #fff;
}

.sub_cont_tit .desc {
    font-size: max(var(--cont_desc), 16px);
    font-weight: 700;
    font-family: var(--pop);
    opacity: 0;
    transition: opacity 0.5s;
    transition-delay: 0.4s
}

.sub_cont_tit.active .desc {
    opacity: 1;
}

.sub_cont_tit .tit {
    margin-top: 0.5859375vw;
    font-size: max(var(--cont_tit), 30px);
    font-weight: 700;
    line-height: 1.4;
}

.sub_cont_tit .tit + .tit {
    margin-top: 0;
}

.sub_cont_tit .tit.en {
    font-family: var(--pop);
    font-weight: 700;
}

.sub_cont_tit .tit span {
    position: relative;
}

.sub_cont_tit .tit span:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: width 0.8s ease;
    transition-delay: 0.6s;
}

.sub_cont_tit.active .tit span:before {
    width: 0;
}

.sub_cont_tit.bg_bk .tit span:before {
    background-color: var(--bk);
}

#renewal_page.service .sub_cont_tit.bg_bk .tit span:before {
    background-color: #1E1D26;
}

.sub_cont_tit.bg_org .tit span:before {
    background-color: var(--purp);
}

.sub_cont_tit.bg_wh .tit span:before {
    background-color: #fff;
}

.sub_cont_tit.bg_sol .tit span:before {
    background-color: #FFF5EF;
}

.sub_cont_tit .txt {
    margin-top: 3vw;
    font-size: max(var(--cont_desc), 16px);
    font-weight: 600;
}

/*버튼스타일*/
.portfolio_view_container .sub_btn {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 0;
    padding-bottom: 15vw;
    background: #fff;
}

.sub_btn {
    display: flex;
    justify-content: center;
    margin-top: 3.90625vw;
}

.portfolio_view_container .sub_btn .btn, .sub_btn .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5em;
    width: auto;
    height: max(3.2vw, 40px);
    font-size: max(var(--basic_txt), 14px);
    font-weight: 700;
    color: #fff;
    background-color: var(--purp);
    border-radius: 2em;
}

.portfolio_view_container .sub_btn .btn .ico, .sub_btn .btn .ico {
    width: 1em;
    height: 1em;
    margin-left: 1.953125vw;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23fff"><path d="M495 273l17-17-17-17L359 103l-17-17L308.1 120l17 17 95 95L24 232 0 232l0 48 24 0 396.1 0-95 95-17 17 33.9 33.9 17-17L495 273z"/></svg>')center/contain no-repeat;
    transition: transform 0.5s;
}

.portfolio_view_container .sub_btn .btn .ico.chev, .sub_btn .btn .ico.chev {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23fff"><path d="M239 401c9.4 9.4 24.6 9.4 33.9 0L465 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L81 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 401z"/></svg>')center/contain no-repeat;
}

.portfolio_view_container .sub_btn.list .ico, .sub_btn.list .ico {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23fff"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M0 32l128 0 0 128L0 160 0 32zM0 192l128 0 0 128L0 320 0 192zM128 352l0 128L0 480 0 352l128 0zM160 32l128 0 0 128-128 0 0-128zM288 192l0 128-128 0 0-128 128 0zM160 352l128 0 0 128-128 0 0-128zM448 32l0 128-128 0 0-128 128 0zM320 192l128 0 0 128-128 0 0-128zM448 352l0 128-128 0 0-128 128 0z"/></svg>')center/contain no-repeat;
}

.portfolio_view_container .sub_btn.bk .btn .sub_btn.bk .btn {
    background-color: var(--bk);
}

.more_btn {
    height: max(2.7vw, 28px);
    font-size: max(0.8vw, 12px);
}

/*서브 하단 링크 배너*/
.faq_container + .link_btm_banner {
    padding-top: 17vw;
}

.link_btm_banner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 5.9375vw;
    color: #fff;
    background-color: #fff;
}

.link_btm_banner.bk {
    background-color: var(--bk);
}

body.bk .link_btm_banner {
    background-color: var(--bk);
}

.link_btm_banner .link_btm {
    position: relative;
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    padding: 0 var(--grid_pd2);
    background-color: var(--purp);
}

.link_btm_banner .link_btm .img {
    position: absolute;
    left: var(--grid_pd2);
    top: -15%;
    width: 20%;
}

.link_btm_banner .link_btm .txt_wrap {
    grid-column: 2 / 3;
    padding: var(--grid_pd1) 0;
}

.link_btm_banner .link_btm .txt_wrap .tit {
    font-size: 1.875vw;
    font-weight: 700;
    line-height: 1.3;
}

.link_btm_banner .link_btm .txt_wrap .txt {
    margin-top: 0.9375vw;
    font-size: 0.9375vw;
    font-weight: 700;
}

.link_btm_banner .link_btm .arr {
    position: absolute;
    right: var(--grid_pd1);
    top: var(--grid_pd1);
    width: max(2vw, 24px);
    height: max(2vw, 24px);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="%23fff"><path d="M328 96l24 0 0 24 0 240 0 24-48 0 0-24 0-182.1L81 401l-17 17L30.1 384l17-17 223-223L88 144l-24 0 0-48 24 0 240 0z"/></svg>')center/contain no-repeat;
    transition: transform 0.3s;
}

.link_btm_banner .link_btm.type2 {
    background-color: #7144EE;
}

.link_btm_banner .link_btm.type2 .img {
    top: -25%;
}

@keyframes arrHover {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(15%, -15%);
    }

    50% {
        transform: translate(0, 0);
    }

    75% {
        transform: translate(15%, -15%);
    }

    100% {
        transform: translate(0, 0);
    }
}


/*-----About-----*/
.about_side_img {
    display: flex;
    padding: 0 var(--grid_pd1);
}

.about_side_img .about_txt_sect {
    width: 60%;
    padding: 0;
    flex: 1;
}

.about_side_img .img {
    width: 40%;
}

.about_side_img .img video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about_txt_sect {
    padding: 0 var(--grid_pd1);
    color: var(--bk);
}

.about_txt_sect.bk {
    background-color: var(--bk);
}

.about_txt_sect.wh {
    color: #fff;
}

.about_txt_sect .tit {
    position: relative;
    font-size: var(--sub_h3);
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
    min-height: 1.3em;
}

.about_txt_sect .tit.en {
    font-family: var(--pop);
    line-height: 1.2;
}

.about_txt_sect .sub_tit {
    font-size: var(--sub_h3);
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
}

.about_txt_sect .sub_tit span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
}

.about_txt_sect .txt_wrap {
    padding: 3.90625vw 0;
}

.about_txt_sect .txt_wrap .txt {
    position: relative;
    margin: 0.290625vw 0;
    font-size: var(--sub_h4);
    font-weight: 600;
    overflow: hidden;
}

.about_txt_sect .txt_wrap .txt br.mo_only {
    display: none;
}

.about_txt_sect .txt_wrap .txt.space {
    margin-top: 1em;
}

.about_txt_sect .txt_wrap .txt span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
}

.about_txt_sect.bk .txt_wrap .txt {
    color: #fff;
}

.about_word {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding-top: 10vh;
    margin: 11.71875vw auto 7.8125vw;
    z-index: 1;
    background: var(--bk);
    /* color: #fff; */
}

.about_word .cont {
    width: 60%;
    margin: 0 auto 5vh;
    color: #fff;
}

.about_word .cont .word {
    display: grid;
    grid-template-columns: repeat(3,minmax(0, 1fr));
    gap: 2vw;
    align-items: center;
    text-align: center;
}

.about_word .cont .word img {
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s;
}

.about_word .cont .word.active img  {
    opacity: 1;
}

.about_word .cont .word.active .plus {
    max-width:50px;
    margin: 0 auto;
}

.about_word .txt_box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2.9296875vw;
    gap: 3vw;
}

.about_word .txt_box p {
    font-size: max(1.7578125vw, 30px);
    font-weight: 800;
    text-align: center;
    opacity: 0;
    transition: opacity 0.8s;
}

.about_word .txt_box p:nth-of-type(1) {
    transition-delay: 0.4s;
}

.about_word .txt_box p:nth-of-type(2) {
    transition-delay: 0.6s;
}

.about_word .txt_box p:nth-of-type(3) {
    transition-delay: 0.8s;
}

.about_word .txt_box.active p {
    opacity: 1;
}

.about_word .txt_box.mean {
    margin-top: var(--basic_txt);
}

.about_word .txt_box.mean p {
    font-size: max(1.015625vw, 16px);
}

.about_word .txt_box.mean p:nth-of-type(1) {
    transition-delay: 0.45s;
}

.about_word .txt_box.mean p:nth-of-type(2) {
    transition-delay: 0.65s;
}

.about_word .txt_box.mean p:nth-of-type(3) {
    transition-delay: 0.85s;
}

.about_what {
    position: relative;
    padding: 7.8125vw calc(var(--grid_pd3)) 7.8125vw;
    margin-top: 100vh;
    background-color: #fff;
    z-index: 10;
}

.about_what:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bk);
    z-index: 10;
    transition: opacity 1.2s;
    pointer-events: none;
}

.about_what.active:before {
    opacity: 0;
}

.about_what .tit_wrap {
    color: var(--purp);
}

.about_what .tit_wrap .desc {
    font-size: var(--cont_desc);
    font-weight: 600;
    font-family: var(--pop);
}

.about_what .tit_wrap .tit {
    margin-top: 0.5859375vw;
    font-size: var(--cont_tit);
    font-weight: 800;
}

.about_what .cont {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 3.859375vw;
    /* column-gap: 2%; */
}

.about_what .cont .txt_wrap {
    width: 50%;
}

.about_what .cont .txt_wrap .chat_wrap {
    width: 85%;
    margin-left: 5%;
}

.about_what .cont .txt_wrap .chat_wrap .chat_box {
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(-10%);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.about_what .cont .txt_wrap .chat_wrap .chat_box.right {
    transform: translateX(10%);
}

.about_what .cont .txt_wrap .chat_wrap .chat_box + .chat_box {
    /* margin-top: 0.38125vw; */
}

.about_what .cont .txt_wrap .chat_wrap .chat_box:nth-of-type(1) {
    justify-content: flex-start;
    margin-left: 6%;
    transition-delay: 0.5s;
}

.about_what .cont .txt_wrap .chat_wrap .chat_box:nth-of-type(2) {
    justify-content: flex-end;
    transition-delay: 0.7s;
}

.about_what .cont .txt_wrap .chat_wrap .chat_box:nth-of-type(3) {
    justify-content: flex-start;
    transition-delay: 0.9s;
}

.about_what .cont.active .txt_wrap .chat_wrap .chat_box {
    opacity: 1;
    transform: unset;
}

.about_what .cont .txt_wrap .chat_wrap .chat_box .chat {
    position: relative;
    padding: 0.4em 1.5em;
    border-radius: 0.5859375vw;
    font-size: max(var(--basic_txt), 14px);
    font-weight: 800;
    color: #fff;
    background-color: var(--purp);
}

.about_what .cont .txt_wrap .chat_wrap .chat_box .chat:before {
  /*  content: '';
    position: absolute;
    left: 0;
    bottom: 0.390625vw;
    width: 1.2em;
    height: 40%;
    transform: translateX(-40%);
    background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 76.4 63.3" fill="%5e318f" height="1em"><path d="M36.2,3.2c0,0-8,40-32,57c0,0,60-2,68-9C72.2,51.2,39.2,35.2,36.2,3.2z"/></svg>') center / contain no-repeat;
*/
}

.about_what .cont .txt_wrap .chat_wrap .chat_box.right .chat {
    transform-origin: right center;
}

.about_what .cont .txt_wrap .chat_wrap .chat_box.right .chat:before {
    left: unset;
    right: 0;
    transform: scaleX(-1) translateX(-40%);
}

.about_what .cont .txt_wrap .chat_wrap .chat_box .char {
    height: 5vw;
    margin-right: 2em;
}

.about_what .cont .txt_wrap .chat_wrap .chat_box.right .char {
    margin-left: 2em;
}

.about_what .cont .txt_wrap .chat_wrap .chat_box .char img {
    height: 100%;
    object-fit: contain;
}

.about_what .cont .txt_wrap .txt_box {
    margin-top: 2.90625vw;
}

.about_what .cont .txt_wrap .txt_box .txt {
    position: relative;
    /* color: #fff; */
    font-size: max(1.3671875vw, 14px);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.7;
}

.about_what .cont .txt_wrap .txt_box .txt span {
    display: block;
    opacity: 0;
    transform: translateY(0.5em);
    transition: opacity 1.2s calc(var(--what-txt-idx)* 0.15s + 1s), transform 1.2s calc(var(--what-txt-idx)* 0.15s + 1s);
}

.about_what .cont.active .txt_wrap .txt_box .txt span {
    opacity: 1;
    transform: unset;
}

.about_what .cont .txt_wrap .txt_box .txt + .txt {
    margin-top: 1.5em;
}

.about_what .cont .img_wrap {
    width: 50%;
    margin-top: -5%;
    flex-shrink: 0;
    max-width: 650px;
}

.about_what .cont .img_wrap .img {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s, transform 1.2s;
}

.about_what .cont.active .img_wrap .img {
    opacity: 1;
    transform: unset;
    position: relative;
}

.about_what .cont.active .img_wrap .img video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about_symbol {
    position: relative;
    padding: 15.625vw 0;
    background-color: var(--bk);
    color: #fff;
    z-index: 10;
}

.about_symbol .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 20;
    transition: background-color 0.8s ease-in-out;
}

.about_symbol.change .bg {
    background-color: #fff;
}

.about_symbol .cont {
}

.about_symbol .cont .sub_cont_tit {
    position: relative;
    z-index: 20;
}

.about_symbol .cont .img_wrap {
    position: relative;
    margin-top: 5.18vw;
}

.about_symbol .cont .img_wrap:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 25%;
    width: 90vw;
    height: 35vw;
    background-image: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255, 94, 16, 0.5) 18%, rgba(255, 94, 16, 0.2) 28%, rgba(255, 94, 16, 0) 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.about_symbol .cont .img {
    width: 100%;
    padding-top: 35%;
    margin: 0 auto;
    position: relative;
}

/*.about_symbol .cont .img img { position: relative; z-index: 10; }*/
.about_symbol .cont .img video {
    position: absolute;
    /* left: 0; */
    top: -10%;
    width: 100%;
    /* height: 100%; */
    object-fit: contain;
    z-index: 10;
    transform: translateX(-50%);
    left: 50%;
    right: 50%;
}

.about_symbol .cont .bg_txt {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 100%;
    font-size: 3.125vw;
    font-weight: 600;
    color: var(--purp);
    font-family: var(--pop);
    transform: translate(-50%, -50%);
    text-align: center;
}

.about_symbol .cont .gradient_bg {
    position: absolute;
    left: 50%;
    top: 35%;
    width: 100vw;
    height: 45vw;
    background-image: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(21, 21, 21, 0), rgba(21, 21, 21, 0.6) 18%, rgba(21, 21, 21, 1) 43%);
    transform: translate(-50%, -50%);
}

.about_logo {
    position: relative;
    padding: 8vw var(--grid_pd4) 9.765625vw;
    background-color: var(--bk);
    color: #fff;
    z-index: 10;
    transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out;
}

.about_logo.change {
    background-color: #fff;
    color: var(--bk);
}

.about_logo .sub_cont_tit {
    color: #fff;
    transition: color 1.2s ease-in-out;
}

.about_logo.change .sub_cont_tit {
    color: var(--bk);
}

.about_logo .sub_cont_tit .tit {
    opacity: 0;
    transition: opacity 0.5s;
    transition-delay: 0.6s;
}

.about_logo .sub_cont_tit.active .tit {
    opacity: 1;
}

.about_logo .wrap {
    display: grid;
    grid-template-columns: 10.5vw minmax(0, 1fr);
    margin-top: 10vw;
}

.about_logo .wrap .tit {
    margin-top: -0.3vw;
    font-size: 2.734375vw;
    font-weight: 600;
    font-family: var(--pop);
    line-height: 1.3;
}

.about_logo .wrap .cont {
}

.about_logo .wrap .cont .cont_desc {
    font-size: max(var(--basic_txt), 14px);
    font-weight: 600;
}

.about_logo .wrap .cont .logo_box {
    margin-top: 3vw;
}

.about_logo .wrap .cont .logo_box + .logo_box {
    margin-top: 3.125vw;
}

.about_logo .wrap .cont .logo_box .txt {
    margin-bottom: 1.171875vw;
    font-size: max(0.859375vw, 13px);
    font-weight: 600;
}

.about_logo .wrap .cont .logo_box .img_col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.171875vw;
}

.about_logo .wrap .cont .logo_box .img_wrap {
}

.about_logo .wrap .cont .logo_box .img_wrap .img_box {
    position: relative;
    width: 100%;
    padding-top: 42%;
    border: 1px solid #E3E3E3;
    border-radius: 1.171875vw;
}

.about_logo .wrap .cont .logo_box .img_col .img_wrap .img_box {
    padding-top: 60%;
}

.about_logo .wrap .cont .logo_box .img_wrap .img_box.bk {
    background-color: var(--bk);
    border-color: var(--bk);
}

.about_logo .wrap .cont .logo_box .img_wrap .img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 55%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.about_logo .wrap .cont .logo_box:nth-of-type(2) .img_wrap:nth-of-type(2) .img {
    width: 73%;
}

.about_logo .wrap .cont .logo_box .img_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about_logo .wrap .cont .logo_box .img_wrap .desc {
    font-size: max(0.703125vw, 12px);
    margin-top: 0.5859375vw;
}

.about_logo .wrap .cont .color_box {
    margin-top: 3vw;
}

.about_logo .wrap .cont .color_box .txt {
    margin-bottom: 1.171875vw;
    font-size: 0.859375vw;
    font-weight: 600;
}

.about_logo .wrap .cont .color_box .box_wrap {
    display: grid;
    grid-template-columns: 37% minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 1.5625vw;
}

.about_logo .wrap .cont .color_box .box_wrap .box {
    position: relative;
    width: 100%;
    padding-top: 95%;
    color: #fff;
    border-radius: 1.171875vw;
}

.about_logo .wrap .cont .color_box .box_wrap .box:nth-of-type(1) {
    background-color: var(--purp)
}

.about_logo .wrap .cont .color_box .box_wrap .box:nth-of-type(2) {
    background-color:var(--purp2)
}

.about_logo .wrap .cont .color_box .box_wrap .box:nth-of-type(3) {
    background-color: var(--bk);
}

.about_logo .wrap .cont .color_box .box_wrap .box .color_code {
    position: absolute;
    left: 1.953125vw;
    top: 1.953125vw;
}

.about_logo .wrap .cont .color_box .box_wrap .box .color_tit {
    font-size: 0.8984375vw;
    font-weight: 600;
}

.about_logo .wrap .cont .color_box .box_wrap .box .code_box {
    margin-top: 1.5625vw;
}

.about_logo .wrap .cont .color_box .box_wrap .box .code_box .line {
    display: grid;
    grid-template-columns: 3.515625vw minmax(0, 1fr);
    font-size: max(0.703125vw, 10px);
}

.about_logo .wrap .cont .color_box .box_wrap .box .code_box .line + .line {
    margin-top: 0.3em;
}

.about_client {
    padding: 11.71875vw 0 23.4375vw;
    background-color:var(--bk);
    border-radius: 0 0 3.859375vw 3.859375vw;
    transition: background-color 0.8s ease-in-out;
}

.about_client .sub_cont_tit {
    padding: 0 var(--grid_pd3);
    color: var(--purp);
    transition: color 0.8s ease-in-out;
}

.about_client .sub_cont_tit .tit {
    opacity: 0;
    transition: opacity 0.5s;
    transition-delay: 0.5s;
}

.about_client .sub_cont_tit.active .tit {
    opacity: 1;
}

.about_client.change {
    background-color: #fff;
}

.about_client.change .sub_cont_tit {
    color: var(--bk);
}

#renewal_page.about .about_client {
    padding: 11.71875vw 0 7.8125vw;
}

.about_client .move_box_wrap {
    margin-top: 3.90625vw;
    overflow: hidden;
}

.about_client .move_box_container {
    position: relative;
}

.about_client .move_box_container .move_box {
    display: flex;
    width: auto;
    padding-right: 1.171875vw;
}

.about_client .move_box_container1 .move_box {
    justify-content: flex-end;
}

.about_client .move_box_container2 .move_box {
    justify-content: flex-start;
}

.about_client .move_box_container .service_box_wrap {
    display: flex;
    width: auto;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 8.625vw;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.about_client .move_box_container:last-of-type .service_box_wrap {
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

.about_client .move_box_container .service_box_wrap a {
    padding-right: 8.25vw;
}

.about_client .service_box {
    position: relative;
    display: block;
    color: #fff;
    font-size: 3.515625vw;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.about_client .service_box.none_filter {
    filter: unset;
}

.about_client .service_box .img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.about_client .service_box .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#renewal_page.about .about_client {
    position: relative;
    margin-bottom: 100vh;
    z-index: 10;
}

.btm_sticky {
    position: relative;
    margin-top: -100vh;
    height: 100vh;
    z-index: 1;
}

#renewal_page.fix_btm .btm_sticky {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.btm_sticky .quick_wrap {
    display: none;
}

/*-----소이정 사람들-----*/
#renewal_page.member .member_over_wrap {
    overflow: hidden;
}

.member_video + .about_txt_sect {
    margin-top: 0;
}

.member_video {
    position: relative;
    width: 30%;
    padding-top: 21%;
    margin-top: 3.90625vw;
    margin-right: auto;
    overflow: hidden;
}

.member_video video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateY(100%);
    transform-origin: left top;
    outline: none;
    border: 0;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.member_card {
    width: 100%;
    padding: 7.8125vw 0 17.578125vw var(--grid_pd1);
    overflow: hidden;
}

.member_card .card_wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 200vw;
}

.member_card .card_wrap .card {
    position: relative;
    width: 100%;
    padding-top: 13%;
    border-radius: 3.90625vw;
    overflow: hidden;
    background-color: #f7f7f8;
}

.member_card .card_wrap .card + .card {
    margin-left: 2.5vw;
}

.member_card .card_wrap .card img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member_robot {
    position: relative;
    width: 100%;
    background-color: var(--bk);
    overflow: hidden;
}

.member_robot:before {
    content: '';
    position: absolute;
    left: 53%;
    top: 35%;
    width: 65vw;
    height: 65vw;
    background-image: radial-gradient(circle farthest-corner at 50% 50%, rgba(255, 94, 16, 0.8), rgba(255, 94, 16, 0.4) 25%, rgba(255, 94, 16, 0) 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
}

.member_robot .robot {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    overflow: hidden;
}

.member_robot .robot img {
    position: relative;
    bottom: -22%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.member_robot .robot video {
    position: relative;
    left: -2%;
    bottom: -22%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.member_robot .robot canvas {
    position: absolute;
    left: 50%;
    top: 0;
    width: 140% !important;
    height: 140% !important;
    transform: translate(-50%, 0%) ;
    object-position: center;
    object-fit: contain
}

.member_robot .bg_txt {
    position: relative;
    font-size: 20vw;
    font-weight: 500;
    font-family: var(--pop);
    white-space: nowrap;
    line-height: 1;
    z-index: 1;
}

.member_robot .bg_txt .line {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.member_robot .bg_txt .line:nth-of-type(even) {
    justify-content: flex-end;
}

.member_robot .bg_txt p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    animation: textLoop 100s linear infinite;
    word-spacing: -0.1em;
}

.member_robot .bg_txt p span + span {
    margin-left: 1.953125vw;
}

.member_robot .bg_txt .line:nth-of-type(even) p {
    animation: textLoopBack 80s linear infinite;
}

@keyframes textLoop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes textLoopBack {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.member_container {
    position: relative;
    z-index: 10;
    margin-bottom: 100vh;
}

.member_banner {
    overflow: hidden;
}

.member_banner .txt_banner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.3em 0;
    font-size: max(1.7578125vw, 18px);
    font-weight: 800;
    color: var(--purp);
    background-color: #000;
}

.member_banner .txt_banner p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    animation: textLoopBack 50s linear infinite;
}

.member_banner .txt_banner span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0.7em;
}

.member_banner .txt_banner span:before {
    content: '';
    width: 0.2em;
    height: 0.2em;
    margin-right: 0.7em;
    border-radius: 100%;
    background-color: var(--purp);
}

.member_intro {
    padding: 0 var(--grid_pd2) 15vw;
    background-color: var(--bk);
    overflow: hidden;
}

.member_intro .tit {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 11.71875vw;
    font-size: max(var(--sub_h2), 64px);
    font-weight: 800;
    font-family: var(--pop);
    color: var(--purp);
    white-space: nowrap;
}

.member_intro .tit p {
    animation: textLoop 80s linear infinite;
}

.member_intro .member_wrap {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7.8125vw 2.1484375vw;
}

.member_intro .member_wrap .member_box {
    color: #fff;
}

.member_intro .member_wrap .member_box .char_box {
    position: relative;
    padding-top: 100%;
    border-radius: 1.3671875vw;
    transition: border-radius 1.2s;
    transition-delay: -0.2s;
}

.member_intro .member_wrap .member_box .char_box .char_hide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.3671875vw;
    overflow: hidden;
    transition: border-radius 1.2s;
    transition-delay: -0.2s;
}

.member_intro .member_wrap .member_box .char_box .char {
    position: absolute;
}

.member_intro .member_wrap .member_box .char_box .char.illu {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.member_intro .member_wrap .member_box .char_box .char.illu img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.member_intro .member_wrap .member_box .char_box .char:not(.illu) {
    opacity: 0;
    transform: scale(1);
    transition: transform 0s, opacity 0s;
}

.member_intro .member_wrap .member_box .char_box .char img {
    object-fit: contain;
}

.member_intro .member_wrap .member_box .char_box .name_box {
    position: absolute;
    left: 1.953125vw;
    top: 1.953125vw;
}

.member_intro .member_wrap .member_box .char_box .name_box .name {
    font-size: max(1.3671875vw, 17px);
    font-weight: 800;
    line-height: 1.2;
}

.member_intro .member_wrap .member_box .char_box .name_box .position {
    margin-top: 0.5em;
    font-size: max(0.703125vw, 13px);
    font-weight: 500;
}

.member_intro .member_wrap .member_box .desc {
    margin-top: 1.8vw;
    font-size: 0.67vw;
    font-weight: 600;
}

.member_intro .member_wrap .member_box .desc .point {
    display: block;
    font-size: 1.2em;
    margin-bottom: 1em;
}

/*--- S 멤버 위치 및 배경색 지정---*/
/*플랜디바*/
.member_intro .member_wrap .member_box.plan .char_box {
    background-color: #E8BF7C;
}

.member_intro .member_wrap .member_box.plan .char_box .char:not(.illu) {
    right: 7%;
    bottom: -10%;
    width: 46%;
}

/*재수프리*/
.member_intro .member_wrap .member_box.zesupri .char_box {
    background-color: #B2BE20;
}

.member_intro .member_wrap .member_box.zesupri .char_box .char:not(.illu) {
    right: 3%;
    bottom: -23%;
    width: 50%;
}

/*영보스*/
.member_intro .member_wrap .member_box.youngboss .char_box {
    background-color: #FF785F;
}

.member_intro .member_wrap .member_box.youngboss .char_box .char:not(.illu) {
    right: 0;
    bottom: 0;
    width: 100%;
}

/*엔제리*/
.member_intro .member_wrap .member_box.angel .char_box {
    background-color: #FFCB4F;
}

.member_intro .member_wrap .member_box.angel .char_box .char:not(.illu) {
    left: 60%;
    top: 49%;
    width: 101%;
    transform: translate(-50%, -50%) scale(1);
}

/*JINA*/
.member_intro .member_wrap .member_box.jina .char_box {
    background-color: #FF8D40;
}

.member_intro .member_wrap .member_box.jina .char_box .char:not(.illu) {
    right: 3%;
    bottom: 0;
    width: 79%;
}

/*쥬드로*/
.member_intro .member_wrap .member_box.judelaw .char_box {
    background-color: #000;
}

.member_intro .member_wrap .member_box.judelaw .char_box .char:not(.illu) {
    left: 2%;
    top: 9%;
    width: 130%;
}

/*SJ*/
.member_intro .member_wrap .member_box.sj .char_box {
    background-color: #6578DA;
}

.member_intro .member_wrap .member_box.sj .char_box .char:not(.illu) {
    right: -30%;
    bottom: -30%;
    width: 120%;
}

/*ZOEY*/
.member_intro .member_wrap .member_box.zoey .char_box {
    background-color: #B66721;
}

.member_intro .member_wrap .member_box.zoey .char_box .char:not(.illu) {
    right: -18%;
    top: 10%;
    width: 107%;
}

/*Dter*/
.member_intro .member_wrap .member_box.dter .char_box {
    background-color: #8A98A8;
}

.member_intro .member_wrap .member_box.dter .char_box .char:not(.illu) {
    right: -2%;
    top: 18%;
    width: 78%;
}

/*시큘라*/
.member_intro .member_wrap .member_box.sicula .char_box {
    background-color: #B60A00;
}

.member_intro .member_wrap .member_box.sicula .char_box .box {
    overflow: hidden
}

.member_intro .member_wrap .member_box.sicula .char_box .char:not(.illu) {
    right: -1%;
    top: 12%;
    width: 165%;
}

/*tokki*/
.member_intro .member_wrap .member_box.tokki .char_box {
    background-color: #00C76C;
}

.member_intro .member_wrap .member_box.tokki .char_box .box {
    overflow: hidden
}

.member_intro .member_wrap .member_box.tokki .char_box .char:not(.illu) {
    right: 2%;
    top: 20%;
    width: 70%;
}

/*baby 범*/
.member_intro .member_wrap .member_box.babybeom .char_box {
    background-color: #FFAD17;
}

.member_intro .member_wrap .member_box.babybeom .char_box .box {
    overflow: hidden
}

.member_intro .member_wrap .member_box.babybeom .char_box .char:not(.illu) {
    right: -9%;
    top: 23%;
    width: 89%;
}

/*이드레곤*/
.member_intro .member_wrap .member_box.edragon .char_box {
    background-color: #A6A6A6;
}

.member_intro .member_wrap .member_box.edragon .char_box .box {
    overflow: hidden
}

.member_intro .member_wrap .member_box.edragon .char_box .char:not(.illu) {
    right: 4%;
    top: 12%;
    width: 59%;
}

/*꽃사슴*/
.member_intro .member_wrap .member_box.dear .char_box {
    background-color: #A0D0F7;
}

.member_intro .member_wrap .member_box.dear .char_box .box {
    overflow: hidden
}

.member_intro .member_wrap .member_box.dear .char_box .char:not(.illu) {
    right: 13%;
    top: 8%;
    width: 50%;
}

/*두집사*/
.member_intro .member_wrap .member_box.butler .char_box {
    background-color: #a26ff6;
}

.member_intro .member_wrap .member_box.butler .char_box .char:not(.illu) {
    right: 0;
    bottom: 0;
    width: 100%;
}

/*플래시*/
.member_intro .member_wrap .member_box.flash .char_box {
    background-color: #E7A64F;
}

.member_intro .member_wrap .member_box.flash .char_box .char:not(.illu) {
    right: 0;
    bottom: 0;
    width: 100%;
}

/*Jun*/
.member_intro .member_wrap .member_box.jun .char_box {
    background-color: #A7CB60;
}

.member_intro .member_wrap .member_box.jun .char_box .char:not(.illu) {
    right: -13%;
    top: 9%;
    width: 80%;
}

/*라인경*/
.member_intro .member_wrap .member_box.linegyeong .char_box {
    background-color: #2FDDB2;
}

.member_intro .member_wrap .member_box.linegyeong .char_box .char:not(.illu) {
    right: -6%;
    top: 11%;
    width: 89%;
}

/*워니*/
.member_intro .member_wrap .member_box.wonny .char_box {
    background-color: #FFA49F;
}

.member_intro .member_wrap .member_box.wonny .char_box .char:not(.illu) {
    right: -8%;
    top: 10%;
    width: 81%;
}

/*귀욤 쿼카*/
.member_intro .member_wrap .member_box.quokka .char_box {
    background-color: #FF9F7C;
}

.member_intro .member_wrap .member_box.quokka .char_box .char:not(.illu) {
    right: 4%;
    top: 23%;
    width: 61%;
}

/*사이클링디버거*/
.member_intro .member_wrap .member_box.cycling .char_box {
    background-color: #A54ED1;
}

/*.member_intro .member_wrap .member_box.cycling .char_box .char:not(.illu) { left: 0; bottom: 0; width: 100%; }*/
.member_intro .member_wrap .member_box.cycling .char_box .char:not(.illu) {
    left: 28%;
    top: 8%;
    width: 75%;
}

/*유남생*/
.member_intro .member_wrap .member_box.turtle .char_box {
    background-color: #FE6A90;
}

.member_intro .member_wrap .member_box.turtle .char_box .box {
    overflow: hidden;
}

.member_intro .member_wrap .member_box.turtle .char_box .char:not(.illu) {
    right: 8%;
    top: 9%;
    width: 66%;
}

/*버그닌자*/
.member_intro .member_wrap .member_box.ninja .char_box {
    background-color: #FF6151;
}

.member_intro .member_wrap .member_box.ninja .char_box .box {
    overflow: hidden;
}

.member_intro .member_wrap .member_box.ninja .char_box .char:not(.illu) {
    right: 0;
    top: 9%;
    width: 66%;
}

/*뉴로미*/
/*.member_intro .member_wrap .member_box.newrom { display: none; }*/
.member_intro .member_wrap .member_box.newrom .char_box {
    background-color: #3ED6B9;
}

.member_intro .member_wrap .member_box.newrom .char_box .box {
    overflow: hidden;
}

.member_intro .member_wrap .member_box.newrom .char_box .char:not(.illu) {
    left: 28%;
    top: 8%;
    width: 75%;
}

/*츄파츄*/
.member_intro .member_wrap .member_box.chupachu .char_box {
    background-color: #eea0bf;
}

.member_intro .member_wrap .member_box.chupachu .char_box .box {
    overflow: hidden
}

.member_intro .member_wrap .member_box.chupachu .char_box .char:not(.illu) {
    right: 6%;
    top: 7%;
    width: 79%;
}

/*느림표*/
.member_intro .member_wrap .member_box.sloth .char_box {
    background-color: #a76c40;
}

.member_intro .member_wrap .member_box.sloth .char_box .box {
    overflow: hidden
}

.member_intro .member_wrap .member_box.sloth .char_box .char:not(.illu) {
    right: -13%;
    top: 13%;
    width: 100%;
}

/*느림표*/
.member_intro .member_wrap .member_box.future .char_box {
    background-color: #8ca4e7;
}

.member_intro .member_wrap .member_box.future .char_box .box {
    overflow: hidden
}

.member_intro .member_wrap .member_box.future .char_box .char:not(.illu) {
    right: -9%;
    top: 13%;
    width: 81%;
}

/*--- E 멤버 위치 및 배경색 지정---*/
.sub .member_txt {
    position: relative;
    padding: 0 var(--grid_pd2) 12vw;
    border-radius: 0 0 5.859375vw 5.859375vw;
    background-color: var(--bk);
    z-index: 10
}

.sub .member_txt .tit {
    font-size: var(--sub_h3);
    font-weight: 700;
    color: var(--purp);
    overflow: hidden;
}

.sub .member_txt .txt_box {
    margin-top: 1em;
    font-size: var(--sub_h4);
    font-weight: 700;
    color: #fff;
}

.sub .member_txt .txt_box .txt {
    display: block;
    overflow: hidden;
}

.sub .member_txt .txt_box .txt br.mo_only {
    display: none;
}

.sub .member_txt .txt_box .txt span {
    display: inline-block;
    transform: translateY(100%);
}

.sub .member_txt .txt_box .txt.space {
    margin-top: 1em;
}

/*우리의 비전*/
#renewal_page.sub.vision {
    background-color: var(--bk);
}

.vision_top {
    padding: 0 var(--grid_pd1);
    font-size: var(--sub_h2);
    font-weight: 700;
    color: #181617;
}

.vision_txt_cont {
    padding: 6vw var(--grid_pd4);
    color: #fff;
}

.vision_txt_cont .bg_tit {
    margin-top: 3vw;
    font-size: var(--sub_h4);
    font-weight: 700;
}

.vision_txt_cont .bg_h2 {
    margin-top: 3vw;
    font-size: var(--sub_h3);
    font-weight: 700;
}

.vision_banner {
    display: grid;
    grid-template-columns: 50% 50%;
    margin-top: 7.03125vw;
}

.vision_banner .char_cont {
    position: relative;
    background-color: #f7f7f8;
    overflow: hidden;
}

.vision_banner .char_cont .char_wrap {
    width: 100%;
    height: 100%;
}

.vision_banner .txt_wrap {
    padding: 6.640625vw 3.90625vw 7.8125vw;
    background-color: var(--purp);
    color: #fff;
}

.vision_banner .txt_wrap .txt_box {
    font-size: 1.8625vw;
    font-weight: 600;
    line-height: 1.8em;
}

.vision_banner .txt_wrap .txt_box br.mo_only {
    display: none;
}

.vision_banner .txt_wrap .txt_box .txt {
    overflow: hidden;
}

.vision_banner .txt_wrap .txt_box .txt span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s calc(var(--vision-txt-idx) * 0.1s + 0.2s), opacity 0.4s calc(var(--vision-txt-idx) * 0.1s + 0.2s);
}

.vision_banner .txt_wrap .txt_box.active .txt span {
    transform: unset;
    opacity: 1;
}

.vision_banner .txt_wrap .tit_box {
    margin-top: 0.6em;
    font-size: max(3.6vw, 29px);
    font-weight: 700;
}

.vision_content {
    position: relative;
    padding: 0 0 16vw;
    overflow: hidden;
    background-color: var(--bk);
}

.vision_content .flow_txt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: max(var(--sub_h2), 64px);
    font-weight: 900;
    color: var(--purp);
    font-family: var(--pop);
    white-space: nowrap;
}

.vision_content .flow_txt p {
    animation: textLoop 100s linear infinite;
}

.vision_content .cross_txt {
    position: relative;
    width: 100%;
    padding-top: 18%;
    margin-top: -1%;
}

.vision_content .cross_txt .box {
    position: absolute;
    bottom: -45%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5em 0;
    background-color: #000;
    color: var(--purp);
    font-size: 1.7578125vw;
    font-weight: 900;
    transform-origin: center;
}

.vision_content .cross_txt .box:nth-of-type(1) {
    left: -5%;
    transform: rotate(7deg);
}

.vision_content .cross_txt .box:nth-of-type(2) {
    right: -5%;
    transform: rotate(-7deg);
}

.vision_content .cross_txt .box p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vision_content .cross_txt .box:nth-of-type(1) p {
    animation: textLoop 200s linear infinite;
}

.vision_content .cross_txt .box:nth-of-type(2) p {
    animation: textLoopBack 200s linear infinite;
}

.vision_content .cross_txt .box p span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0.7em;
}

.vision_content .cross_txt .box p span:before {
    content: '';
    width: 0.2em;
    height: 0.2em;
    margin-right: 0.7em;
    border-radius: 100%;
    background-color: var(--purp);
}

.vision_content .vision_wrap {
    padding: 0 var(--grid_pd4);
}

.vision_content .vision_wrap .vision_box_wrap {
    margin: 6vw 1.5vw 0;
}

.vision_content .vision_wrap .vision_box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: -2%;
}

.vision_content .vision_wrap .vision_box + .vision_box {
    margin-top: 12vw;
}

.vision_content .vision_wrap .vision_box:nth-of-type(even) {
    margin-left: 0;
    margin-right: -2%;
    flex-direction: row-reverse;
}

.vision_content .vision_wrap .vision_box .ico {
    width: 20vw;
    height: 100%;
    flex-shrink: 0;
}

.vision_content .vision_wrap .vision_box .ico video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vision_content .vision_wrap .vision_box .txt_box {
    margin-left: 3vw;
    color: #fff;
}

.vision_content .vision_wrap .vision_box:nth-of-type(even) .txt_box {
    margin-right: 3vw;
    margin-left: 0;
}

.vision_content .vision_wrap .vision_box .txt_box .desc {
    font-size: max(1.3vw, 12px);
    font-weight: 600;
}

.vision_content .vision_wrap .vision_box .txt_box .tit {
    margin-top: 1vw;
    font-size: var(--sub_h3);
    font-weight: 700;
    line-height: 1.2;
}

.vision_content .vision_wrap .vision_box .txt_box .txt {
    margin-top: 1.5vw;
    font-size: max(var(--basic_txt), 14px);
    line-height: 1.6;
}

/*-----portfolio-----*/
.portfolio_top {
    position: relative;
    padding: 2vw 0 0;
    overflow: hidden;
}

.portfolio_top .tit_wrap {
    text-align: center;
}

.portfolio_top .tit_wrap .desc {
    position: relative;
    font-size: max(1.6vw, 16px);
    font-weight: 700;
    font-family: var(--pop);
    color: var(--purp);
    opacity: 0;
    transition: opacity 0.8s;
    transition-delay: 0.2s;
}

.portfolio_top .tit_wrap.active .desc {
    opacity: 1;
}

.portfolio_top .tit_wrap .tit {
    margin-top: 2.1vw;
    font-size: /*var(--sub_h3)*/max(4.5vw, 28px);
    font-weight:700;
    line-height: 1.3;
    /*font-family:TAEBAEKmilkyway*/
}

.portfolio_top .tit_wrap .tit span {
    display: inline-block;
    margin: 0 0.2;
    opacity: 0;
}

.portfolio_top .tit_wrap.active .tit span {
    opacity: 1;
}

.portfolio_top .tit_wrap .tit span:nth-of-type(1) {
    transition-delay: 0.2s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(2) {
    transition-delay: 0.3s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(3) {
    transition-delay: 0.4s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(4) {
    transition-delay: 0.5s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(5) {
    transition-delay: 0.6s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(6) {
    transition-delay: 0.7s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(7) {
    transition-delay: 0.9s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(8) {
    transition-delay: 1s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(9) {
    transition-delay: 1.2s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(10) {
    transition-delay: 1.4s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(11) {
    transition-delay: 1.6s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(12) {
    transition-delay: 1.7s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(13) {
    transition-delay: 1.8s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(14) {
    transition-delay: 1.9s
}

.portfolio_top .tit_wrap .tit span:nth-of-type(15) {
    transition-delay: 1.9s
}

.portfolio_top .tit_wrap .tit span.space {
    margin-left: 0.2em
}

.portfolio_top .txt_wrap {
    margin-top: 2.1vw;
}

.portfolio_top .txt_wrap .txt {
    font-size: max(1.2vw, 14px); /*var(--cont_desc);*/
    font-weight: 500;
    text-align: center;
    overflow: hidden;
    /* line-height: 1.5; */
    margin-bottom:.8vh
}

.portfolio_top .txt_wrap .txt span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.8s calc(var(--port-txt-idx)* 0.2s + 2s);
}

.portfolio_top .tit_wrap.active + .txt_wrap .txt span {
    transform: unset;
}

.portfolio_top .sub_btn {
    margin-top: 3.90625vw;
    opacity: 0;
    transform: translateY(1.953125vw);
    transition: opacity 0.3s;
    transition-delay: 3.3s;
}

.portfolio_top .tit_wrap.active + .txt_wrap + .sub_btn {
    opacity: 1;
    transform: unset;
}

.portfolio_top .robot {
    position: absolute;
}

.portfolio_top .robot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portfolio_top .robot1 {
    left: 1%;
    bottom: 12%;
    width: 34%;
    height: 65%;
}

.portfolio_top .robot1 video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portfolio_top .robot2 {
    right: -8%;
    bottom: -4%;
    width: 52%;
}

.portfolio_top .robot2 video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.portfolio_inquiry {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.953125vw var(--pd) 7.8125vw;
    padding: 2.9296875vw var(--grid_pd2);
    background-color: var(--bk);
    border-radius: 5.859375vw;
    overflow: hidden;
}

.portfolio_inquiry .tit_box {
    position: relative;
    color: #fff;
    z-index: 10;
}

.portfolio_inquiry .tit_box .tit {
    font-size: 1.5625vw;
    font-weight: 700;
}

.portfolio_inquiry .tit_box .en_tit {
    font-size: 2.9296875vw;
    font-weight: 700;
    font-family: var(--pop);
}

.portfolio_inquiry .tit_box .tit, .portfolio_inquiry .tit_box .en_tit {
    transition: color 0.4s;
}

.portfolio_inquiry .arr {
    position: relative;
    width: 5.859375vw;
    height: 5.859375vw;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23fff"><path d="M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-144-144c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l441.4 0L340.7 388.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l144-144z"/></svg>')center/contain no-repeat;
    z-index: 10;
}

/*AI 이미지*/
#renewal_page.ai .portfolio_top {
    padding: 5vw 0;
    background-color: var(--bk);
}

#renewal_page.ai .portfolio_cont {
    margin: 0;
    border-radius: 0;
}

#renewal_page.ai .portfolio_top .tit_wrap .tit {
    color: #fff;
    font-size: 8.75vw
}

#renewal_page.ai .portfolio_top .txt_wrap .txt {
    color: #fff;
}

#renewal_page.ai #imageListView {
    padding-bottom: 9vw
}

#renewal_page.ai .portfolio_cont .portfolio_li {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5vw;
}

#renewal_page.ai .portfolio_cont .portfolio_li .box {
    padding-top: 70%;
    cursor: pointer;
}

#renewal_page.ai .portfolio_cont .portfolio_li .box .hover_box {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(255,94,16,0.85);
    opacity: 0;
    z-index: 10;
    transition: opacity 0.5s;
}

#renewal_page.ai .portfolio_cont .portfolio_li .box .hover_box .ico {
    width: 8rem;
    height: 8rem;
    background-color: rgba(255,255,255,1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

#renewal_page.ai .portfolio_cont .portfolio_li .box .hover_box svg {
    width: 3rem;
    fill: rgb(255,94,16);
}

#renewal_page.ai .portfolio_cont .bg_tit_wrap .bg_tit {
    animation: textLoop 200s linear infinite
}

.ai_info_wrap {
    padding: 10vw var(--grid_pd2) 0;
}

.ai_info_wrap .info_box {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    font-size: max(0.78125vw, 14px);
    color: #fff;
    fill: #fff;
}

.ai_info_wrap .info_box .ico {
    margin-right: 0.5em;
    margin-top: 0.1em;
}

.ai_info_wrap .info_box .ico svg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.1em
}

.ai_info_wrap .info_box .info {
}

.ai_info_wrap .info_box .desc {
    margin-top: 0.2em;
    grid-column: 2 / 3;
    color: #FF5E10;
    font-size: 0.9em;
}

.ai_info_wrap .info_box .desc .link {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    border-bottom: 1px solid #FF5E10
}

.ai_info_wrap .info_box .desc .link svg {
    width: 0.9em;
    height: auto;
    fill: #FF5E10;
    margin-left: 5px
}

.ai_info_wrap .chk_info_box {
    margin-top: 1vw
}

.ai_info_wrap .chk_info_box li {
    display: flex;
    font-size: max(0.5525vw, 12px);
    color: #fff
}

.ai_info_wrap .chk_info_box li svg {
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.5em
}

.ai_info_wrap .chk_info_box ol + ol {
    margin-top: 1em
}

.ai_info_wrap .chk_info_box .ok li svg {
    fill: #16C60C
}

.ai_info_wrap .chk_info_box .no li svg {
    fill: #F03A17
}

/*-----Service-----*/
body.sub.bk {
    background-color: var(--bk);
}

.service_top {
    position: relative;
    width: 100%;
    padding-top: calc(min(65%, 100vh) - var(--hd_h));
    background: var(--bk);
}

.service_top .tit_box {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    font-weight: 700;
    font-family: var(--pop);
    transform: translate(-50%,-55%);
}

.service_top .tit_box .desc {
    margin-bottom: 1em;
    font-size: 2.2vw;
    color: var(--purp);
    opacity: 0;
    transition: opacity 0.5s;
    transition-delay: 0.2s;
}

.service_top .tit_box .tit {
    font-size: 8.75vw;
    color: #fff;
    line-height: 1.3;
    overflow: hidden;
}

.service_top .tit_box .tit span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.7s ease;
}

.service_top .tit_box .tit.tit1 span {
    transition-delay: 0.2s
}

.service_top .tit_box .tit.tit2 span {
    transition-delay: 0.3s
}

.service_top.active .tit_box .tit span {
    transform: unset;
}

.service_top .tit_box .tit_ico {
    position: absolute;
}

.service_top .tit_box .tit_ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service_top .tit_box .ico_star {
    left: -12%;
    top: 25%;
    width: 8%;
    opacity: 0;
    transition: opacity 1.5s, transform 1.5s;
    transition-delay: 0.3s;
}

.service_top.active .tit_box .ico_star {
    opacity: 1;
    animation: rotateStar 3s infinite;
}

.service_top .tit_box .ico_smile {
    right: -6%;
    top: 12%;
    width: 18%;
    transform-origin: center;
    opacity: 0;
    transform: scale(0.3);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transition-delay: 0.3s;
}

.service_top .tit_box.active .ico_smile {
    transform: scale(1);
    opacity: 1;
}

.service_top .tit_box .ico_smile .smile_eyes {
    position: absolute;
    width: 0.875vw;
    height: 1.40625vw;
    border-radius: 100%;
    background-color: var(--bk);
}

.service_top .tit_box .ico_smile .smile_eyes.smile_eyes1 {
    left: 16%;
    top: 34%;
    transform: rotate(-25deg);
}

.service_top .tit_box .ico_smile .smile_eyes.smile_eyes2 {
    left: 33%;
    top: 26%;
    transform: rotate(-28deg);
}

.service_top .tit_box .ico_auto {
    left: 21%;
    bottom: 0;
    width: 27%;
    opacity: 0;
    transition: opacity 0.2s;
    transition-delay: 0.4s;
}

.service_top.active .tit_box .ico_auto {
    opacity: 1;
}

.service_top .tit_box .ico_arr {
    left: 46%;
    bottom: -5%;
    width: 5.5%;
    opacity: 0;
    transition: opacity 0.2s;
    transition-delay: 0.4s;
}

.service_top.active .tit_box .ico_arr {
    opacity: 1;
}

.service_top .tit_box .ico_ai {
    left: 61%;
    top: 52%;
    width: 7%;
    opacity: 0;
    transform: scale(0.3) translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    transition-delay: 0.8s;
}

.service_top.active .tit_box .ico_ai {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.service_top .tit_box .ico_screen {
    left: -8%;
    top: 28%;
    width: 16%;
    opacity: 0;
    transition: opacity 0.2s;
    transition-delay: 0.5s;
}

.service_top.active .tit_box .ico_screen {
    opacity: 1;
    animation: rotateRight 3s infinite;
}

.service_top .tit_box .ico_cart {
    right: -8%;
    bottom: -15%;
    width: 16%;
    transform: scale(0.4);
    opacity: 0;
    transform-origin: right bottom;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    transition-delay: 0.4s;
}

.service_top.active .tit_box .ico_cart {
    transform: scale(1);
    opacity: 1;
}

.service_top .tit_box.active .desc {
    opacity: 1;
}

@keyframes rotateStar {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes rotateRight {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes arrMove {
    0% {
        transform: translate(-10%, -10%);
    }

    50% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-10%, -10%);
    }
}

@keyframes autoMove {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.creat_service {
    position: relative;
    padding: 13.671875vw var(--grid_pd3);
    background: var(--purp);
}

.creat_service .txt_box {
}

.creat_service .txt_box .sub_tit {
    color: #fff;
    font-size: var(--cont_desc);
    font-weight: 700;
}

.creat_service .txt_box .tit {
    color: #fff;
    font-size: var(--cont_tit);
    font-weight: 600;
    font-family: var(--pop);
}

@keyframes spin {
    to {
        rotate: -360deg;
    }
}

.creat_service .scene_wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.creat_service .scene_wrap .scene_float {
    position: absolute;
    top: 0;
    left: 50%;
    width: 35%;
    height: 100vh;
    transform: translateX(-50%);
}

.creat_service .scene_wrap .scene_float .scene_ico {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 80%;
    transform: translate(-50%, -50%);
}

.creat_service .do_list {
    width: 100%;
    flex-shrink: 0;
    padding: 20vh 0 0;
}

.creat_service .do_list ul li {
    display: flex;
    flex-direction: column;
    padding-bottom: 10vw;
    justify-content: center;
    width: 30%;
    min-height: 50vh;
    opacity: 0.2;
    z-index: 1;
    color: #fff;
}

.creat_service .do_list ul li:last-of-type {
    padding-bottom: 0;
}

/*.creat_service .do_list ul li + li { margin-top: 10vw; }*/
/* .creat_service .do_list ul li + li { padding-top: 10vw; } */
.creat_service .do_list ul li:nth-of-type(odd) {
    margin-left: auto;
}

.creat_service .do_list ul li:nth-of-type(even) {
    margin-right: auto;
}

.creat_service .do_list ul li .desc {
    font-size: max(var(--basic_txt), 11px);
    font-weight: 500;
}

.creat_service .do_list ul li .tit {
    margin-top: 0.390625vw;
    font-size: max(2.8vw, 30px);
    font-family: var(--pop);
    font-weight: 600;
    line-height: 1.2em;
}

.creat_service .do_list ul li .txt {
    margin-top: 1.5em;
    font-size: max(1vw, 12px);
    font-weight: 500;
    line-height: 1.6em;
    word-break: keep-all;
}

.creat_service .do_list ul li .tag_wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.78125vw 0;
    margin-top: 2.5vw;
    padding-top: 2.5vw;
    border-top: 1px solid #fff;
}

.creat_service .do_list ul li .tag_wrap .tag {
    font-size: max(var(--basic_txt), 12px);
    font-weight: 600;
}

#renewal_page.sub.service .service_tag_wrap {
    padding: 10vw 0;
    background: linear-gradient(0deg, rgba(52,49,81,1) 0%, rgba(21,21,21,1) 100%);
}

.service_tag_wrap .tit_wrap .desc {
    font-size: max(var(--cont_desc), 14px);
}

.service_tag_wrap .tit_wrap .tit {
    font-size: max(var(--cont_tit), 30px);
}

.machine_btm {
    position: relative;
    width: 100%;
    padding-top: 55%;
    background: linear-gradient(0deg, rgba(254,139,90,1) 0%, rgba(52,49,81,1) 100%);
    z-index: 25;
    overflow: hidden;
}

.machine_btm .sub_btn {
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    z-index: 20;
}

.machine_btm .star {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 28%;
}

.machine_btm .star img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.machine_btm .machine {
    position: absolute;
    left: 50%;
    bottom: -1.1%;
    width: 110%;
    padding: 0 var(--grid_pd2);
    transform: translateX(-50%);
    z-index: 5;
}

.machine_btm .machine img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.machine_btm .ground {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
}

.machine_btm .ground img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*-----기업문화-----*/
.culture_container {
    position: relative;
    margin-top: -8px;
    padding: 15vw 0 0;
    background-color: var(--bk);
    z-index: 10;
}

.culture_container .culture_cont {
    padding: 0 var(--grid_pd4) 5vw;
    margin-top: 15vw;
    color: #fff;
}

.culture_container .culture_cont .tit_box {
    font-weight: 600;
}

.culture_container .culture_cont .tit_box .tit {
    font-size: var(--sub_h3);
}

.culture_container .culture_cont .tit_box .txt {
    margin-top: 1em;
    font-size: max(1.5vw, 30px);
}

.culture_container .culture_cont .culture_box {
    margin-top: 5vw;
}

.culture_container .culture_cont .culture_box .box {
    width: 45%;
    opacity: 0;
    transform: translateY(30%);
    transition: opacity 1.5s, transform 1.5s;
}

.culture_container .culture_cont .culture_box .box.active {
    opacity: 1;
    transform: unset;
}

.culture_container .culture_cont .culture_box .box + .box {
    margin-top: -20%;
}

.culture_container .culture_cont .culture_box .box:nth-of-type(odd) {
    margin-left: auto;
}

.culture_container .culture_cont .culture_box .box:nth-of-type(even) {
    margin-right: auto;
}

.culture_container .culture_cont .culture_box .box .img {
    position: relative;
    width: 80%;
    padding-top: 80%;
    border-radius: 100%;
    overflow: hidden;
    transition: border-radius 1.2s
}

.culture_container .culture_cont .culture_box .box.active .img {
    border-radius: 3vw;
}

.culture_container .culture_cont .culture_box .box .img video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.culture_container .culture_cont .culture_box .box .tit_box {
    margin-top: 1em;
    font-size: max(2.5vw, 30px);
}

.culture_container .culture_cont .culture_box .box .tit_box .tit {
    font-size: 1em;
    font-weight: 700;
    color: var(--purp);
}

.culture_container .culture_cont .culture_box .box .tit_box .txt_box {
}

.culture_container .culture_cont .culture_box .box .tit_box .txt_box .txt {
    font-size: max(var(--basic_txt), 13px);
    font-weight: 600;
}

.culture_container .culture_cont .culture_box .box .tit_box .txt_box .tag_box {
}

.culture_container .culture_cont .culture_box .box .tit_box .txt_box .tag_box .tag {
    font-size: max(0.35em, 12px);
}

.culture_container .culture_cont .culture_box .box .tit_box .txt_box .tag_box .tag + .tag {
    margin-left: 1em;
}

.culture_container .culture_cont + .about_txt_sect {
    padding-top: 15vw;
}

.culture_container .culture_img {
    width: 100%;
    padding: 5vw 0 5vw;
    overflow: hidden;
    background-color: var(--bk);
}

.culture_container .culture_img .img {
    width: 100%;
    padding: 0 var(--grid_pd3);
}

.culture_container .culture_img .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.culture_container .about_txt_sect {
    padding: 0 var(--grid_pd4) 15vw;
    background-color: var(--bk);
}

.culture_container .about_txt_sect .tit {
    font-size: var(--sub_h3);
}

/*-----프로젝트 문의-----*/
.inquiry_sect {
    padding: 15.625vw var(--grid_pd3);
}

.inquiry_sect .top {
    padding-bottom: 1.953125vw;
    margin-bottom: 5.859375vw;
    border-bottom: 2px solid var(--bk)
}

.inquiry_sect .top .tit {
    font-size: max(var(--cont_tit), 24px);
    font-weight: 700;
}

.inquiry_sect .top .txt {
    font-size: max(var(--cont_desc), 14px);
    font-weight: 700;
}

.inquiry_sect .cate_radio {
}

.inquiry_sect .cate_radio .chk_box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.inquiry_sect .cate_radio .chk_box .box + .box {
    margin-left: 3vw;
}

.inquiry_sect .form_cont {
}

.inquiry_sect .form_cont .form_box + .form_box {
    margin-top: 3.90625vw;
    padding-top: 3.90625vw;
    border-top: 1px solid var(--bk);
}

.inquiry_sect .form_cont .form_box > .tit {
    font-size: max(1.953125vw, 20px);
    font-weight: 600;
    margin-bottom: 3.90625vw;
}

.inquiry_sect .form_cont .form_box > .tit.required {
    position: relative;
}

.inquiry_sect .form_cont .form_box > .tit.required:after {
    content: '*';
    margin-left: 0.2em;
    color: var(--purp);
}

.inquiry_sect .form_cont .form_box > .info_wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    margin-bottom: 3.90625vw;
    margin-top: -3.20625vw;
    font-size: max(var(--basic_txt), 14px);
    font-weight: 500;
}

.inquiry_sect .form_cont .form_box > .info_wrap .info {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7em 0 0.7em 1.2em;
    border-radius: 2em 0 0 2em;
    background-color: rgba(255, 79, 52, 0.08);
}

.inquiry_sect .form_cont .form_box > .info_wrap .info .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5em;
    fill: #ff4f34;
}

.inquiry_sect .form_cont .form_box > .info_wrap .btn_wrap {
    padding: 0.7em 1.2em 0.7em 2em;
    border-radius: 0 2em 2em 0;
    background-color: rgba(255, 79, 52, 0.08);
}

.inquiry_sect .form_cont .form_box > .info_wrap .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1.5px solid #000;
}

.inquiry_sect .form_cont .form_box > .info_wrap .btn .btn_txt {
    font-size: 0.9em;
}

.inquiry_sect .form_cont .form_box > .info_wrap .btn .btn_ico {
    display: flex;
    align-items: center;
    margin-left: 0.5em;
    font-size: 0.9em;
    transition: transform 0.3s;
}

.inquiry_sect .form_cont .inp_cont {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: flex-end;
    gap: 3.125vw 5.46875vw;
    font-size: max(var(--basic_txt), 13px);
}

.inquiry_sect .form_cont .inp_cont .inp_wrap {
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .tit {
    margin-bottom: 0.78125vw;
    font-size: max(var(--basic_txt), 14px);
    font-weight: 600;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .tit.required {
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .tit.required span {
    position: relative;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .tit.required span:after {
    content: '*';
    margin-left: 0.2em;
    color: var(--purp);
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box {
    height: var(--inp_h);
    border: 2px solid var(--bk);
    border-radius: 0.390625vw;
    overflow: hidden;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box input {
    width: 100%;
    height: 100%;
    padding: 0 1em;
    background-color: transparent;
    border: none;
    font-size: max(var(--basic_txt), 13px);
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box input:disabled {
    background-color: #F2F3F5;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.area {
    grid-column: 1 / 3;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.area .inp_box {
    min-height: 9.765625vw;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.area .inp_box.long {
    min-height: 15.625vw;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.area .inp_box textarea {
    height: 100%;
    padding: 1em;
    outline: none;
    border: unset;
    resize: none;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box.file {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 0;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box .filebox {
    width: 100%;
    height: 100%;
    border: 2px solid var(--bk);
    border-radius: 0.390625vw;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box .filebox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1em;
    overflow: hidden;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box .filebox input {
    display: none;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box .filebox #ex_fileView {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    color: #a0a0a0;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box .filebox #ex_fileView.active {
    color: var(--bk);
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box.file .file_btn {
    width: 20%;
    height: 100%;
    margin-left: 0.3vw;
    border: 2px solid var(--purp);
    border-radius: 0.390625vw;
    flex-shrink: 0;
    background-color: var(--purp);
    color: #fff;
    font-weight: 700;
    transition: all 0.3s;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box #ex_fileBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: calc(var(--inp_h) - 0.2vw);
    font-size: 0.9em;
    text-align: center;
    cursor: pointer;
}

/*셀렉트 박스*/
.inquiry_sect .form_cont .inp_cont .inp_wrap.sel .select_box .box {
    position: relative;
    cursor: pointer;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.sel .select_box .box .select {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: var(--inp_h);
    padding: 0 1em;
    box-sizing: border-box;
    border: 2px solid var(--bk);
    border-radius: 0.390625vw;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.sel .select_box .box .select i {
    position: absolute;
    right: 0.78125vw;
    top: 50%;
    display: block;
    color: var(--bk);
    font-size: max(var(--basic_txt), 15px);
    transform: translateY(-50%);
    transform-origin: center center;
    transition: transform .3s;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.sel .select_box.on .box .select i {
    transform: translateY(-50%) rotate(180deg);
    transition: transform .3s;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.sel .list {
    display: none;
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    border: 2px solid var(--bk);
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.390625vw;
    transform: translateY(100%);
    overflow-y: auto;
    overflow: hidden;
    z-index: 10;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.sel .list::-webkit-scrollbar {
    width: 0.390625vw;
    height: 0;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.sel .list::-webkit-scrollbar-button:start:decrement, .inquiry_sect .form_cont .inp_cont .inp_wrap.sel .list::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 0;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.sel .list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .05);
    -webkit-border-radius: 0.390625vw;
    border-radius: 0.930625vw;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.sel .list::-webkit-scrollbar-thumb {
    height: 1.953125vw;
    width: 1.953125vw;
    background: rgba(0, 0, 0, .2);
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.inquiry_sect .form_cont .inp_cont .inp_wrap.sel .list > li {
    box-sizing: border-box;
    padding: 0.78125vw 1em;
    width: 100%;
    cursor: pointer;
}

.inquiry_sect .form_cont .chk_cont {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.953125vw 3.90625vw;
}

.chk_box {
    font-size: max(1.15vw, 17px);
    font-weight: 500;
}

.chk_box label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.chk_box .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5em;
    font-size: 1em;
}

.chk_box .ico .y {
    display: none;
}

.chk_box input:checked + label .y {
    display: block;
}

.chk_box input:checked + label .n {
    display: none;
}

.inquiry_sect .priv_agree {
    margin-top: 3.90625vw;
    padding-top: 3.90625vw;
    border-top: 1px solid var(--bk);
}

/*상시 채용*/
#renewal_page.career .about_txt_sect {
    position: relative;
}

#renewal_page.career .about_txt_sect .char_img {
    position: absolute;
    right: 5vw;
    bottom: 0;
    width: 40vw;
    height: auto;
}

#renewal_page.career .about_txt_sect .char_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*1:1 문의*/
#renewal_page.inquiry .about_txt_sect {
    position: relative;
}

#renewal_page.inquiry .about_txt_sect .char_img {
    position: absolute;
    right: 5vw;
    bottom: 0;
    width: 50vw;
    height: auto;
}

#renewal_page.inquiry .about_txt_sect .char_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*-----게시판 스타일-----*/
/*새소식*/
.renewal_board_wrap {
    padding: 0 var(--grid_pd3) 12vw;
}

.renewal_board_wrap .board_top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.renewal_board_wrap .board_top .cate_sel {
    width: 13%;
}

.renewal_board_wrap .board_top .cate_sel .nice-select {
    height: max(2.7vw, 30px);
    line-height: max(2.7vw, 30px);
    padding: 0 1.5em;
    border-radius: 2em;
    background-color: var(--bk);
    color: #fff;
    font-size: max(var(--basic_txt), 13px);
    font-weight: 700;
}

.renewal_board_wrap .board_top .cate_sel .nice-select:after {
    margin-top: 0;
    border: 0;
    transform: translateY(-50%) rotate(0deg);
    transform-origin: center;
}

.renewal_board_wrap .board_top .cate_sel .nice-select:after {
    content: '';
    right: 1.5em;
    width: 1em;
    height: 1em;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23fff"><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>')center/contain no-repeat;
}

.renewal_board_wrap .board_top .cate_sel .nice-select.open:after {
    transform: translateY(-50%) rotate(180deg);
}

.renewal_board_wrap .board_top .cate_sel .nice-select .list {
    background-color: var(--bk);
    font-size: max(0.859375vw, 11px);
    border-radius: 0.78125vw;
    box-shadow: unset;
}

.renewal_board_wrap .board_top .cate_sel .nice-select .option {
    min-height: max(2.734375vw, 25px);
    line-height: max(2.734375vw, 25px);
    padding: 0 1.4em;
}

.renewal_board_wrap .board_top .cate_sel .nice-select .option.focus, .renewal_board_wrap .board_top .cate_sel .nice-select .option.selected.focus {
    background-color: var(--bk);
}

.renewal_board_wrap .board_top + .board_list {
    margin-top: 1.5625vw;
}

.renewal_board_wrap .board_list {
    margin-top: 3.90625vw;
}

.renewal_board_wrap .board_list .list {
    display: block;
    padding: 2.1vw 2.5vw;
    border-top: 1px solid var(--bk);
    transition: background-color 0.5s;
}

.renewal_board_wrap .board_list .list:last-of-type {
    border-bottom: 1px solid var(--bk);
}

.renewal_board_wrap .board_list .list .cate {
    font-size: max(var(--basic_txt), 14px);
    font-weight: 700;
}

.renewal_board_wrap .board_list .list .tit_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.renewal_board_wrap .board_list .list .tit_wrap .logo_box {
    display: flex;
    align-items: flex-start;
    margin-left: 2vw;
    font-size: 2.4vw;
    flex-shrink: 0;
}

.renewal_board_wrap .board_list .list .tit_wrap .logo_box .logo {
    position: relative;
}

.renewal_board_wrap .board_list .list .tit_wrap .logo_box .logo.gdweb {
    width: 1em;
    padding-top: 1.3em;
}

.renewal_board_wrap .board_list .list .tit_wrap .logo_box .logo.and {
    width: 1em;
    padding-top: 0.8em;
    overflow: hidden;
}

.renewal_board_wrap .board_list .list .tit_wrap .logo_box .logo.web {
    width: 1em;
    padding-top: 1em;
    overflow: hidden;
}

.renewal_board_wrap .board_list .list .tit_wrap .logo_box .logo img {
    position: absolute;
    left: 0;
    top: 0;
    /*width: 100%;*/
    height: 100%;
    object-fit: contain;
}

.renewal_board_wrap .board_list .list .tit_wrap .tit_box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    font-size: max(2.3vw, 20px);
}

.renewal_board_wrap .board_list .list .tit_wrap .tit_box .tit {
    display: -webkit-box;
    max-width: 100%;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
}

.renewal_board_wrap .board_list .list .tit_wrap .tit_box .arr {
    width: 1em;
    height: 1em;
    margin-left: 1em;
    flex-shrink: 0;
}

.renewal_board_wrap .board_list .list .tit_wrap .tit_box .arr .ico {
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23151515"><path d="M429.8 273l17-17-17-17L276.2 85.4l-17-17-33.9 33.9 17 17L354.9 232 24 232 0 232l0 48 24 0 330.9 0L242.2 392.6l-17 17 33.9 33.9 17-17L429.8 273z"/></svg>')center/contain no-repeat;
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.5s, opacity 0.5s;
}

.renewal_board_wrap .board_list .list .tit_wrap .date {
    margin-left: 4em;
    font-size: max(var(--basic_txt), 14px);
    font-weight: 700;
    flex-shrink: 0;
}

/*게시글 없을때*/
.renewal_board_wrap .board_list .empty_board {
    fill: #959595;
    color: #959595;
}

.renewal_board_wrap .board_list .empty_board .img {
    width: 12%;
    min-width: 200px;
    margin: 0 auto;
}

.renewal_board_wrap .board_list .empty_board .txt {
    margin-top: 1em;
    font-size: max(var(--basic_txt), 13px);
    font-weight: 600;
    text-align: center;
}

/*페이징*/
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5.859375vw;
    font-size: 1.953125vw;
    font-weight: 700;
}

.pagination > a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    fill: var(--bk);
}

/*.pagination > a svg { width: 100%; height: 100%; }*/
.pagination > a + a {
    margin-left: 1em;
}

.pagination .num_list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1.5em;
}

.pagination .num_list li {
    margin: 0 0.7em;
}

.pagination .num_list li a {
    position: relative;
    display: inline-block;
    width: 1.09375vw;
    text-align: center;
    transition: color 0.2s;
}

.pagination .num_list li.on a {
    color: var(--purp);
}

#renewal_page.ai {
    padding-bottom: 12vw
}

#renewal_page.ai .pagination {
    margin-top: 0
}

#renewal_page.ai .pagination > a {
    fill: #fff
}

#renewal_page.ai .pagination .num_list li a {
    color: #fff
}

#renewal_page.ai .pagination .num_list li.on a {
    color: var(--purp);
}

/*새소식 상세*/
.notice_view {
    padding: 0 var(--grid_pd4);
}

.notice_view .view_top {
    padding: 0 2.1vw 2vw;
    border-bottom: 2px solid var(--bk);
}

.notice_view .view_top .cate {
    font-size: max(var(--basic_txt), 14px);
    font-weight: 700;
}

.notice_view .view_top .tit_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notice_view .view_top .tit_wrap .tit_box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    font-size: max(2.3vw, 20px);
}

.notice_view .view_top .tit_wrap .tit_box .tit {
    max-width: 100%;
    font-weight: 700;
    word-break: break-all;
}

.notice_view .view_top .tit_wrap .date {
    margin-left: 4.6875vw;
    font-size: max(var(--basic_txt), 14px);
    font-weight: 700;
    flex-shrink: 0;
}

.notice_view .view_cont {
    min-height: 25vw;
    padding: 3vw 2.1vw;
    border-bottom: 1px solid var(--bk);
    font-size: max(var(--basic_txt), 14px);
}

.notice_view .view_btn_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5vw;
}

.notice_view .view_btn_wrap .box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 40%;
}

.notice_view .view_btn_wrap .box + .box {
    margin-left: 1vw;
}

.notice_view .view_btn_wrap .box .ico {
    position: relative;
    width: max(2vw, 30px);
    height: max(2vw, 30px);
    border: 1px solid #3C3C3C;
    border-radius: 100%;
    transition: background 0.5s, transform 0.5s;
    overflow: hidden;
    flex-shrink: 0;
}

.notice_view .view_btn_wrap .box .ico:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #3C3C3C;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: -1;
}

.notice_view .view_btn_wrap .box.next {
    flex-direction: row-reverse;
}

.notice_view .view_btn_wrap .box.prev .ico {
    margin-right: 1vw;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%233C3C3C" viewBox="0 0 448 512"><path d="M4.7 244.7c-6.2 6.2-6.2 16.4 0 22.6l176 176c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L54.6 272 432 272c8.8 0 16-7.2 16-16s-7.2-16-16-16L54.6 240 203.3 91.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0l-176 176z"/></svg>')center/30% 30% no-repeat;
}

.notice_view .view_btn_wrap .box.next .ico {
    margin-left: 1vw;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%233C3C3C" viewBox="0 0 448 512"><path d="M443.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-176-176c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L393.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l377.4 0L244.7 420.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l176-176z"/></svg>')center/30% 30% no-repeat;
}

.notice_view .view_btn_wrap .box.next .desc {
    text-align: right;
}

.notice_view .view_btn_wrap .box .tit_box {
    display: flex;
    flex-direction: column;
}

.notice_view .view_btn_wrap .box.prev .tit_box {
    align-items: flex-start;
}

.notice_view .view_btn_wrap .box.next .tit_box {
    align-items: flex-end;
}

.notice_view .view_btn_wrap .box .tit_box .desc {
    font-size: max(2vw, 30px);
    font-family: var(--pop);
    font-weight: 600;
    line-height: 1;
}

.notice_view .view_btn_wrap .box .tit_box .tit {
    display: -webkit-box;
    margin-top: 0.5vw;
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: max(var(--basic_txt), 13px);
}

.notice_view .view_btn_wrap .box.none {
    pointer-events: none;
}

.notice_view .view_btn_wrap .box.none .ico {
    border-color: #B1B1B1;
}

.notice_view .view_btn_wrap .box.prev.none .ico {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23151515" viewBox="0 0 448 512"><path d="M4.7 244.7c-6.2 6.2-6.2 16.4 0 22.6l176 176c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L54.6 272 432 272c8.8 0 16-7.2 16-16s-7.2-16-16-16L54.6 240 203.3 91.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0l-176 176z"/></svg>')center/30% 30% no-repeat;
}

.notice_view .view_btn_wrap .box.next.none .ico {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23151515" viewBox="0 0 448 512"><path d="M443.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-176-176c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L393.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l377.4 0L244.7 420.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l176-176z"/></svg>')center/30% 30% no-repeat;
}

.notice_view .view_btn_wrap .box.none .tit_box .tit {
    color: #B1B1B1;
}

/*-----소이정 새소식 sns-----*/
.renewal_sns_wrap {
    padding: 11.71875vw var(--grid_pd4);
    background-color: var(--bk);
}

.renewal_sns_wrap .cont {
    margin-top: 8vw;
}

.renewal_sns_wrap .sns_wrap {
}

.renewal_sns_wrap .sns_wrap + .sns_wrap {
    margin-top: 7.8125vw;
}

.renewal_sns_wrap .sns_wrap .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.renewal_sns_wrap .sns_wrap .top .tit {
    font-size: max(1.5vw, 16px);
    font-weight: 700;
}

.renewal_sns_wrap .sns_wrap .top .ico_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8vw;
    height: 2.8vw;
    border: 1px solid #fff;
    border-radius: 100%;
    transition: background-color 0.3s;
}

.renewal_sns_wrap .sns_wrap .top .ico_box .ico {
    display: block;
    width: 35%;
    height: 35%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23fff"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>')center/contain no-repeat;
    transition: background 0.3s;
}

.renewal_sns_wrap .sns_wrap .sns_box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.859375vw;
    margin-top: 1.5625vw;
}

.renewal_sns_wrap .sns_wrap .sns_box li {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}

.renewal_sns_wrap .sns_wrap .sns_box li .img_hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
}

.renewal_sns_wrap .sns_wrap .sns_box li .img_hover > a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.renewal_sns_wrap .sns_wrap .sns_box li .img_hover video, .renewal_sns_wrap .sns_wrap .sns_box li .img_hover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*-----FAQ-----*/
.faq_container {
    padding: 0 var(--grid_pd2);
}

.faq_wrap {
    margin-top: 3.90625vw;
    border-top: 1px solid var(--bk);
}

.faq_wrap .faq_box {
    display: none;
    padding: 0 2.5vw;
    border-bottom: 1px solid var(--bk);
    cursor: pointer;
}

.faq_wrap .faq_box.active {
    display: block;
}

.faq_wrap .faq_box .box {
    display: flex;
    align-items: unset;
    justify-content: space-between;
    padding: 2.1vw 0;
}

.faq_wrap .faq_box .box .tit_wrap {
    flex-shrink: 0;
}

.faq_wrap .faq_box .box .cate {
    display: grid;
    grid-template-columns: max(3.125vw, 30px) minmax(0, 1fr);
    font-size: max(var(--basic_txt), 13px);
    font-weight: 700;
}

.faq_wrap .faq_box .box .cate .txt {
    grid-column: 2 / 3;
}

.faq_wrap .faq_box .box .tit_box {
    display: grid;
    grid-template-columns: max(3.125vw, 30px) minmax(0, 1fr) max(3.125vw, 30px);
    margin-top: 0.1375vw;
    font-size: max(2.3vw, 22px);
    font-weight: 700;
}

.faq_wrap .faq_box .box .tit_box .ico {
    font-family: var(--pop);
}

.faq_wrap .faq_box .box .tit_box .tit {
}

.faq_wrap .faq_box .box .arr {
    display: inline-block;
    width: max(2.3vw, 22px);
    height: calc(max(2.3vw, 22px)* 1.6);
    margin-top: calc(max(var(--basic_txt), 13px)* 1.6);
    transform: rotate(90deg);
    transition: transform 0.3s, background 0.3s;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="%23151515"><path d="M328 96l24 0 0 24 0 240 0 24-48 0 0-24 0-182.1L81 401l-17 17L30.1 384l17-17 223-223L88 144l-24 0 0-48 24 0 240 0z"/></svg>')center/contain no-repeat;
}

.faq_wrap .faq_box .box.open .arr {
    transform: rotate(0);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="%23ff6714"><path d="M328 96l24 0 0 24 0 240 0 24-48 0 0-24 0-182.1L81 401l-17 17L30.1 384l17-17 223-223L88 144l-24 0 0-48 24 0 240 0z"/></svg>')center/contain no-repeat;
}

.faq_wrap .faq_box .answer {
    display: none;
    padding: 1.5625vw 0 3.125vw;
}

.faq_wrap .faq_box .answer .a_box {
    display: grid;
    grid-template-columns: 3.125vw minmax(0, 1fr);
}

.faq_wrap .faq_box .answer .a_box .ico {
    font-size: max(2.3vw, 22px);
    font-weight: 700;
    font-family: var(--pop);
    line-height: calc(max(var(--basic_txt), 14px)*1.9);
}

.faq_wrap .faq_box .answer .a_box .txt {
    margin-top: 0;
    font-size: max(var(--basic_txt), 14px);
    font-weight: 700;
    line-height: 1.9;
}

.faq_wrap .faq_box .answer .a_box .txt p + .li, .faq_wrap .faq_box .answer .a_box .txt .li + .li, .faq_wrap .faq_box .answer .a_box .txt .li + p {
    margin-top: 2em;
}

.faq_wrap .faq_box .answer .a_box .txt .li > p {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.faq_wrap .faq_box .answer .a_box .txt .li > p:before {
    content: '-';
    margin-right: 0.2em;
    height: 1.5em;
}

/*뉴스레터*/
.story_li_wrap {
    padding: 3vw var(--grid_pd4) 11.71875vw;
}

.story_li_wrap .story_top {
    padding-bottom: 0.5vw;
    margin-top: 5.859375vw;
    border-bottom: 2px solid var(--bk);
}

.story_li_wrap .story_top .total {
    font-size: max(var(--basic_txt), 13px);
}

.story_li_wrap .story_top .total b {
    font-weight: 600;
}

.story_li_wrap .story_li {
}

.story_li_wrap .story_li li {
    border-bottom: 1px solid var(--bk);
}

.story_li_wrap .story_li li .box {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: minmax(0, 1fr) 15vw;
    gap: 0 4vw;
    padding: 2vw 1vw;
    transition: background-color 0.3s;
}

.story_li_wrap .story_li li .box .txt_box {
    width: 100%;
}

.story_li_wrap .story_li li .box .txt_box .sub_txt {
    font-size: max(var(--basic_txt), 12px);
    font-weight: 600;
}

.story_li_wrap .story_li li .box .txt_box .sub_txt .badge {
    padding: 0.3em 0.8em;
    margin-right: 1em;
    background-color: var(--purp);
    color: #fff;
    border-radius: 2em;
}

.story_li_wrap .story_li li .box .txt_box .sub_txt .txt {
}

.story_li_wrap .story_li li .box .txt_box .main_txt {
    margin-top: 1vw;
}

.story_li_wrap .story_li li .box .txt_box .main_txt .tit {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: calc(2em* 1.6);
    font-size: max(1.71875vw, 18px);
    font-weight: 700;
}

.story_li_wrap .story_li li .box .txt_box .main_txt .tit + .info {
    margin-top: 0.5vw;
}

.story_li_wrap .story_li li .box .txt_box .main_txt .info {
    display: -webkit-box;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: max(var(--basic_txt), 13px);
}

.story_li_wrap .story_li li .box .img_box {
    position: relative;
    width: 100%;
    padding-top: 100%;
    flex-shrink: 0;
    background-color: #f6f6f6;
}

.story_li_wrap .story_li li .box .img_box .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-size: cover;
    background-repeat: no-repeat;
}

.story_li_wrap .story_li li .box .img_box .ico {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(255,94,16,0.7);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

.story_li_wrap .story_li li .box .img_box .ico .arr {
    width: 15%;
    height: 15%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23fff"><path d="M440.6 273.4c4.7-4.5 7.4-10.8 7.4-17.4s-2.7-12.8-7.4-17.4l-176-168c-9.6-9.2-24.8-8.8-33.9 .8s-8.8 24.8 .8 33.9L364.1 232 24 232c-13.3 0-24 10.7-24 24s10.7 24 24 24l340.1 0L231.4 406.6c-9.6 9.2-9.9 24.3-.8 33.9s24.3 9.9 33.9 .8l176-168z"/></svg>')center/contain no-repeat;
}

.pub_code_list .story_li li .box {
    grid-template-columns: minmax(0, 1fr) 8vw;
}

.pub_code_list .story_li li .box .txt_box .main_txt {
    margin-top: 0;
}

.pub_code_list .story_li li .box .txt_box .main_txt .tit {
    font-size: max(1.21875vw, 16px);
}

.pub_code_list .story_li li .box .img_box .img {
    filter: brightness(0.96);
}

/*뷰페이지*/
#renewal_page.news_view {
    font-family: 'Pretendard', sans-serif !important;
}

#renewal_page.news_view .story_view_back {
    padding: 10vw var(--grid_pd4) 2vw;
}

#renewal_page.news_view .story_view_back .ico {
    font-size: 3vw;
    transition: fill 0.3s;
}

#renewal_page.news_view .story_view_back .ico svg {
}

#renewal_page.news_view .story_view_back .ico:hover {
    fill: var(--purp);
}

.story_view_tit {
    text-align: center;
    padding: 3.125vw 0 6.25vw;
}

.story_view_tit .tit {
    font-size: 5vw;
    color: var(--purp);
    font-weight: 800;
}

.story_view_tit.bk .tit {
    color: var(--bk);
}

.list_view_container .tit_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
    font-size: max(var(--basic_txt), 14px);
    font-weight: 600;
}

.list_view_container .tit_box .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.6em;
    padding: 0.2em 1em;
    background-color: var(--purp);
    border-radius: 2em;
    color: #fff;
}

.list_view_container .list_tit {
    font-size: max(1.71875vw, 24px);
    font-weight: 700;
}

.list_view_share {
    margin: max(1.875vw, 30px) 0 max(3.125vw, 50px);
}

.list_view_share .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.list_view_share a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: max(2.1875vw, 40px);
    height: max(2.1875vw, 40px);
    background-color: #eee;
    border-radius: 100%;
    fill: var(--bk);
    transition: background-color 0.3s, fill 0.3s;
    flex-shrink: 0
}

.list_view_share a + a {
    margin-left: 0.9375vw;
}

.list_view_share a svg {
    height: 40%;
}

.list_view_share a.share svg {
    height: 35%;
}

.p_list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3.125vw
}

/*.p_list a { display: flex; align-items: center; justify-content: center; padding: 0.5em 2em; border-radius: 2em; border: 1px solid var(--purp); background-color: var(--purp); color: #fff; fill: #fff; font-size: var(--basic_txt); font-weight: 600; transition: color 0.3s, fill 0.3s, background-color 0.3s; }*/
/*.p_list a .ico { display: flex; align-items: center; justify-content: center; margin-right: 1em; }*/
/*.p_list a:hover { background-color: #fff; color: var(--purp); fill: var(--purp); }*/
/*-----보유 솔루션-----*/
.sol_tit_wrap {
    position: relative;
    height: calc(100vh - var(--hd_h));
}

.sol_tit_wrap .txt_box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    z-index: 10;
}

.sol_tit_wrap .txt_box .desc {
    font-size: max(2.2vw, 24px);
    font-weight: 700;
    color: var(--purp);
    font-family: var(--pop);
}

.sol_tit_wrap .txt_box .desc p {
    overflow: hidden;
}

.sol_tit_wrap .txt_box .desc span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.7s 0.5s ease;
}

.sol_tit_wrap .txt_box .tit {
    overflow: hidden;
    margin-top: 4.5vw;
    font-size: max(5.8vw, 60px);
    font-weight: 700;
    line-height: 1.3;
}

.sol_tit_wrap .txt_box .tit span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.7s 0.6s ease;
}

.sol_tit_wrap .txt_box .txt {
    margin-top: 2.5vw;
    font-size: max(1.5vw, 18px);
    font-weight: 600;
}

.sol_tit_wrap .txt_box .txt p {
    overflow: hidden;
}

.sol_tit_wrap .txt_box .txt p span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.7s 0.7s ease;
}

.sol_tit_wrap .img {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    width: 98%;
    height: 98%;
    transform: translate(-50%, -50%);
    border-radius: 1.7vw;
    overflow: hidden;
    transition: opacity 0.5s 0.3s;
}

.sol_tit_wrap .img:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bk);
}

.sol_tit_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.sol_tit_wrap.active .img {
    opacity: 1;
}

.sol_tit_wrap.active .txt_box .desc span {
    transform: unset;
}

.sol_tit_wrap.active .txt_box .tit span {
    transform: unset;
}

.sol_tit_wrap.active .txt_box .txt p span {
    transform: unset;
}

.sol_container {
    padding: 10vw var(--grid_pd4) 15vw;
}

.sol_container .sub_cont_tit .txt {
    font-size: max(1.2vw, 14px);
}

.sol_container .sol_cont_wrap {
    margin-top: 8vw;
}

.sol_container .sol_cont_wrap + .sol_cont_wrap {
    margin-top: 14vw;
}

.sol_container .sol_banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3vw;
    border-radius: 1vw;
    color: #fff;
    overflow: hidden;
}

.sol_container .sol_banner .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.sol_container .sol_banner .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sol_container .sol_banner.sol1 {
    background-color: #FF7425;
}

.sol_container .sol_banner.sol2 {
    background-color: #5067D9;
}

.sol_container .sol_banner.sol3 {
    background-color: #00B343;
}

.sol_container .sol_banner.sol4 {
    background-color: #006CD8;
}

.sol_container .sol_banner.sol5 {
    background-color: #FF63B4;
}

.sol_container .sol_banner.sol6 {
    background-color: #A464EF;
    pointer-events: none;
}

.sol_container .sol_banner.sol6 .arr {
    display: none;
}

.sol_container .sol_banner.law_sol {
    background-color: #EF0A38;
}

.sol_container .sol_banner .txt_wrap {
    position: relative;
    z-index: 10;
}

.sol_container .sol_banner .txt_wrap .top_box {
    display: flex;
    align-items: flex-end;
}

.sol_container .sol_banner .txt_wrap .top_box .img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    width: 3.75vw;
    height: 3.75vw;
    border-radius: 0.625vw;
    background-color: #fff;
}

.sol_container .sol_banner .txt_wrap .top_box .img img {
    width: 70%;
    height: 70%;
}

.sol_container .sol_banner.sol4 .txt_wrap .top_box .img img {
    width: 60%;
    height: 60%;
}

.sol_container .sol_banner .txt_wrap .top_box .num {
    font-size: max(1.5vw, 22px);
    font-weight: 600;
    font-family: var(--pop);
    line-height: 1;
    display: none
}

.sol_container .sol_banner .txt_wrap .top_box .desc {
    margin-left: 0em;
    font-size: max(0.8vw, 14px);
    font-weight: 600;
}

.sol_container .sol_banner .txt_wrap .cont {
    margin-top: 6vw;
}

.sol_container .sol_banner .txt_wrap .cont .desc {
    font-size: max(0.98vw, 16px);
    font-weight: 600;
}

.sol_container .sol_banner .txt_wrap .cont .tit {
    font-size: max(2.2vw, 26px);
    font-weight: 600;
}

.sol_container .sol_banner .txt_wrap .cont .tit .en {
    font-family: var(--pop);
}

.sol_container .sol_banner .txt_wrap .cont .txt {
    margin-top: 1.4vw;
    font-size: max(var(--basic_txt), 14px);
    font-weight: 500;
}

.sol_container .sol_banner > .img {
    position: absolute;
    top: 47%;
    right: 4vw;
    max-width: 20vw;
    height: 18vw;
    flex-shrink: 0;
    transform: translateY(-50%);
}

.sol_container .sol_banner > .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sol_container .sol_banner.law_sol > .img img {
    height: 108%;
}

.sol_container .sol_banner .arr {
    position: absolute;
    bottom: 3vw;
    right: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(3vw, 40px);
    height: max(3vw, 40px);
    border-radius: 100%;
    background-color: #fff;
    fill: #3E3E3E;
    transition: transform 0.5s;
    z-index: 10;
}

.sol_container .sol_banner .arr svg {
    width: 40%;
    height: 40%;
    object-fit: contain;
    transition: transform 0.5s;
}

.sol_container .sol_banner.sol1 > .img {
    top: 52.5%;
    right: 6vw;
}

.sol_container .sol_banner.sol2 > .img {
    top: 49%;
}

.sol_container .sol_banner.sol6 > .img {
    min-width: 21vw;
    height: 18.5vw;
}

#renewal_page.sol_depth .sol_container .sol_banner > .img {
    max-width: 22vw;
    height: 20vw;
}

/*.sol_container .sol_banner.sol1 > .img { top: 52.5%; right: 6vw; }*/
/*.sol_container .sol_banner.sol2 > .img { top: 49%; }*/
/*.sol_container .sol_banner.sol6 > .img { min-width: 21vw; height: 18.5vw; }*/
/*back*/
.solution_card_wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9vw;
    padding: 11.71875vw var(--grid_pd3);
    background: linear-gradient(0deg, rgba(52,49,81,1) 0%, rgba(21,21,21,1) 100%);
}

.solution_card_wrap .card {
    position: relative;
    display: block;
    box-shadow: 0 20px 20px rgba(0,0,0,0.6);
    overflow: hidden;
}

.solution_card_wrap .card .img {
    position: relative;
    padding-top: 130%;
    transition: transform 0.8s;
}

.solution_card_wrap .card .img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

.solution_card_wrap .card .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 11vw;
}

.solution_card_wrap .card .top_txt {
    position: absolute;
    width: 100%;
    padding: 0 1.5625vw;
    top: 1.171875vw;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.solution_card_wrap .card .top_txt .txt {
    font-size: 0.859375vw;
    font-weight: 500;
}

.solution_card_wrap .card .top_txt .num {
    font-size: 1.5625vw;
    font-weight: 600;
    font-family: var(--pop);
}

.solution_card_wrap .card .bot_txt {
    position: absolute;
    left: 0;
    padding: 0 1.5625vw;
    bottom: 1.953125vw;
    width: 90%;
}

.solution_card_wrap .card .bot_txt .txt {
    font-size: 0.78125vw;
    font-weight: 600;
    color: rgba(255,255,255,0.75)
}

.solution_card_wrap .card .bot_txt .tit {
    font-size: 1.5625vw;
    font-weight: 600;
    margin-top: 5px;
    line-height: 1.2
}

.solution_card_wrap .card .bot_txt .svg {
    display: inline-flex;
    align-items: center;
    width: 1.171875;
    fill: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    height: calc(1.5625vw * 1.2);
    opacity: 0;
    transform: translateX(-20px);
    transition: 0.3s ease-in-out
}

.solution_card_wrap .bot_txt.col1 .tit {
    color: var(--purp);
}

.solution_card_wrap .bot_txt.col2 .tit {
    color: #9670FF;
}

.solution_card_wrap .bot_txt.col3 .tit {
    color: #00B265;
}

.solution_card_wrap .bot_txt.col4 .tit {
    color: #0063C5;
}

.solution_card_wrap .bot_txt.col5 .tit {
    color: #EF1C91;
}

.solution_card_wrap .bot_txt.col6 .tit {
    color: #BA43C0;
}

/*back*/
/*보유 솔루션 상세*/
/*
.solution_top { display: flex; align-items: center; justify-content: flex-start; padding: 0 var(--grid_pd3) 13.671875vw; background-color: var(--bk); }
.solution_top .card_wrap { width: 22.34375vw; }
.solution_top .card_wrap .card { position: relative; display: block; box-shadow: 0 20px 20px rgba(0,0,0,0.6); }
.solution_top .card_wrap .card .img {padding-top: 130%; position: relative}
.solution_top .card_wrap .card .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: cover;}
.solution_top .card_wrap .card .logo {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 57%}
.solution_top .card_wrap .card .top_txt {position: absolute; width: 100%; padding: 0 1.5625vw; top: 1.171875VW; color: #fff; display: flex; align-items: flex-end; justify-content: space-between}
.solution_top .card_wrap .card .top_txt .txt {font-size: 0.859375vw; font-weight: 500}
.solution_top .card_wrap .card .top_txt .num {font-size: 1.5625vw; font-weight: 600; font-family: var(--pop)}
.solution_top .card_wrap .card .bot_txt {position: absolute; left: 0; padding: 0 1.5625vw; bottom: 1.953125vw; width: 90%}
.solution_top .card_wrap .card .bot_txt .txt {font-size: 0.78125vw; font-weight: 600; color: rgba(255,255,255,0.75)}
.solution_top .card_wrap .card .bot_txt .tit {font-size: 1.5625vw; font-weight: 600; margin-top: 5px; line-height: 1.2}
.solution_top .card_wrap .card .bot_txt.col1 .tit {color: var(--purp); }
.solution_top .card_wrap .card .bot_txt.col2 .tit {color: #9670FF; }
.solution_top .card_wrap .card .bot_txt.col3 .tit {color: #00B265; }
.solution_top .card_wrap .card .bot_txt.col4 .tit {color: #0063C5; }
.solution_top .card_wrap .card .bot_txt.col5 .tit {color: #EF1C91; }
.solution_top .card_wrap .card .bot_txt.col6 .tit {color: #BA43C0; }

.solution_top .txt_wrap { margin-left: 5.25vw; color: #fff; }
.solution_top .txt_wrap .txt { position: relative;  margin: 0.390625vw 0; font-size: var(--sub_h4); font-weight: 600; overflow: hidden; }
.solution_top .txt_wrap .txt span { display: inline-block; opacity: 0; transform: translateY(100%); }
.solution_top .txt_wrap .txt.space { margin-top: 1.2em; }
*/
#renewal_page.sub.solution .sol_container {
    padding: 5vw 12.5vw 0;
}

/*후기*/
.solution_review {
    padding: 5vw 0;
    overflow: hidden;
}

.solution_review .swiper-container {
    position: relative;
    overflow: visible;
}

/*
.solution_review .swiper-container:before { content: ''; position: absolute; left: 0; top: 0; width: 20%; height: 100%; pointer-events: none; background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,0.8) 23%,rgba(255,255,255,0) 71%,rgba(255,255,255,0) 100%); z-index: 10; }
.solution_review .swiper-container:after { content: ''; position: absolute; right: 0; top: 0; width: 20%; height: 100%; pointer-events: none; background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0.8) 77%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%); z-index: 10; }
.solution_review .swiper-wrapper { transition-timing-function: linear; }
*/
.solution_review .item {
    display: flex;
    flex-direction: column;
    padding: max(1.5625vw, 15px);
    background-color: #fff;
    border-radius: 0.5859375vw;
    box-shadow: 0 3px 30px 0 rgba(0,0,0,0.08);
}

.solution_review .item .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.solution_review .item .label span {
    padding: 0.5em 1.2em;
    font-size: max(0.625vw, 10px);
    font-weight: 600;
    border-radius: 2em;
    background-color: #F6F6F6;
}

.solution_review .item .star_rating {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 5.625vw;
    height: 1.03125vw;
    background: url("/inc/img/renewal/star_rating.svg");
    background-size: 5.625vw 1.03125vw;
}

.solution_review .item .star_rating_fill {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: url("/inc/img/renewal/star_rating_fill_og.svg");
    background-size: 5.625vw 1.03125vw;
}

.solution_review .item .tit {
    margin-top: 2vw;
    font-size: max(var(--basic_txt), 14px);
    font-weight: 700;
}

.solution_review .item .tit + .txt {
    margin-top: 0.625vw;
}

.solution_review .item .txt {
    font-size: max(0.625vw, 11px);
}

.solution_review .item .txt_box.profile_box {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 1vw;
}

.solution_review .item .txt_box.profile_box .profile {
    width: 3vw;
    height: 3vw;
}

.solution_review .item .txt_box.profile_box .tit {
    margin-top: 0;
}

.solution_review .item .txt_box.profile_box .txt {
    grid-column: 1 / 3;
}

.solution_container {
    position: relative;
    z-index: 10;
}

.solution_container .solution_wrap {
    position: relative;
    padding: 12vw var(--grid_pd4) 9vw;
    background-color: #fff;
    overflow: hidden;
}

.solution_container .sub_btn {
    margin-top: 7vw;
}

.solution_container .solution_cont {
    padding: 10vw 0;
}

.solution_container .core_cont {
    position: relative;
    padding-top: 0;
}

.solution_container .core_cont .cont {
    position: relative;
    margin-top: 5.46875vw;
}

.solution_container .core_cont .cont .box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}

.solution_container .core_cont .cont .box + .box {
    margin-top: 8.46875vw;
}

.solution_container .core_cont .cont .box:nth-of-type(1) {
    opacity: 1;
}

.solution_container .core_cont .cont .box .img_wrap {
    position: relative;
    width: max(27.28125vw, 50%);
    padding-top: 40%;
    background-color: #F6F6F6;
    border-radius: 1.3671875vw;
    overflow: hidden;
}

/*-----보유솔루션 핵심기능-----*/
/*S-CMS*/
.solution_container .core_cont .cont .box.box1 .img_wrap {
}

.solution_container .core_cont .cont .box.box1 .img_wrap .bg {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.solution_container .core_cont .cont .box.box1 .img_wrap .comment {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1.2em 2em;
    box-shadow: 0 0 10px 0 rgba(21,21,21,0.05);
    background-color: #fff;
    border-radius: 2em;
    font-size: max(0.75vw, 8px);
}

.solution_container .core_cont .cont .box.box1 .img_wrap .comment .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5em;
    margin-right: 0.5em;
    flex-shrink: 0;
}

.solution_container .core_cont .cont .box.box1 .img_wrap .comment .ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.solution_container .core_cont .cont .box.box1 .img_wrap .comment .txt {
    font-weight: 600;
}

.solution_container .core_cont .cont .box.box1 .img_wrap .comment01 {
    left: 20%;
    top: 13%;
}

.solution_container .core_cont .cont .box.box1 .img_wrap .comment02 {
    left: 5%;
    top: 38%;
}

.solution_container .core_cont .cont .box.box1 .img_wrap .comment03 {
    left: 45%;
    top: 80%;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    display: grid;
    align-items: flex-end;
    width: 60%;
    height: 60%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.40625vw;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .bar {
    position: relative;
    width: 100%;
    background-color: #EAEAEA;
    border-radius: 0.46875vw 0.46875vw 0 0;
    z-index: 10;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .bar .desc {
    position: absolute;
    left: 50%;
    bottom: -0.5em;
    transform: translate(-50%, 100%);
    font-size: 0.625vw;
    font-weight: 500;
    color: #7E7E7E;
    white-space: nowrap;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .bar .bubble {
    position: absolute;
    left: 50%;
    top: -2em;
    padding: 0.7em 1.2em;
    border-radius: 0.390625vw;
    font-size: var(--basic_txt);
    font-weight: 700;
    color: #fff;
    background-color: var(--bk);
    white-space: nowrap;
    transform: translate(-50%, -100%);
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .bar .bubble:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 30%;
    height: 50%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23151515"><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>')center/contain no-repeat;
    transform: translate(-50%, 50%);
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .bar.bar1 {
    height: 20%;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .bar.bar2 {
    height: 30%;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .bar.bar3 {
    height: 50%;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .bar.bar4 {
    height: 35%;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .bar.bar5 {
    height: 100%;
    background-color: var(--purp);
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .chart_line {
    position: absolute;
    left: 50%;
    top: 0;
    display: grid;
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: 0.390625vw;
    width: 120%;
    height: 100%;
    transform: translateX(-50%);
}

.solution_container .core_cont .cont .box.box2 .img_wrap .chart .chart_line .line {
    border-bottom: 1px dashed #CAC4D0;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .sch_box {
    position: absolute;
    left: 3%;
    top: 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50%;
    padding: 0.7em 1.3em;
    border-radius: 2em;
    font-size: 1.15625vw;
    font-weight: 600;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(21,21,21,0.05);
}

.solution_container .core_cont .cont .box.box2 .img_wrap .sch_box .txt_box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .sch_box .txt_box .txt {
}

.solution_container .core_cont .cont .box.box2 .img_wrap .sch_box .txt_box .dash {
    margin-left: 0.2em;
}

.solution_container .core_cont .cont .box.box2 .img_wrap .sch_box .ico {
    width: 1em;
    height: 1em;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23151515"><path d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z"/></svg>')center/contain no-repeat;
}

.solution_container .core_cont .cont .box.box3 .img_wrap .board {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(35%);
}

.solution_container .core_cont .cont .box.box3 .img_wrap .comment {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1.5em 2.5em;
    background-color: #fff;
    border-radius: 2.1875vw;
    box-shadow: 0 0 15px 0 rgba(21,21,21,0.05)
}

.solution_container .core_cont .cont .box.box3 .img_wrap .comment .profile {
    position: relative;
    width: 1.875vw;
    height: 1.875vw;
    border-radius: 100%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #EFEFEF;
}

.solution_container .core_cont .cont .box.box3 .img_wrap .comment .profile img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution_container .core_cont .cont .box.box3 .img_wrap .comment .txt_box {
    margin-left: 1em;
}

.solution_container .core_cont .cont .box.box3 .img_wrap .comment .txt_box .tit_box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.solution_container .core_cont .cont .box.box3 .img_wrap .comment .txt_box .tit_box .name {
    font-size: 0.625vw;
    font-weight: 700;
}

.solution_container .core_cont .cont .box.box3 .img_wrap .comment .txt_box .tit_box .time {
    margin-left: 1em;
    font-size: 0.46875vw;
    color: #C6C6C7;
}

.solution_container .core_cont .cont .box.box3 .img_wrap .comment .txt_box .txt {
    margin-top: 0.2em;
    font-size: 0.625vw;
}

.solution_container .core_cont .cont .box.box3 .img_wrap .comment.comment1 {
    left: 5%;
    top: 58%;
}

.solution_container .core_cont .cont .box.box3 .img_wrap .comment.comment2 {
    right: 5%;
    top: 80%;
}

/*S-CMS*/
.solution_container .core_cont .cont .box .img_wrap {
    transform: translateX(-10%);
    opacity: 0;
    transition: opacity 0.8s, transform 0.8s;
}

.solution_container .core_cont .cont .box.active .img_wrap {
    transform: unset;
    opacity: 1;
}

.solution_container .core_cont .cont .box .img_wrap .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.solution_container .core_cont .cont .box .img_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*S-MEDI*/
.solution_container.medi .basic_cont {
    padding-top: 0;
}

.solution_container.medi .core_cont .cont .box.box1 .img_wrap .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.solution_container.medi .core_cont .cont .box.box1 .img_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution_container.medi .core_cont .cont .box.box2 .img_wrap .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.solution_container.medi .core_cont .cont .box.box2 .img_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution_container.medi .core_cont .cont .box.box3 .img_wrap .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.solution_container.medi .core_cont .cont .box.box3 .img_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution_container.medi .core_cont .cont .box.box3 .app_box {
    position: absolute;
    z-index: 10;
}

.solution_container.medi .core_cont .cont .box.box3 .app_box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.solution_container.medi .core_cont .cont .box.box3 .app_box.app_box1 {
    left: 0;
    bottom: 0;
    width: 8.4375vw;
    transform: translate(-50%, 40%);
}

.solution_container.medi .core_cont .cont .box.box3 .app_box.app_box2 {
    left: 8%;
    bottom: 0;
    width: 6.25vw;
    transform: translateY(100%);
}

/*쇼핑몰통합관리시스템*/
.solution_container.shop .core_cont .cont .box .img_wrap .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.solution_container.shop .core_cont .cont .box .img_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*학습관리솔루션*/
.solution_container.learning .core_cont .cont .box .img_wrap .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.solution_container.learning .core_cont .cont .box .img_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*설문조사솔루션*/
.solution_container.survey .core_cont .cont .box .img_wrap .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.solution_container.survey .core_cont .cont .box .img_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution_container .core_cont .cont .box .txt_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 2.425vw;
}

.solution_container .core_cont .cont .box .txt_wrap .tit {
    font-size: max(2.1875vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
}

.solution_container .core_cont .cont .box .txt_wrap .tit span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.8s;
}

.solution_container .core_cont .cont .box .txt_wrap .tit + .txt {
    margin-top: 1.5em;
}

.solution_container .core_cont .cont .box .txt_wrap .txt {
    font-size: max(var(--basic_txt), 14px);
    overflow: hidden;
}

.solution_container .core_cont .cont .box .txt_wrap .txt span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.8s ease-in-out calc(var(--sol-txt-idx)* 0.05s);
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li {
    margin-top: 3.4375vw;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li + li {
    margin-top: 1.5em;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(2.1875vw, 40px);
    height: max(2.1875vw, 40px);
    border-radius: 100%;
    background-color: #F7F7F7;
    opacity: 0;
    transform: translateY(50%);
    transition: transform 0.8s, opacity 0.8s;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li:nth-of-type(1) .ico {
    transition-delay: 0.2s;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li:nth-of-type(2) .ico {
    transition-delay: 0.4s;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li:nth-of-type(3) .ico {
    transition-delay: 0.6s;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li .ico svg {
    width: 40%;
    height: 40%;
}

.solution_container .core_cont .cont.type1 .box .txt_wrap .ico_li li .ico {
    background-color: #FFF5EF;
    fill: #FA7529;
}

.solution_container .core_cont .cont.type2 .box .txt_wrap .ico_li li .ico {
    background-color: #F0F2FC;
    fill: #5067D9;
}

.solution_container .core_cont .cont.type3 .box .txt_wrap .ico_li li .ico {
    background-color: #E9F7F1;
    fill: #00A35D;
}

.solution_container .core_cont .cont.type4 .box .txt_wrap .ico_li li .ico {
    background-color: #EEF6FF;
    fill: #3D93DF;
}

.solution_container .core_cont .cont.type5 .box .txt_wrap .ico_li li .ico {
    background-color: #FFF1F6;
    fill: #F86296;
}

.solution_container .core_cont .cont.type_law .box .txt_wrap .ico_li li .ico {
    background-color: #FFF4F4;
    fill: #E10030;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li .li_txt {
    margin-left: max(0.625vw, 10px);
    font-size: max(0.78125vw, 13px);
    font-weight: 700;
    transform: translateX(30%);
    opacity: 0;
    transition: transform 0.8s, opacity 0.8s;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li:nth-of-type(1) .li_txt {
    transition-delay: 0.3s;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li:nth-of-type(2) .li_txt {
    transition-delay: 0.5s;
}

.solution_container .core_cont .cont .box .txt_wrap .ico_li li:nth-of-type(3) .li_txt {
    transition-delay: 0.7s;
}

.solution_container .core_cont .cont .box.active .txt_wrap .tit span {
    transform: unset;
}

.solution_container .core_cont .cont .box.active .txt_wrap .txt span {
    transform: unset;
}

.solution_container .core_cont .cont .box.active .txt_wrap .ico_li li .ico {
    opacity: 1;
    transform: unset;
}

.solution_container .core_cont .cont .box.active .txt_wrap .ico_li li .li_txt {
    opacity: 1;
    transform: unset;
}

.solution_container .conven_cont {
    position: relative;
}

.solution_container .conven_cont:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(100% + (var(--grid_pd4) * 2));
    height: 100%;
    background-color: #FFF5EF;
    transform: translateX(-50%);
    z-index: 1;
}

.solution_container .conven_cont .sub_cont_tit {
    position: relative;
    z-index: 10;
}

.solution_container .conven_cont .cont {
    position: relative;
    display: grid;
    grid-template-columns: 24.0625vw minmax(0, 1fr);
    gap: 1.875vw;
    margin-top: 5.46875vw;
    opacity: 0;
    transform: translateY(30%);
    transition: opacity 1s, transform 1s;
    z-index: 10;
}

.solution_container .conven_cont .cont.active {
    opacity: 1;
    transform: unset;
}

.solution_container .conven_cont.type_law:before {
    background-color: #F0EDF1;
}

.type_law .sub_cont_tit.bg_sol .tit span:before {
    background-color: #F0EDF1;
}

.solution_container .conven_cont.type_law .cont .txt_wrap .txt_box.active .label {
    background-color: #E10030;
}

.solution_container .conven_cont.type_law .cont .txt_wrap .txt_box .box .list li .ico {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,237,237,1) 100%);
}

.solution_container .conven_cont.type_law .cont .txt_wrap .txt_box .box .list li .ico svg {
    fill: #E10030;
}

.solution_container .conven_cont .cont .img_wrap {
    position: relative;
    min-height: 29vw;
    border-radius: 1.09375vw;
    overflow: hidden;
}

.solution_container .conven_cont .cont .img_wrap .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s;
}

.solution_container .conven_cont .cont .img_wrap .img.active {
    opacity: 1;
}

.solution_container .conven_cont .cont .img_wrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution_container .conven_cont .cont .txt_wrap {
}

.solution_container .conven_cont .cont .txt_wrap .txt_box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.34375vw 1.875vw;
    border-radius: 0.9375vw;
    background-color: #fff;
    transition: background-color 0.8s, box-shadow 0.8s;
    cursor: pointer;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box + .txt_box {
    margin-top: 1.25vw;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box.active {
    background-color: #fff;
    box-shadow: 0 0 30px 0 rgba(21,21,21,0.1);
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .label {
    padding: 0.5em 1.25em;
    font-size: max(0.625vw, 8px);
    font-weight: 600;
    border-radius: 2em;
    color: var(--bk);
    background-color: transparent;
    border: 1px solid var(--bk);
    transition: all 0.3s;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box.active .label {
    color: #fff;
    background-color: #FF7425;
    border-color: #FF7425;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box {
    margin-left: 0.9375vw;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .tit {
    font-size: max(1.40625vw, 18px);
    font-weight: 700;
    line-height: 1.3;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .hide_box {
    display: none
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .txt {
    margin-top: 1em;
    font-size: max(0.625vw, 11px);
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2em;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .list li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.78125vw;
    font-weight: 700;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .list li + li {
    margin-left: 2vw;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .list li .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5vw;
    height: 2.5vw;
    margin-right: 1em;
    border-radius: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,238,230,1) 100%);
    overflow: hidden;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .list li .ico svg {
    width: 40%;
    height: 40%;
    object-fit: contain;
    fill: #FA7529;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .list li .li_txt {
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .list li .li_txt .desc {
    font-size: max(0.5vw, 11px);
    color: #959595;
    font-weight: 500;
}

.solution_container .conven_cont .cont .txt_wrap .txt_box .box .list li .li_txt .txt {
    margin-top: 0.2em;
    font-size: max(0.7vw, 16px);
    font-weight: 700;
    line-height: 1.2;
}

.solution_container .security_cont {
}

.solution_container .security_cont .cont {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 25.9375vw;
    align-items: center;
    margin-top: 5.859375vw;
    opacity: 0;
    transform: translateY(30%);
    transition: opacity 1s, transform 1s;
}

.solution_container .security_cont .cont.active {
    opacity: 1;
    transform: unset;
}

.solution_container .security_cont .cont:before {
    content: '';
    position: absolute;
    left: 1px;
    top: 0;
    width: calc(var(--grid_pd4) + 1px);
    height: 100%;
    background-color: #fff;
    transform: translateX(-100%);
    z-index: 10;
}

.solution_container .security_cont .cont .txt_wrap {
    position: relative;
    width: 100%;
    background-color: #fff;
    z-index: 10;
    pointer-events: none;
}

.solution_container .security_cont .cont .txt_wrap .txt_box .desc {
    font-size: max(0.78125vw, 13px);
    font-weight: 500;
}

.solution_container .security_cont .cont .txt_wrap .txt_box .desc + .tit {
    margin-top: 0.2em;
}

.solution_container .security_cont .cont .txt_wrap .txt_box .tit {
    font-size: max(2.1875vw, 24px);
    font-weight: 700;
    line-height: 1.3;
}

.solution_container .security_cont .cont .txt_wrap .txt_box .txt {
    margin-top: 1.5em;
    font-size: max(var(--basic_txt), 14px);
}

.solution_container .security_cont .cont .txt_wrap .txt_box .ico_li {
    margin-top: 3.4375vw;
}

.solution_container .security_cont .cont .txt_wrap .txt_box .ico_li li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.solution_container .security_cont .cont .txt_wrap .txt_box .ico_li li + li {
    margin-top: 1.5em;
}

.solution_container .security_cont .cont .txt_wrap .txt_box .ico_li li .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(2.1875vw, 40px);
    height: max(2.1875vw, 40px);
    border-radius: 100%;
    background-color: #FFF5EF;
    fill: #FA7529;
    flex-shrink: 0;
}

.solution_container .security_cont .cont .txt_wrap .txt_box .ico_li li .ico svg {
    width: 40%;
    height: 40%;
}

.solution_container .security_cont .cont .txt_wrap .txt_box .ico_li li .li_txt {
    margin-left: 0.625vw;
    font-size: max(0.78125vw, 13px);
    font-weight: 700;
}

.solution_container .security_cont .cont .txt_wrap .txt_box.active {
    pointer-events: visible;
    opacity: 1;
}

.solution_container .security_cont.type_law .cont .txt_wrap .txt_box .ico_li li .ico {
    background-color: #FFF4F4;
}

.solution_container .security_cont.type_law .cont .txt_wrap .txt_box .ico_li li .ico svg {
    fill: #E10030;
}

.solution_container .security_cont.type_law .cont .img_wrap .paging .page_btn {
    background-color: #E10030;
}

.solution_container .security_cont .cont .img_wrap {
    position: relative;
    width: 20.9375vw;
    padding-top: 20.9375vw;
    border-radius: 100%;
    background-color: #f6f6f6;
    overflow: visible !important;
}

.solution_container .security_cont .cont .img_wrap .paging {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 110%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.solution_container .security_cont .cont .img_wrap .paging .page_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: var(--purp);
    font-size: 30px;
    fill: #fff;
    cursor: pointer;
}

.solution_container .security_cont .cont .img_wrap .paging .page_btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: unset;
}

.solution_container .security_cont .cont .img_wrap .img_box {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 300%;
    height: 100%;
}

.solution_container .security_cont .cont .img_wrap .img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: opacity 0.3s;
}

.solution_container .security_cont .cont .img_wrap .img.swiper-slide-prev {
    opacity: 0;
}

.solution_container .security_cont .cont .img_wrap .img img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

.solution_container .security_cont .cont .img_wrap .img:nth-of-type(2) img {
    width: 60%;
    height: 60%;
}

.solution_container .security_cont .cont .img_wrap .img:nth-of-type(3) img {
    width: 50%;
    height: 50%;
}

.solution_container .basic_cont {
    padding-bottom: 0;
}

.sol_ico_cont {
    margin-top: 3.90625vw;
}

.sol_ico_cont .ico_wrap {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3.125vw;
}

.sol_ico_cont .ico_wrap .ico_box {
    text-align: center;
}

.sol_ico_cont .ico_wrap .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(6.09375vw, 80px);
    height: max(6.09375vw, 80px);
    margin: 0 auto;
    border-radius: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,238,230,1) 100%);
}

.sol_ico_cont .ico_wrap .ico svg {
    height: 1em;
    fill: #FA7529;
    font-size: max(1.78125vw, 24px);
}

.sol_ico_cont .ico_wrap .ico svg.rotate {
    transform: rotate(90deg);
    height: 30%;
}

.sol_ico_cont .tit {
    margin-top: 1em;
    font-size: max(1.15vw, 14px);
    font-weight: 600;
}

.sol_ico_cont .txt {
    margin-top: 0.5em;
    font-size: max(0.625vw, 12px);
}

.sol_ico_cont.medi .ico_wrap .ico {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(239,234,255,1) 100%);
}

.sol_ico_cont.medi .ico_wrap .ico svg {
    fill: #5067D9;
}

.sol_ico_cont.shop .ico_wrap .ico {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(231,244,238,1) 100%);
}

.sol_ico_cont.shop .ico_wrap .ico svg {
    fill: #00B265;
}

.sol_ico_cont.learning .ico_wrap .ico {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(230,238,246,1) 100%);
}

.sol_ico_cont.learning .ico_wrap .ico svg {
    fill: #3D93DF;
}

.sol_ico_cont.survey .ico_wrap .ico {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(248,237,243,1) 100%);
}

.sol_ico_cont.survey .ico_wrap .ico svg {
    fill: #F86296;
}

.sol_ico_cont.ecom .ico_wrap .ico {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(248,237,243,1) 100%);
}

.sol_ico_cont.ecom .ico_wrap .ico svg {
    fill: #7438B4;
}

.sol_ico_cont.law .ico_wrap .ico {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(240,237,241,1) 100%);
}

.sol_ico_cont.law .ico_wrap .ico svg {
    fill: #E10030;
}

/*흐르는 텍스트*/
.move_text_box {
    margin-bottom: -40px;
    margin-top: 60px;
}

.move_text_box .text {
    display: flex;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    transition: 0.3s;
    font-size: 7vw;
    font-weight: 800;
    color: #f4efec;
}

.move_text_box .text p {
    animation: textLoop 50s linear infinite;
    padding-right: 20px;
    line-height: 1.3;
    color: #f4efec;
    cursor: default;
}

.mainInsta .tit_text {
    padding-bottom: 20px;
}

@keyframes textLoop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}


/*호버스타일*/
@media screen and (min-width: 1024px) {
    #renewal_page.ai .portfolio_cont .portfolio_li .box:hover .hover_box {
        opacity: 1;
    }

    .tab_top .tab:hover {
        background-color: var(--bk);
        color: #fff;
    }

    .tab_top.type2 .tab:hover {
        background-color: #fff;
        color: var(--bk);
    }

    .sub_btn .btn:hover .ico {
        transform: translateX(10px);
    }

    .sub_btn .btn:hover .ico.chev {
        transform: translateY(5px);
    }

    .sub_btn.list:hover .ico {
        transform: scale(0.8);
    }

    .link_btm_banner .link_btm:hover .arr {
        animation: arrHover 1.3s ease forwards;
    }

    .news_wrap .news_btn .ico:hover svg {
        transform: translateX(0.5vw);
    }

    .member_intro .member_wrap .member_box:hover .char_box {
        border-radius: 100%;
        transition-delay: -0.2s;
    }

    .member_intro .member_wrap .member_box:hover .char_box .char_hide {
        border-radius: 100%;
    }

    .member_intro .member_wrap .member_box:hover .char_box .char.illu {
        opacity: 0;
    }

    .member_intro .member_wrap .member_box:hover .char_box .char:not(.illu) {
        opacity: 1;
        transform: unset;
        transition: transform 0.5s, opacity 0.1s;
    }

    .member_intro .member_wrap .member_box.angel:hover .char_box .char:not(.illu) {
        transform: translate(-50%, -50%) scale(1);
    }

    .portfolio_cont .portfolio_li .box:hover .tit_box {
        opacity: 1;
    }

    .portfolio_inquiry:hover .tit_box .tit, .portfolio_inquiry:hover .tit_box .en_tit {
        color: var(--purp);
    }

    .inquiry_sect .form_cont .inp_cont .inp_wrap.sel .list > li:hover {
        background-color: #f5f5f5;
    }

    .inquiry_sect .form_cont .inp_cont .inp_wrap .inp_box .file_btn:hover {
        background-color: var(--bk);
        border-color: var(--bk);
    }

    .renewal_board_wrap .board_list .list:hover {
        background-color: #F6F6F6;
    }

    .renewal_board_wrap .board_top .cate_sel .nice-select .option:hover {
        background-color: var(--bk);
    }

    .renewal_board_wrap .board_list .list:hover .tit_wrap .tit_box .arr .ico {
        transform: unset;
        opacity: 1;
    }

    .pagination .num_list li:hover a {
        color: var(--purp);
    }

    .notice_view .view_btn_wrap .box:hover .ico:before {
        opacity: 1;
    }

    .notice_view .view_btn_wrap .box:hover.prev .ico {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFF" viewBox="0 0 448 512"><path d="M4.7 244.7c-6.2 6.2-6.2 16.4 0 22.6l176 176c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L54.6 272 432 272c8.8 0 16-7.2 16-16s-7.2-16-16-16L54.6 240 203.3 91.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0l-176 176z"/></svg>')center/30% 30% no-repeat;
    }

    .notice_view .view_btn_wrap .box:hover.next .ico {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFF" viewBox="0 0 448 512"><path d="M443.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-176-176c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L393.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l377.4 0L244.7 420.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l176-176z"/></svg>')center/30% 30% no-repeat;
    }

    .renewal_sns_wrap .sns_wrap .top .ico_box:hover {
        background-color: #fff;
    }

    .renewal_sns_wrap .sns_wrap .top .ico_box:hover .ico {
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23151515"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>')center/contain no-repeat;
    }

    .renewal_sns_wrap .sns_wrap .sns_box li:hover .img_hover {
        transform: scale(1.08);
    }

    .story_li_wrap .story_li li:hover .box {
        background-color: #f9f9f9;
    }

    .list_view_share a:hover {
        fill: #fff;
        background-color: var(--purp);
    }

    .sol_container .sol_banner:hover .arr svg {
        transform: translateX(0.2vw);
    }

    .solution_card_wrap .card:hover .img {
        transform: scale(1.05);
    }

    .solution_card_wrap .card:hover .bot_txt .svg {
        opacity: 1;
        transform: translateX(0)
    }

    .portfolio_view_container .p_list a:hover {
        color: #ffffff;
        background: #cf7965;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
        transition: all 0.2s;
    }

    .inquiry_sect .form_cont .form_box > .info_wrap .btn:hover .btn_ico {
        transform: translateX(5px);
    }
}


/* tab 전체 wrapper */
.tab {
  /* margin: 1vw var(--grid_pd1); */
  /* border-radius: 4.5vw; */
  overflow: hidden;
  /* background: var(--bk); */
  padding: 2.7vw var(--grid_pd3) 1vw;
}

/* 탭 네비게이션 */
.tabnav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1vw;
  margin-top: 1vw;
}

/* 탭 링크 스타일 */
.tabnav a {
  height: max(2.8125vw, 32px);
  padding: 0 1.5em;
  line-height: max(2.8125vw, 32px);
  border-radius: 2em;
  font-size: max(var(--basic_txt), 15px);
  font-weight: 700;
  background-color: transparent;
  transition: background-color 0.5s, color 0.5s;
  text-align: center;
  white-space: nowrap;
  color: #fff;
}

/* 탭 활성화 시 표시되는 밑줄 효과 */
.tabnav a.active {
  border-bottom: 1px solid #fff;
  color: var(--bk);
  background: #fff;
}

/* 탭 hover 시 효과 */
.tabnav a:hover {
  background: #fff;
  color: var(--bk);
}

/* 탭 콘텐츠 영역 */
.tabcontent {
  min-height: 300px;
  /* margin: 5vw 3vw; */
  /* margin-bottom: 1vw; */
  border-top: none;
  color:#fff;
}


/* 탭 콘텐츠는 기본적으로 숨김 */
.tabcontent > div {
  display: none;
}

/* 탭 영역 서서히 등장 (1.2초 후 실행) */
.tab.portfolio_cont {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.tab.portfolio_cont.tab-show {
  opacity: 1;
  transform: translateY(0);
}





.portfolio_cont .portfolio_li {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5vw;
    padding: 5vw var(--grid_pd2) 9vw;
    justify-content: left;
    background: var(--bk);
    border-radius: 4.231vw;
}

.portfolio_cont .portfolio_li .box {
    /* position: relative; */
    /* width: 100%; */
    /* padding-top: 100%; */
    /* border-radius: 1.171875vw; */
    /* overflow: hidden; */
}

.portfolio_cont .portfolio_li .box.noPointer {
    cursor: unset;
}

.portfolio_cont .portfolio_li .box img, .portfolio_cont .portfolio_li .box video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio_cont .portfolio_li .box .tit_box {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 1.953125vw;
    background-color:var(--purp);
    color: #fff;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s, background-color 0.4s, color 0.4s;
    word-break: keep-all
}

.portfolio_cont .portfolio_li .box .tit_box.bgView {
    background-color: transparent;
    opacity: 1;
}

.portfolio_cont .portfolio_li .box .tit_box.bgView:hover {
    background-color: rgba(255,94,16,1);
    color: #fff !important;
}

.portfolio_cont .portfolio_li .box .tit_box .part {
    font-size: 0.78125vw;
    font-family: var(--pop);
}

.portfolio_cont .portfolio_li .box .tit_box .part + .tit {
    margin-top: 1.171875vw;
}

.portfolio_cont .portfolio_li .box .tit_box .tit {
    font-size: 1.953125vw;
    font-weight: 700;
    line-height: 1.2;
}

.portfolio_cont .portfolio_li .box .tit_box .tit + .tag {
    margin-top: var(--basic_txt);
}

.portfolio_cont .portfolio_li .box .tit_box .tag {
    font-size: 0.9375vw;
    font-weight: 600;
}

.portfolio_cont .portfolio_li .box .tit_box .txt {
    font-size: 0.9vw;
    margin-top: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.portfolio_cont .portfolio_li .box .tit_box:not(.bgView) .txt, .portfolio_cont .portfolio_li .box .tit_box:not(.bgView) .part, .portfolio_cont .portfolio_li .box .tit_box:not(.bgView) .tit, .portfolio_cont .portfolio_li .box .tit_box:not(.bgView) .tag {
    color: #fff !important;
}

.portfolio_cont .portfolio_li .box .tit_box.bgView:hover .part, .portfolio_cont .portfolio_li .box .tit_box.bgView:hover .txt, .portfolio_cont .portfolio_li .box .tit_box.bgView:hover .tit, .portfolio_cont .portfolio_li .box .tit_box.bgView:hover .tag {
    color: #fff !important;
}

.portfolio_cont .sub_btn {
    margin-top: 0;
    margin-bottom: 5.859375vw;
}

.portfolio_inquiry {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.953125vw var(--pd) 7.8125vw;
    padding: 2.9296875vw var(--grid_pd2);
    background-color: var(--bk);
    border-radius: 5.859375vw;
    overflow: hidden;
}

.portfolio_inquiry .tit_box {
    position: relative;
    color: #fff;
    z-index: 10;
}

.portfolio_inquiry .tit_box .tit {
    font-size: 1.5625vw;
    font-weight: 700;
}

.portfolio_inquiry .tit_box .en_tit {
    font-size: 2.9296875vw;
    font-weight: 700;
    font-family: var(--pop);
}

.portfolio_inquiry .tit_box .tit, .portfolio_inquiry .tit_box .en_tit {
    transition: color 0.4s;
}

.portfolio_inquiry .arr {
    position: relative;
    width: 5.859375vw;
    height: 5.859375vw;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23fff"><path d="M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-144-144c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l441.4 0L340.7 388.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l144-144z"/></svg>')center/contain no-repeat;
    z-index: 10;
}

/*AI 이미지*/
#renewal_page.ai .portfolio_top {
    padding: 5vw 0;
    background-color: var(--bk);
}

#renewal_page.ai .portfolio_cont {
    margin: 0;
    border-radius: 0;
}

#renewal_page.ai .portfolio_top .tit_wrap .tit {
    color: #fff;
    font-size: 8.75vw
}

#renewal_page.ai .portfolio_top .txt_wrap .txt {
    color: #fff;
}

#renewal_page.ai #imageListView {
    padding-bottom: 9vw
}

#renewal_page.ai .portfolio_cont .portfolio_li {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5vw;
}

#renewal_page.ai .portfolio_cont .portfolio_li .box {
    padding-top: 70%;
    cursor: pointer;
}

#renewal_page.ai .portfolio_cont .portfolio_li .box .hover_box {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(255,94,16,0.85);
    opacity: 0;
    z-index: 10;
    transition: opacity 0.5s;
}

#renewal_page.ai .portfolio_cont .portfolio_li .box .hover_box .ico {
    width: 8rem;
    height: 8rem;
    background-color: rgba(255,255,255,1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

#renewal_page.ai .portfolio_cont .portfolio_li .box .hover_box svg {
    width: 3rem;
    fill: rgb(255,94,16);
}

#renewal_page.ai .portfolio_cont .bg_tit_wrap .bg_tit {
    animation: textLoop 200s linear infinite
}




/*임베디드갤러리*/

/* 컨테이너 */
.am-gallery { position: relative; }

/* 에러/빈 상태 */
.am-gallery .amg-error { margin: 12px 0; padding: 10px 12px; background:#fff3f3; color:#b80f0f; border-radius:8px; font-size:14px; }
.am-gallery .amg-empty { margin: 16px 0; color: #666; }

/* 그리드 */
.am-gallery .portfolio_li{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px){
  .am-gallery .portfolio_li{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  .am-gallery .portfolio_li{ grid-template-columns: repeat(4, 1fr); }
}

/* 카드 */
.am-gallery .box{
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  background: #f7f7f8;
  /* border: 1px solid #eee; */
}

/* 이미지 (4:3 비율) */
.am-gallery .box .img-responsive{
  width: 100%;
  aspect-ratio: 4 / 3;        /* 지원 안 되면 아래 fallback 사용 */
  object-fit: cover;
  display: block;
}
/* aspect-ratio 미지원 브라우저 fallback */
@supports not (aspect-ratio: 4 / 3) {
  .am-gallery .box .img-responsive{ height: auto; }
}

/* 텍스트 박스 */
.am-gallery .box .tit_box{
  padding: 10px 12px;
  background: #fff;
}
.am-gallery .box .tit_box .part{
  font-size: 12px; color:#888; margin-bottom:4px;
}
.am-gallery .box .tit_box .tit{
  font-size: 15px; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.am-gallery .box .tit_box .tag{
  font-size: 12px; color:#666; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 비밀글 표시 */
.am-gallery .box.locked .tit_box .tit::after{
  content: " 🔒";
}






.icon-spacer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 110px;
    height: 110px;
}

.socials {
    /* justify-content: center; */
    /* align-items: center; */
    gap: 60px;
    /* margin-bottom: 40px; */
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: 0 auto; */
    /* height: fit-content; */
    position: absolute;
    /* left: 0; */
    top: -10%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 10;
    max-width: 1300px;
}

.socials a {
    text-decoration: none;
    color: #bcdfbc;
}

.socials i {
    font-size: 5rem;
    text-decoration: none;
    transition: all 200ms ease-in-out;
    color: var(--text-highlight);
}

.icon:hover i {
    transform: rotate(360deg) scale(1.6);
}

.fa-envelope {
    margin: auto;
}

.mail-span {
    display: flex;
    justify-content: center;
    margin: auto;
    width: 128px;
    border-radius: 8px;
}

.mail-span:hover {
    background-color: red;
    transition: all 100ms;
    transition-delay: 165ms;
}

.mail-span:hover .fa-envelope {
    color: white;
}

.fa-telegram:hover {
    color: lightskyblue;
}

.telegram-span {
    display: flex;
    justify-content: center;
    margin: auto;
}

.telegram-span:hover {
    background-color: white;
    transition: all 100ms;
    transition-delay: 165ms;
}

.fa-discord:hover {
    color: #5663eb;
}

.discord-span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

.discord-span:hover {
    background-color: white;
    transition: all 100ms;
    transition-delay: 165ms;
}

.fa-x-twitter {
    margin: auto;
}

.x-span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    height: 130px;
    border-radius: 20px;
}

.x-span:hover {
    background-color: black;
    transition: all 100ms;
    transition-delay: 165ms;
}

.x-span:hover .fa-x-twitter {
    color: white;
}

.instagram-span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    height: 130px;
    border-radius: 20px;
}

.instagram-background {
    width: 130px;
    height: 130px;
    position: absolute;
    border-radius: 20px;
    opacity: 0;
}

.instagram-span:hover .instagram-background {
    background: radial-gradient(
            circle farthest-corner at 35% 90%,
            #fec564,
            transparent 50%
        ),
        radial-gradient(
            circle farthest-corner at 0 140%,
            #fec564,
            transparent 50%
        ),
        radial-gradient(
            ellipse farthest-corner at 0 -25%,
            #5258cf,
            transparent 50%
        ),
        radial-gradient(
            ellipse farthest-corner at 20% -50%,
            #5258cf,
            transparent 50%
        ),
        radial-gradient(
            ellipse farthest-corner at 100% 0,
            #893dc2,
            transparent 50%
        ),
        radial-gradient(
            ellipse farthest-corner at 60% -20%,
            #893dc2,
            transparent 50%
        ),
        radial-gradient(
            ellipse farthest-corner at 100% 100%,
            #d9317a,
            transparent
        ),
        linear-gradient(
            #6559ca,
            #bc318f 30%,
            #e33f5f 50%,
            #f77638 70%,
            #fec66d 100%
        );
    transition: all 100ms;
    transition-delay: 165ms;
    opacity: 1;
}

.instagram-span:hover .fa-instagram {
    color: white;
}



.bread_Space{margin:2px 10px;color:#ccc; font-size:12px;font-weight:300;}



  /* ======= 화살표/라벨 UI ======= */
  .cat-slider{
    display:flex;
    align-items: center;
    gap:.75rem;
    justify-content:center;
  }
  .cat-slider .cat-nav{
    width:2.25rem;
    height:2.25rem;
    /* border:1px solid #ddd; */
    background:#fff;
    border-radius:999px;
    line-height: 1.5rem;
    text-align:center;
    cursor:pointer;
    font-size: 3rem;
    user-select:none;
    transition:transform .15s ease, background .2s;
    color: #b077ee;
  }
  .cat-slider .cat-nav:hover{ transform:translateY(-1px);outline:1px solid #b898db; outline-offset:2px; }
  .cat-slider .cat-nav:active{ transform:translateY(0); }
  .cat-slider #catLabel{
    margin:0; font-weight:600; letter-spacing:.02em;
    min-width:8ch; text-align:center;
  }

  /* 전환시 살짝 페이드 */
  #catLabel, .portfolio_top .tit_wrap .tit, .portfolio_top .txt_wrap .txt{
    transition: opacity .18s ease, transform .18s ease;
  }
  .is-switching #catLabel,
  .is-switching .tit_wrap .tit,
  .is-switching .txt_wrap .txt{
    opacity:.25; transform: translateY(2px);
  }

  /* 접근성 */
  .cat-slider .cat-nav:focus{ outline:1px solid var(--purp); outline-offset:2px; }

  /* ======= .txt_wrap 표시 최적화 ======= */
  .portfolio_top .txt_wrap .txt{
    /* 구분자 포함된 라벨이 자연스럽게 줄바꿈되도록 */
    /* white-space: normal; */        /* 줄바꿈 허용 */
    /* word-break: keep-all; */       /* 한글/영문 단어 보존 */
    /* overflow-wrap: anywhere; */    /* 너무 긴 항목도 안전 줄바꿈 */
  }
  .portfolio_top .txt_wrap .txt .bread_Space{
    display:inline-block; padding:0 .4em;
    opacity:.55;
  }

  /* 모바일에서 구분자 간격 조금 더 좁게 */
  @media (max-width: 480px){
    .portfolio_top .txt_wrap .txt .bread_Space{ padding:0 .3em; }
  }



/*-----*/
.mask_gradient{
  mask-image: url(/movie/mask.png);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  background: #fff;
  z-index: 5;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: -5px;
  }





@media (max-width: 620px) {

.portfolio_cont .portfolio_li{background:none}

}