/*layout style*/
#wrap { display: flex; flex-direction: column; justify-content: space-between; position: relative; max-width: 720px; min-height: 100%; margin: 0 auto; padding-top: 150px; padding-bottom: 100px; box-shadow: 0 0 2px 2px #f2f2f2; box-sizing: border-box; transition: .2s all ease-out; }
.container { width: 100%; height: calc(100% - 150px); transition: .2s all ease-out; }


/*header style*/
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; max-width: 720px; margin: 0 auto; background: #fff; transition: .2s all ease-out; }
.header.active { transform: translateY(-60px); }
.hd { display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 32px; border-bottom: 1px solid #f2f2f2; box-sizing: border-box; }
.hd .hd-search { display: block; width: 38px; height: 38px; background: url('../img/ico_search1.svg') center center no-repeat; }

.hd2 { display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 25px; border-bottom: 1px solid #f2f2f2; box-sizing: border-box; }
.hd2 .hd-tit { display: flex; align-items: center; font-size: 22px; font-weight: 700; color: #000; letter-spacing: -0.49px; }
.hd2 .hd-back { width: 40px; height: 40px; border: none; background: url('../img/ico_arrow_back1.svg') center center no-repeat; }
.hd2 .hd-back-v1 { width: 40px; height: 40px; border: none; background: url('/img/ico_arrow_back2.svg') center center no-repeat;}
.hd2 .hd-home { display: block; width: 40px; height: 40px; background: url('../img/ico_home1.svg') center center no-repeat; }
.hd2 .hd-home-v1 { display: block; width: 40px; height: 40px; background: url('/img/ico_home2.svg') center center no-repeat; }
.hd2 .hd-close { display: block; position: absolute; right: 25px; width: 40px; height: 40px; border: none; background: url('../img/ico_x2.svg') center center no-repeat; }
.hd2 .btn-guide { display: flex; justify-content: flex-end; align-items: center; border: none; background: none; font-size: 18px; font-weight: 400; color: #444; letter-spacing: -0.5px; }
.hd2 .btn-guide img { margin-left: 6px; }
.hd2 .btn-group-link { display: flex; align-items: center; height: 44px; padding: 0 4px; border: 1px solid #e1e1e1; border-radius: 22px; box-sizing: border-box; background: #f8f8f8; }
.hd2 .btn-group-link a { position: relative; padding: 0 16px; box-sizing: border-box; font-size: 18px; font-weight: 600; color: #333; letter-spacing: -0.49px; }
.hd2 .btn-group-link a:not(:last-child):after { content: ''; display: block; position: absolute; top: calc(50% - 11px); right: 0; width: 1px; height: 22px; background: #ddd; }

.hd2-v1 .hd-tit { position: absolute; left: 0; right: 0; margin: 0 auto; justify-content: center; text-align: center; }
.hd2-v1 .hd-close { left: 25px; z-index: 2; width: 35px; height: 35px; background-image: url('../img/ico_x6.svg'); }

.hd3 { display: flex; align-items: center; height: 80px; padding: 0 32px; border-bottom: 2px solid #f8778d; box-sizing: border-box; }
.hd3 .hd-back { width: 40px; height: 40px; border: none; background: url('../img/ico_arrow_back1.svg') center center no-repeat; }
.hd3 .hd-search { display: flex; align-items: center; width: calc(100% - 78px); height: 100%; }
.hd3 .hd-search .inp-group-search { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding-right: 10px; box-sizing: border-box; }
.hd3 .hd-search .inp-group-search .inp-search { width: calc(100% - 38px); height: 100%; border: none; font-size: 22px; font-weight: 700; color: #000; letter-spacing: -0.55px; }
.hd3 .hd-search .inp-group-search .btn-delete { display: none; width: 28px; height: 28px; border: none; border-radius: 50%; box-sizing: border-box; background: url('../img/ico_x4.svg') center center no-repeat; }
.hd3 .btn-search { display: block; width: 38px; height: 38px; border: none; background: url('../img/ico_search2.svg') center center no-repeat; }

.hd4 { display: flex; align-items: center; height: 104px; padding: 0 25px; box-sizing: border-box; }
.hd4 .hd-back { position: relative; z-index: 1; width: 40px; height: 40px; border: none; background: url('../img/ico_arrow_back1.svg') center center no-repeat; }
.hd4 .hd-tit { position: absolute; left: 0; right: 0; width: 100%; margin: 0 auto; font-size: 22px; font-weight: 700; color: #000; text-align: center; letter-spacing: -0.49px; }

.hd5 { position: relative; height: 110px; border-bottom: 1px solid #f2f2f2; box-sizing: border-box; }
.hd5 .hd-close { position: absolute; top: 16px; left: 25px; width: 35px; height: 35px; border: none; background: url('../img/ico_x6.svg') center center no-repeat; }
.hd5 .hd-search { display: block; position: absolute; top: 16px; right: 32px; width: 38px; height: 38px; border: none; background: url('../img/ico_search2.svg') center center no-repeat; }
.hd5 .chat-info { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; }
.hd5 .chat-info .user-name { font-size: 24px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.53px; }
.hd5 .chat-info .chat-time { display: flex; justify-content: center; align-items: center; margin-top: 8px; font-size: 18px; font-weight: 400; color: #1a1a1a; letter-spacing: -0.28px; }
.hd5 .chat-info .chat-time .count { margin-left: 4px; font-weight: 500; color: #f8778d; }
.hd5 .chat-info .chat-time .btn-plus { width: 18px; height: 18px; margin-left: 6px; border: none; background: url('../img/ico_plus3.svg') center center no-repeat; }

.hd-banner { display: flex; justify-content: center; align-items: center; height: 40px; background: url('/img/bg_event1.svg') center center no-repeat; background-size: cover; }
.hd-banner .tit { font-size: 18px; font-weight: 500; color: #1c1c1c; text-align: center; letter-spacing: -0.64px; }
.hd-banner .tit strong { font-weight: 700; color: #ff5381; }
.hd-banner .tit span { font-weight: 600; color: #ff5381; }
.hd-banner .btn-close { position: absolute; right: 18px; width: 17px; height: 17px; border: none; background: url('../img/ico_x1.svg') center center no-repeat; }

.header-v1 { background: none; }
.header-v1 .hd2 { border-bottom-color: transparent; }


/*footer style*/
.site-info { background: #f5f5f5; }
.site-info .fold { display: flex; justify-content: space-between; align-items: center; height: 114px; padding: 0 32px; box-sizing: border-box; cursor: pointer; }
.site-info .fold .btn-more { display: flex; justify-content: flex-end; align-items: center; font-size: 16px; font-weight: 500; color: #6e6e6e; letter-spacing: -0.62px; }
.site-info .fold .btn-more img { margin-left: 10px; transition: .2s all ease-out; }
.site-info .fold.active .btn-more img { transform: rotate(180deg); }
.site-info .unfold { display: none; padding: 0 32px 45px; box-sizing: border-box; }
.site-info .unfold.active { display: block; }
.site-info .unfold .company-info { margin-bottom: 20px; font-size: 15px; font-weight: 400; color: #6c6c6c; letter-spacing: -0.58px; line-height: 24px; }
.site-info .unfold .copyright { font-size: 15px ;font-weight: 400; color: #6c6c6c; }
.site-info .unfold hr { height: 1px; margin: 32px 0; background: #e7e7e7; }
.site-info .unfold .ft-info { max-width: 420px; margin-bottom: 15px; font-size: 15px; font-weight: 300; color:#6c6c6c/* rgba(108, 108, 108, 0.58)*/; letter-spacing: -0.58px; line-height: 24px; }
.site-info .unfold .ft-menu { display: flex; align-items: center; }
.site-info .unfold .ft-menu a { margin-right: 20px; font-size: 16px; font-weight: 600; color: #6e6e6e; letter-spacing: -0.62px; }
.site-info .unfold .ft-menu a:last-child { margin-right: 0; }

.footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 101; width: 100%; max-width: 720px; margin: 0 auto; border-radius: 30px 30px 0 0; box-shadow: 0 -15px 30px 0 rgba(0, 0, 0, 0.06); box-sizing: border-box; background: #fff; }
.ft .ft-menu { display: flex; justify-content: space-between; align-items: center; height: 100px; padding: 0 16px; box-sizing: border-box; }
.ft .ft-menu a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 20%; height: 100%; }
.ft .ft-menu .ico { width: 49px; height: 49px; background: center center no-repeat; }
.ft .ft-menu a:nth-child(1) .ico { background-image: url('../img/ico_footer1_off.svg'); }
.ft .ft-menu a:nth-child(2) .ico { background-image: url('../img/ico_footer2_off.svg'); }
.ft .ft-menu a:nth-child(3) .ico { width: 73px; height: 73px; margin-top: -35px; margin-bottom: 11px; border-radius: 50%; box-sizing: border-box; background-image: url('/img/ico_footer3.svg'); background-color: #bf2f4a; }
.ft .ft-menu a:nth-child(4) .ico { background-image: url('../img/ico_footer4_off.svg'); }
.ft .ft-menu a:nth-child(5) .ico { background-image: url('../img/ico_footer5_off.svg'); }
.ft .ft-menu .tit { font-size: 16px; font-weight: 400; color: #1a1a1a; text-align: center; letter-spacing: -0.6px; }

.ft .ft-menu a.active:nth-child(1) .ico { background-image: url('../img/ico_footer1_on.svg'); }
.ft .ft-menu a.active:nth-child(2) .ico { background-image: url('../img/ico_footer2_on.svg'); }
.ft .ft-menu a.active:nth-child(4) .ico { background-image: url('../img/ico_footer4_on.svg'); }
.ft .ft-menu a.active:nth-child(5) .ico { background-image: url('../img/ico_footer5_on.svg'); }
.ft .ft-menu a.active .tit { font-weight: 600; color: #f8778d; }

/*회원가입*/
#wrap.sign { padding-bottom: 160px; box-sizing: border-box; }


/*아이디 및 비밀번호 찾기*/
#wrap.find { padding-bottom: 120px; box-sizing: border-box; }


/*메인*/
#wrap.main { padding-top: 140px; box-sizing: border-box; }
#wrap.main.active { padding-top: 80px; box-sizing: border-box; }
.main .container.active { height: calc(100% - 80px); }


/*아이템 리스트 (채팅)*/
#wrap.item-list_v1 { padding-top: 80px; box-sizing: border-box; }


/*공지사항 상세*/
#wrap.board-view { padding-top: 80px; box-sizing: border-box; }
.board-view .container { height: calc(100% - 80px); }


/*아이템 상세*/
#wrap.item-view { padding: 0 0 96px 0; box-sizing: border-box; }


/*마이페이지*/
#wrap.mypage { padding-top: 80px; box-sizing: border-box; }
.mypage .container { height: calc(100% - 80px); }


/*검색*/
#wrap.search { padding-top: 80px; box-sizing: border-box; }
.search .container { height: calc(100% - 80px); }


/*AI*/
#wrap.ai-intro { padding: 88px 0 68px; box-sizing: border-box; background: url('https://akcdn-sajunaruimg.cafe24img.com/img/bg_ai1.webp') center center no-repeat; background-size: cover; }
#wrap.ai { padding: 113px 0 73px; box-sizing: border-box; background: url('https://akcdn-sajunaruimg.cafe24img.com/img/bg_ai1.webp') center center no-repeat; background-size: cover; }

/*코인충전*/
#wrap.coin-shop { padding-bottom: 104px; box-sizing: border-box; }


/*부가서비스 상세*/
#wrap.item-view-v1 { padding: 70px 0 96px 0; box-sizing: border-box; }


/*할인 쿠폰*/
#wrap.coupon { padding-bottom: 0; box-sizing: border-box; }


/*채팅상담 리스트*/
#wrap.chat-list { padding-top: 310px; box-sizing: border-box; }


/*채팅방*/
#wrap.chat-view { height: 100%; padding: 80px 0 0; box-sizing: border-box; }
.chat-view .container { height: 100%; }


.btn-top { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; right: 12px; bottom: 70px; width: 44px; height: 44px; border: 2px solid #c64860; box-sizing: border-box; background: #fbfbfb; font-size: 13px; font-weight: 700; color: #c64860 !important; letter-spacing: -0.65px; border-radius:5px; }
.btn-top img { height: 6px; }

/*나루 초이스 상세*/
#wrap.choice-view { padding-bottom: 116px; box-sizing: border-box; }

/*나루 QUIZ 상세*/
#wrap.quiz,
#wrap.quiz-write { padding-bottom: 0; background: url('https://akcdn-sajunaruimg.cafe24img.com/img/bg_quiz1.webp') center top no-repeat; background-size: cover; }


@media only screen and (max-width: 720px) {
	.header, .footer, section, .btn-floating-bottom { max-width: 100%; }
	
	/*layout style*/
	#wrap { padding-top: 56px; padding-bottom: 62px; box-sizing: border-box; }
	.container { height: calc(100% - 56px); }
	
	/*header style*/
	.header.active { transform: translateY(-50px); }
	.hd { display: none; height: 60px; padding: 0 16px; box-sizing: border-box; }
	.hd .hd-logo img { width: 136px; }
	.hd .hd-search { width: 26px; height: 26px; background-size: contain; }
	
	.hd2 { height: 56px; padding: 0 16px; box-sizing: border-box; }
	.hd2 .hd-tit { font-size: 18px; letter-spacing: 0; }
	.hd2 .hd-back { width: 30px; background-position: left center; }
	.hd2 .hd-home { width: 36px; height: 36px; background-size: contain; }
	.hd2 .hd-close { right: 16px; width: 26px; height: 26px; background-size: contain; }
	.hd2 .btn-guide { font-size: 14px; }
	.hd2 .btn-guide img { width: 13px; margin-left: 4px; }
	.hd2 .btn-group-link { height: 28px; padding: 0 4px; border-radius: 14px; box-sizing: border-box; }
	.hd2 .btn-group-link a { padding: 0 8px; box-sizing: border-box; font-size: 11px; letter-spacing: -0.31px; }
	.hd2 .btn-group-link a:not(:last-child):after { top: calc(50% - 7px); height: 14px; }
	
	.hd3 { height: 60px; padding: 0 16px; border-bottom-width: 1px; box-sizing: border-box; }
	.hd3 .hd-back { width: 30px; background-position: left center; }
	.hd3 .hd-search { width: calc(100% - 56px); }
	.hd3 .hd-search .inp-group-search .inp-search { width: calc(100% - 30px); font-size: 16px; letter-spacing: -0.4px; }
	.hd3 .hd-search .inp-group-search .btn-delete { width: 20px; height: 20px; background-size: contain; }
	.hd3 .btn-search { width: 26px; height: 26px; background-size: contain; }
	
	.hd4 { height: 56px; padding: 0 16px; box-sizing: border-box; }
	.hd4 .hd-tit { font-size: 18px; letter-spacing: 0; }
	.hd4 .hd-back { width: 30px; background-position: left center; }
	
	.hd5 { height: 72px; }
	.hd5 .hd-close { top: 13px; left: 6px; width: 32px; height: 32px; background-size: contain; }
	.hd5 .hd-search { top: 13px; right: 16px; width: 26px; height: 26px; background-size: contain; }
	.hd5 .chat-info .user-name { font-size: 18px; letter-spacing: 0; }
	.hd5 .chat-info .chat-time { margin-top: 5px; font-size: 12px; letter-spacing: -0.18px; }
	.hd5 .chat-info .chat-time .btn-plus { width: 14px; height: 14px; margin-left: 4px; background-size: contain; }
	
	.hd-banner { height: 32px; }
	.hd-banner .tit { font-size: 13px; letter-spacing: -0.46px; }
	.hd-banner .btn-close { width: 14px; height: 14px; }
	
	/*footer style*/
	.site-info .fold { height: 70px; padding: 0 16px; box-sizing: border-box; }
	.site-info .ft-logo { width: 88px; }
	.site-info .fold .btn-more { font-size: 12px; letter-spacing: -0.38px; }
	.site-info .fold .btn-more img { width: 8px; margin-left: 8px; }
	.site-info .unfold { padding: 0 16px 32px; box-sizing: border-box; }
	.site-info .unfold .company-info { margin-bottom: 8px; font-size: 12px; line-height: 18px; letter-spacing: -0.38px; }
	.site-info .unfold .copyright { font-size: 12px; }
	.site-info .unfold hr { margin: 18px 0 11px; }
	.site-info .unfold .ft-info { max-width: 293px; margin-bottom: 24px; font-size: 12px; line-height: 18px; letter-spacing: -0.38px; }
	.site-info .unfold .ft-menu a { margin-right: 12px; font-size: 12px; letter-spacing: -0.38px; }
	
	.footer { border-radius: 20px 20px 0 0; box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, 0.06); box-sizing: border-box; }
	.ft .ft-menu { height: 62px; padding: 0 8px; box-sizing: border-box; }
	.ft .ft-menu .ico { width: 32px; height: 32px; background-size: contain; }
	.ft .ft-menu a:nth-child(3) .ico { width: 48px; height: 48px; margin-top: -23px; margin-bottom: 7px; background-size: 32px; }
	.ft .ft-menu .tit { font-size: 11px; letter-spacing: -0.39px; }
	
	/*회원가입*/
	#wrap.sign { padding-bottom: 116px; box-sizing: border-box; }
	
	/*아이디 및 비밀번호 찾기*/
	#wrap.find { padding-bottom: 80px; box-sizing: border-box; }
	
	/*메인*/
	#wrap.main { padding-top: 110px; box-sizing: border-box; }
	#wrap.main.active { padding-top: 60px; box-sizing: border-box; }
	
	.main .hd { display: flex; }
	.main .container.active { height: calc(100% - 60px); }
	
	/*아이템 리스트*/
	#wrap.item-list { padding-top: 105px; box-sizing: border-box; }
	.item-list .hd { display: flex; }
	
	/*아이템 리스트 (채팅)*/
	#wrap.item-list_v1 { padding-top: 60px; box-sizing: border-box; }
	
	/*아이템 상세*/
	#wrap.item-view { padding-bottom: 60px; box-sizing: border-box; }
	
	/*마이페이지*/
	#wrap.mypage { padding-top: 0; }
	
	/*검색*/
	#wrap.search { padding-top: 60px; box-sizing: border-box; }
	
	/*AI*/
	#wrap.ai-intro { padding: 48px 0 44px; box-sizing: border-box; }
	#wrap.ai { padding: 76px 0 64px; box-sizing: border-box; }
	
	/*코인충전*/
	#wrap.coin-shop { padding-bottom: 80px; box-sizing: border-box; }
	
	/*충전 완료 및 주문 완료*/
	#wrap.receipt { padding: 76px 32px; box-sizing: border-box; }
	
	/*부가서비스 상세*/
	#wrap.item-view-v1 { padding-top: 56px; box-sizing: border-box; }
	
	/*채팅상담 리스트*/
	#wrap.chat-list { padding-top: 158px; box-sizing: border-box; }
	
	/*채팅방*/
	#wrap.chat-view { padding-top: 0px; box-sizing: border-box; }

	/*나루 초이스 상세*/
	#wrap.choice-view { padding-bottom: 80px; box-sizing: border-box; }
}