@charset "utf-8";

/* ---------- 공통 ---------- */

/* ---------- 인트로 ---------- */
.tsk_intro {padding:var(--sec-padding) 0;background:var(--white);overflow:hidden}
.tsk_intro .wrapper {display:flex;align-items:center;gap:clamp(44px,6vw,100px)}
.tsk_intro .txt_wrap {flex:1 1 52%}
.tsk_intro .use_list {display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,3.2vw,42px)}
.tsk_intro .use_list li {background:var(--gray-bg);border:solid 1px var(--line);border-radius:clamp(12px,1.4vw,18px);padding:clamp(16px,1.8vw,24px) clamp(16px,1.8vw,26px)}
.tsk_intro .use_list li strong {display:flex;align-items:center;gap:0 8px;font-size:clamp(15px,1.3vw,19px);font-weight:700;color:var(--tit)}
.tsk_intro .use_list li strong::before {content:'';display:block;width:6px;height:16px;border-radius:3px;background:var(--primary)}
.tsk_intro .use_list li:nth-child(even) strong::before {background:var(--secondary-deep)}
.tsk_intro .use_list li span {display:block;font-size:clamp(13px,1.05vw,15px);color:var(--txt-light);margin-top:7px}
.tsk_intro .img_wrap {flex:1 1 44%;position:relative;padding:0 0 clamp(30px,3.4vw,44px)}
.tsk_intro .img_wrap .main_img {position:relative;border-radius:clamp(20px,2.4vw,34px);overflow:hidden;aspect-ratio:16/11;box-shadow:0 24px 56px rgba(27,43,75,.18)}
.tsk_intro .img_wrap .main_img::after {content:'';position:absolute;inset:0;background:linear-gradient(200deg, rgba(15,28,54,0) 60%, rgba(15,28,54,.3) 100%);pointer-events:none}
.tsk_intro .img_wrap .main_img img {display:block;width:100%;height:100%;object-fit:cover}
.tsk_intro .img_wrap .tag_box {position:absolute;left:clamp(-14px,-1vw,-8px);bottom:0;display:flex;align-items:center;gap:0 14px;background:var(--secondary);border-radius:clamp(14px,1.6vw,18px);padding:clamp(14px,1.7vw,22px) clamp(18px,2.2vw,28px);box-shadow:0 16px 40px rgba(245,214,61,.45)}
.tsk_intro .img_wrap .tag_box .eng {font-size:clamp(22px,2.2vw,30px);font-weight:800;color:#1B2B4B;letter-spacing:.01em}
.tsk_intro .img_wrap .tag_box p {font-size:clamp(12.5px,1.05vw,15px);font-weight:600;color:#3B4455;line-height:1.45}

/* ---------- 이용 프로세스 ---------- */
.tsk_process {padding:var(--sec-padding) 0;background:var(--gray-bg)}
.tsk_process .ps_list {display:grid;grid-template-columns:repeat(4, 1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(44px,5vw,72px);list-style:none;padding:0}
.tsk_process .item {position:relative;background:var(--white);border:solid 1px var(--line);border-radius:clamp(16px,1.8vw,22px);overflow:hidden;transition:box-shadow .3s, transform .3s}
.tsk_process .item:hover {box-shadow:0 20px 50px rgba(27,43,75,.12);transform:translateY(-5px)}
.tsk_process .item figure {aspect-ratio:16/9;overflow:hidden}
.tsk_process .item figure img {width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tsk_process .item:hover figure img {transform:scale(1.05)}
.tsk_process .item:nth-child(1) figure img {object-position:center 30%}
.tsk_process .item:nth-child(2) figure img {object-position:center 42%}
.tsk_process .item:nth-child(3) figure img {object-position:center 62%}
.tsk_process .item:nth-child(4) figure img {object-position:center 42%}
.tsk_process .item .txt {padding:clamp(18px,2vw,28px) clamp(18px,2vw,28px) clamp(22px,2.4vw,34px);position:relative}
.tsk_process .item .num {position:absolute;top:clamp(-22px,-1.8vw,-18px);left:clamp(18px,2vw,28px);display:flex;align-items:center;justify-content:center;min-width:clamp(44px,4vw,56px);height:clamp(44px,4vw,56px);background:var(--primary);color:var(--white);font-size:clamp(17px,1.5vw,21px);font-weight:800;border-radius:14px;box-shadow:0 10px 24px rgba(51,132,254,.4)}
.tsk_process .item strong {display:block;font-family:'godo', sans-serif;font-size:clamp(18px,1.55vw,23px);font-weight:700;color:var(--tit);margin-top:clamp(20px,2vw,28px)}
.tsk_process .item p {font-size:clamp(13.5px,1.1vw,16px);color:var(--txt);line-height:1.65;margin-top:10px}

/* ---------- 기업 · 개인 탁송 ---------- */
.tsk_target {padding:var(--sec-padding) 0;background:var(--white)}
.tsk_target .tg_grid {display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,36px);margin-top:clamp(44px,5vw,72px)}
.tsk_target .tg_card {background:var(--white);border:solid 1px var(--line);border-radius:clamp(20px,2.2vw,30px);overflow:hidden;transition:box-shadow .3s, transform .3s}
.tsk_target .tg_card:hover {box-shadow:0 24px 60px rgba(27,43,75,.12);transform:translateY(-4px)}
.tsk_target .tg_card figure {display:flex;align-items:center;justify-content:center;aspect-ratio:16/8;overflow:hidden}
.tsk_target .tg_card.biz figure img {width:100%;height:100%;object-fit:cover}
.tsk_target .tg_card.psn figure img {width:100%;height:100%;object-fit:cover;object-position:center 30%}
.tsk_target .tg_card .txt {padding:clamp(24px,2.8vw,44px)}
.tsk_target .tg_card .badge {display:inline-flex;align-items:center;height:34px;border-radius:100px;padding:0 16px;font-size:clamp(13px,1.05vw,15px);font-weight:700}
.tsk_target .tg_card.biz .badge {background:var(--primary);color:var(--white)}
.tsk_target .tg_card.psn .badge {background:var(--secondary);color:#3B4455}
.tsk_target .tg_card .tit {display:block;font-family:'godo', sans-serif;font-size:clamp(22px,2vw,31px);font-weight:700;color:var(--tit);line-height:1.42;margin-top:16px}
.tsk_target .tg_card .txt > p {font-size:clamp(14px,1.2vw,17px);color:var(--txt);line-height:1.7;margin-top:14px}
.tsk_target .tg_card ul {display:flex;flex-direction:column;gap:9px 0;margin-top:clamp(18px,2vw,26px);border-top:solid 1px var(--line);padding-top:clamp(18px,2vw,26px)}
.tsk_target .tg_card li {display:flex;align-items:flex-start;gap:0 10px;font-size:clamp(13.5px,1.15vw,16.5px);font-weight:500;color:var(--txt)}
.tsk_target .tg_card li::before {content:'';flex:0 0 auto;width:19px;height:19px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233384FE'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain}
.tsk_target .tg_card.psn li::before {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23FFB800'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain}

/* ---------- 카인드 차별점 ---------- */
.tsk_diff {padding:var(--sec-padding) 0;background:var(--blue-bg)}
.tsk_diff .diff_grid {display:grid;grid-template-columns:repeat(4, 1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(44px,5vw,72px)}
.tsk_diff .item {background:var(--white);border:solid 1px var(--line);border-radius:clamp(16px,1.8vw,22px);padding:clamp(26px,2.8vw,42px) clamp(18px,2vw,30px);text-align:center;transition:box-shadow .3s, transform .3s}
.tsk_diff .item:hover {box-shadow:0 20px 50px rgba(51,132,254,.14);transform:translateY(-6px)}
.tsk_diff .item figure {display:flex;justify-content:center}
.tsk_diff .item figure img {width:clamp(96px,8.6vw,128px);height:auto}
.tsk_diff .item strong {display:block;font-family:'godo', sans-serif;font-size:clamp(18px,1.55vw,23px);font-weight:700;color:var(--tit);margin-top:clamp(16px,1.8vw,24px)}
.tsk_diff .item p {font-size:clamp(13.5px,1.1vw,16px);color:var(--txt);line-height:1.65;margin-top:12px}

/* ---------- 이용 팁 ---------- */
.tsk_tips {padding:var(--sec-padding) 0;background:var(--white)}
.tsk_tips .tip_grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:clamp(16px,1.8vw,28px);margin-top:clamp(44px,5vw,72px)}
.tsk_tips .item {background:var(--white);border:solid 1px var(--line);border-radius:clamp(16px,1.8vw,22px);padding:clamp(24px,2.6vw,38px);transition:border-color .3s, box-shadow .3s}
.tsk_tips .item:hover {border-color:var(--secondary-deep);box-shadow:0 18px 44px rgba(255,184,0,.14)}
.tsk_tips .item .badge {display:inline-flex;align-items:center;height:32px;background:var(--secondary);color:#1B2B4B;font-size:clamp(13px,1.1vw,15px);font-weight:800;border-radius:8px;padding:0 14px;letter-spacing:.06em}
.tsk_tips .item figure {display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #F6F9FF 0%, #EAF2FF 100%);border-radius:clamp(12px,1.4vw,16px);aspect-ratio:16/10;margin-top:clamp(16px,1.8vw,24px);overflow:hidden}
.tsk_tips .item figure img {width:auto;height:84%;object-fit:contain}
.tsk_tips .item strong {display:block;font-family:'godo', sans-serif;font-size:clamp(18px,1.5vw,22px);font-weight:700;color:var(--tit);margin-top:clamp(16px,1.8vw,24px)}
.tsk_tips .item p {font-size:clamp(13.5px,1.15vw,16.5px);color:var(--txt);line-height:1.7;margin-top:10px}

/* ---------- 반응형 ---------- */
@media screen and (max-width: 1200px) {
    .tsk_process .ps_list {grid-template-columns:repeat(2, 1fr)}
}
@media screen and (max-width: 1024px) {
    .sub_visual.tsk_visual {background-image:url('../img/stock/highway-aerial.jpg') !important;background-position:center}
    .tsk_intro .wrapper {flex-direction:column;align-items:stretch}
    .tsk_intro .img_wrap {width:100%;max-width:620px;margin:0 auto}
    .tsk_target .tg_grid {grid-template-columns:1fr}
    .tsk_diff .diff_grid {grid-template-columns:repeat(2, 1fr)}
    .tsk_tips .tip_grid {grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto}
}
@media screen and (max-width: 600px) {
    .sub_visual.tsk_visual {background-image:url('../img/stock/highway-aerial.jpg') !important;background-position:center}
    .tsk_process .ps_list {grid-template-columns:1fr}
}
@media screen and (max-width: 480px) {
    .tsk_intro .use_list {grid-template-columns:1fr}
    .tsk_intro .img_wrap .tag_box {left:0}
    .tsk_diff .diff_grid {grid-template-columns:1fr}
}