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

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

@font-face {
  font-family: 'GmarketSans';
  src: url('/static/images/customer/serviceinfo/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;}

/*인포21C 입니다.*/
/*.section2{padding:80px 0;background:#222224 url('/static/images/recommend/recommend_img8.png?ver=1') 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:1.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 .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{
    width: 380px;
    top: -160px;
    right: -180px;
    opacity:1;
  }*/
  .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:14px;}
  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;}

}