@charset "utf-8";
@import url(font.css);
@import url(swiper.min.css);
@import url('https://font.elice.io/css?family=Elice+DX+Neolli');

:root {
    --font-paper: 'paper';
    --font-noto: 'notosans';
}

/* CORS 오류 방지 및 폰트 통일 */
* {font-family: var(--font-paper), var(--font-noto), sans-serif !important;}

.dp_mb {display: none;}

#linkprice {overflow-x: clip; font-size: 16px; letter-spacing: 0;}
#linkprice .main-visual {position: relative; overflow: hidden; height: 1038px; color: #fff; background: url(../images/pic/pic_main_visual.webp) no-repeat center/cover;}
#linkprice .main-visual .bubble-effect {position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden;}
#linkprice .main-visual .bubble-effect span {position: absolute; bottom: -100px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); animation: bubbleUp 6s infinite ease-in;}
@keyframes bubbleUp {
    0% { transform: translateY(0) scale(1); opacity: 0.5; }
    100% { transform: translateY(-110vh) scale(0.1); opacity: 0; }
}

/* 물방울 개수 및 크기 대폭 확대 (25개) */
#linkprice .main-visual .bubble-effect span:nth-child(5n+1) { width: 40px; height: 40px; animation-duration: 7s; }
#linkprice .main-visual .bubble-effect span:nth-child(5n+2) { width: 20px; height: 20px; animation-duration: 5s; }
#linkprice .main-visual .bubble-effect span:nth-child(5n+3) { width: 50px; height: 50px; animation-duration: 9s; }
#linkprice .main-visual .bubble-effect span:nth-child(5n+4) { width: 15px; height: 15px; animation-duration: 4s; }
#linkprice .main-visual .bubble-effect span:nth-child(5n+5) { width: 30px; height: 30px; animation-duration: 6s; }

#linkprice .main-visual .bubble-effect span:nth-child(1) { left: 5%; animation-delay: 0s; }
#linkprice .main-visual .bubble-effect span:nth-child(2) { left: 12%; animation-delay: 1.5s; }
#linkprice .main-visual .bubble-effect span:nth-child(3) { left: 18%; animation-delay: 3s; }
#linkprice .main-visual .bubble-effect span:nth-child(4) { left: 24%; animation-delay: 0.5s; }
#linkprice .main-visual .bubble-effect span:nth-child(5) { left: 30%; animation-delay: 4s; }
#linkprice .main-visual .bubble-effect span:nth-child(6) { left: 36%; animation-delay: 2s; }
#linkprice .main-visual .bubble-effect span:nth-child(7) { left: 42%; animation-delay: 5.5s; }
#linkprice .main-visual .bubble-effect span:nth-child(8) { left: 48%; animation-delay: 1s; }
#linkprice .main-visual .bubble-effect span:nth-child(9) { left: 54%; animation-delay: 3.5s; }
#linkprice .main-visual .bubble-effect span:nth-child(10) { left: 60%; animation-delay: 0.8s; }
#linkprice .main-visual .bubble-effect span:nth-child(11) { left: 66%; animation-delay: 4.5s; }
#linkprice .main-visual .bubble-effect span:nth-child(12) { left: 72%; animation-delay: 2.5s; }
#linkprice .main-visual .bubble-effect span:nth-child(13) { left: 78%; animation-delay: 6s; }
#linkprice .main-visual .bubble-effect span:nth-child(14) { left: 84%; animation-delay: 1.2s; }
#linkprice .main-visual .bubble-effect span:nth-child(15) { left: 90%; animation-delay: 3.8s; }
#linkprice .main-visual .bubble-effect span:nth-child(16) { left: 2%; animation-delay: 5s; }
#linkprice .main-visual .bubble-effect span:nth-child(17) { left: 15%; animation-delay: 0.2s; }
#linkprice .main-visual .bubble-effect span:nth-child(18) { left: 28%; animation-delay: 4.2s; }
#linkprice .main-visual .bubble-effect span:nth-child(19) { left: 45%; animation-delay: 1.8s; }
#linkprice .main-visual .bubble-effect span:nth-child(20) { left: 58%; animation-delay: 3.2s; }
#linkprice .main-visual .bubble-effect span:nth-child(21) { left: 70%; animation-delay: 0.6s; }
#linkprice .main-visual .bubble-effect span:nth-child(22) { left: 82%; animation-delay: 5.2s; }
#linkprice .main-visual .bubble-effect span:nth-child(23) { left: 94%; animation-delay: 2.8s; }
#linkprice .main-visual .bubble-effect span:nth-child(24) { left: 33%; animation-delay: 1.4s; }
#linkprice .main-visual .bubble-effect span:nth-child(25) { left: 63%; animation-delay: 4.8s; }

#linkprice .main-visual .main-tit {position: relative; z-index: 2; top: 186px; width: 100%; text-align: center;}
#linkprice .main-visual .main-tit strong {display: block; font-size: 72px; font-weight: 500; line-height: 1.3;}
#linkprice .main-visual .main-tit p {font-size: 24px; font-weight: 400; margin-top: 16px;}
#linkprice .main-visual .main-tit .btn {margin-top: 46px;}
#linkprice .main-visual .main-tit .btn button {position: relative; display: inline-block; width: 250px; height: 70px; color: #fff; border-radius: 50px; border: 1px solid #fff; background: transparent; text-align: center; font-size: 18px; font-weight: 300; cursor: pointer; line-height: 1;}

#linkprice section h2 {font-size: 56px; line-height: 1.5; text-align: center; font-weight: 300; color: #000;}
#linkprice section h2 strong {display: block; font-weight: 600;}

#linkprice .why-global {position: relative; padding: 130px 0 200px; text-align: center;}
#linkprice .why-global:before {content: ''; position: absolute; z-index: -1; left: 50%; bottom: -876px; transform: translateX(-50%); width: 2600px; height: 1380px; background: #61A2CE; border-radius: 50%;}
#linkprice .why-global ul {display: flex; gap: 20px; max-width: 1420px; padding: 0 24px; margin: 76px auto 0;}
#linkprice .why-global ul li {position: relative; flex: 1; flex-grow: 1; height: 824px; padding: 70px 38px; text-align: left; border-radius: 30px; color: #fff; background-repeat: no-repeat; background-position: center; background-size: cover;}
#linkprice .why-global ul li em {display: block; font-style: normal; opacity: 0.5; font-weight: 500;}
#linkprice .why-global ul li strong {display: block; margin-top: 20px; font-size: 55px; font-weight: 600;}
#linkprice .why-global ul li a {display: inline-block; padding: 0 44px 0 54px; margin-top: 24px; color: #fff; line-height: 60px; font-size: 19px; font-weight: 300; border: 1px solid #fff; border-radius: 60px; transition: all .3s ease;}
#linkprice .why-global ul li a:hover {background: rgba(0,0,0,0.6);}
#linkprice .why-global ul li a span {padding-right: 36px; background: url(../images/ico/ico_down.png) no-repeat right center/26px;}
#linkprice .why-global ul li:after {content: 'LINKPRICE'; position: absolute; z-index: 1; left: -120px; bottom: 48px; transform-origin: right; transform: rotate(90deg); letter-spacing: 8px;}
#linkprice .why-global ul li.kr {background-image: url(../images/bg/bg_why_kr.webp);}
#linkprice .why-global ul li.jp {background-image: url(../images/bg/bg_why_jp.webp);}
#linkprice .why-global ul li.vn {background-image: url(../images/bg/bg_why_vn.webp);}

#linkprice .global-success {padding: 150px 0 170px; background: url(../images/bg/bg_success.webp) no-repeat center/cover;}
#linkprice .global-success h2 {color: #fff;}
#linkprice .global-success .two-global {max-width: 1114px; margin: 70px auto 0; padding: 0 24px; overflow: hidden;}
#linkprice .global-success .two-global .swiper-slide .title {padding: 30px 0; text-align: center; color: #050f1d; line-height: 1; border-radius: 30px; background: #dbe5eb;}
#linkprice .global-success .two-global .swiper-slide .title strong {font-size: 32px; font-weight: 900; display: block;}
#linkprice .global-success .two-global .swiper-slide .title p {margin-top: 12px; font-size: 18px; font-weight: 500;}
#linkprice .global-success .two-global .swiper-slide .cont {display: flex; flex-direction: column; align-items: center; padding: 76px 24px 100px; margin-top: 6px; border-radius: 30px; background: rgba(255,255,255,0.2);}
#linkprice .global-success .two-global .swiper-slide .cont ol {counter-reset: global; display: inline-block; color: #fff; font-size: 18px;}
#linkprice .global-success .two-global .swiper-slide .cont ol li {position: relative; padding-left: 72px; line-height: 1.3; font-weight: 300;}
#linkprice .global-success .two-global .swiper-slide .cont ol li + li {margin-top: 70px;}
#linkprice .global-success .two-global .swiper-slide .cont ol li:before {display: flex; align-items: center; justify-content: center; content: counter(global, decimal-leading-zero); counter-increment: global; position: absolute; z-index: 1; left: 0; top: 50%; width: 58px; height: 58px; border-radius: 50%; transform: translateY(-50%); background: #003041; font-size: 20px; font-family: 'Elice DX Neolli' !important;}
#linkprice .global-success .two-global .swiper-slide .cont ol li strong {display: block; margin-bottom: 12px; font-weight: 700;}
#linkprice .global-success .roll-btn {display: none;}

#linkprice .lp-process {padding: 180px 0; background: url(../images/bg/bg_process.webp) no-repeat center top/cover;}
#linkprice .lp-process ol {display: flex; justify-content: center; margin-top: 90px;}
#linkprice .lp-process ol li {margin: 0 -15px; text-align: center;}
#linkprice .lp-process ol li .icon {text-align: center; width: 300px; height: 300px; border-radius: 50%; border: 2px solid #fff; font-size: 21px; font-weight: 600; color: #fff; background-repeat: no-repeat; background-position: center 70px; background-size: 119px; padding-top: 210px;}
#linkprice .lp-process ol li em {position: relative; display: inline-block; margin-top: 102px; width: 140px; height: 48px; line-height: 48px; font-size: 21px; color: #fff; border-radius: 50px; font-style: normal;}
#linkprice .lp-process ol li em:before {content: ''; position: absolute; z-index: 1; left: 50%; top: -92px; width: 5px; height: 82px; transform: translateX(-50%); background-repeat: no-repeat;}
#linkprice .lp-process ol li.step01 em {background-color: #61A2CE}
#linkprice .lp-process ol li.step02 em {background-color: #3788B9}
#linkprice .lp-process ol li.step03 em {background-color: #18719F}
#linkprice .lp-process ol li.step04 em {background-color: #115E90}
#linkprice .lp-process ol li.step01 em:before {background-image: url(../images/ico/ico_line01.png);}
#linkprice .lp-process ol li.step02 em:before {background-image: url(../images/ico/ico_line02.png);}
#linkprice .lp-process ol li.step03 em:before {background-image: url(../images/ico/ico_line03.png);}
#linkprice .lp-process ol li.step04 em:before {background-image: url(../images/ico/ico_line04.png);}
#linkprice .lp-process ol li.step01 .icon {background-color: #61A2CE; background-image: url(../images/ico/ico_process01.png); background-position: left 80px top 70px;}
#linkprice .lp-process ol li.step02 .icon {background-color: #3788B9; background-image: url(../images/ico/ico_process02.png);}
#linkprice .lp-process ol li.step03 .icon {background-color: #18719F; background-image: url(../images/ico/ico_process03.png);}
#linkprice .lp-process ol li.step04 .icon {background-color: #115E90; background-image: url(../images/ico/ico_process04.png);}
#linkprice .lp-process ol li .con {margin-top: 24px; font-size: 25px; color: #272727;}

#linkprice .lp-client {padding: 170px 24px 180px; text-align: center; background: #14303a;}
#linkprice .lp-client h2 {font-size: 51px; color: #fff;}
#linkprice .lp-client h2 strong {display: inline;}
#linkprice .lp-client .client-logo {width: 100%; margin-top: 100px;}
#linkprice .lp-client .client-logo img {display: block; width: 100%;}

#linkprice .quick-inquiry .pop-call {position: fixed; z-index: 9999; right: 0; bottom: 200px; width: 74px; height: 238px; text-align: center; line-height: 1.2; font-size: 25px; font-weight: 700; color: #002f41; border-radius: 20px 0 0 20px; background: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); cursor: pointer;}
#linkprice .quick-inquiry .pop-call span {display: inline-block; width: 100%; padding-bottom: 44px; background: url(../images/ico/ico_inquiry.png) no-repeat center bottom;}
#linkprice .quick-inquiry .popup-wrap {display: none; position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 490px; padding: 20px 0 20px; text-align: center; background: #fff; border-radius: 30px;}
#linkprice .quick-inquiry .popup-wrap .pop-tit {font-size: 29px; font-weight: 700; color: #002F41;}
#linkprice .quick-inquiry .popup-wrap .pop-form {margin-top: 48px;}
#linkprice .quick-inquiry .popup-wrap .pop-inp {display: flex; flex-direction: column; gap: 7px; justify-content: flex-start; align-items: center;}
#linkprice .quick-inquiry .popup-wrap .pop-inp input {width: 400px; font-size: 21px; height: 66px; padding: 0 26px; border-radius: 50px; background: #f1f1f1}
#linkprice .quick-inquiry .popup-wrap .pop-inp input::placeholder {color: #ababab;}
#linkprice .quick-inquiry .popup-wrap .submit-btn {margin-top: 25px; width: 250px; height: 66px; border-radius: 50px; font-size: 18px; text-align: center; background: #003041; color: #fff;}
#linkprice .quick-inquiry .popup-wrap .pop-close {position: absolute; z-index: 1; right: 24px; top: 20px; width: 40px; height: 40px; background: url(../images/ico/ico_pop_close.svg) no-repeat center; text-indent: -9999px; cursor: pointer;}



/************************************* 반응형 *****************************************/
@media all and (max-width: 1200px){
    
}

@media all and (max-width: 992px){
    #linkprice .main-visual .main-tit strong {font-size: 60px;}

    #linkprice .why-global ul li {padding: 70px 28px;}
    #linkprice .why-global ul li a {padding: 0 24px 0 34px;}

    #linkprice .lp-process ol {flex-wrap: wrap; width: 600px; margin: 90px auto 0; gap: 20px 0;}
}

@media all and (max-width: 768px){
    .dp_pc {display: none;}
    .dp_mb {display: block;}

    #linkprice .main-visual {height: 450px; background-image: url(../images/pic/pic_main_visual_m.webp); background-position: center;}
    #linkprice .main-visual .main-tit {top: 80px}
    #linkprice .main-visual .main-tit strong {font-size: 28px; line-height: 1.4;}
    #linkprice .main-visual .main-tit p {font-size: 12px; line-height: 1.7; opacity: 0.5;}
    #linkprice .main-visual .main-tit .btn {margin-top: 15px;}
    #linkprice .main-visual .main-tit .btn button {font-size: 12px; width: 128px; height: 34px;}
    #linkprice .main-visual .main-tit .btn button:after {right: -40px; width: 34px; height: 34px; font-size: 25px; padding-bottom: 4px;}
    
    #linkprice section h2 {font-size: 22px;}

    #linkprice .why-global {padding: 34px 0 70px;}
    #linkprice .why-global:before {width: 820px; height: 435px; bottom: -243px;}
    #linkprice .why-global ul {flex-direction: column; margin-top: 24px; width: 256px; padding: 0;}
    #linkprice .why-global ul li {flex: auto; height: 288px; padding: 24px 20px; border-radius: 16px;}
    #linkprice .why-global ul li:after {left: -54px; bottom: 12px; font-size: 10px; letter-spacing: 2px;}
    #linkprice .why-global ul li em {font-size: 12px; line-height: 1.7; opacity: 0.8;}
    #linkprice .why-global ul li strong {font-size: 28px; margin-top: 8px;}
    #linkprice .why-global ul li a {padding: 0 24px; font-size: 12px; line-height: 34px;}
    #linkprice .why-global ul li a span {padding-right: 24px; background-size: 15px;}
    #linkprice .why-global ul li.kr {background-image: url(../images/bg/bg_why_kr_m.webp);}
    #linkprice .why-global ul li.jp {background-image: url(../images/bg/bg_why_jp_m.webp);}
    #linkprice .why-global ul li.vn {background-image: url(../images/bg/bg_why_vn_m.webp);}

    #linkprice .global-success {padding: 50px 0 70px; background-image: url(../images/bg/bg_success_m.webp);}
    #linkprice .global-success .two-global {position: relative; margin-top: 20px; padding: 0 50px;}
    #linkprice .global-success .two-global .swiper-slide .title {padding: 10px; border-radius: 14px;}
    #linkprice .global-success .two-global .swiper-slide .title strong {font-size: 14px;}
    #linkprice .global-success .two-global .swiper-slide .title p {margin-top: 8px; font-size: 10px;}
    #linkprice .global-success .two-global .swiper-slide .cont {justify-content: center; height: 297px; padding: 35px;}
    #linkprice .global-success .two-global .swiper-slide .cont ol li {padding-left: 37px; font-size: 10px;}
    #linkprice .global-success .two-global .swiper-slide .cont ol li + li {margin-top: 20px;}
    #linkprice .global-success .two-global .swiper-slide .cont ol li:before {width: 25px; height: 25px; font-size: 8px;}
    #linkprice .global-success .two-global .swiper-slide .cont ol li strong {margin-bottom: 8px;}
    #linkprice .global-success .roll-btn {display: block;}
    #linkprice .global-success .roll-btn button {position: absolute; z-index: 1; top: 50%; text-indent: -9999px;}
    #linkprice .global-success .roll-btn button.swiper-prev {left: 10px; width: 40px; height: 50px; background: url(../images/ico/ico_two_prev.svg) no-repeat center;}
    #linkprice .global-success .roll-btn button.swiper-next {right: 10px; width: 40px; height: 50px; background: url(../images/ico/ico_two_next.svg) no-repeat center;}
    
    #linkprice .lp-process {padding: 56px 0 74px; background-image: url(../images/bg/bg_process_m.webp);}
    #linkprice .lp-process ol {width: 300px; margin: 25px auto 0;}
    #linkprice .lp-process ol li {margin: 0 -7px;}
    #linkprice .lp-process ol li .icon {width: 135px; height: 135px; padding-top: 90px; font-size: 12px; background-position: center top 30px; background-size: 50px;}
    #linkprice .lp-process ol li.step01 .icon {background-position: center top 30px;}
    #linkprice .lp-process ol li em {width: 60px; height: 24px; margin-top: 36px; line-height: 24px; font-size: 10px;}
    #linkprice .lp-process ol li em:before {height: 36px; top: -36px; background-size: 2px; background-position: center top;}
    #linkprice .lp-process ol li .con {font-size: 13px; margin-top: 10px;}

    #linkprice .lp-client {padding: 42px 0 52px;}
    #linkprice .lp-client h2 {font-size: 22px;}
    #linkprice .lp-client .client-logo {margin-top: 24px;}

    #linkprice .quick-inquiry .pop-call {bottom: 50px; width: 54px; height: 180px; font-size: 18px;}
    #linkprice .quick-inquiry .pop-call span {padding-bottom: 24px; background-size: 24px;}

    #linkprice .quick-inquiry .popup-wrap {width: 320px; padding: 20px 0 20px;}
    #linkprice .quick-inquiry .popup-wrap .pop-tit {font-size: 22px;}
    #linkprice .quick-inquiry .popup-wrap .pop-form {margin-top: 24px;}
    #linkprice .quick-inquiry .popup-wrap .pop-inp input {width: 280px; font-size: 18px;}
    #linkprice .quick-inquiry .popup-wrap .pop-inp input::placeholder {font-size: 18px;}
    #linkprice .quick-inquiry .popup-wrap .submit-btn {margin-top: 24px;}
    #linkprice .quick-inquiry .popup-wrap .pop-close {width: 30px; height: 30px; background-size: 100%;}



}

@media all and (max-width: 640px){
}

/* 공통: 입력 필드 영역 */
.pop-form .pop-inp {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* input/textarea를 동일한 pill 스타일로 */
.pop-form .pop-inp input,
.pop-form .pop-inp textarea {
    width: 400px;
    box-sizing: border-box;

    height: 56px;                /* input 기본 높이 */
    padding: 0 20px;

    border: 0;
    border-radius: 999px;        /* pill */
    background: #f3f4f6;         /* 연한 회색 */
    color: #111827;
    font-size: 16px;

    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* textarea는 여러 줄이므로 높이/패딩만 조정 */
.pop-form .pop-inp textarea {
    height: 140px;               /* 원하는 높이 */
    padding: 18px 20px;
    border-radius: 22px;         /* 너무 둥글면 어색할 수 있어 살짝 줄임 */
    resize: none;                /* UI 고정 */
    line-height: 1.5;
}

/* placeholder 톤 */
.pop-form .pop-inp input::placeholder,
.pop-form .pop-inp textarea::placeholder {
    color: #9ca3af;
}

/* 포커스 효과 (input/textarea 동일) */
.pop-form .pop-inp input:focus,
.pop-form .pop-inp textarea:focus {
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.12);
}

/* 개인정보 동의 영역 */
.pop-consent {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width:400px;
    text-align: center;
}

.consent-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #374151;
}

.consent-check em {
    font-style: normal;
    color: #ef4444;
    font-weight: 600;
}

/* 기본 체크박스 숨기고 커스텀 UI 사용 */
.consent-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 커스텀 체크 UI */
.chk-ui {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #f3f4f6;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.18);
    display: inline-block;
    position: relative;
}

/* 체크 표시 */
.consent-check input[type="checkbox"]:checked + .chk-ui::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 7px;
    height: 12px;
    border-right: 2px solid #111827;
    border-bottom: 2px solid #111827;
    transform: rotate(40deg);
}

/* 키보드 포커스 접근성 */
.consent-check input[type="checkbox"]:focus + .chk-ui {
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.12);
}

/* 약관 보기 링크 */
.consent-link {
    font-size: 13px;
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 에러 메시지 */
.pop-error {
    min-height: 18px; /* 공간 확보 */
}

/* 동의 안했을 때 submit 버튼 시각 처리(선택) */
.pop-form.is-invalid .submit-btn {
    margin: 10px 0 0;
    font-size: 13px;
    color: #ef4444;
    opacity: 0.9;
}

.quick-inquiry .collection-agree {
    width:400px;
    text-align:left;
    font-size:14px;
    padding-bottom:10px;
}

@media all and (max-width: 768px) {
    .pop-form .pop-inp textarea{
        width:280px;
        height:80px;
    }

    .quick-inquiry .collection-agree {
        width:270px;
        text-align:left;
        font-size:14px;
        padding-bottom:10px;
    }
}

#quick-inquiry {
    border:1px solid #ddd;
}