/* ===================== CSS Variables ===================== */
html {
  scroll-behavior: smooth;
}
:root{
    --brand:#9646e2;
    --basic: #000;
    --bg:#ffffff;
    --line:#c9c9c9;
    --border: #dcdfe5;
    --purple:#6635e5;
    --margenta:#eb47b7;
    --sky:#349bd0;
    --bg-top: 90px;
    --txt-left:clamp(440px, 25vw, 900px);
    --footer:#f1f1f1;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('/images/bidq/etc/GmarketSansLight.otf') format("opentype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('/images/bidq/etc/GmarketSansMedium.otf') format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('/images/bidq/etc/GmarketSansBold.otf') format("opentype");
    font-weight: bold;
    font-style: normal;
}

/* ===================== Base / Reset ===================== */
* {margin:0; padding:0; box-sizing:border-box; font-family: 'GmarketSans', sans-serif;}
body {font-family: 'GmarketSans', sans-serif;}
img {max-width:100%; height:auto; display:block;}
nav{display:block;margin-left:auto;}
nav a{margin-left:20px;text-decoration:none;color:#000;font-size:18px;font-weight:500;}
nav a.txt1{color: var(--brand);font-weight: 500;}
nav a.join{background:#9646e2;color: var(--bg);border-radius:20px;font-weight:500;padding:5px 14px 3px 14px;}
div,button,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,li,ol,th,td,p,blockquote,form,fieldset,legend,select,input,textarea,pre{margin:0;padding:0;word-break:break-all;}


/* ===================== Visual ===================== */
.top {background:#fff;padding:20px 0;}
.content{width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}

.area_visual{width: 100%;min-height: 878px;background:#fce6eb;text-align:center;padding: 25px 5% 30px 5%;}
/*background: #fff7e3 url(/static/images/sgmaster/bg_head.png)center no-repeat;*/
.area_visual img{text-align:center;margin:0 auto;}
.visual_text {padding: 20px 0 40px 0; letter-spacing: -1px;}
.visual_text h1 {font-size: 56px;font-weight:bold;color: var(--basic);letter-spacing: -0.05em;}
.visual_text h1 b {color: var(--brand);}
.visual_text p {font-size:26px; color:#2f3028; font-weight: 400;}
.visual_main_img{margin-top:-40px !important;max-width:100%;}

.btn_wrap{width: 100%;max-width: 1600px;margin: 20px auto 30px;text-align: center;}

.btn_recommend{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 90px;
    border-radius: 50px;
    background: linear-gradient(
        to right,
        #a263fd 0%,
        #e06aed 50%,
        #a263fd 100%
    );

    box-shadow:
        0 14px 25px rgba(0, 0, 0, 0.35),
        inset 0 -4px 8px rgba(0,0,0,0.15);
    text-decoration: none;

    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        box-shadow .28s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}
.btn_recommend span{font-weight: 500;letter-spacing: -0.04em;font-size: clamp(22px, 4.2vw, 44px);color:#fff;text-align:center;}
.btn_recommend:hover{
    transform: translateY(-4px);
    box-shadow:
        0 18px 30px rgba(0, 0, 0, 0.4),
        inset 0 -4px 10px rgba(0,0,0,0.2);
}

/*회원추천방법*/
.section1{padding:80px 0;background:#d2ddf5;text-align:center;margin:0 auto;}
.section1 .inner {position: relative;width:100%;}
.section1 .title {margin:0 auto;font-size:56px;font-weight:900;letter-spacing:-0.03em;color: var(--basic);}
.section1 p {color:#2f3028;font-size:26px;font-weight:400;letter-spacing:-0.03em;line-height:34px;}
.section1 span {color: var(--basic);font-size:40px;font-weight:500;letter-spacing:-0.03em;line-height:34px;}
.section1 span .purple {color: var(--purple);font-weight: 700;}
.section1 span .margenta {color: var(--margenta);font-weight: 700;border-bottom: 2px solid var(--margenta);padding-bottom: 1px;}
.section1 .txtS{color:#2f3028;font-size:24px;font-weight:300;letter-spacing:-0.04em;line-height:1.6;text-align:left;display:block;max-width:1180px;margin:0 auto;}
.section1 .txtSM{color:var(--margenta);font-size:24px;font-weight:300;letter-spacing:-0.04em;line-height:1.6;border-bottom: 1px solid var(--margenta);padding-bottom: 1px;}

.section1 .txtS1{display:block;text-align:center;margin:0 auto;margin-top:-25px;}
.section1 .txtS1 img{width: 22px;height: auto;flex-shrink: 0;display: inline-block;vertical-align: middle;margin-right: 2px;padding:0px;}
.section1 .txtS1_text{display:inline-block;position:relative;padding-left:24px;text-align:left;font-size:24px;line-height:1.6;letter-spacing:-0.03em;color:#2f3028;font-weight:300;}
.section1 .txtS1_text::before{
    content:"";
    position:absolute;
    left:0;
    top:0.35em;
    width:18px;
    height:18px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M3 7l3 3 5-6' stroke='%23eb47b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

.section1 .txtS1M{color:var(--margenta);font-size:24px;font-weight:400;letter-spacing:-0.04em;line-height:1.6;}
.section1 img {margin:0 auto;padding:50px 0;height:auto;}
.section1 .btn_wrap{width: 100%;max-width: 1600px;margin: 50px auto 50px;text-align: center;display: flex;justify-content: center;align-items: center;gap: 22px;flex-wrap: wrap;}
.section1 .btn_wrap .btn_side_img{display: block;width: 213px;height: 44px;margin: 0;padding: 0; vertical-align: middle; object-fit: contain;}
.section1 .btn_row{display: flex;align-items: center;justify-content: center;gap: 8px;}
.section1 .btn_link,
.section1 .btn_kakao{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 310px;     /* 버튼 가로폭 통일 */
    height: 84px;         /* 버튼 높이 통일 */
    padding: 0 36px;      /* 패딩 통일 */
    border-radius: 50px;
    text-decoration: none;
    box-shadow:
        0 14px 25px rgba(0, 0, 0, 0.35),
        inset 0 -4px 8px rgba(0,0,0,0.15);
    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        box-shadow .28s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}

.section1 .btn_link{background: #8962ed;}
.section1 .btn_kakao{background: #eeda2f;}

.section1 .btn_link .icon,
.section1 .btn_kakao .icon{flex: 0 0 auto;object-fit: contain;padding: 0;margin: 0;display: inline-block;}

/* 링크복사 아이콘 */
.section1 .btn_link .icon{width: 34px;height: 34px;}

/* 카카오톡 아이콘 */
.section1 .btn_kakao .icon{width: 42px;height: 42px;}

.section1 .btn_link span,
.section1 .btn_kakao span{font-weight: 500;letter-spacing: -0.04em;font-size: 40px;line-height: 1;text-align: center;white-space: nowrap;}

.section1 .btn_link:hover,
.section1 .btn_kakao:hover{
    transform: translateY(-6px);
    box-shadow:
        0 20px 35px rgba(0, 0, 0, 0.4),
        inset 0 -4px 10px rgba(0,0,0,0.2);
}

.section1 .btn_link span{color:#fff;}
.section1 .btn_kakao span{color:#3e2723;}

.section1 .flex_row{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;}
.section1 .flex_row .login_img{width: 120px;height: auto;display: inline-block;}
.section1 .btn_login_benefit{display:inline-flex;align-items:center;gap:6px;background:#7f7f7f;padding:5px 12px;border-radius:50px;height:34px;text-decoration: none;}
.section1 .btn_login_benefit:hover{text-decoration: none;}
.section1 .btn_login_benefit span{font-weight: 300;letter-spacing: -0.04em;font-size: 16px;color: var(--bg);text-decoration: none;}

.section1 .recommend_img1,
.section1 .recommend_img3{max-width: 328px;width: 100%;height: auto;margin: 0 auto;padding: 50px 0;}

.section1 .recommend_img2,
.section1 .recommend_img4{max-width: 1230px;width: 100%;height: auto;margin: 0 auto;padding: 40px 0;}

/*비드큐 입니다.*/
/*.section2{padding:80px 0;background:#222224 url('/images/bidq/recommend/recommend_img8.png?ver=2') no-repeat;background-position: 62% var(--bg-top);text-align:center;margin:0 auto;}             */
.section2{padding:80px 0;background:#222224;text-align:center;margin:0 auto;}             
.section2 .inner {position: relative;width:100%;}
.section2 .title {margin:0 auto;font-size:56px;font-weight:900;letter-spacing:-0.03em;color: var(--bg);}
.section2 .point {margin:0 auto;font-size:56px;font-weight:900;letter-spacing:-0.03em;color: #3fdbee;}
.section2 p {color: var(--bg);font-size:26px;font-weight:400;letter-spacing:-0.03em;line-height:34px;}
/*.section2 .txtG {padding: calc(var(--bg-top) + 70px) 0 0 var(--txt-left);text-align:left;}*/
/*.section2 .txtG {padding: calc(var(--bg-top) + 70px) 0 0 29%;text-align:left;}*/
.section2 .txtBG{position: relative;background:#fff;width:757px;margin:0 auto;border-radius:30px;overflow:visible;margin-top:50px;}
/* 떠있는 이미지 */
.section2 .floating_img{
    position: absolute;
    top: -210px;      /* 위로 튀어나오게 */
    right: -300px;    /* 오른쪽 배치 */
    width: 503px;
    height: auto;
    z-index: 2;      /* 박스보다 위 */
    transition:opacity .3s ease, transform .3s ease;
}
.section2 .txtG {position: relative;padding:30px;text-align:left;z-index: 1;}
.section2 .txtG .txt1{font-size:28px;font-weight:300;letter-spacing:-0.02em;color: var(--basic);line-height: 1.8;}
.section2 .txt2{margin-top:70px;align-items:center;font-size:50px;font-weight:900;letter-spacing:-0.03em;color: #3fdbee;}

/*FAQ*/
.section3{padding:80px 0 8px 0;background:#f7f7f7;text-align:center;margin:0 auto;}             
.section3 .inner {position: relative;width:100%;}
.section3 .title {margin:0 auto;font-size:56px;font-weight:900;letter-spacing:-0.03em;color:var(--sky);}
.section3 p {color: var(--basic);font-size:26px;font-weight:400;letter-spacing:-0.03em;line-height:34px;}
.section3 .txtG{margin:0 auto;padding:50px 20%;text-align:left;}
.section3 .txtG .txt1{color: var(--basic);font-size:30px;font-weight:400;line-height:1;}
.section3 .txtG .txt2{color: var(--basic);font-size:26px;font-weight:300;line-height:1.5;}
.section3 .txtG .txt2 .point{color: var(--sky);font-size:26px;font-weight:400;line-height:1.5;}
.section3 .line{border-top:1px solid var(--line);margin:30px 0 30px 0;}

/*footer*/
footer {padding: 40px 0 30px 0; background: #333238; text-align: center;}
footer * {font-size: 22px; color: var(--footer);}
footer p {font-size: 22px; line-height: 50px; margin-bottom: 30px; font-weight: 400;}

/* ===================== step 이미지 모바일 큰부분 ===================== */
@media (max-width:1280px) and (max-height:900px){
    .section1 .recommend_img1,
    .section1 .recommend_img3{max-width: 25%;}

    .section1 .recommend_img2,
    .section1 .recommend_img4{max-width: 65%;}

    .section1{padding:50px 40px;}

    .section2 .txtG {padding: calc(var(--bg-top) + 70px) 0 0 13%;text-align:left;}
}

@media (max-width:1024px){
    .section2 .txtG{
        padding: 13% 13% 0;
        text-align:left; 
    }
}

/* ===================== Tablet (1100px 이하) ===================== */
@media (max-width:1100px) {
    .top {padding: 16px 0;}

    .content {width:100%;flex-direction:column;justify-content:center;align-items:center;padding:0 16px;gap:16px;}
    .content h1 {width:100%;text-align:center;}
    .content h1 img {margin:0 auto;max-width:180px;}

    nav {margin-left:0;width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;}
    nav a {margin-left:0;font-size:16px;line-height:1.4;}
    nav a.join {padding:6px 14px 4px 14px;border-radius:18px;}

    .area_visual {min-height: auto;padding: 40px 4% 50px;background-size: cover;}
    .area_visual > img:first-child {max-width: 220px;}
    .area_visual > img:nth-of-type(2) {max-width: 90%;margin-top: -10px !important;}

    .visual_text {padding: 18px 0 28px 0;}
    .visual_text h1 {font-size: 40px;line-height: 1.25;letter-spacing: -0.04em;}
    .visual_text p {font-size: 20px;line-height: 1.5;margin-top: 10px;}
    .visual_main_img { max-width:90%; margin-top:-10px !important; }

    .btn_wrap {margin: 28px auto 10px;}
    .btn_recommend {padding: 16px 52px;border-radius: 40px;}
    .btn_recommend span {font-size: 28px;}

    /* 텍스트 전체 축소 */
    .section1{padding:60px 20px;}
    .section1 .title{font-size:42px;line-height:1.3;}
    .section1 p{font-size:20px;line-height:2.5;}
    .section1 span{font-size:30px;line-height:1.4;}

    /* 하단 설명 */
    .section1 .txtS{max-width:1180px;margin:0 auto;text-align:left;padding:0 30px;}
    .section1 .txtS,
    .section1 .txtSM{font-size:18px;line-height:1.6;}
    .section1 .txtS1{font-size: 18px;}
    .section1 .txtS1 img{width: 22px;}
    .section1 .txtS1M{font-size: 18px;line-height: 1.6;}
    .section1 .txtS1_text{font-size:18px;line-height:1.6;padding-left:22px;}
    .section1 .txtS1_text::before{width:16px;height:16px;}

    /* 이미지 */
    .section1 img{max-width:90%;padding:30px 0;}

    /* 버튼 */
    .section1 .btn_link,
    .section1 .btn_kakao{min-width:260px;height:70px;padding:0 24px;}

    .section1 .btn_link span,
    .section1 .btn_kakao span{font-size:28px;}

    .section1 .btn_login_benefit{padding:5px 12px;}
    .section1 .btn_login_benefit span{font-size:14px;}
    .section1 .btn_login_benefit .icon{width:14px;}

    .section1 .recommend_img1,
    .section1 .recommend_img3{max-width: 25%;padding: 30px 0;}

    .section1 .recommend_img2,
    .section1 .recommend_img4{max-width: 80%;padding: 30px 0;}

    .section2{
        padding:40px 32px;background: #222224;
        /*background-position: 92% 52px;
        background-size: 88%;*/
    }

    .section2{
    padding:40px 32px;background: #222224;
    /*background-position: 92% 52px;
    background-size: 88%;*/
    }

    .section2 .title,
    .section2 .point{font-size:42px;line-height:1.3;}
    .section2 p{font-size:20px;line-height:1.5;}
    .section2 .txtG{
        /*padding: 13% 13% 0;
        text-align:left;*/
        background:#fff;padding:20px;border-radius:12px;margin:30px 10px 0;text-align:left;width:80%
    }

    .section2 .txtG .txt1{font-size:18px;line-height:1.7;}
    .section2 .txt2{margin-top:65px;font-size:34px;}

    .section2 .floating_img{
        display:none;
    }

    .section3{padding:60px 20px 20px;}
    .section3 .title{font-size:42px;line-height:1.4;}
    .section3 p{font-size:20px;line-height:1.5;}
    .section3 .txtG{padding:25px 10%;}
    .section3 .txtG .txt1{font-size:22px;}
    .section3 .txtG .txt2{font-size:20px;}
    .section3 .txtG .txt2 .point{font-size:20px;}
}

/* ===================== 768px 이하) ===================== */
@media (max-width:768px){
    .section2 .txtBG{
        width:100%;
        max-width:600px;
        margin-top:30px;
        border-radius:20px;
        margin:0 auto;
    }

    .section2 .floating_img{
        width:260px;
        top:-100px;
        right:-60px;
        opacity:1;
    }
}


/* ===================== Mobile (600px 이하) ===================== */
@media (max-width: 600px){
    .section1 .btn_link span{font-size: 22px;}
}


/* ===================== Mobile (480px 이하) ===================== */
@media (max-width: 480px){
    .top {padding:14px 0;}

    .content {padding:0 12px;gap:14px;}
    .content h1 img {max-width:150px;}

    nav {gap:8px 10px;}
    nav a {font-size:16px;}
    nav a.join {padding:5px 12px 3px 12px;font-size:13px;}

    .area_visual {min-height: auto;padding: 30px 16px 40px; background-size: cover; background-position: center;}
    .area_visual > img:first-child {max-width: 170px;}
    .area_visual > img:nth-of-type(2) {max-width: 100%;margin-top: 0 !important;}

    .visual_text {padding: 16px 0 22px 0;}
    .visual_text h1 {font-size: 30px;line-height: 1.3;letter-spacing: -0.04em;}
    .visual_text p {font-size: 17px;line-height: 1.45;margin-top: 8px;}
    .visual_main_img { max-width:100%; margin-top:0 !important; }

    .btn_wrap {margin: 22px auto 0;}
    .btn_recommend {width: 100%;max-width: 320px;padding: 15px 20px;border-radius: 32px;}
    .btn_recommend span {font-size: 20px;line-height: 1.3;}

    .section1{padding:50px 16px;}
    .section1 .title{font-size:28px;}
    .section1 p{font-size:16px;}
    .section1 span{font-size:20px;}

    /* 이미지 */
    .section1 img{max-width:100%;padding:24px 0;}

    /* 버튼 세로 정렬 */
    .section1 .btn_wrap{flex-direction:column;gap:14px;}

    .section1 .btn_link{height: 50px;min-width: 150px;padding: 0 14px;}
    .section1 .btn_link,
    .section1 .btn_kakao{width:100%;max-width:300px;height:50px;}
    .section1 .btn_link span,
    .section1 .btn_kakao span{font-size:16px;}

    .section1 .btn_side_img{width: 90px;max-width: 30vw;height:28px;}

    /* 아이콘 */
    .section1 .btn_link .icon{width:26px;height:26px;}
    .section1 .btn_kakao .icon{width:32px;height:32px;}

    /* 설명 텍스트 */
    .section1 .txtS{padding: 0 20px;line-height: 1.7;}
    .section1 .txtS,
    .section1 .txtSM{font-size:14px;}

    .section1 .txtS1{text-align:center;}
    .section1 .txtS1 img{width: 18px;}
    .section1 .txtS1M{font-size: 14px;line-height: 1.6;}

    .section1 .txtS1_text{font-size:14px;line-height:1.6;padding-left:20px;}
    .section1 .txtS1_text::before{width:12px;height:12px;left:0.47em;top:0.23em;}

    .section1 .btn_login_benefit{padding:4px 10px;gap:4px;}
    .section1 .btn_login_benefit span{font-size:12px;letter-spacing:-0.02em;}
    .section1 .btn_login_benefit .icon{width:12px;}

    .section1 .recommend_img1,
    .section1 .recommend_img3{max-width: 50%;padding: 20px 0;}

    .section1 .recommend_img2,
    .section1 .recommend_img4{max-width: 100%;padding: 20px 0;}

    .section1 .recommend_img2{padding-bottom: 0;} 

    .section1 .btn_wrap{margin-top: 30px;}

    .section1 .check_icon{width:16px;height:16px;}

    .section2{padding:30px 16px;background: #222224;}
    .section2 .title,
    .section2 .point{font-size:26px;line-height:1.3;}
    .section2 p{font-size:16px;line-height:1.5;}
    .section2 .txtG{background:#fff;padding:20px;border-radius:12px;margin:10px 10px 0;text-align:left;}
    .section2 .txtG .txt1{font-size:14px;line-height:1.7;color:#222;}
    .section2 .txt2{margin-top:24px;font-size:22px;}

    .section2 .txtBG{
        width:90%;
        max-width:100%;
        margin-top:20px;
        border-radius:12px;
        overflow:hidden;
        background:#fff;
    }
    .section2 .floating_img{
        display: none;
    }

    .section3{padding:40px 36px 25px;}
    .section3 .title{font-size:26px; line-height:1.3;}
    .section3 p{font-size:16px;line-height:1.5;}
    .section3 .txtG{padding:10px 0;}
    .section3 .txtG .txt1{font-size:16px;line-height:1.5;}
    .section3 .txtG .txt2{font-size:14px;line-height:1.5;}
    .section3 .txtG .txt2 .point{font-size:14px;}
    .section3 .line{margin:10px 0;}

    footer {padding: 20px 0 10px 0;}
    footer * {font-size: 14px;}
    footer p {font-size: 14px;}

}


/* ===================== 375px 기준 ===================== */
@media (max-width: 380px){
    .content {padding:0 10px;gap:12px;}
    .content h1 img {max-width:135px;}

    nav {gap:6px 8px;}
    nav a {font-size:13px;letter-spacing:-0.03em;}
    nav a.join {padding:4px 10px 2px 10px;font-size:12px;border-radius:16px;}

    .area_visual {padding: 24px 12px 34px;background-size: cover;}
    .area_visual > img:first-child {max-width: 145px;}
    .area_visual > img:nth-of-type(2) {max-width: 100%;}

    .visual_text {padding: 14px 0 18px 0;}
    .visual_text h1 {font-size: 26px;line-height: 1.3;}
    .visual_text p {font-size: 15px;line-height: 1.45;}
    .visual_main_img { max-width:100%; margin-top:0 !important; }

    .btn_wrap {margin: 18px auto 0;}
    .btn_recommend { width: 100%;max-width: 280px;padding: 13px 16px;border-radius: 28px;}
    .btn_recommend span {font-size: 17px;}

    .section1{padding:40px 12px;}
    .section1 .title{font-size:24px;}
    .section1 span{font-size:18px;}
    .section1 p{font-size:14px;}

    .section1 .btn_link,
    .section1 .btn_kakao{max-width:260px;height:54px;border-radius:28px;}

    .section1 .btn_link span,
    .section1 .btn_kakao span{font-size:16px;}

    .section1 .btn_wrap{gap:10px;}

    .section1 .txtS{padding: 0 20px;line-height: 1.7;}
    .section1 .txtS1{font-size: 12px;}
    .section1 .txtS1 img{width: 16px;}
    .section1 .txtS1M{font-size: 12px;line-height: 1.5;}
    .section1 .txtS1_text{font-size:12px;line-height:1.5;padding-left:18px;}
    .section1 .txtS1_text::before{width:12px;height:12px;}

    .section1 .btn_login_benefit{padding:3px 8px;}
    .section1 .btn_login_benefit span{font-size:11px;}
    .section1 .btn_login_benefit .icon{width:11px;}

    .section1 .recommend_img1,
    .section1 .recommend_img3{padding: 16px 0;}
    .section1 .recommend_img2,
    .section1 .recommend_img4{padding: 16px 0;}
    .section1 .recommend_img2{padding-bottom: 0;}

    .section1 .btn_wrap{margin-top: 28px;}

    .section2 .title,
    .section2 .point{font-size:20px;}
    .section2 .txtG .txt1{font-size:13px;}
    .section2 .txt2{font-size:17px;}

    .section3 .title{font-size:22px;}
    .section3 .txtG .txt1{font-size:14px;}
    .section3 .txtG .txt2{font-size:12px;}

}