/* 비주얼 */
.campaign{padding-top:0; padding-bottom:0}
.campaign .text-wrap > *{text-align:center}
.campaign .text-wrap *:not(:first-child){margin-top:16px}
.campaign .section-title::before{left:50%; transform:translateX(-50%)}
.campaign .section-sub-title{font-size:18px; color:var(--smt-brand-e)}
.campaign .visual{padding-top:100px; padding-bottom:0; background-color:#f4edde; position:relative; box-shadow:inset 0px -70px #DED7CA}
.campaign .visual .desc{margin-bottom:40px}
.campaign .visual-img{width:100%; max-width:720px; margin:0 auto; overflow:hidden}
.campaign .visual-img img{display:block; width:100%; height:auto}

@media(min-width:1070px){
  .campaign .visual{padding-top:170px; background-color:#f4edde; box-shadow:inset 0px -100px #DED7CA}
  .campaign .section-sub-title{font-size:20px}
}


/* step */
.step{padding-top:60px; padding-bottom:60px; overflow:hidden}
.step .container-sm{max-width:720px}
.step .campaign-info *:not(:first-child){margin-top:10px}
.step .number{font-size:15px; color:#79716B}
.step .campaign-title{font-size:24px; font-weight:600; color:var(--smt-brand-e)}
.step .btn{margin-top:32px}

@media(min-width:1070px){
  .step{padding-top:80px; padding-bottom:80px}
  .step .btn{margin-top:40px}
  .step .campaign-info > *:not(:first-child){margin-top:16px}
  .step .number{font-size:16px}
  .step .campaign-title{font-size:28px; font-weight:600}
}


/* step 1 */
.step1{background-color:#f8f6f6}
.step1 .media-wrap{margin-top:40px}
.step1 .media-wrap .row{margin-left:-6px; margin-right:-6px}
.step1 .media-wrap .media-item{margin-bottom:24px; padding-left:6px; padding-right:6px}
.step1 .media-wrap .item-title{font-size:15px; font-weight:600}
.step1 .media-wrap .item-title .ico::before{margin:0}
.step1 .media-wrap .photo{position:relative; width:100%; padding-top:56.25%; overflow:hidden; transition:opacity .3s ease}
.step1 .media-wrap .photo img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:.3s ease}
.step1 .media-wrap .media-item:hover .photo img{transform:scale(1.05)}
.step1 .media-wrap .media-item:hover .photo::after{opacity:1}

@media(min-width:768px){
  .step1 .media-wrap .row{margin-left:-10px; margin-right:-10px}
  .step1 .media-wrap .media-item{margin-bottom:24px; padding-left:10px; padding-right:10px}
  .step1 .media-wrap .item-title{font-size:17px; font-weight:600}
}


/* step 2 */
.step2{background-color:#f4edde}
.step2 .campaign-info{padding:48px; background:url('../images/campaign_step2_ruler.png') no-repeat 50% 100% #F0E5D0}

/* tab-container */
.tab-container{margin-top:56px}
.tab-container .menu{display:flex; gap:8px; overflow:hidden; overflow-x:auto; padding-left:5%; padding-right:5%; white-space:nowrap; word-break:normal; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.tab-container .menu .menu-item{flex:0 0 auto; display:block; min-width:70px; padding:10px 16px; font-size:14px; color:var(--smt-brand-d); background-color:#F0E5D0; border-radius:999px}
.tab-container .menu::-webkit-scrollbar{display:none}
.tab-container .menu .menu-item.active{background-color:var(--smt-brand-b); color:var(--white)}
.tab-container .panel{margin-top:40px}
.tab-container .panel .panel-item > *:not(:first-child){margin-top:32px}
.tab-container .distance-item{display:flex; gap:16px; align-items:center}
.tab-container .distance-item .photo{width:60px; height:60px; border-radius:999px; position:relative; overflow:hidden; flex-shrink:0}
.tab-container .distance-item .photo img{width:100%; height:100%; object-fit:cover; position:absolute}
.tab-container .distance-item .progress{flex:1}
.tab-container .distance-item .progress .info{display:flex; align-items:center; gap:40px; margin-bottom:8px}
.tab-container .distance-item .progress .info .question{flex:1; color:var(--smt-brand-d); font-size:16px; font-weight:600}
.tab-container .distance-item .progress .info .percent{color:#A16307; font-size:16px}
.tab-container .distance-item .progress-bar{position:relative; height:12px; border-radius:4px; overflow:hidden; background:url('../images/campaign_step2_progress.png') 0 6px repeat-x #ecdec2; background-size:248px 6px; border-radius:999px; overflow:hidden}
.tab-container .distance-item .progress-bar .fill{position:absolute; width:0; height:100%; background:#7c5a34; border-radius:999px; top:0; left:0; transition:width 1.2s ease}
.tab-container .note{margin-top:40px; font-size:14px; opacity:0.6}

@media(min-width:768px){
  .tab-container .menu{justify-content:center}
}

@media(min-width:1070px){
  .tab-container{margin-top:80px}
  .tab-container .menu .menu-item{padding:12px 20px; font-size:15px}
  .tab-container .panel{margin-top:56px}
  .tab-container .distance-item .photo{width:100px; height:100px}
  .tab-container .distance-item{gap:24px}
  .tab-container .distance-item .progress .info .question{font-size:18px}
  .tab-container .distance-item .progress-bar{margin-top:12px}
  .tab-container .distance-item .progress .info .percent{font-size:20px}
  .tab-container .note{margin-top:56px; font-size:15px}
}


/* step 3 */
.step3{position:relative}
.step3::before{content:''; background-image:url('../images/campaign_step3_01.png'); display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:600px; height:100%}


/* step 4 */
.step4{background-color:#faf6f3}