/* 커서 */
._cursor{
    position: fixed; z-index: 999; transform: translate(-50%,-50%) scale(0);
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1px; opacity: 0;
    transition: opacity 0.5s,transform 0.5s;
}
._cursor.on{
    transform: translate(-50%,-50%) scale(1); opacity: 1;
}
._cursor .top{
    font-size: 22em; font-weight: 500; letter-spacing: -0.025em; color: var(--yello);
    position: absolute; bottom: 100%;
    white-space: nowrap; padding-bottom: 0.2em;
}
._cursor .circle{
    width: 65em; height: 65em;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
._cursor .circle div{
    border-radius: 50%;
    position: absolute; animation: scale110 forwards infinite 3s,opacity20 forwards infinite 2s;
}
._cursor .circle div:nth-child(1){
    width: 86%; height: 86%; background-color: rgba(226, 241, 87, 0.3); animation-delay:0.2s;
}
._cursor .circle div:nth-child(2){
    width: 36em; height: 36em; background-color: rgba(226, 241, 87, 0.5); animation-delay:0.1s;
}
._cursor .circle div:nth-child(3){
    width: 16em; height: 16em; background-color: rgba(226, 241, 87, 1);
}
._cursor .bottom{
    font-size: 14em; letter-spacing: -0.025em; color: #333333;
    line-height: 1.428; text-align: center;
    position: absolute; white-space: nowrap;
    top: 100%; padding-top: 0.6em; font-weight: 600;
}

html.mo ._cursor{display: none !important;}



.service {
    background: #eee;
    /* padding-bottom: 60px; */
    overflow: hidden;
}

.service .marqueeBx {
    margin-bottom:80px;
}

.service .cardArea{
    max-width: 1760px;
    margin: 0 auto; margin-bottom: 80px;
    width: 95%;
    display: flex; flex-direction: column; gap: 80px;
}

.service .pin{}
.service .card {
    perspective: 300px; filter: brightness(1); position: relative;
    background: linear-gradient(to bottom, #ffffff 83%, transparent 99.5%);
    border-radius: 60px; overflow: hidden;
}

.service .card:last-child {
    background: #ffffff;
}


/* 마지막 카드 영역 별도 */
.service .card:last-child .txt .tit{pointer-events: none;}
.service .card:last-child .txt .desc{pointer-events: none;}

.service .card .clickArea{
    position: absolute; box-sizing: border-box;
    width: 100%; height: 100%;left: 0; top: 0;
    cursor: none;
}
html.mo .service .card .clickArea{display: none;}
.service .card .btnBx{display: flex; align-items: flex-start; justify-content: flex-start; gap: 40px;}




.service .card .wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 150px;
    max-width: 100%;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.service .card .txt {
    font-size: 1px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service .card .txt .tit {
    font-size: max(80em,26px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #101010;
    padding-bottom: calc(126/80*1em);
    display: block;
    transform: translateY(40px);
    opacity: 0;
}

.service .card .txt .desc span {
    font-weight: bold;
    display: block;
    font-size: max(28em,18px);
    line-height: 1.714;
    color: #101010;
    padding-bottom: calc(10/28*1em);
    transform: translateY(40px);
    opacity: 0;
}

.service .card .txt .desc p {
    font-size: max(20em,14px);
    line-height: 1.6;
    color: #101010;
    letter-spacing: -0.025em;
    font-weight: 400;
    padding-bottom: calc(110/20*1em);
    transform: translateY(40px);
    opacity: 0;
}

.service .card .txt .desc p b {
    color: #4754d2;
}



.service .vidArea {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* min-width: 0; */
    min-width: 700px;
    max-width: 700px;
}

.service .vidArea .itemBox .media {
    width: 100%;
    position: relative;
    border-radius: 9px;
    overflow: hidden;
    opacity: 0;
    background-color: #ddd;
}

.service .vidArea .itemBox .media::after {
    content: '';
    display: block;
    padding-top: calc(220/390*100%);
}

.service .vidArea .itemBox .media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width:1800px) {
    .service .card .wrap{padding: 120px 80px; gap: 40px;}
    .service .card .txt{font-size: calc(1/1800*100vw);}
    .service .card .txt .tit{padding-bottom: 0.8em;}

    .service .vidArea{min-width: calc(700/1800*100vw); max-width: calc(700/1800*100vw);}
}
@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
    .service .card .wrap{padding: 50px; padding-bottom: 80px; flex-direction: column-reverse; align-items: flex-start;}
    .service .cardArea{gap: 40px;}
    .service .card{border-radius: 20px;}

    .service .vidArea{width: 100%; min-width: unset; max-width: unset;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
    .service .card .wrap{padding: max(calc(22/500*100vw),14px); padding-bottom: 60px; gap: 30px;}
    .service .card .txt .desc span br{display: none;}
    .service .card .txt .desc p br{display: none;}

    .service .card .btnBx{gap: 20px;}
}
@media screen and (max-width:320px) {}


.service .btn-more {
    font-size: 22px;
    letter-spacing: -0.025em;
    color: #000;
    font-weight: 500;
    font-family: 'DM Sans';
    display: inline-block;
    padding-bottom: calc(10/22*1em);
    padding-right: calc(48/22*1em);
    position: relative;
    transition: padding-right 0.8s;
}
.service .btn-more:hover{
    padding-right: calc(78/22*1em);
}

.service .btn-more .arrow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    z-index: 1;
}
.service .btn-more .arrow::before {
    content: '';
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    width: calc(28/22*1em);
    height: 1px;
    transform: rotate(45deg);
    transform-origin: right bottom;
    background: #000;
}

.service .btn-more .circleWrap {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
    width: calc(50/22*1em);
    height: calc(50/22*1em);
    filter: url(#gooey);
}

.service .btn-more .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%) scale(0);
    width: calc(32/22*1em);
    height: calc(32/22*1em);
    background: #e2f157;
    border-radius: 50%;
    transition: transform 1s;
}
.service .btn-more:hover .circle{transform: translate(-45%, -50%) scale(1);}
html.mo .service .btn-more .circle{transform: translate(-45%, -50%) scale(1);}

html.pc .service .btn-more.mobile_only{display: none;}

/* .service .btn-more .circle._2 {
    width: calc(15/22*1em);
    height: calc(15/22*1em);
} */

/* .service .btn-more:hover .circle._1 {
    width: calc(38/22*1em);
    height: calc(38/22*1em);
    transform: translate(-100%, -130%);
}

.service .btn-more:hover .circle._2 {
    width: calc(18/22*1em);
    height: calc(18/22*1em);
    transform: translate(-350%, -150%);
} */
@media screen and (max-width: 820px) {
    .service .btn-more {font-size: clamp(14px, 22/820*100vw, 22px);}
}