/*메인*/
.main .top-banner { height: 80px; margin-bottom: 8px; background: url('../images/bg_coin1.svg') center top no-repeat #f3f6fd; }
.main .top-banner .inner { display: flex; justify-content: center; align-items: center; height: 100%; }
.main .top-banner .tit { font-size: 16px; font-weight: 700; color: #000; text-align: center; }
.main .top-banner .tit strong { font-weight: 800; color: var(--main-color); }

/*메인 > 퀴즈 목록*/
.main .section1 { margin-bottom: 34px; }
.main .section1 .slide-tab { position: static; }
.main .section1 .btn-more { display: flex; justify-content: center; align-items: center; width: 116px; height: 38px; margin: 16px auto 0; border: 1px solid #ddd; border-radius: 19px; box-sizing: border-box; font-size: 14px; font-weight: 400; color: var(--secondary-color-gray02); letter-spacing: -0.04px; }
.main .section1 .btn-more.arrow:after { content: ''; width: 20px; height: 20px; background: url('../images/ico_arrow_right1.svg') center center no-repeat; }

.list-item a { display: flex; align-items: center; padding: 19px 24px; box-sizing: border-box; }
.list-item .ico { flex-shrink: 0; width: 46px; height: 46px; margin-right: 12px; border-radius: 10px; box-sizing: border-box; background: center center no-repeat; background-size: contain; }
.list-item .ico-v1 { background-image: url('../images/ico_type1.svg'); }
.list-item .ico-v2 { background-image: url('../images/ico_type2.svg'); }
.list-item .ico-v3 { background-image: url('../images/ico_type3.svg'); }
.list-item .tit-group { width: calc(100% - 134px); margin-right: 16px; }
.list-item .tit-group .tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--primary-color-black01); letter-spacing: -0.05px; }
.list-item .tit-group .txt { margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--secondary-color-gray02); letter-spacing: -0.04px; line-height: 19px; }
.list-item .point { display: flex; justify-content: center; align-items: center; flex-shrink: 0; min-width: 60px; height: 34px; margin-left: auto; padding: 0 12px; border-radius: 10px; box-sizing: border-box; background: var(--main-color); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.05px; }

/*메인 > 룰렛 돌리기*/
.main .section2 { padding: 32px 24px; box-sizing: border-box; background: url('../images/bg_coin2.png') center 70px no-repeat #f8f8fa; background-size: contain; }
.main .section2 .btn-custom { margin-top: 32px; }

.roulette-group .top-section { margin-bottom: 36px; text-align: center; }
.roulette-group .top-section .tit { font-size: 18px; font-weight: 700; color: var(--primary-color-black01); letter-spacing: -0.05px; line-height: 21px; }
.roulette-group .top-section .tit span { color: var(--main-color); }
.roulette-group .top-section .txt { margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--primary-color-black01); letter-spacing: -0.04px; line-height: 19px; }

/*룰렛
.roulette { position: relative; width: 280px; height: 280px; margin: 0 auto; background: url('../images/bg_roulette1.svg') center center no-repeat; background-size: contain; }
*/
.roulette .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); width: 257px; height: 257px; box-sizing: border-box; background: url('../images/img_roulette1.svg') center center no-repeat; background-size: contain; }
.roulette .circle:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); width: 100%; height: 100%; border: 7px solid rgba(255, 255, 255, 0.5); border-radius: 50%; box-sizing: border-box; }
.roulette .img-object { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); border-radius: 50%; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); box-sizing: border-box; }
.roulette .img-pin { position: absolute; top: -38px; left: 0; right: 0; z-index: 1; margin: 0 auto; }

/*메인 > 유의사항*/
.main .section3 { padding: 24px 24px 40px; box-sizing: border-box; background: var(--bg-color02); }
.main .section3 .top-section { margin-bottom: 16px; }
.main .section3 .top-section .tit { font-size: 16px; font-weight: 700; color: var(--secondary-color-gray02); letter-spacing: 0.05px; line-height: 19px; }
.main .section3 .list-note li { display: flex; position: relative; margin-bottom: 8px; padding-left: 10px; box-sizing: border-box; font-size: 13px; font-weight: 400; color: var(--secondary-color-gray02); letter-spacing: -0.04px; line-height: 16px; }
.main .section3 .list-note li:last-child { margin-bottom: 0; }
.main .section3 .list-note li:before { content: ''; display: block; position: absolute; top: 6px; left: 0; width: 3px; height: 3px; border-radius: 50%; box-sizing: border-box; background: #777; }


/*미션 완료*/
.mission-complete { padding: 100px 0; box-sizing: border-box; }
.mission-complete img { display: block; width: 100px; margin: 0 auto 24px; }
.mission-complete .txt-group .tit { font-size: 18px; font-weight: 700; color: var(--primary-color-black01); text-align: center; letter-spacing: -0.05px; line-height: 21px; }
.mission-complete .txt-group .txt { margin-top: 14px; font-size: 15px; font-weight: 400; color: var(--primary-color-black02); text-align: center; letter-spacing: -0.05px; line-height: 26px; }


/*아이템 목록*/
.item-list .slide-tab { position: sticky; top: var(--header-height); }


/*스크린샷 제출*/
.item-view .section1 { padding: 16px 20px 36px; box-sizing: border-box; background: var(--bg-color01); }
.item-view .section1 .wrap { padding: 24px 16px; border-radius: 16px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08); box-sizing: border-box; background: #fff; }

.item-info { display: flex; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #eee; box-sizing: border-box; }
.item-info .ico { flex-shrink: 0; width: 24px; height: 24px; margin-right: 10px; border-radius: 10px; box-sizing: border-box; background: center center no-repeat; background-size: contain; }
.item-info .ico-v1 { background-image: url('../images/ico_type1.svg'); }
.item-info .ico-v2 { background-image: url('../images/ico_type2.svg'); }
.item-info .ico-v3 { background-image: url('../images/ico_type3.svg'); }
.item-info .tit-group { width: calc(100% - 110px); margin-right: 16px; }
.item-info .tit-group .tit { font-size: 18px; font-weight: 700; color: var(--primary-color-black01); letter-spacing: -0.05px; line-height: 21px; word-break: break-all; }
.item-info .point { display: flex; justify-content: center; align-items: center; flex-shrink: 0; min-width: 60px; height: 34px; margin-left: auto; padding: 0 12px; border-radius: 10px; box-sizing: border-box; background: var(--main-color); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.05px; }

.item-view .top-guide { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 16px 14px; border-radius: 8px; box-sizing: border-box; background: rgba(245, 245, 245, 0.8); }
.item-view .top-guide .txt { font-size: 12px; font-weight: 500; color: var(--primary-color-black02); letter-spacing: -0.04px; line-height: 24px; }
.item-view .top-guide .txt span { display: inline-flex; justify-content: center; align-items: center; height: 22px; margin-right: 4px; padding: 0 6px; border: 1px solid var(--main-color); border-radius: 4px; box-sizing: border-box; background: #fff; font-size: 12px; font-weight: 700; color: var(--main-color); letter-spacing: -0.06px; }
.item-view .top-guide img { zoom: 0.5; }

.list-guide { margin-bottom: 24px; }
.list-guide li { font-size: 15px; font-weight: 400; color: var(--primary-color-black02); letter-spacing: -0.05px; line-height: 26px; }
.list-guide strong { color: var(--primary-color-black01); }
.list-guide span { color: var(--main-color); }

.mission-item .tit { margin-bottom: 20px; font-size: 15px; font-weight: 700; color: var(--primary-color-black01); letter-spacing: -0.05px; }
.mission-item .img-group { border: 1px solid #efefef; border-radius: 8px; box-sizing: border-box; overflow: hidden; }
.mission-item .img-group img { display: block; width: 100%; }

.item-view .section2 { padding: 32px 20px; box-sizing: border-box; }
.item-view .section2 .top-section { margin-bottom: 20px; }
.item-view .section2 .top-section .tit { font-size: 18px; font-weight: 700; color: var(--primary-color-black01); letter-spacing: -0.05px; line-height: 21px; }
.item-view .section2 .img-group { margin-bottom: 16px; border: 1px solid #efefef; border-radius: 8px; box-sizing: border-box; overflow: hidden; }
.item-view .section2 .img-group:last-child { margin-bottom: 0; }
.item-view .section2 .img-group img { display: block; width: 100%; }


.upload-preview { display: flex; flex-direction: column; /*justify-content: center;*/ align-items: center; position: relative; /*height: 264px;*/ margin-top: 16px; /*border: 1px solid #dfdfdf;*/ border-radius: 8px; box-sizing: border-box; }
.upload-preview .no-img { position: absolute; }
.upload-preview .ico-photo { display: block; margin: 0 auto 12px; }
.upload-preview .txt { font-size: 14px; font-weight: 400; color: #aaa; text-align: center; }
.upload-preview .img-group-upload { position: relative; max-height: calc(100% - 32px); }
.upload-preview .img-group-upload img { max-height: 100%; }
.upload-preview .img-group-upload .btn-delete { position: absolute; top: 0; right: 0; width: 42px; height: 42px; border: none; background: url('/images/ico_x1.svg') center center no-repeat; }