//    DinnerQueenStyleSheetLess
//    dq.less  - 디너의여왕 각 개별 스타일 (3)
//    스타일시트 작성자 : 개발팀 디자이너 - 박재한 (2018.11)
// --------------------------------

//    common   - 범용적 디자인 가이드 요소 (1)
//    dq_guide - 디너의여왕 범용적 디자인 가이드 요소 (2)
//    dq       - 디너의여왕 각 개별 스타일 (3)
//    dq_xs    - 디너의여왕 모바일 각 개별 스타일 (4)

// --------------------------------

//    스타일 속성 기술 순서는 '모질라 파이어폭스 CSS 선언 순서'를 참고한다.
//    1.       - display
//    2.       - list-style
//    3.       - position/top/right/bottom/left/z-index
//    4.       - overflow/float
//    5.       - clear
//    6.       - width/height
//    7.       - padding/margin
//    8.       - border/background
//    9.       - color/font
//    10.      - text-decoration/outline
//    11.      - text-align/vertical-align
//    12.      - white-space
//    13.      - other text
//    14.      - content

// --------------------------------

//    목차
//    * Ctl/Cmd + F 를 활용할 것.

//    Less 변수
//    0. 자주쓰는 스타일 가이드 모음
//    1. 메인 헤더 영역
//    2. 메인 배너 영역
//    3. 메인 광고형 배너
//      3-1. 메인 광고형 배너 - 라인배너
//      3-2. 메인 광고형 배너 - 메인 팝업
//    4. 메인 맥스무비 서비스 상단 헤더 (외전)
//    5. 메인 고정된 버튼 영역
//    6. 메인 콘텐츠 영역
//      6-1. 메인 콘텐츠 영역 - 공지사항 팝업
//      6-2. 메인 콘텐츠 영역 - 그리드 스타일
//    7. 메인 푸터 영역
//    8. 로그인 페이지
//    9. 마이 페이지
//    10. 문의하기 페이지
//    11. 고객센터 페이지 (공지사항 & FAQ)
//    12. 포스트 페이지
//      12-1. 포스트 디테일 페이지
//    13. TASTE 페이지
//      13-1. TASTE 디테일 페이지 (X)
//    14. 맛집랭킹 페이지
//    14. 이벤트 모달 TASTE 영역 (??)
//      14-1. 이벤트 모달 TASTE 영역 - 신청하기 (??)
//      14-2. 이벤트 모달 TASTE 영역 - 신청완료 (??)
//    15. 이벤트 모달 공유하기 영역
//    16. 약관페이지 영역
//    17. 리뷰가이드 페이지
//    18. 임시용 (여기서부턴 추가바람) 현재 반쪽짜리로서 추가가 필요함.

// --------------------------------


//    Less 변수
// --------------------------------

// 컬러 변수
@color-shellpink : #ff82ac;
@color-purple : #ff7878;
@color-darkpurple : #ff4081;
@color-darkpurple-alpha : rgba(85,40,120,0.75);
@color-fade-alpha : rgba(0,0,0,0.8);
@color-beige : #ffdbd1;
@color-naver : #4ec772;
@color-facebook : #5a72a1;
@color-instagram : #ff6e9e;
@color-white : #ffffff;
@color-dq1 : #ff4081;
@color-dq2 : #ff7878;
@color-dq3 : #ffcccc;
@color-dq4 : #571136;
@color-dq5 : #e63a74;
@color-black : #000000;
@color-black2 : #222222;
@color-black3 : #333333;
@color-black6 : #666666;
@color-black9 : #999999;
@color-gray1 : #fafafa;
@color-gray2 : #e6e7e9;
@color-gray3 : #d1d1d1;
@color-gre-dq1 : linear-gradient(90deg, #ff4081, #ff7878);
@color-gre-black1 : linear-gradient(45deg, #333333, #666666);
@color-gre-black2 : linear-gradient(45deg, #666666, #999999);
@color-gre-white : linear-gradient(45deg, #ffffff, #fafafa);
@color-gre-gray1 : linear-gradient(45deg, #d1d1d1, #e6e7e9);
@color-gre-yello : linear-gradient(45deg, #ffd000, #ff7878);
@color-gre-blue : linear-gradient(45deg, #5A72A1, #8BDAA2);
@color-gre-blue2 : linear-gradient(45deg, #5A72A1, #45587C);
@color-gre-green : linear-gradient(45deg, #3BBA61, #8BDAA2);
// 폰트 변수
@font-size-1 : 2.5rem; // 40px
@font-size-2 : 2rem; // 32px
@font-size-3 : 1.5rem; // 24px
@font-size-4 : 1.125rem; // 18px
@font-size-5 : 1rem; //16px
@font-size-6 : 0.75rem; //12px
@font-h1 : 96px;
@font-h2 : 60px;
@font-h3 : 48px;
@font-h4 : 34px;
@font-h5 : 24px;
@font-h6 : 20px;
@font-subtitle1 : 16px;
@font-subtitle2 : 14px;
@font-body1 : 16px;
@font-body2 : 14px;
@font-button : 14px;
@font-caption : 12px;
@font-overline : 10px;
//.font-h1{ font-size: 96px; letter-spacing: -1.5px; line-height: 142px; }
//.font-h2{ font-size: 60px; letter-spacing: -0.5px; line-height: 89px; }
//.font-h3{ font-size: 48px; letter-spacing: 0; line-height: 71px; }
.font-h4{ font-size: 34px; letter-spacing: 0.25px; line-height: 50px; }
.font-h5{ font-size: 24px; letter-spacing: 0; line-height: 36px; }
.font-h6{ font-size: 20px; letter-spacing: 0.15px; line-height: 29px; }
.font-subtitle1{ font-size: 16px; letter-spacing: 0.15px; line-height: 28px; }
.font-subtitle2{ font-size: 14px; letter-spacing: 0.1px; line-height: 24px; }
.font-body1{ font-size: 16px; letter-spacing: 0.5px; line-height: 28px; }
.font-body2{ font-size: 14px; letter-spacing: 0.25px; line-height: 20px; }
.font-button{ font-size: 14px; letter-spacing: 1.25px; line-height: 20px; }
.font-caption{ font-size: 12px; letter-spacing: 0.4px; line-height: 16px; }
.font-overline{ font-size: 10px; letter-spacing: 1.5px; line-height: 16px; }
// 폰트 행간변수
@line-height-1 : 3.5rem; //56px
@line-height-2 : 2.75rem; //44px
@line-height-3 : 2.375rem; //38px
@line-height-4 : 1.875rem; //30px
@line-height-5 : 1.5rem; //24px
@line-height-6 : 1.125rem; //18px
// 폰트 중량
@100 : 100;
@200 : 200;
@300 : 300;
@400 : 400;
@500 : 500;
@600 : 600;
@700 : 700;
// 배경 및 아이콘 이미지 변수
// --------------------------------
@svg : '/dqstatic/assets/image/service/2019/dinner/svg';
@img : '/dqstatic/assets/image/service/2019/img';
@animation : '/dqstatic/assets/image/service/2019/animation';
// 일반 아이콘 변수
// --------------------------------
// 아이콘 - 뒤로가기
@ico_back : url('@{svg}/ico_back.svg');
@ico_back_b : url('@{svg}/ico_back_b.svg');
@ico_back_gray : url('@{svg}/ico_back_gray.svg');
@ico_back_w : url('@{svg}/ico_back_w.svg');
// 아이콘 - 닫기
@ico_close : url('@{svg}/ico_close.svg');
@ico_close_b : url('@{svg}/ico_close_b.svg');
@ico_close_gray : url('@{svg}/ico_close_gray.svg');
@ico_close_w : url('@{svg}/ico_close_w.svg');
// 아이콘 - 코멘트
@ico_comment : url('@{svg}/ico_comment.svg');
@ico_comment_b : url('@{svg}/ico_comment_b.svg');
@ico_comment_gray : url('@{svg}/ico_comment_gray.svg');
@ico_comment_w : url('@{svg}/ico_comment_w.svg');
// 아이콘 - 코멘트(아웃라인)
@ico_comment_o : url('@{svg}/ico_comment_o.svg');
@ico_comment_o_b : url('@{svg}/ico_comment_o_b.svg');
@ico_comment_o_gray : url('@{svg}/ico_comment_o_gray.svg');
@ico_comment_o_w : url('@{svg}/ico_comment_o_w.svg');
// 아이콘 - 다운로드
@ico_download : url('@{svg}/ico_download.svg');
@ico_download_b : url('@{svg}/ico_download_b.svg');
@ico_download_gray : url('@{svg}/ico_download_gray.svg');
@ico_download_w : url('@{svg}/ico_download_w.svg');
// 아이콘 - 전체화면
@ico_fullscreen : url('@{svg}/ico_fullscreen.svg');
@ico_fullscreen_b : url('@{svg}/ico_fullscreen_b.svg');
@ico_fullscreen_gray : url('@{svg}/ico_fullscreen_gray.svg');
@ico_fullscreen_w : url('@{svg}/ico_fullscreen_w.svg');
// 아이콘 - 햄버거 버튼
@ico_hamburger : url('@{svg}/ico_hamburger.svg');
@ico_hamburger_b : url('@{svg}/ico_hamburger_b.svg');
@ico_hamburger_gray : url('@{svg}/ico_hamburger_gray.svg');
@ico_hamburger_w : url('@{svg}/ico_hamburger_w.svg');
// 아이콘 - 하트
@ico_heart : url('@{svg}/ico_heart.svg');
@ico_heart_b : url('@{svg}/ico_heart_b.svg');
@ico_heart_gray : url('@{svg}/ico_heart_gray.svg');
@ico_heart_w : url('@{svg}/ico_heart_w.svg');
// 아이콘 - 하트(아웃라인)
@ico_heart_o : url('@{svg}/ico_heart_o.svg');
@ico_heart_o_w : url('@{svg}/ico_heart_o_w.svg');
@ico_heart_o_gray : url('@{svg}/ico_heart_o_gray.svg');
@ico_heart_o_w : url('@{svg}/ico_heart_o_w.svg');
// 아이콘 - 마크(지도)
@ico_mark : url('@{svg}/ico_mark.svg');
@ico_mark_b : url('@{svg}/ico_mark_b.svg');
@ico_mark_gray : url('@{svg}/ico_mark_gray.svg');
@ico_mark_w : url('@{svg}/ico_mark_w.svg');
// 아이콘 - 검색
@ico_search : url('@{svg}/ico_search.svg');
@ico_search_b : url('@{svg}/ico_search_b.svg');
@ico_search_gray : url('@{svg}/ico_search_gray.svg');
@ico_search_w : url('@{svg}/ico_search_w.svg');
// 아이콘 - 공유
@ico_share : url('@{svg}/ico_share.svg');
@ico_share_b : url('@{svg}/ico_share_b.svg');
@ico_share_gray : url('@{svg}/ico_share_gray.svg');
@ico_share_w : url('@{svg}/ico_share_w.svg');
// 아이콘 - 금지
@ico_ban : url('@{svg}/ico_ban.svg');
@ico_ban_b : url('@{svg}/ico_ban_b.svg');
@ico_ban_gray : url('@{svg}/ico_ban_gray.svg');
@ico_ban_w : url('@{svg}/ico_ban_w.svg');
// 아이콘 - 알림
@ico_notice : url('@{svg}/ico_notice.svg');
@ico_notice_b : url('@{svg}/ico_notice_b.svg');
@ico_notice_gray : url('@{svg}/ico_notice_gray.svg');
@ico_notice_w : url('@{svg}/ico_notice_w.svg');
// 아이콘 - 문의하기
@ico_contact : url('@{svg}/ico_contact.svg');
@ico_contact_b : url('@{svg}/ico_contact_b.svg');
@ico_contact_gray : url('@{svg}/ico_contact_gray.svg');
@ico_contact_w : url('@{svg}/ico_contact_w.svg');
// 아이콘 - FAQ
@ico_faq : url('@{svg}/ico_faq.svg');
@ico_faq_b : url('@{svg}/ico_faq_b.svg');
@ico_faq_gray : url('@{svg}/ico_faq_gray.svg');
@ico_faq_w : url('@{svg}/ico_faq_w.svg');
// 아이콘 - 맵아이콘
@ico_map : url('@{svg}/ico_map.svg');
@ico_map_b : url('@{svg}/ico_map_b.svg');
@ico_map_gray : url('@{svg}/ico_map_gray.svg');
@ico_map_w : url('@{svg}/ico_map_w.svg');
// 아이콘 - 그리드 리스트
@ico_grid_list: url('@{svg}/ico_grid_list.svg');
@ico_grid_list_b: url('@{svg}/ico_grid_list_b.svg');
@ico_grid_list_gray: url('@{svg}/ico_grid_list_gray.svg');
@ico_grid_list_w: url('@{svg}/ico_grid_list_w.svg');
// 아이콘 - 배송
@ico_package : url('@{svg}/ico_package.svg');
@ico_package_b : url('@{svg}/ico_package_b.svg');
@ico_package_gray : url('@{svg}/ico_package_gray.svg');
@ico_package_w : url('@{svg}/ico_package_w.svg');
// 아이콘 - 프리미엄
@ico_premium : url('@{svg}/ico_premium.svg');
@ico_premium_b : url('@{svg}/ico_premium_b.svg');
@ico_premium_gray : url('@{svg}/ico_premium_gray.svg');
@ico_premium_w : url('@{svg}/ico_premium_w.svg');
// 아이콘 - 문서
@ico_term : url('@{svg}/ico_term.svg');
@ico_term_b : url('@{svg}/ico_term_b.svg');
@ico_term_gray : url('@{svg}/ico_term_gray.svg');
@ico_term_w : url('@{svg}/ico_term_w.svg');
// 아이콘 - 시계(느낌표)
@ico_timer_hurry : url('@{svg}/ico_timer_hurry.svg');
@ico_timer_hurry_b : url('@{svg}/ico_timer_hurry_b.svg');
@ico_timer_hurry_gray : url('@{svg}/ico_timer_hurry_gray.svg');
@ico_timer_hurry_w : url('@{svg}/ico_timer_hurry_w.svg');
// 아이콘 - 시계
@ico_timer : url('@{svg}/ico_timer.svg');
@ico_timer_b : url('@{svg}/ico_timer_b.svg');
@ico_timer_gray : url('@{svg}/ico_timer_gray.svg');
@ico_timer_w : url('@{svg}/ico_timer_w.svg');
// 아이콘 - 체크
@ico_check: url('@{svg}/ico_check.svg');
@ico_check_b: url('@{svg}/ico_check_b.svg');
@ico_check_gray: url('@{svg}/ico_check_gray.svg');
@ico_check_w: url('@{svg}/ico_check_w.svg');
// 아이콘 - 수정
@ico_edit: url('@{svg}/ico_edit.svg');
@ico_edit_b: url('@{svg}/ico_edit_b.svg');
@ico_edit_gray: url('@{svg}/ico_edit_gray.svg');
@ico_edit_w: url('@{svg}/ico_edit_w.svg');
// 아이콘 - 옵션
@ico_option : url('@{svg}/ico_option.svg');
@ico_option_b : url('@{svg}/ico_option_b.svg');
@ico_option_gray : url('@{svg}/ico_option_gray.svg');
@ico_option_w : url('@{svg}/ico_option_w.svg');
// 아이콘 - 마이페이지
@ico_mypage : url('@{svg}/ico_mypage.svg');
@ico_mypage_b : url('@{svg}/ico_mypage_b.svg');
@ico_mypage_gray : url('@{svg}/ico_mypage_gray.svg');
@ico_mypage_w : url('@{svg}/ico_mypage_w.svg');
// 아이콘 - 세팅
@ico_settings : url('@{svg}/ico_settings.svg');
@ico_settings_b : url('@{svg}/ico_settings_b.svg');
@ico_settings_gray : url('@{svg}/ico_settings_gray.svg');
@ico_settings_w : url('@{svg}/ico_settings_w.svg');
// 아이콘 - 홈
@ico_home : url('@{svg}/ico_home.svg');
@ico_home_b : url('@{svg}/ico_home_b.svg');
@ico_home_gray : url('@{svg}/ico_home_gray.svg');
@ico_home_w : url('@{svg}/ico_home_w.svg');
// 아이콘 - 메일
@ico_mail : url('@{svg}/ico_mail.svg');
@ico_mail_b : url('@{svg}/ico_mail_b.svg');
@ico_mail_gray : url('@{svg}/ico_mail_gray.svg');
@ico_mail_w : url('@{svg}/ico_mail_w.svg');
// 아이콘 - 전화
@ico_call : url('@{svg}/ico_call.svg');
@ico_call_b : url('@{svg}/ico_call_b.svg');
@ico_call_gray : url('@{svg}/ico_call_gray.svg');
@ico_call_w : url('@{svg}/ico_call_w.svg');
// 아이콘 - 이미지
@ico_img : url('@{svg}/ico_img.svg');
@ico_img_b : url('@{svg}/ico_img_b.svg');
@ico_img_gray : url('@{svg}/ico_img_gray.svg');
@ico_img_w : url('@{svg}/ico_img_w.svg');
// 아이콘 - 이미지 업로드
@ico_img_upload : url('@{svg}/ico_img_upload.svg');
@ico_img_upload_b : url('@{svg}/ico_img_upload_b.svg');
@ico_img_upload_gray : url('@{svg}/ico_img_upload_gray.svg');
@ico_img_upload_w : url('@{svg}/ico_img_upload_w.svg');
// 아이콘 - 꺽쇠, 더블 (상)
@ico_up_bracket : url('@{svg}/ico_up_bracket.svg');
@ico_up_bracket_b : url('@{svg}/ico_up_bracket_b.svg');
@ico_up_bracket_gray : url('@{svg}/ico_up_bracket_gray.svg');
@ico_up_bracket_w : url('@{svg}/ico_up_bracket_w.svg');
@ico_up_double_bracket : url('@{svg}/ico_up_double_bracket.svg');
@ico_up_double_bracket_b : url('@{svg}/ico_up_double_bracket_b.svg');
@ico_up_double_bracket_gray : url('@{svg}/ico_up_double_bracket_gray.svg');
@ico_up_double_bracket_w : url('@{svg}/ico_up_double_bracket_w.svg');
// 아이콘 - 꺽쇠, 더블 (하)
@ico_down_bracket : url('@{svg}/ico_down_bracket.svg');
@ico_down_bracket_b : url('@{svg}/ico_down_bracket_b.svg');
@ico_down_bracket_gray : url('@{svg}/ico_down_bracket_gray.svg');
@ico_down_bracket_w : url('@{svg}/ico_down_bracket_w.svg');
@ico_down_double_bracket : url('@{svg}/ico_down_double_bracket.svg');
@ico_down_double_bracket_b : url('@{svg}/ico_down_double_bracket_b.svg');
@ico_down_double_bracket_gray : url('@{svg}/ico_down_double_bracket_gray.svg');
@ico_down_double_bracket_w : url('@{svg}/ico_down_double_bracket_w.svg');
// 아이콘 - 꺽쇠, 더블 (좌)
@ico_left_bracket : url('@{svg}/ico_left_bracket.svg');
@ico_left_bracket_b : url('@{svg}/ico_left_bracket_b.svg');
@ico_left_bracket_gray : url('@{svg}/ico_left_bracket_gray.svg');
@ico_left_bracket_w : url('@{svg}/ico_left_bracket_w.svg');
@ico_left_double_bracket : url('@{svg}/ico_left_double_bracket.svg');
@ico_left_double_bracket_b : url('@{svg}/ico_left_double_bracket_b.svg');
@ico_left_double_bracket_gray : url('@{svg}/ico_left_double_bracket_gray.svg');
@ico_left_double_bracket_w : url('@{svg}/ico_left_double_bracket_w.svg');
// 아이콘 - 꺽쇠, 더블 (우)
@ico_right_bracket : url('@{svg}/ico_right_bracket.svg');
@ico_right_bracket_b : url('@{svg}/ico_right_bracket_b.svg');
@ico_right_bracket_gray : url('@{svg}/ico_right_bracket_gray.svg');
@ico_right_bracket_w : url('@{svg}/ico_right_bracket_w.svg');
@ico_right_double_bracket : url('@{svg}/ico_right_double_bracket.svg');
@ico_right_double_bracket_b : url('@{svg}/ico_right_double_bracket_b.svg');
@ico_right_double_bracket_gray : url('@{svg}/ico_right_double_bracket_gray.svg');
@ico_right_double_bracket_w : url('@{svg}/ico_right_double_bracket_w.svg');
// --------------------------------
// SNS 아이콘 - 페이스북
@ico_logo_fb : url('@{svg}/ico_logo_fb.svg');
@ico_logo_fb_b : url('@{svg}/ico_logo_fb_b.svg');
@ico_logo_fb_gray : url('@{svg}/ico_logo_fb_gray.svg');
@ico_logo_fb_w : url('@{svg}/ico_logo_fb_w.svg');
// SNS 아이콘 - 인스타
@ico_logo_ins : url('@{svg}/ico_logo_ins.svg');
@ico_logo_ins_b : url('@{svg}/ico_logo_ins_b.svg');
@ico_logo_ins_gray : url('@{svg}/ico_logo_ins_gray.svg');
@ico_logo_ins_w : url('@{svg}/ico_logo_ins_w.svg');
// SNS 아이콘 - 네이버
@ico_logo_naver : url('@{svg}/ico_logo_naver.svg');
@ico_logo_naver_b : url('@{svg}/ico_logo_naver_b.svg');
@ico_logo_naver_gray : url('@{svg}/ico_logo_naver_gray.svg');
@ico_logo_naver_w : url('@{svg}/ico_logo_naver_w.svg');
// SNS 아이콘 - 네이버 블로그
@ico_logo_naver_blog : url('@{svg}/ico_logo_naver_blog.svg');
@ico_logo_naver_blog_b : url('@{svg}/ico_logo_naver_blog_b.svg');
@ico_logo_naver_blog_gray : url('@{svg}/ico_logo_naver_blog_gray.svg');
@ico_logo_naver_blog_w : url('@{svg}/ico_logo_naver_blog_w.svg');
// SNS 아이콘 - 네이버 포스트
@ico_logo_naver_post : url('@{svg}/ico_logo_naver_post.svg');
@ico_logo_naver_post_b : url('@{svg}/ico_logo_naver_post_b.svg');
@ico_logo_naver_post_gray : url('@{svg}/ico_logo_naver_post_gray.svg');
@ico_logo_naver_post_w : url('@{svg}/ico_logo_naver_post_w.svg');
// SNS 아이콘 - 카카오
@ico_kakao : url('@{svg}/ico_kakao.svg');
@ico_logo_kakao : url('@{svg}/ico_logo_kakao.svg');
@ico_logo_kakao_b : url('@{svg}/ico_logo_kakao_b.svg');
@ico_logo_kakao_gray : url('@{svg}/ico_logo_kakao_gray.svg');
@ico_logo_kakao_w : url('@{svg}/ico_logo_kakao_w.svg');
// --------------------------------
// TASTE 타이틀 아이콘
@ico_taste_title : url('@{svg}/ico_taste_title.svg');
@ico_taste_title_b : url('@{svg}/ico_taste_title_b.svg');
@ico_taste_title_gray : url('@{svg}/ico_taste_title_gray.svg');
@ico_taste_title_w : url('@{svg}/ico_taste_title_w.svg');
// 포스트 타이틀 아이콘
@ico_post_title : url('@{svg}/ico_post_title.svg');
@ico_post_title_b : url('@{svg}/ico_post_title_b.svg');
@ico_post_title_gray : url('@{svg}/ico_post_title_gray.svg');
@ico_post_title_w : url('@{svg}/ico_post_title_w.svg');
// 맛집랭킹 타이틀 아이콘
@ico_restaurant_title : url('@{svg}/ico_restaurant_title.svg');
@ico_restaurant_title_b : url('@{svg}/ico_restaurant_title_b.svg');
@ico_restaurant_title_gray : url('@{svg}/ico_restaurant_title_gray.svg');
@ico_restaurant_title_w : url('@{svg}/ico_restaurant_title_w.svg');
// 디너패스 전용 아이콘
@ico_dq_pass_title : url('@{svg}/ico_dq_pass_title.svg');
@ico_dq_pass_title_b : url('@{svg}/ico_dq_pass_title_b.svg');
@ico_dq_pass_title_gray : url('@{svg}/ico_dq_pass_title_gray.svg');
@ico_dq_pass_title_w : url('@{svg}/ico_dq_pass_title_w.svg');
// 디너패스 랭크 이미지
@ico_dq_pass_rank_01 : url('@{svg}/ico_dq_pass_rank_01.svg');
@ico_dq_pass_rank_02 : url('@{svg}/ico_dq_pass_rank_02.svg');
@ico_dq_pass_rank_03 : url('@{svg}/ico_dq_pass_rank_03.svg');
@ico_dq_pass_rank_04 : url('@{svg}/ico_dq_pass_rank_04.svg');
@ico_dq_pass_rank_05 : url('@{svg}/ico_dq_pass_rank_05.svg');
@ico_dq_pass_rank_06 : url('@{svg}/ico_dq_pass_rank_06.svg');
// 월계수 장식 이미지
@ico_dq_laurel_left : url('@{svg}/ico_dq_laurel_left.svg');
@ico_dq_laurel_left_b : url('@{svg}/ico_dq_laurel_left_b.svg');
@ico_dq_laurel_left_w : url('@{svg}/ico_dq_laurel_left_w.svg');
@ico_dq_laurel_right : url('@{svg}/ico_dq_laurel_right.svg');
@ico_dq_laurel_right_b : url('@{svg}/ico_dq_laurel_right_b.svg');
@ico_dq_laurel_right_w : url('@{svg}/ico_dq_laurel_right_w.svg');
// 픽셀 텍스쳐
@px_dot : url('@{svg}/px_dot.svg');
// --------------------------------
// 구글플레이 / 앱스토어 아이콘
@ico_appstore_btn : url('@{svg}/ico_appstore_btn.svg');
@ico_appstore_btn_w : url('@{svg}/ico_appstore_btn_w.svg');
@ico_googleplay_btn : url('@{svg}/ico_googleplay_btn.svg');
@ico_googleplay_btn_w : url('@{svg}/ico_googleplay_btn_w.svg');
// 디너로고
@ico_logo : url('@{svg}/ico_logo.svg');
@ico_logo_w : url('@{svg}/ico_logo_w.svg');
// 디너패스 로고
@ico_logo_pass : url('@{svg}/ico_logo_pass.svg');
// 디너 심볼마크
@ico_symbol : url('@{svg}/ico_symbol.svg');
// 뷰티 심볼마크
@ico_symbol_bq : url('@{svg}/ico_symbol_bq.svg');
// 택배 심볼마크
@ico_symbol_tq : url('@{svg}/ico_symbol_tq.svg');
// 디너 물음표 마크
@ico_question_mark : url('@{svg}/ico_question_mark.svg');
// 디너 초대권 전용 로고타입
@ico_dq_invitation_logotype : url('@{svg}/ico_dq_invitation_logotype.svg');
@ico_dq_invitation_logotype_w : url('@{svg}/ico_dq_invitation_logotype_w.svg');
// 퀵 url 버튼
@btn_quick_url_dq : url('@{svg}/btn_quick_url_dq.svg');
@btn_quick_url_bq : url('@{svg}/btn_quick_url_bq.svg');
@btn_quick_url_tq : url('@{svg}/btn_quick_url_tq.svg');
@btn_quick_url_dq_m : url('@{svg}/btn_quick_url_dq_m.svg');
@btn_quick_url_bq_m : url('@{svg}/btn_quick_url_bq_m.svg');
@btn_quick_url_tq_m : url('@{svg}/btn_quick_url_tq_m.svg');
// --------------------------------
@ico_qz_logotype_en : url('/dqstatic/assets/image/service/2019/qz_corp/svg/qz_logotype_en.svg');
@ico_qz_logotype_en_w : url('/dqstatic/assets/image/service/2019/qz_corp/svg/qz_logotype_en_w.svg');
// --------------------------------
// 디너 심볼마크 이미지
@img_dq_queen : url('@{img}/img_dq_queen.png');
// 디너 노이미지 이미지
@img_dq_no_image : url('@{img}/img_dq_no_image.png');
// 디너패스 전용 캐러셀 이미지
@img_dq_pass_carousel_guide_01 : url('@{img}/dinnerpass/img_dq_pass_carousel_guide_01.png');
@img_dq_pass_carousel_guide_02 : url('@{img}/dinnerpass/img_dq_pass_carousel_guide_02.png');
@img_dq_pass_carousel_guide_03 : url('@{img}/dinnerpass/img_dq_pass_carousel_guide_03.png');
@img_dq_pass_carousel_guide_04 : url('@{img}/dinnerpass/img_dq_pass_carousel_guide_04.png');
// 상단 라인배너 이미지
@img_dq_linebanner : url('@{img}/img_dq_linebanner.png');
@img_dq_linebanner2 : url('@{img}/img_dq_linebanner2.png');
// 메인 프리미엄 체험단 이미지
@img_premium : url('@{img}/img_premium.png');
// 카카오톡 아이콘
@kakao_medium : url('@{img}/kakaolink_btn_medium.png');
@kakao_small : url('@{img}/kakaolink_btn_small.png');
@kakao_medium_ov : url('@{img}/kakaolink_btn_medium_ov.png');
@kakao_small_ov : url('@{img}/kakaolink_btn_small_ov.png');
// 맛집랭킹 이미지
@img_res_area_0 : url('@{img}/restaurant/img_res_area_0.jpg');
@img_res_area_1 : url('@{img}/restaurant/img_res_area_1.jpg');
@img_res_area_2 : url('@{img}/restaurant/img_res_area_2.jpg');
@img_res_area_3 : url('@{img}/restaurant/img_res_area_3.jpg');
@img_res_area_4 : url('@{img}/restaurant/img_res_area_4.jpg');
@img_res_area_5 : url('@{img}/restaurant/img_res_area_5.jpg');
@img_res_area_6 : url('@{img}/restaurant/img_res_area_6.jpg');
@img_res_area_7 : url('@{img}/restaurant/img_res_area_7.jpg');
@img_res_area_8 : url('@{img}/restaurant/img_res_area_8.jpg');
@img_res_area_9 : url('@{img}/restaurant/img_res_area_9.jpg');
@img_res_area_10 : url('@{img}/restaurant/img_res_area_10.jpg');
@img_res_area_11 : url('@{img}/restaurant/img_res_area_11.jpg');
@img_res_area_12 : url('@{img}/restaurant/img_res_area_12.jpg');
@img_res_area_13 : url('@{img}/restaurant/img_res_area_13.jpg');
@img_res_area_14 : url('@{img}/restaurant/img_res_area_14.jpg');
@img_res_area_15 : url('@{img}/restaurant/img_res_area_15.jpg');
@img_res_area_16 : url('@{img}/restaurant/img_res_area_16.jpg');
@img_res_area_17 : url('@{img}/restaurant/img_res_area_17.jpg');
@img_res_bg_0 : url('@{img}/restaurant/img_res_bg_0.png');
@img_res_bg_1 : url('@{img}/restaurant/img_res_bg_1.png');
@img_res_bg_2 : url('@{img}/restaurant/img_res_bg_2.png');
// 앱 다운로드 스크린샷 이미지
@img_dq_app_shot_01 : url('@{img}/img_dq_app_shot_01.png');
@img_dq_app_shot_02 : url('@{img}/img_dq_app_shot_02.png');

// --------------------------------
// 서비스 로딩화면 애니메이션
@gif_dq_loading: url('@{animation}/dq_loading.gif');
@mp4_dq_loading: url('@{animation}/dq_loading.mp4');
@gif_dq_splash: url('@{animation}/dq_splash.gif');
@mp4_dq_splash: url('@{animation}/dq_splash.mp4');

// --------------------------------
// 리뷰가이드페이지 이미지 영역
// 배송딜
@review_dq_package : '/dqstatic/assets/image/service/2019/review_guide/dq/package';
// 방문딜
@review_dq_visit : '/dqstatic/assets/image/service/2019/review_guide/dq/visit';
// 배송딜 본문
@img_dq_review_package_new_01 : url('@{review_dq_package}/new/img_dq_review_package_new_01.png');
@img_dq_review_package_new_02 : url('@{review_dq_package}/new/img_dq_review_package_new_02.png');
@img_dq_review_package_new_03 : url('@{review_dq_package}/new/img_dq_review_package_new_03.png');
@img_dq_review_package_pre_01 : url('@{review_dq_package}/pre/img_dq_review_package_pre_01.png');
@img_dq_review_package_pre_02 : url('@{review_dq_package}/pre/img_dq_review_package_pre_02.png');
@img_dq_review_package_pre_03 : url('@{review_dq_package}/pre/img_dq_review_package_pre_03.png');
@img_dq_review_package_pre_04 : url('@{review_dq_package}/pre/img_dq_review_package_pre_04.png');
.img_dq_review_package_new_01{ background: @img_dq_review_package_new_01; }
.img_dq_review_package_new_02{ background: @img_dq_review_package_new_02; }
.img_dq_review_package_new_03{ background: @img_dq_review_package_new_03; }
.img_dq_review_package_pre_01{ background: @img_dq_review_package_pre_01; }
.img_dq_review_package_pre_02{ background: @img_dq_review_package_pre_02; }
.img_dq_review_package_pre_03{ background: @img_dq_review_package_pre_03; }
.img_dq_review_package_pre_04{ background: @img_dq_review_package_pre_04; }
// 방문딜 본문 [new]
@img_dq_review_visit_new_map_01 : url('@{review_dq_visit}/new/img_dq_review_visit_new_map_01.png');
@img_dq_review_visit_new_map_02 : url('@{review_dq_visit}/new/img_dq_review_visit_new_map_02.png');
@img_dq_review_visit_new_map_03 : url('@{review_dq_visit}/new/img_dq_review_visit_new_map_03.png');
@img_dq_review_visit_new_map_04 : url('@{review_dq_visit}/new/img_dq_review_visit_new_map_04.png');
@img_dq_review_visit_new_map_05 : url('@{review_dq_visit}/new/img_dq_review_visit_new_map_05.png');
@img_dq_review_visit_new_map_06 : url('@{review_dq_visit}/new/img_dq_review_visit_new_map_06.png');
@img_dq_review_visit_new_01 : url('@{review_dq_visit}/new/img_dq_review_visit_new_01.png');
@img_dq_review_visit_new_02 : url('@{review_dq_visit}/new/img_dq_review_visit_new_02.png');
@img_dq_review_visit_new_03 : url('@{review_dq_visit}/new/img_dq_review_visit_new_03.png');
@img_dq_review_visit_new_04 : url('@{review_dq_visit}/new/img_dq_review_visit_new_04.png');
.img_dq_review_visit_new_map_01{ background: @img_dq_review_visit_new_map_01; }
.img_dq_review_visit_new_map_02{ background: @img_dq_review_visit_new_map_02; }
.img_dq_review_visit_new_map_03{ background: @img_dq_review_visit_new_map_03; }
.img_dq_review_visit_new_map_04{ background: @img_dq_review_visit_new_map_04; }
.img_dq_review_visit_new_map_05{ background: @img_dq_review_visit_new_map_05; }
.img_dq_review_visit_new_map_06{ background: @img_dq_review_visit_new_map_06; }
.img_dq_review_visit_new_01{ background: @img_dq_review_visit_new_01; }
.img_dq_review_visit_new_02{ background: @img_dq_review_visit_new_02; }
.img_dq_review_visit_new_03{ background: @img_dq_review_visit_new_03; }
.img_dq_review_visit_new_04{ background: @img_dq_review_visit_new_04; }
// 방문딜 본문 [pre]
@img_dq_review_visit_pre_map_01 : url('@{review_dq_visit}/pre/img_dq_review_visit_pre_map_01.png');
@img_dq_review_visit_pre_map_02 : url('@{review_dq_visit}/pre/img_dq_review_visit_pre_map_02.png');
@img_dq_review_visit_pre_map_03 : url('@{review_dq_visit}/pre/img_dq_review_visit_pre_map_03.png');
@img_dq_review_visit_pre_map_04 : url('@{review_dq_visit}/pre/img_dq_review_visit_pre_map_04.png');
@img_dq_review_visit_pre_map_05 : url('@{review_dq_visit}/pre/img_dq_review_visit_pre_map_05.png');
@img_dq_review_visit_pre_01 : url('@{review_dq_visit}/pre/img_dq_review_visit_pre_01.png');
@img_dq_review_visit_pre_02 : url('@{review_dq_visit}/pre/img_dq_review_visit_pre_02.png');
@img_dq_review_visit_pre_03 : url('@{review_dq_visit}/pre/img_dq_review_visit_pre_03.png');
.img_dq_review_visit_pre_map_01 { background: @img_dq_review_visit_pre_map_01; }
.img_dq_review_visit_pre_map_02 { background: @img_dq_review_visit_pre_map_02; }
.img_dq_review_visit_pre_map_03 { background: @img_dq_review_visit_pre_map_03; }
.img_dq_review_visit_pre_map_04 { background: @img_dq_review_visit_pre_map_04; }
.img_dq_review_visit_pre_map_05 { background: @img_dq_review_visit_pre_map_05; }
.img_dq_review_visit_pre_01 { background: @img_dq_review_visit_pre_01; }
.img_dq_review_visit_pre_02 { background: @img_dq_review_visit_pre_02; }
.img_dq_review_visit_pre_03 { background: @img_dq_review_visit_pre_03; }

// 구 버전 11.신청하기페이지 연계 ( 수정후 삭제바람 )
// --------------------------------
@bq_bg01 : url('@{svg}/bq_bg01.svg');
@bq_bg02 : url('@{svg}/bq_bg02.svg');
@bq_bg03 : url('@{svg}/bq_bg03.svg');
@bq_bg04 : url('@{svg}/bq_bg04.svg');
@bq_character : url('@{svg}/bq_character.svg');
@bq_character_fail : url('@{svg}/bq_character_fail.svg');
@bq_logotype : url('@{svg}/bq_logotype.svg');
@bq_logotype_purple : url('@{svg}/bq_logotype_purple.svg');
@bq_logotype_white : url('@{svg}/bq_logotype_white.svg');
@bq_moon : url('@{svg}/bq_moon.svg');
@chevron_darkpurple_down : url('@{svg}/chevron_darkpurple_down.svg');
@chevron_darkpurple_left : url('@{svg}/chevron_darkpurple_left.svg');
@chevron_darkpurple_right : url('@{svg}/chevron_darkpurple_right.svg');
@chevron_darkpurple_up : url('@{svg}/chevron_darkpurple_up.svg');
@chevron_w_down : url('@{svg}/chevron_w_down.svg');
@chevron_w_left : url('@{svg}/chevron_w_left.svg');
@chevron_w_right : url('@{svg}/chevron_w_right.svg');
@chevron_w_up : url('@{svg}/chevron_w_up.svg');
@close : url('@{svg}/close.svg');
@close_w : url('@{svg}/close_w.svg');
@comment : url('@{svg}/comment.svg');
@comment_w : url('@{svg}/comment_w.svg');
@like : url('@{svg}/like.svg');
@like_w : url('@{svg}/like_w.svg');
@menu_hamburger : url('@{svg}/menu_hamburger.svg');
@menu_hamburger_w : url('@{svg}/menu_hamburger_w.svg');
@person : url('@{svg}/person.svg');
@person_w : url('@{svg}/person_w.svg');
@question_mark : url('@{svg}/question_mark.svg');
@search : url('@{svg}/search.svg');
@search_purple : url('@{svg}/search_purple.svg');
@ico_fb : url('@{svg}/ico_fb.svg');
@ico_fb_gray : url('@{svg}/ico_fb_gray.svg');
@ico_ins : url('@{svg}/ico_ins.svg');
@ico_ins_gray : url('@{svg}/ico_ins_gray.svg');
@ico_nav : url('@{svg}/ico_nav.svg');
@ico_nav_gray : url('@{svg}/ico_nav_gray.svg');
@kakao_medium : url('@{img}/kakaolink_btn_medium.png');
@kakao_small : url('@{img}/kakaolink_btn_small.png');
@kakao_medium_ov : url('@{img}/kakaolink_btn_medium_ov.png');
@kakao_small_ov : url('@{img}/kakaolink_btn_small_ov.png');
@banner : url('@{img}/banner/banner01.jpg');
@detail_bg_img : url('@{img}/detail_bg_img.jpg');
// --------------------------------


//    0. 자주쓰는 스타일 가이드 모음
// --------------------------------
// 폰트 - 이롭게 바탕체
@font-face {
  font-family: 'Iropke Batang';
  font-weight: 400;
  src: local('Iropke Batang'),
  url('/dqstatic/assets/font/IropkeBatangM.eot') format('eot'),
  url('/dqstatic/assets/font/IropkeBatangM.woff') format('woff');
}
// 타이포생략처리
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
// 텍스트 숨김처리 (스크린 리더 적용)
.blind {
  position: absolute;
  overflow: hidden;
  margin: -1px;
  width: 1px;
  height: 1px;
  clip: rect(0,0,0,0);
}
// 자식부 float시 height 교정
.clearAfter{ &:after{ display: block; clear: both; content: ''; }}
// transform none
.transform_none{ -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; }
// transform Y축 +-50%
.transformY_Plus50{ -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); }
.transformY_Minus50{ -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
// transform X축 +-50%
.transformX_Plus50{ -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); }
.transformX_Minus50{ -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }
// transition 관련
.transition_none{ -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; }
.transition_02s{ -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; }
.transition_03s{ -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
.transition_04s{ -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; }
.transition_05s{ -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.transition_06s{ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; }
// 버튼 호버
.transform_hover {
  opacity: 0.8;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
// 버튼 액티브
.transform_active {
  opacity: 0.5;
}
// 박스 쉐도우
.box-shadow--normal{
  -webkit-box-shadow: 4px 8px 16px rgba(51,51,51,0.2), -4px -8px 16px rgba(255,255,255,0.05);
  -moz-box-shadow: 4px 8px 16px rgba(51,51,51,0.2), -4px -8px 16px rgba(255,255,255,0.05);
  -o-box-shadow: 4px 8px 16px rgba(51,51,51,0.2), -4px -8px 16px rgba(255,255,255,0.05);
  box-shadow: 4px 8px 16px rgba(51,51,51,0.2), -4px -8px 16px rgba(51,51,51,0.05)
}
.box-shadow--light{
  -webkit-box-shadow: 4px 8px 16px rgba(51,51,51,0.05), -4px -8px 16px rgba(255,255,255,0.005);
  -moz-box-shadow: 4px 8px 16px rgba(51,51,51,0.05), -4px -8px 16px rgba(255,255,255,0.005);
  -o-box-shadow: 4px 8px 16px rgba(51,51,51,0.05), -4px -8px 16px rgba(255,255,255,0.005);
  box-shadow: 4px 8px 16px rgba(51,51,51,0.05), -4px -8px 16px rgba(51,51,51,0.005);
}
// [img 처리법] object-fit js 변수 처리법
.object-fit-contain{ width: 100%; height: 100%; object-fit: contain; }
.object-fit-cover{ width: 100%; height: 100%; object-fit: cover; }
// [img 처리법] absolute 4방향 0값
.absolute-zero{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.font-iropke{ font-family: "Iropke Batang", serif; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px transparent inset; transition: background-color 5000s ease-in-out 0s; }


//    1. 메인 헤더 영역
// --------------------------------

.dq-header {
  display: block;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 80px;
  padding: 0 32px;
  background: @color-gre-dq1;
  font-size: 0;
  text-align: left;
  .box-shadow--normal;
  // 로고
  &__logo {
    display: inline-block;
    width: 200px;
    height: 48px;
    margin: 16px 24px 16px 0;
    background: @ico_logo_w center~"/"contain no-repeat;
    vertical-align: middle;
    a {
      display: block;
      width: inherit;
      height: inherit;
    }
  }
  // 네비게이션 (웹)
  &__nav {
    display: inline-block;
    vertical-align: middle;
    &__ul{
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 0;
      li {
        display: inline-block;
        &.on {
          a {
            &:after { opacity: 1; }
          }
        }
        a {
          display: block;
          position: relative;
          color: @color-white;
          width: auto;
          padding: 0 16px;
          text-decoration: none;
          > span { .font-subtitle1; }
          &:hover{
            &:after { opacity: 0.8; }
          }
          &:after {
            position: absolute;
            top: -22px;
            right: 0;
            left: 0;
            width: 72px;
            height: 72px;
            margin: 0 auto;
            border: 1px solid @color-white;
            border-radius: 100px;
            opacity: 0;
            .transition_03s;
            will-change: opacity;
            pointer-events: none;
            content: '';
          }
          .dq-nav-new {
            position: absolute;
            top: -16px;
            right: -5px;
            z-index: 1;
            width: 42px;
            height: 16px;
            border-radius: 16px;
            background: @color-white;
            color: @color-dq1;
            text-align: center;
            .box-shadow--light;
            .font-overline;
            line-height: 16px;
          }
        }
      }
    }
  }
  // 검색 (웹)
  &__search {
    display: inline-block;
    float: right;
    vertical-align: middle;
    max-width: 200px;
    width: 100%;
    margin: 22px 20px 0 24px;
    &__form {
      border: none;
      border-radius: 100px;
      background: @color-white;
      font-size: 0;
      .box-shadow--normal;
      .transition_03s;
      &:hover,
      &:focus { opacity: 1; .transform_hover; }
      &--input {
        width: -webkit-calc(~"100% - 76px");
        width: -moz-calc(~"100% - 76px");
        width: calc(~"100% - 76px");
        padding: 0 0 0 8px;
        border: none;
        background: transparent;
        vertical-align: middle;
        outline: none;
        .font-subtitle1;
        &::placeholder { color: @color-black3; opacity: 1; }
        &:-ms-input-placeholder { color: @color-black3; }
        &:focus { border-left: 2px solid @color-black3; animation: cursorbar 1s infinite; }
        @keyframes cursorbar {
          50% { border-left-color: @color-black3; }
          50.1% { border-left-color: transparent; }
          99.9% { border-left-color: transparent;}
          100% { border-left-color: @color-black3; }
        }
        @-webkit-keyframes cursorbar {
          50% { border-left-color: @color-black3; }
          50.1% { border-left-color: transparent; }
          99.9% { border-left-color: transparent;}
          100% { border-left-color: @color-black3; }
        }
      }
      &--button {
        width: 36px;
        height: 36px;
        border: none;
        background: transparent @ico_search center ~"/" contain no-repeat;
        vertical-align: middle;
        outline: none;
      }
    }
  }
  // 로그인 / 마이페이지 / FAQ 영역 (웹) *마이페이지는 'logged' 상태일때 등장함.
  // logged 상태 추가 (웹)
  &__login {
    display: inline-block;
    float: right;
    margin: 22px 0;
    &__btn,
    &__faq,
    &__mypage {
      display: inline-block;
      position: relative;
      padding: 7px 0 8px 40px;
      margin: 0 0 0 16px;
      vertical-align: middle;
      .transition_03s;
      will-change: color;
      .font-button;
      .clearAfter;
      &:hover,
      &:focus {
        color: @color-white;
        text-decoration: none;
        .transform_hover;
        &:after { opacity: 1; }
      }
      .ico {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 36px;
        height: 36px;
        vertical-align: middle;
      }
      .text { color: @color-white; }
    }
    &__btn {
      .ico {
        background: @ico_download_w center ~"/" contain no-repeat;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
      }
    }
    &__faq {
      .ico { background: @ico_contact_w center ~"/" contain no-repeat; }
    }
    &__mypage {
      .ico { background: @ico_mypage_w center ~"/" contain no-repeat; }
    }
    // logged 상태일때 (웹)
    &__logged {
      display: inline-block;
      position: relative;
      margin: 0 0 0 16px;
      font-size: 0;
      vertical-align: middle;
      .profile {
        position: absolute;
        width: 36px;
        height: 36px;
        .object-fit-cover {
          overflow: hidden;
          width: inherit;
          height: inherit;
          border-radius: 8px;
          background: @color-gray3;
          .box-shadow--normal;
          img {
            width: inherit;
            height: inherit;
            object-fit: cover;
          }
        }
      }
      .profile-name {
        position: relative;
        max-width: 160px;
        padding: 8px 16px 8px 44px;
        color: @color-white;
        .font-body2;
        &:after {
          position: absolute;
          top: 8px;
          right: 0;
          .font-body2;
          content: '님';
        }
      }
    }
  }
  // 모바일 모드 시 (태블릿 / 모바일)
  &--m {
    &__nav-btn,
    &__nav,
    &__search-btn,
    &__search,
    &__fade,
    &__tab-nav{ display: none; }
  }
  // 모달 특수 상황에서 사라질때 (모달)
  &.hide-modal { opacity: 0; z-index: -11; }
  // 스크롤 픽시드 모드
  &.fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    background: @color-gray1;
    animation: dq-header-fixed ease-in-out 0.3s;
    will-change: transform;
    .box-shadow--light;
    .transition_03s;
    @keyframes dq-header-fixed {
      0% {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
      }
    }
    @-webkit-keyframes dq-header-fixed {
      0% {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
      }
    }
    .dq-header{
      // 스크롤 픽시드 모드 - 로고
      &__logo { background: @ico_logo center ~"/" contain no-repeat; }
      // 스크롤 픽시드 모드 - 네비게이션 (웹
      &__nav {
        &__ul {
          li {
            &.on {
              a {
                span { color: @color-dq1; }
                &:after { border-color: @color-dq1;}
                &:hover,
                &:focus {
                  &:after { border-color: @color-dq1; }
                }
              }
            }
            a {
              span { color: @color-black3; }
              &:hover,
              &:focus {
                &:after { border-color: @color-black3; }
              }
              .dq-nav-new {
                color: @color-white;
                background: @color-gre-dq1;
              }
            }
          }
        }
      }
      // 스크롤 픽시드 모드 -  검색 (웹)
      &__search {
        &__form {
          background: @color-gre-black1;
          &--input {
            color: @color-white;
            &::placeholder { color: @color-white; opacity: 1; }
            &:-ms-input-placeholder { color: @color-white; }
          }
          &--button { background: transparent @ico_search_w center ~"/" contain no-repeat; }
        }
      }
      // 스크롤 픽시드 모드 - 로그인 / 마이페이지 / FAQ 영역 (웹) *마이페이지는 'logged' 상태일때 등장함.
      // 스크롤 픽시드 모드 - logged 상태 추가 (웹)
      &__login {
        &__btn,
        &__faq,
        &__mypage {
          &:hover,
          &:focus {
            .text { color: @color-dq1; }
          }
          .text { color: @color-black3; }
        }
        &__btn {
          .ico { background: @ico_download_b center ~"/" contain no-repeat; }
          &:hover,
          &:focus {
            .ico { background: @ico_download center ~"/" contain no-repeat; }
          }
        }
        &__faq {
          .ico { background: @ico_contact_b center ~"/" contain no-repeat; }
          &:hover,
          &:focus {
            .ico { background: @ico_contact center ~"/" contain no-repeat; }
          }
        }
        &__mypage {
          .ico { background: @ico_mypage_b center ~"/" contain no-repeat; }
          &:hover,
          &:focus {
            .ico { background: @ico_mypage center ~"/" contain no-repeat; }
          }
        }
        // 스크롤 픽시드 모드 - logged 상태일때 (웹)
        &__logged {
          .profile-name { color: @color-black3; }
        }
      }
    }
  }

  // 노트북 데스크탑 영역 (portrait)
  @media screen and (max-width: 1440px) {
    position: fixed;
    height: 56px;
    padding: 0 32px;
    box-shadow: none;
    // 웹 모드 시 (웹)
    &__nav,
    &__search,
    &__login { display: none; }
    // **logged시 사이드 네비 교정
    &__login {
      &__mypage
      &__faq { display: none}
      &__logged {
        .profile-name {
          color: @color-black3;
        }
      }
    }
    // 로고
    &__logo {
      width: 140px;
      height: 40px;
      background: @ico_dq_invitation_logotype_w center ~"/" 120% no-repeat;
      margin: 8px 0 0;
    }
    // 모바일 모드 시 (태블릿 / 모바일)
    &--m {
      // 모바일 모드 - 사이드 네비 / 검색 버튼
      &__nav-btn,
      &__search-btn {
        display: block;
        float: right;
        width: 48px;
        height: 48px;
        margin: 4px 0;
        border: none;
        background: @ico_hamburger_w center ~"/" contain no-repeat;
        outline: none;
      }
      // 모바일 모드 - 검색 버튼 (태블릿에서는 제외)
      &__search-btn { display: none; background: @ico_search_w center ~"/" contain no-repeat; }
      // 모바일 모드 - 사이드 네비게이션
      &__nav { // 디자인 보류 --------------------------------------------
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10000;
        overflow-x: hidden;
        overflow-y: scroll;
        width: 70%;
        height: 100%;
        background-color: @color-white;
        -webkit-overflow-scrolling: touch !important;
        -webkit-transform: translate3d(130%,0,0);
        -moz-transform: translate3d(130%,0,0);
        -ms-transform: translate3d(130%,0,0);
        -o-transform: translate3d(130%,0,0);
        transform: translate3d(130%,0,0);
        -webkit-box-shadow: 0 -1px 30px rgba(0,0,0,0.6);
        -moz-box-shadow: 0 -1px 30px rgba(0,0,0,0.6);
        -o-box-shadow: 0 -1px 30px rgba(0,0,0,0.6);
        box-shadow: 0 -1px 30px rgba(0,0,0,0.6);
        .transition_05s;
        &.open{
          display: block;
          -webkit-transform: translate3d(0,0,0);
          -moz-transform: translate3d(0,0,0);
          -ms-transform: translate3d(0,0,0);
          -o-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
        }
        ul{
          list-style: none;
          padding: 0 0 80px;
          li{ //리스트
            position: relative;
            padding-left: 24px;
            border-bottom: 1px @color-gray2 solid;
            &.new{ // 배지 생성시
              &:after{
                display: inline-block;
                position: absolute;
                top: 7px;
                left: 15px;
                width: 8px;
                height: 8px;
                border-radius: 100px;
                background-color: @color-dq1;
                content: '';
              }
            }
            .close-btn{ // 닫기
              display: inline-block;
              width: 48px;
              height: 48px;
              border: none;
              background: @ico_close_b center~"/"contain no-repeat;
            }
            &.login-area{ // 로그인영역
              padding-left: 0;
              border: none;
              .login_box{ float: left; padding-left: 24px; }
              // 로그인했을 경우
              .dq-header-login{ //로그인
                &-logged{ //로그인된 화면
                  padding-left: 24px;
                  &-profile{
                    margin: 0 8px 0 0;
                    border: 1px solid @color-black9;
                    box-sizing: content-box;
                  }
                  h5{ color: @color-black3; }
                }
                &-mypage{ //로그인된 화면 마이페이지 버튼
                  display: block;
                  position: relative;
                  padding-left: 56px;
                  margin: 16px 0 0;
                  border: none;
                  text-align: left;
                  width: 100%;
                  height: 48px;
                  border-radius: 0;
                  background: @color-gray1;
                  color: @color-black3;
                  font-size: @font-size-4;
                  line-height: @line-height-4;
                  .ico {
                    background-image: @ico_mypage_b;
                  }
                  span{
                    position: absolute;
                    left: 20px;
                    top: 8px;
                    width: 32px;
                    height: 32px;
                    background: @ico_mypage_b center ~"/" contain no-repeat;
                  }
                }
                &-faq{ display: none; }
              }
              /*
                임시 보류 작업
              */
              .dq-header__login__mypage {
                display: block;
                margin-top: 20px;
                .ico { background-image: @ico_mypage_b; }
                .text {
                  width: 100%;
                  color: @color-black3;
                }
              }
              .dq-header__login__faq { display: none; }
            }
            a{
              color: @color-black3;
              span{
                display: inline-block;
                width: 22px;
                height: 22px;
                margin-right: 4px;
                background: center~"/"120% no-repeat;
                vertical-align: text-bottom;
              }
            }
            // 아이콘 리스트
            &.ico01 > a > span{ background-image: @ico_home_b} // 홈
            &.ico02 > a > span{ background-image: @ico_restaurant_title_b; background-size: contain;} // TASTE
            &.ico03 > a > span{ background-image: @ico_post_title_b; background-size: contain;} // 포스트
            &.ico04 > a > span{ background-image: @ico_taste_title_b; background-size: contain;} // 맛집랭킹
            &.ico05 > a > span{ background-image: @ico_dq_pass_title_b} // 디너패스
            &.ico06 > a > span{ background-image: @ico_notice_gray} // 공지사항
            &.ico07 > a > span{ background-image: @ico_faq_gray} // 자주묻는 질문
            &.ico08 > a > span{ background-image: @ico_contact_gray} // 문의하기
            &.ico09 > a > span{ background-image: @ico_term_gray} // 이용약관
            &.ico10 { border-bottom: none; > a > span{ background-image: @ico_logo_kakao} } // 카카오톡 문의
          }
        }
      }
      // 모바일 모드 - 페이드 배경
      &__fade {
        display: none;
        width: 100%;
        height: 200%;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1000;
        background: rgba(0,0,0,0.8);
        will-change: display, opacity;
      }
      // 모바일 모드 - 탭 네비
      &__tab-nav {
        display: block;
        width: 100%;
        height: 56px;
        position: fixed;
        top: 56px;
        z-index: 9;
        border-radius: 0 0 8px 8px;
        background: @color-gre-dq1;
        .transition_06s;
        will-change: transform;
        // 아래 스크롤시 오픈
        &.nav-up{
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -ms-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0);
        }
        // 위 스크롤시 오프
        &.nav-down{
          -webkit-transform: translateY(-56px);
          -moz-transform: translateY(-56px);
          -ms-transform: translateY(-56px);
          -o-transform: translateY(-56px);
          transform: translateY(-56px);
        }
        // 디너패스 모달시 고정
        &.fixed{
          -webkit-transform: translateY(0px) !important;
          -moz-transform: translateY(0px) !important;;
          -ms-transform: translateY(0px) !important;;
          -o-transform: translateY(0px) !important;;
          transform: translateY(0px) !important;;
        }
        ul {
          list-style: none;
          padding: 0 32px;
          margin: 0;
          font-size: 0;
          li {
            display: inline-block;
            max-width: 84px;
            width: 100%;
            margin: 16px 16px 16px 0;
            vertical-align: middle;
            white-space: nowrap;
            a {
              display: block;
              position: relative;
              color: @color-white;
              text-decoration: none;
              font-size: 0;
              .clearAfter;
              &.on,
              &:hover,
              &:focus {
                .ico { background-color: @color-white; .box-shadow--normal; }
              }
              > span { display: inline-block; vertical-align: middle; }
              .ico {
                width: 24px;
                height: 24px;
                border-radius: 100px;
                border: 1px solid @color-white;
                background: transparent;
              }
              .text { margin: 2px 0 0 8px; .font-body2; }
              .dq-nav-new {
                position: absolute;
                top: -12px;
                right: -20px;
                padding: 0 8px;
                border-radius: 100px;
                background: @color-white;
                color: @color-dq1;
                .box-shadow--normal;
                .font-overline;
              }
            }
          }
          .search{
            max-width: -webkit-calc(~"100% - 480px");
            max-width: calc(~"100% - 480px");
            width: 100%;
            float: right;
            margin: 10px 0;
            text-align: right;
            .search-form {
              display: block;
              height: 36px;
              border-radius: 100px;
              background: @color-white;
              text-align: left;
              font-size: 0;
              &-btn {
                display: inline-block;
                width: 36px;
                height: 36px;
                border: none;
                outline: none;
                background: @ico_search_b center ~"/" contain no-repeat;
                vertical-align: middle;
              }
              &-input {
                display: inline-block;
                max-width: -webkit-calc(~"100% - 36px");
                max-width: calc(~"100% - 36px");
                padding: 0 8px;
                margin: 0;
                border: none;
                background: transparent;
                .font-body1;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
    // 스크롤 픽시드 모드
    &.fixed {
      animation: none;
      will-change: auto;
      background: @color-gre-dq1;
      box-shadow: none;
      .dq-header {
        // 스크롤 픽시드 모드 - 로고
        &__logo {
          width: 140px;
          height: 40px;
          background: @ico_dq_invitation_logotype_w center ~"/" 120% no-repeat;
          margin: 8px 0 0;
        }
      }
    }
  }


  // 모바일 영역
  @media screen and (max-width: 767px) {
    padding: 0 8px 0 16px;
    box-shadow: none;
    // 로고
    &__logo {}
    // 모바일 모드 시 (태블릿 / 모바일)
    &--m {
      // 모바일 모드 - 사이드 네비 / 검색 버튼
      &__search-btn { display: block; }
      // 모바일 모드 - 검색
      &__search {
        position: fixed;
        top: 40%;
        right: 0;
        left: 0;
        z-index: 1001;
        padding: 0 24px;
        .transformY_Minus50;
        &.open { display: block; }
        &__form {
          display: block;
          overflow: hidden;
          width: 100%;
          border-radius: 8px;
          font-size: 0;
          &__btn {
            display: inline-block;
            float: right;
            width: 48px;
            height: 48px;
            border: none;
            background: @color-white @ico_search center ~"/" contain no-repeat;
            outline: none;
          }
          &__input {
            max-width: 100%;
            width: -webkit-calc(~"100% - 48px");
            width: -moz-calc(~"100% - 48px");
            width: calc(~"100% - 48px");
            padding: 14px 16px;
            margin: 0;
            border: none;
            outline: none;
            .font-button;
          }

        }
      }
      // 모바일 모드 - 탭 네비
      &__tab-nav {
        ul {
          padding: 0 16px;
          li {
            max-width: none;
            width: 25%;
            margin: 4px 0 0;
            a {
              text-align: center;
              .dq-nav-new {
                top: -4px;
                right: -webkit-calc(~"50% - 44px");
                right: calc(~"50% - 44px");
                width: 16px;
                height: 16px;
                background: @color-gre-yello;
                font-size: 0;
                &:after {
                  display: block;
                  position: absolute;
                  top: 0;
                  right: 0;
                  left: 0;
                  color: @color-white;
                  .font-overline;
                  letter-spacing: 0;
                  content: 'N';
                }
              }
              .ico {
                position: absolute;
                right: 0;
                left: 0;
                margin: 28px auto 0;
                width: 16px;
                height: 16px;
              }
              .text {
                padding: 0;
                margin: 0;
                .font-subtitle2;
              }
            }
          }
          .search { display: none; }
        }
      }
    }
  }

}











.dq-header111{
  position: relative;
  z-index: 10;
  height: 64px;
  //border-bottom: 1px solid @color-dq4;
  //background: @color-gre-dq1;
  background: @color-dq1;
  -webkit-box-shadow: 0 4px 16px rgba(51,51,51,0.3);
  -moz-box-shadow: 0 4px 16px rgba(51,51,51,0.3);
  -o-box-shadow: 0 4px 16px rgba(51,51,51,0.3);
  box-shadow: 0 4px 16px rgba(51,51,51,0.3);
  .transition_03s;
  &.hide-modal{ // 특정 상황에서 사라질때 (모달)
    opacity: 0;
    z-index: -11;
  }
  &.fixed{ //스크롤시 fixed
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(255,64,129,.9);
  }
  &-logo{ //로고
    display: inline-block;
    float: left;
    width: 180px;
    height: 64px;
    background: @ico_logo_w center~"/"contain no-repeat;
    .transition_02s;
    will-change: transform;
    @media screen and (max-width: 1368px){ width: 160px; }
    &:hover{
      -webkit-transform: scale(1.05);
      -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
      -o-transform: scale(1.05);
      transform: scale(1.05);
    }
    a{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  &-nav{ //네비게이션
    float: left;
    ul{
      list-style: none;
      li{
        display: inline-block;
        position: relative;
        line-height: 64px;
        a{
          color: @color-white;
          font-size: @font-size-5;
          &:hover{
            text-decoration: none;
            &:after{
              display: inline-block;
              width: 8px;
              height: 8px;
              position: absolute;
              right: 0;
              bottom: 8px;
              left: 0;
              margin: 0 auto;
              border: 1px @color-white solid;
              border-radius: 100px;
              background: none;
              content: '';
            }
          }
          &.on{
            &:after{
              display: inline-block;
              position: absolute;
              right: 0;
              bottom: 8px;
              left: 0;
              width: 8px;
              height: 8px;
              margin: 0 auto;
              border: 1px @color-white solid;
              border-radius: 100px;
              background: @color-white;
              content: '';
            }
          }
          .dq-shining-0{
            -webkit-transform: scale(0) rotate(0deg);
            -moz-transform: scale(0) rotate(0deg);
            -ms-transform: scale(0) rotate(0deg);
            -o-transform: scale(0) rotate(0deg);
            transform: scale(0) rotate(0deg);
          }
          .dq-shining-10{
            -webkit-transform: scale(.8) rotate(360deg);
            -moz-transform: scale(.8) rotate(360deg);
            -ms-transform: scale(.8) rotate(360deg);
            -o-transform: scale(.8) rotate(360deg);
            transform: scale(.8) rotate(360deg);
          }
          .dq-shining-20{
            -webkit-transform: scale(0) rotate(720deg);
            -moz-transform: scale(0) rotate(720deg);
            -ms-transform: scale(0) rotate(720deg);
            -o-transform: scale(0) rotate(720deg);
            transform: scale(0) rotate(720deg);
          }
          > .dq-shining{
            position: absolute;
            top: 6px;
            right: -28px;
            width: 16px;
            height: 16px;
            .transition_03s;
            will-change: transform;
            .dq-shining-0;
            -webkit-animation: dq-shining linear 5s infinite 1s;
            animation: dq-shining linear 5s infinite 1s;
            @keyframes dq-shining{
              0%{ .dq-shining-0; }
              10%{ .dq-shining-10; }
              20%{ .dq-shining-20; }
            }
            @-webkit-keyframes dq-shining{
              0%{ .dq-shining-0; }
              10%{ .dq-shining-10; }
              20%{ .dq-shining-20; }
            }
            &:before{
              display: block;
              position: absolute;
              left: 0;
              top: 4px;
              width: 15px;
              height: 5px;
              background: @color-white;
              -webkit-transform: skewX(68deg) rotate(0deg);
              -moz-transform: skewX(68deg) rotate(0deg);
              -ms-transform: skewX(68deg) rotate(0deg);
              -o-transform: skewX(68deg) rotate(0deg);
              transform: skewX(68deg) rotate(0deg);
              will-change: transform;
              content: '';
            }
            &:after{
              display: block;
              position: absolute;
              top: 0;
              left: 4px;
              width: 5px;
              height: 15px;
              background: @color-white;
              -webkit-transform: skewY(-68deg) rotate(0deg);
              -moz-transform: skewY(-68deg) rotate(0deg);
              -ms-transform: skewY(-68deg) rotate(0deg);
              -o-transform: skewY(-68deg) rotate(0deg);
              transform: skewY(-68deg) rotate(0deg);
              will-change: transform;
              content: '';
            }
          }
          > .dq-nav-new{
            position: absolute;
            right: -24px;
            top: 8px;
            overflow: hidden;
            padding: 2px 8px;
            border-radius: 100px;
            border: 1px solid @color-white;
            background: @color-dq4;
            -webkit-transform: scale(0.8);
            -moz-transform: scale(0.8);
            -ms-transform: scale(0.8);
            -o-transform: scale(0.8);
            transform: scale(0.8);
            &:before{
              display: block;
              position: relative;
              z-index: 1;
              color: @color-white;
              font-size: 10px;
              font-weight: 700;
              content: 'NEW';
            }
            &:after{
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: 16px;
              height: 100px;
              background: #ffd000;
              -webkit-animation: new-shiny 3s infinite;
              animation: new-shiny 3s infinite;
              -webkit-transform: translateX(-150%) skew(-20deg);
              -moz-transform: translateX(-150%) skew(-20deg);
              -ms-transform: translateX(-150%) skew(-20deg);
              -o-transform: translateX(-150%) skew(-20deg);
              transform: translateX(-150%) skew(-20deg);
              will-change: transform;
              content: '';
              opacity: 0.6;
            }
            .new-shiny-0{
              -webkit-transform: translateX(-150%) skew(-20deg);
              -moz-transform: translateX(-150%) skew(-20deg);
              -ms-transform: translateX(-150%) skew(-20deg);
              -o-transform: translateX(-150%) skew(-20deg);
              transform: translateX(-150%) skew(-20deg);
            }
            .new-shiny-100{
              -webkit-transform: translateX(150%) skew(-20deg);
              -moz-transform: translateX(150%) skew(-20deg);
              -ms-transform: translateX(150%) skew(-20deg);
              -o-transform: translateX(150%) skew(-20deg);
              transform: translateX(150%) skew(-20deg);
            }
            @keyframes new-shiny {
              0% { .new-shiny-0; }
              30% { .new-shiny-100; }
              30.000001% { .new-shiny-0; }
              60%{ .new-shiny-100; }
              100%{ .new-shiny-100; }
            }
            @-webkit-keyframes new-shiny{
              0% { .new-shiny-0; }
              30% { .new-shiny-100; }
              30.000001% { .new-shiny-0; }
              60%{ .new-shiny-100; }
              100%{ .new-shiny-100; }
            }
          }
        }
      }
    }
  }
  &-search{ //검색
    display: inline-block;
    position:  absolute;
    top: 8px;
    right: 0;
    left:  0;
    @media screen and (min-width: 1199px) and (max-width: 1400px){ left: 9%; width: 262px; }
    width: 320px;
    height: 50px;
    margin:  0 auto;
    //.transition_03s;
    &-form{
      width: 100%;
      margin-top: 4px;
      border-radius: 100px;
      background: @color-white;
      line-height: 42px;
      input{
        width: -webkit-calc(~"100% - 42px");
        width: -moz-calc(~"100% - 42px");
        width: calc(~"100% - 42px");
        height: 42px;
        border: 1px @color-white solid;
        border-radius: 100px 0 0 100px;
        line-height: 42px;
        outline: #ffd000;
      }
      button{
        float: right;
        width: 42px;
        height: 42px;
        border: 2px @color-white solid;
        border-radius: 100px;
        background: @ico_search_w center~"/"100% no-repeat @color-dq1;
        .transition_03s;
        will-change: background-color;
        &:hover{ background-color: @color-dq3; }
      }
    }
  }
  &-login{ //로그인
    height: 50px;
    margin: 7px 0;
    &-btn{
      display: inline-block;
      padding-left: 40px;
      margin: 4px 8px 4px 0;
      font-size: @font-size-5;
      line-height: @line-height-5;
      span{
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        background: @ico_download_w center ~"/" 60% no-repeat;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        will-change: transform, background-image;
        .transition_03s;
      }
      &:hover{
        background: @color-white;
        color: @color-dq1;
        font-weight: 700;
        span{
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
          background-image: @ico_mypage;
        }
        &.faq{
          span {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
            background-image: @ico_notice;
          }
        }
      }
      &.faq{
        span{
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
          background: @ico_contact_w center ~"/" 75% no-repeat;
        }
      }
    }
    &-logged{ //로그인된 화면
      float: left;
      max-width: 200px;
      height: 50px;
      margin-right: 16px;
      // 로그인된 하면 마이페이지 프로필
      &-profile{
        display: inline-block;
        float: left;
        width: 50px;
        height: 50px;
        overflow: hidden;
        border-radius: 100px;
        img{
          width: 42px;
          height: 42px;
          margin: 4px;
          border: 2px @color-white solid;
          border-radius: 100px;
          object-fit: contain;
        }
      }
      h5{
        display: inline-block;
        position: relative;
        //max-width: 96px;
        max-width: 120px;
        padding-right: 16px;
        color: @color-white;
        line-height: 50px;
        &:after{
          position: absolute;
          right: 0;
          content: '님';
        }
      }
    }
    &-mypage,
    &-faq{ //로그인된 화면 마이페이지 버튼
      display: inline-block;
      padding-left: 40px;
      margin: 4px 8px 4px 0;
      font-size: @font-size-5;
      line-height: @line-height-5;
      span{
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        background: @ico_mypage center ~"/" 60% no-repeat;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        .transition_03s;
        will-change: transform;
      }
      &:hover{
        background: @color-white;
        color: @color-dq1;
        font-weight: 700;
        span{
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
    }
    &-faq{ //로그인된 화면 faq 버튼
      span{ background: @ico_contact_w center ~"/" 75% no-repeat; }
      &:hover{
        span{ background-image: @ico_notice;}
      }
    }
  }
}


//    2. 메인 배너 영역
// --------------------------------
// 2-1. 기본 슬릭 슬라이드
.dq-banner{
  position: relative;
  z-index: 2;
  width: 100%;
  &__slider{
    position: relative;
    .slick-slide{ outline: none; }
    a{
      display: block;
      position: relative;
      overflow: hidden;
      height: 0;
      padding-bottom: 18.2291%; // = 350/1920
      outline: none;
      > .object-fit-cover{
        .absolute-zero;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          will-change: transform;
        }
      }
    }
    .slick-prev,
    .slick-next{ //슬릭 슬라이더 콘트롤
      display: none !important;
      position: absolute;
      top: 0;
      z-index: 1;
      width: 72px;
      height: 100%;
      border: none;
      font-size: 0;
      outline: none;
      box-shadow: none;
    }
    .slick-prev{ //슬릭 슬라이더 콘트롤-left
      left: 0;
      background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.0001) 100%);
      background: -moz-linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.0001) 100%);
      background: -ms-linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.0001) 100%);
      background: -o-linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.0001) 100%);
      background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.0001) 100%);
      background-position: center;
      background-size: contain;
    }
    .slick-next{ //슬릭 슬라이더 콘트롤-right
      right: 0;
      background: -webkit-linear-gradient(to left, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.0001) 100%);
      background: -moz-linear-gradient(to left, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.0001) 100%);
      background: -ms-linear-gradient(to left, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.0001) 100%);
      background: -o-linear-gradient(to left, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.0001) 100%);
      background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.0001) 100%);
    }
    &:hover{ //슬릭 슬라이더 콘트롤 호버이벤트
      .slick-next,
      .slick-prev{
        display: block !important;
        &:after{
          display: block;
          position: absolute;
          top: 50%;
          right: 0;
          left: 0;
          margin: 0 auto;
          width: 56px;
          height: 56px;
          .transformY_Minus50;
          content: '';
        }
      }
      .slick-prev{
        &:after{ background: @ico_left_bracket_w center~"/"contain no-repeat; }
      }
      .slick-next{
        &:after{ background: @ico_right_bracket_w center~"/"contain no-repeat; }
      }
    }
    .slick-dots{ //슬릭 인디케이터
      list-style: none;
      position: absolute;
      right: 0;
      bottom: 16px;
      left: 0;
      padding: 0;
      margin: 0 auto;
      text-align: center;
      li{
        display: inline-block;
        width: 8px;
        height: 8px;
        margin: 0 4px;
        border: 1px @color-white solid;
        border-radius: 100px;
        background: none;
        font-size: 0;
        outline: none;
        cursor: pointer;
        &.slick-active{ background: @color-white; }
        button{ display: none; }
      }
    }
  }
  @media screen and (max-width: 1199px){
    &__slider{
      a{ padding-bottom: 36.4583%; } // = 350/960
      &:hover{
        .slick-prev,
        .slick-next{ display: none !important; }
      }
      .slick-dots{
        right: auto;
        bottom: -8px;
        left: 16px;
        li{
          width: 8px;
          height: 8px;
          border: 1px @color-black3 solid;
          .transition_06s;
          will-change: width, background;
          &.slick-active{ width: 32px; background: @color-black3;  will-change: width, background;
          }
        }
      }
    }
  }
}
// 2-2. *메인 영역 슬릭 슬라이드
.dq-banner__home{
  @media screen and (min-width: 1921px) {
    .dq-banner{
      &__slider{
        .slick-current a{
          transform: scale(1);
          transition-delay: 0.5s;
        }
        a{
          margin: 32px 16px;
          border-radius: 16px;
          transition: transform 0.3s linear;
          transform: scale(0.95);
          transition-delay: 0s;
          .box-shadow--normal;
          will-change: transform;
        }
        .slick-dots{
          bottom: 0;
          li{
            border: 1px solid @color-black3;
            &.slick-active{ background-color: @color-black3; }
          }
        }
        .slick-prev, //슬릭 슬라이더 콘트롤
        .slick-next { width: 10%; }
      }
    }
  }
  // 태블릿 / 모바일 겸용
  @media screen and (max-width: 1199px) {
    .dq-banner{
      &__slider{
        .slick-slide{ padding: 24px 8px; }
        a{
          left: -24px;
          z-index: 1;
          overflow: hidden;
          border-radius: 8px;
          .box-shadow--normal;
        }
      }
    }
  }
}
// 2-3. *메인 제외 슬릭 슬라이드
.dq-banner__taste,
.dq-banner__post{
  @media screen and (max-width: 1199px){
    .dq-banner{
    }
  }
}


//    3. 메인 광고형 배너
//      3-1. 메인 광고형 배너 - 상단 라인배너
// --------------------------------
.dq-linebanner{ //라인배너
  position: relative;
  z-index: 10;
  height: 92px;
  margin: 0 auto;
  border-bottom: 4px @color-white solid;
  background: #e4b9ea;
  text-align: center;
  &.tq{ background: @color-white; }
  &.dq-linebanner-x{ display: none !important; }
  a{
    display: block;
    width: 100%;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    img{
      width: 100%;
      max-width: 938px;
      height: 88px;
      object-fit: contain;
    }
  }
  .close_ad{
    position: absolute;
    top: 17px;
    right: 24px;
    width: 24px;
    height: 24px;
    border-radius: 100px;
    background: @ico_close_w center~"/"contain no-repeat @color-black3;
    .transformY_Minus50;
    cursor: pointer;
    &:before{
      display: block;
      position: relative;
      right: 138px;
      width: 128px;
      color: @color-black3;
      text-align: right;
      content: '하루동안 열지 않기';
    }
    &.bq{
      background-color: #56297a;
      &:before{ color: #56297a; }
    }
    &.tq{
      background-color: #13255d;
      &:before{ color: #13255d; }
    }
  }
}

//      3-2. 메인 광고형 배너 - 메인 팝업
// --------------------------------
.dq-popup{
  display: none !important;
  max-width: 360px;
  position: fixed;
  top: 32px;
  right: 12%;
  z-index: 11;
  padding: 24px 32px;
  border-radius: 8px;
  background: @color-white;
  -moz-box-shadow: 0 0 16px rgba(0,0,0,.2);
  -o-box-shadow: 0 0 16px rgba(0,0,0,.2);
  box-shadow: 0 0 16px rgba(0,0,0,.2);
  &:after{
    display: block;
    width: -webkit-calc(~"100% + 16px");
    width: -moz-calc(~"100% + 16px");
    width: -o-calc(~"100% + 16px");
    height: -webkit-calc(~"100% + 16px");
    height: -moz-calc(~"100% + 16px");
    height: calc(~"100% + 16px");
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: -1;
    border: 1px @color-dq3 solid;
    border-radius: 16px;
    content: '';
  }
  &-header{
    display: inline-block;
    padding: 0 0 16px;
    border-bottom: 1px @color-black3 solid;
    h3{ padding: 0 0 0 32px; }
    &:after{
      display: block;
      position: absolute;
      top: 12px;
      left: 18px;
      width: 48px;
      height: 48px;
      background: @ico_notice center~"/"contain no-repeat;
      content: '';
    }
  }
  &-body{ padding: 16px 0;
    p{ line-height: @line-height-5; word-break: keep-all; }
    a{
      display: inline-block;
      color: @color-dq1;
      font-size: @font-size-5;
      font-weight: 700;
      &:hover{ opacity: 0.6; text-decoration: none; }
    }
    > span{ background: @color-gray3}
  }
  &-footer{
    padding: 24px 0 0;
    border-top: 1px @color-black3 solid;
    div{
      display: inline-block;
      float: left;
      width: 50%;
      height: 40px;
      border: 1px @color-black3 solid;
      background: @color-black3;
      color: @color-white;
      text-align: center;
      line-height: 38px;
      &.close_pop_date{
        color: @color-black3;
        border-radius: 100px 0 0 100px;
        background: @color-white;
        width: 60%;
      }
      &.close_pop{ width: 40%; border-radius: 0 100px 100px 0; }
      &:hover{ opacity: 0.6; cursor: pointer; }
    }
    &:after{
      display: block;
      clear: both;
      content: '';
    }
  }
}



//    4. 메인 맥스무비 서비스 상단 헤더 (외전)
// --------------------------------
.dq-header.maxmovie{
  .dq-header-logo{
    margin-left: 16px;
    @media screen and (max-width: 1199px){
      display: block;
      float: none;
      position: absolute;
      left: 0;
      right: 24px;
      margin: 0 auto;
    }
  }
  .dq-header-maxmovie-back{
    display: inline-block;
    float: left;
    padding: 7px 0;
    a{
      display: block;
      width: 50px;
      height: 50px;
      background: @ico_back_w center~"/"contain no-repeat;
    }
  }
  .dq-header-maxmovie-close{
    display: inline-block;
    float: right;
    padding: 7px 0;
    a{
      display: block;
      width: 50px;
      height: 50px;
      background: @ico_close_w center~"/"contain no-repeat;
    }
  }
}


//    5. 메인 고정된 버튼 영역
// --------------------------------
.dq-fixed-btn{ //모바일 픽스드 버튼
  display: none;
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 8;
  width: 40px;
  height: auto;
  padding: 0 0 20px;
  border: 1px solid @color-dq1;
  border-radius: 100px;
  background: @color-white;
  color: @color-dq1;
  text-decoration: none;
  text-align: center;
  font-size: @font-size-6;
  line-height: 0;
  will-change: color, transform;
  .transition_03s;
  span{
    display: inline-block;
    position: relative;
    top: auto;
    right: 0;
    left: 0;
    width: 40px;
    height: 30px;
    margin: 0 auto;
    background: @ico_up_bracket center ~"/" contain no-repeat;
    will-change: background-image;
    content: '';
  }
  &:hover,
  &:focus{
    background-color: @color-dq1;
    color: @color-white;
    opacity: 0.8;
    text-decoration: none;
    span{ background-image: @ico_up_bracket_w; }
  }
}


//    6. 메인 콘텐츠 영역
// --------------------------------
.dq-content{
  float: left;
  position: relative;
  //z-index: 1;
  max-width: 100% !important;
  width: 100%;
  //min-height: -webkit-calc(~"100% - 449px");
  //min-height: -moz-calc(~"100% - 449px");
  //min-height: calc(~"100% - 449px");
  will-change: opacity; // 절대 transform 넣지말것.
  background-color: @color-gray1;
  //position: relative;
  //width: 100% !important;
  min-height: -webkit-calc(~"100% - 412px");
  min-height: -moz-calc(~"100% - 412px");
  min-height: calc(~"100% - 412px");
  text-align: center;
  overflow: hidden;
  &.fixed{ padding-top: 64px; } //스크롤시 헤더 fixed
  @media screen and (max-width: 767px) {
    //background-color: @color-white;
  }

  //    6-1. 메인 콘텐츠 영역 - 공지사항 팝업
  // --------------------------------
  &-ad-pop{ //공지사항
    display: none !important;
    position: fixed;
    top: 104px;
    right: 8%;
    z-index: 100;
    margin: 0 auto;
    max-width: 420px;
    padding-bottom: 8px;
    border: 3px @color-white solid;
    background: @color-black2;
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    -o-box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    &-title{ //타이틀
      display: inline-block;
      h3{ color: @color-white; }
      &:after{
        display: block;
        width: 40px;
        border-bottom: 2px @color-white solid;
        content: '';
      }
    }
    &-body{ //공지본문
      color: @color-white;
      font-weight: 400;
      img{ max-width: 80% !important; border: 1px @color-black2 solid !important; }
    }
    &-close{ //공지닫기
      width: 95%;
      height: 35px;
      margin: 0 auto;
      background: @color-black3;
      color: @color-gray1;
      > div{
        display: inline-block;
        line-height: 35px;
        &:hover{ cursor: pointer; }
        a{ text-decoration: none; }
      }
      &-left{ float: left; width: 70%; }
      &-right{
        float: right;
        width: 30%;
        border-left: 1px @color-gray1 solid;
      }
    }
  }

  //    6-2. 메인 콘텐츠 영역 - 그리드 스타일
  // --------------------------------
  // 전반적인 매안 그리드 wrap 스타일.
  // *콘텐츠 내용물 관련은 dq_guide.less 참고할것
  .taste-status{ // taste카드 왼쪽 상단 상태바 (ex:신청중)
    display: inline-block;
    position: absolute;
    top: -7.322px;
    bottom: 0;
    left: -32.322px;
    width: 100px;
    height: 50px;
    border-radius: 0;
    text-align: left;
    -webkit-transform: rotate(-45deg) !important;
    -moz-transform: rotate(-45deg) !important;
    -ms-transform: rotate(-45deg) !important;
    -o-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;
  }
  .dq-grid-wrap-title{ //메인 상단 타이틀
    position: relative;
    width: 100%;
    padding-bottom: 0;
    margin-top: 96px;
    h2{
      display: inline-block;
      position: relative;
      will-change: transform;
      > b{ position: relative; z-index: 1}
      > .dots{
        display: inline-block;
        position: absolute;
        top: -40px;
        right: 0;
        left: 0;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: @color-dq1;
        &:before{
          display: block;
          position: absolute;
          top: 18px;
          left: -18px;
          width: 12px;
          border-bottom: 1px solid @color-black3;
          content: '';
        }
        &:after{
          display: block;
          position: absolute;
          top: 18px;
          right: -18px;
          width: 12px;
          border-bottom: 1px solid @color-black3;
          content: '';
        }
        &.dinnerpass{ background: @ico_dq_pass_title_b no-repeat; }
        &.taste{ background: @ico_restaurant_title_b no-repeat; }
        &.post{ background: @ico_post_title_b no-repeat; }
        &.restaurant{ background: @ico_taste_title_b no-repeat; }
      }
    }
    &-more{ //메인 상단 더보기
      display: inline-block;
      position: absolute;
      right: 20px;
      top: 2px;
      z-index: 1;
      height: auto;
      border: none;
      border-radius: 0;
      background: none;
      color: @color-dq1;
      line-height: 32px;
      h4{ font-weight: 400; line-height: 32px; }
      .right{
        display: inline-block;
        float: right;
        position: absolute;
        right: 0;
        width: 24px;
        height: 24px;
        background: @ico_right_double_bracket center~"/"140% no-repeat;
      }
    }
  }
  .dq-grid-wrap-line{ //메인 하단 섹션라인
    position: relative;
    width: 100%;
    padding-bottom: 0;
    &-body{
      height: 1px;
      background: @color-black3;
    }
  }
}


//    7. 메인 푸터 영역
// --------------------------------
.dq-footer{
  position: relative;
  z-index: 0;
  width: 100%;
  padding: 32px 5% 8px;
  border-bottom: 24px @color-gray2 solid;
  background: @color-gray1;
  &-wrap{
    float: left;
    width: 100%;
    &-left{ //푸터 왼쪽
      display: inline-block;
      width: 27%;
      &-logo{
        display: block;
        width: 160px;
        height: 48px;
        background: @ico_dq_invitation_logotype center left~"/"100% no-repeat;
      }
      &-fb{ //페이스북 api
        float: left;
        padding: 6px 0;
        margin-left: 16px;
      }
      h4{ float: left; color: @color-black6; }
    }
    &-center{ //푸터 중앙
      display: inline-block;
      position: relative;
      width: 48%;
      a{
        display: inline-block;
        position: relative;
        z-index: 1;
        background: @color-dq1;
        color: @color-white;
        text-decoration: none;
        .transition_03s;
        will-change: transform;
        &:hover{
          -webkit-transform: scale(1.05);
          -moz-transform: scale(1.05);
          -ms-transform: scale(1.05);
          -o-transform: scale(1.05);
          transform: scale(1.05);
        }
        &.ghost-btn{
          margin-top: 8px;
          border-color: @color-black9;
          background: none;
          color: @color-black9;
          font-weight: 400;
        }
      }
      > div{
        display: block;
        position: absolute;
        top: -56px;
        right: 0;
        left: 126px;
        z-index: 1;
        margin: 0 auto;
        width: 200px;
        height: auto;
        border: 1px @color-black3 solid;
        border-radius: 16px;
        background: @color-black3;
        text-align: left;
        line-height: @line-height-6;
        > h5{
          display: inline-block;
          float: left;
          color: @color-white;
          line-height: @line-height-6;
        }
        &:before{
          display: inline-block;
          float: left;
          width: 46px;
          height: 46px;
          color: @color-white;
          font-size: 44px;
          font-weight: 800;
          text-align: center;
          line-height: 1;
          content: '?';
        }
        &:after{
          display: inline-block;
          float: left;
          position: absolute;
          bottom: -7px;
          left: 24px;
          z-index: -1;
          width: 12px;
          height: 12px;
          border-right: 1px @color-black3 solid;
          border-bottom: 1px @color-black3 solid;
          background: @color-black3;
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          content: '';
        }
      }
    }
    &-right{ //푸터 오른쪽
      width: 25%;
      margin: 0 auto;
      .sns{
        display: inline-block;
        width: 48px;
        height: 48px;
        background: center~"/"120% no-repeat;
        &.ico01{ //네이버 포스트
          background-image: @ico_logo_naver_post_gray;
          &:hover{background-image: @ico_logo_naver_post;}
        }
        &.ico02{ //네이버 블로그
          background-image: @ico_logo_naver_blog_gray;
          &:hover{background-image: @ico_logo_naver_blog;}
        }
        &.ico03{ //네이버 페이스북
          background-image: @ico_logo_fb_gray;
          &:hover{background-image: @ico_logo_fb;}
        }
        &.ico04{ //네이버 인스타그램
          background-image: @ico_logo_ins_gray;
          &:hover{background-image: @ico_logo_ins;}
        }
        &.app{
          width: 120px;
          height: 40px;
          background: center~"/"110% no-repeat @color-black3;
          border-radius: 8px;
          &.ico01{ background-image: @ico_googleplay_btn_w; }
          &.ico02{ background-image: @ico_appstore_btn_w; }
        }
      }
    }
    &-bottom{ //푸터 바닥
      display: block;
      width: 100%;
      border-top: 1px @color-gray3 solid;
      text-align: left;
      line-height: 1.6;
      p{
        display: inline-block;
        margin: 0 16px 0 0;
        color: @color-black6;
      }
    }
  }
}


//    8. 로그인 페이지
// --------------------------------
.dq-login{
  &-title{ //로그인 타이틀 영역
    h2{
      color: @color-dq1;
      &:before{
        display: block;
        width: 130px;
        height: 130px;
        margin: 0 auto;
        background: @ico_symbol center~"/"contain no-repeat;
        content: '';
      }
    }
  }
  &-body{ //로그인 중단 영역
    a{
      display: inline-block;
      width: 100px;
      height: auto;
      padding-bottom: 24px;
      border-radius: 8px;
      color: @color-white;
      font-size: 0;
      text-decoration: none;
      line-height: 0;
      .transition_03s;
      &:hover{
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        -o-box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      }
      &:before{
        display: block;
        width: 56px;
        height: 56px;
        margin: 8px auto 0;
        content: '';
      }
      h5{ //텍스트
        &:before{
          display: block;
          width: 16px;
          height: 1px;
          margin: 0 auto 16px;
          background: @color-white;
          content: '';
        }
      }
    }
    &-ins{ //인스타
      background: @color-instagram;
      &:before{ background: @ico_logo_ins_w center~"/"contain no-repeat; }
    }
    &-fb{ //페이스북
      background: @color-facebook;
      &:before{ background: @ico_logo_fb_w center~"/"contain no-repeat; }
    }
    &-nav{ //네이버
      background: @color-naver;
      &:before{ background: @ico_logo_naver_w center~"/"contain no-repeat; }
    }
  }
  &-footer{ //로그인 하단 약관 영역
    display: inline-block;
    button{ display: block; width: 336px; }
  }
}

//    8. 로그인 / 회원가입 페이지 (리뉴얼)
// --------------------------------
//.dq-footer,
//.dq-header { display: none !important; }
.re-qz-back-mp4 {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: @color-black3;
  font-size: 0;
  .fillter {
    .absolute-zero;
    right: auto;
    z-index: 1;
    width: 100%;
    height: 70%;
    background: rgba(0,0,0,0.2) @px_dot center ~"/" 3px repeat;
    pointer-events: none;
  }
  .media{
    display: inline-block;
    object-fit: cover;
    position: relative;
    width: 100%;
    height: 70%;
    margin: 0;
    &:after{ display: block; content: '' }
  }
  .media-gredient {
    position: absolute;
    top: auto;
    right: 0;
    bottom: -webkit-calc(~"30% - 1px");
    bottom: -moz-calc(~"30% - 1px");
    bottom: calc(~"30% - 1px");
    z-index: 1;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(51,51,51,1), rgba(51,51,51,0) );
  }
  .service-link {
    position: absolute;
    left: 56px;
    bottom: 28px;
    z-index: 2;
    font-size: 0;
    a {
      display: inline-block;
      opacity: 0.6;
      padding: 5px 16px;
      margin: 0 8px 0 0;
      border: 1px solid @color-white;
      border-radius: 100px;
      color: @color-white;
      .font-button;
      .transition_03s;
      &:hover,
      &:focus {
        opacity: 1;
        text-decoration: none;
        .transform_hover;
      }
    }
  }
  .media-bottom {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 30%;
    z-index: 1;
    background: @color-black3;
    .logo-wrap {
      position: absolute;
      bottom: 32px;
      right: 56px;
      font-size: 0;
      text-align: left;
      opacity: 0.6;
      white-space: nowrap;
      .ico-qz {
        width: 180px;
        height: 62px;
        background: @ico_qz_logotype_en_w center ~"/" contain no-repeat;
        margin: 0 0 8px;
      }
      > h5 {
        color: @color-white;
        .font-caption;
        font-weight: 200;
      }
    }
  }


  // 노트북 데스크탑 영역 (portrait)
  @media screen and (max-width: 1440px) {
    .service-link {
      a {
        display: block;
        max-width: 105px;
        width: 100%;
        margin: 0 0 8px;
      }
    }
    .media-bottom {
      .logo-wrap {
        .ico-qz { margin: 0 0 8px auto;}
        > h5 {
          max-width: 180px;
          padding: 0 0 0 4px;
          white-space: normal;
          word-break: keep-all;
        }
      }
    }
  }


  // 태블릿 영역
  @media screen and (max-width: 1199px) {
    .fillter,
    .media,
    .media-gredient,
    .service-link,
    .media-bottom { display: none; }
  }


  // 모바일 영역
  @media screen and (max-width: 767px) {
    //display: none;
  }
}
.re-qz-login {
  position: relative;
  top: 10%;
  z-index: 1;
  max-width: 384px;
  width: 100%;
  margin: 0 auto 32px;
  &__form {
    padding: 24px 32px 32px;
    margin: 0 0 24px;
    border-radius: 8px;
    background: @color-white;
    .box-shadow--normal;
    .clearAfter;
    &__logo {
      //width: 272px;
      //height: 66px;
      //margin: 0 auto;
      //background: @ico_logo center ~"/" 106% no-repeat;
      &__header {
        font-size: 0;
        .clearAfter;
        .qz-ico {
          display: inline-block;
          width: 110px;
          height: 40px;
          background: @ico_qz_logotype_en center ~"/" contain no-repeat;
          float: left;
        }
        > .text {
          float: right;
          text-align: left;
          .font-button;
        }
      }
      &__service-type {
        margin: 24px auto 16px;
        font-size: 0;
        text-align: center;
        > div {
          display: inline-block;
          width: 96px;
          height: 90px;
          background: center ~"/" contain no-repeat;
        }
        .ico-tq { float: left; background-image: @ico_symbol_tq; }
        .ico-dq { background-image: @ico_symbol; }
        .ico-bq { float: right; background-image: @ico_symbol_bq; }
      }
      > h5 { margin: 0 0 16px; text-align: left; }
    }
    &__content {
      margin: auto 0;
      &__email,
      &__pass {
        display: block;
        width: 100%;
        padding: 7px 16px;
        margin: 0 0 8px;
        border: 1px solid @color-black6;
        border-radius: 4px;
        outline: none;
        .font-button;
      }
      &__button {
        display: block;
        float: left;
        width: 100%;
        padding: 14px 0;
        margin: 8px auto 16px;
        border: none;
        border-radius: 8px;
        background: @color-gre-dq1;
        outline: none;
        color: @color-white;
        font-weight: 700;
        .font-button;
        .box-shadow--normal;
        .transition_03s;
        &:hover {
          .transform_hover;
        }
      }
      &__sub-box {
        font-size: 0;
        text-align: right;
        .auto-login {
          display: inline-block;
          padding: 4px 0;
          font-size: 0;
          float: left;
          &__check {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin: 0 8px 0 0;
            vertical-align: middle;
            border-radius: 4px;
          }
          label { vertical-align: middle; .font-button; }
        }
        .find-email,
        .find-pass {
          display: inline-block;
          padding: 6px 8px;
          //margin-left: 8px;
          margin: 0;
          color: @color-black3;
          //color: @color-white;
          border-radius: 100px;
          //background: @color-gre-black1;
          background: transparent;
          text-decoration: underline;
          will-change: transform, opacity;
          box-shadow: none;
          //.box-shadow--normal;
          .transition_03s;
          .font-button;
          &:hover { .transform_hover; }
        }
      }
      &__ins-form,
      &__nv-form,
      &__fb-form {
        display: block;
        width: 100%;
        padding: 0 24px;
        margin: 16px auto;
        border: none;
        border-radius: 8px;
        background: @color-white;
        outline: none;
        text-align: left;
        font-size: 0;
        .transition_03s;
        .box-shadow--normal;
        &:hover { .transform_hover; }
        .ico,
        .text {
          display: inline-block;
          vertical-align: middle;
        }
        .ico {
          width: 48px;
          height: 48px;
          background: center ~"/" contain no-repeat;
        }
        .text {
          padding: 10px 0;
          .font-button;
        }
      }
      &__nv-form{
        margin: 24px auto 16px;
        .ico { background-image: @ico_logo_naver; }
      }
      &__ins-form {
        margin: 16px auto 40px;
        .ico { background-image: @ico_logo_ins; }
      }
      //&__fb-form .ico { background-image: @ico_logo_fb; }
      &__join {
        display: block;
        width: 100%;
        padding: 8px 0;
        margin: 0 auto;
        border-radius: 100px;
        background: @color-gre-black1;
        color: @color-white !important;
        text-decoration: none !important;
        text-align: center;
        will-change: transform, opacity;
        .font-button;
        .box-shadow--normal;
        .transition_03s;
        &:hover { .transform_hover; }
      }
    }
  }

  &__channel {
    font-size: 0;
    &__tq,
    &__bq {
      display: inline-block;
      width: -webkit-calc(~"50% - 16px");
      width: -moz-calc(~"50% - 16px");
      width: calc(~"50% - 16px");
      padding: 6px 0;
      margin: 24px 0 0;
      border-radius: 8px;
      background: @color-white;
      font-size: 0;
      text-decoration: none;
      will-change: transform, opacity;
      text-align: center;
      .transition_03s;
      .box-shadow--normal;
      &:hover { text-decoration:none; .transform_hover; }
      .ico {
        display: inline-block;
        width: 36px;
        height: 36px;
        margin: 0 4px 0 0;
        vertical-align: middle;
        background: center ~"/" contain no-repeat;
      }
      .text {
        vertical-align: middle;
        color: @color-black3;
        .font-button;
      }
    }
    &__bq {
      margin-left: 16px;
      .ico { background-image: @ico_symbol_bq;}
    }
    &__tq {
      margin-right: 16px;
      .ico { background-image: @ico_symbol_tq;}
    }
    h5 { margin: 24px 0 0; .font-caption; }
  }


  // 노트북 데스크탑 영역 (portrait)
  @media screen and (max-width: 1440px) {

  }


  // 태블릿 영역
  @media screen and (max-width: 1199px) {
    top: 10%;
    max-width: 768px;
    padding: 24px 32px 80px;
    margin: 0 auto;
    &__form {
      &__logo {
        &__header {}
        &__service-type {
          margin: 16px auto;
          .ico-tq,
          .ico-bq { float: none; }
        }
        > h5 {
          text-align: center;
          .font-body2;
        }
      }
      padding: 24px;
      &__content {
        margin: 24px auto 0;
        &__ins-form,
        &__nv-form,
        &__fb-form { text-align: center; }
        &__channel {
          &__tq,
          &__bq { text-align: center; }
        }
        &__join { max-width: 320px; margin: 24px 0 0 auto; }
      }
    }
  }


  // 모바일 영역
  @media screen and (max-width: 767px) {
    top: 0;
    //padding: 0;
    padding: 16px 16px 80px;
    margin: 0 auto;
    &__form {
      //border-radius: 0;
      //box-shadow: none;
      //margin: 0;
      &__logo {
        &__service-type {
          > div { width: 80px; height: 80px; }
        }
      }
      &__content {
        &__sub-box {
          .clearAfter;
          text-align: left;
          .auto-login {
            width: 100%;
            text-align: left;
            padding: 0;
            margin-bottom: 16px;
          }
          .find-email,
          .find-pass {
            margin-left: 0;
            margin-right: 8px;
          }
        }
        &__ins-form,
        &__nv-form,
        &__fb-form { padding: 0 8px; text-align: left; }
        &__channel {
          &__bq,
          &__tq {
            width: -webkit-calc(~"50% - 8px");
            width: -moz-calc(~"50% - 8px");
            width: calc(~"50% - 8px");
          }
          &__bq { margin-left: 8px; }
          &__tq { margin-right: 8px; }
          h5 { text-align: left; }
        }
        &__join { max-width: 100%; }
      }
    }
  }
}


.re-qz-join {
  position: relative;
  top: 5%;
  z-index: 1;
  max-width: 488px;
  width: 100%;
  margin: 0 auto 32px;
  &__form {
    padding: 24px 32px 32px;
    margin: 0 0 24px;
    border-radius: 16px;
    background: @color-white;
    .box-shadow--normal;
    &__logo {
      &__header {
        font-size: 0;
        .clearAfter;
        .qz-ico {
          display: inline-block;
          width: 110px;
          height: 40px;
          background: @ico_qz_logotype_en center ~"/" contain no-repeat;
          float: left;
        }
        > .text {
          float: right;
          text-align: left;
          .font-button;
        }
      }
      &__service-type {
        margin: 24px auto 16px;
        font-size: 0;
        text-align: center;
        > div {
          display: inline-block;
          width: 96px;
          height: 90px;
          background: center ~"/" contain no-repeat;
        }
        .ico-tq { background-image: @ico_symbol_tq; }
        .ico-dq { background-image: @ico_symbol; }
        .ico-bq { background-image: @ico_symbol_bq; }
      }
    }
    &__content {
      margin: 32px auto 0;
      &__group {
        width: 100%;
        margin: 0 0 16px;
        text-align: left;
        font-size: 0;
        &__label {
          max-width: 120px;
          width: 100%;
          .font-body1;
        }
        &__input {
          //max-width: -webkit-calc(~"100% - (120px + 105px)");
          //max-width: -moz-calc(~"100% - (120px + 105px)");
          //max-width: calc(~"100% - (120px + 105px)");
          max-width: -webkit-calc(~"100% - 105px");
          max-width: -moz-calc(~"100% - 105px");
          max-width: calc(~"100% - 105px");
          width: 100%;
          border: 1px solid @color-black6;
          border-radius: 4px;
          padding: 5px 8px;
          .font-button;
          &:focus { outline: none; border-color: @color-dq1; }
        }
        &__button {
          position: relative;
          float: right;
          padding: 6px 16px;
          margin: 0 0 0 16px;
          border: none;
          border-radius: 100px;
          background: @color-gre-black1;
          color: @color-white;
          outline: none;
          .transition_03s;
          .font-button;
          .box-shadow--normal;
          &:hover { .transform_hover; }
          &.checked {
            background: @color-gre-green;
            color: transparent;
            box-shadow: none;
            cursor: default;
            pointer-events: none;
            &:hover { .transform_none; }
            &:after {
              display: block;
              width: inherit;
              height: inherit;
              background: @ico_check_w center ~"/" contain no-repeat;
              content: '';
              .absolute-zero;
            }
          }
          &.fail {
            color: transparent;
            background: @color-gre-dq1;
            &:after {
              padding: 6px 0;
              color: @color-white;
              content: '중복됨';
              .absolute-zero;
              .font-button;
            }
          }
        }
        &__subtext {
          padding: 8px 0 8px 120px;
          color: @color-black6;
          .font-caption;
        }
        &__checkbox {
          font-size: 0;
          > input {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin: 0 8px 0 0;
            border-radius: 4px;
            vertical-align: middle;
          }
          > label {
            width: -webkit-calc(~"100% - 32px");
            width: -moz-calc(~"100% - 32px");
            width: calc(~"100% - 32px");
            vertical-align: top;
            .font-body2;
            > a {
              color: @color-black3;
              text-decoration: underline;
              .font-body2;
              &:hover,
              &:focus { color: @color-dq1; }
            }
          }
        }
      }
      &__notice {
        float: left;
        width: 100%;
        padding: 8px 0;
        margin: 8px 0 0;
        border: 1px solid @color-gray3;
        border-radius: 8px;
        background: @color-white;
        font-size: 0;
        //.box-shadow--normal;
        &__group {
          display: inline-block;
          width: 33.33%;
          padding: 0 16px;
          text-align: left;
          vertical-align: top;
          .title { .font-caption; }
          .text {
            color: @color-black9;
            //white-space: nowrap;
            .font-caption;
          }
          .line {
            height: 1px;
            margin: 8px 0;
            background: @color-gray2;
          }
        }
      }
      &__button {
        width: 100%;
        padding: 14px 0;
        margin: 24px 0 0;
        border: none;
        border-radius: 8px;
        background: @color-gre-dq1;
        color: @color-white;
        .font-button;
        .transition_03s;
        .box-shadow--normal;
        &:hover { .transform_hover; }
      }
    }
  }
  &__join-link {
    padding: 8px 0 16px;
    font-size: 0;
    text-align: center;
    .title,
    .link { display: inline-block; vertical-align: middle; }
    .title {
      color: @color-white;
      .font-caption;
    }
    .link {
      padding: 6px 16px;
      margin: 0 0 0 16px;
      border-radius: 100px;
      background: @color-white;
      color: @color-black3;
      text-decoration: none;
      .transition_03s;
      .font-button;
      .box-shadow--normal;
      &:hover { .transform_hover; }
    }
  }
  &__ins-form,
  &__nv-form,
  &__fb-form {
    display: block;
    width: inherit;
    padding: 0 24px;
    margin: 0 auto 16px;
    border: none;
    border-radius: 8px;
    background: @color-white;
    outline: none;
    text-align: left;
    font-size: 0;
    .transition_03s;
    .box-shadow--normal;
    &:hover { .transform_hover; }
    .ico,
    .text {
      display: inline-block;
      vertical-align: middle;
    }
    .ico {
      width: 48px;
      height: 48px;
      background: center ~"/" contain no-repeat;
    }
    .text {
      padding: 10px 0;
      .font-button;
    }
  }
  &__ins-form .ico { background-image: @ico_logo_ins; }
  &__nv-form .ico { background-image: @ico_logo_naver; }
  &__fb-form .ico { background-image: @ico_logo_fb; }
  &__channel {
    font-size: 0;
    &__tq,
    &__bq {
      display: inline-block;
      width: -webkit-calc(~"50% - 16px");
      width: -moz-calc(~"50% - 16px");
      width: calc(~"50% - 16px");
      padding: 6px 0;
      margin: 24px 0 0;
      border-radius: 8px;
      background: @color-white;
      font-size: 0;
      text-decoration: none;
      will-change: transform, opacity;
      text-align: center;
      .transition_03s;
      .box-shadow--normal;
      &:hover { text-decoration:none; .transform_hover; }
      .ico {
        display: inline-block;
        width: 36px;
        height: 36px;
        margin: 0 4px 0 0;
        vertical-align: middle;
        background: center ~"/" contain no-repeat;
      }
      .text {
        vertical-align: middle;
        color: @color-black3;
        .font-button;
      }
    }
    &__bq {
      margin-left: 16px;
      .ico { background-image: @ico_symbol_bq;}
    }
    &__tq {
      margin-right: 16px;
      .ico { background-image: @ico_symbol_tq;}
    }
    h5 { margin: 24px 0 0; .font-caption; }
  }


  // 노트북 데스크탑 영역 (portrait)
  @media screen and (max-width: 1440px) {

  }


  // 태블릿 영역
  @media screen and (max-width: 1199px) {
    top: 5%;
    max-width: 768px;
    padding: 24px 32px 80px;
    margin: 0 auto;
    &__form {
      &__logo {
        &__header {}
        &__service-type {
          margin: 16px auto;
          .ico-tq,
          .ico-bq { float: none; }
        }
        > h5 {
          text-align: center;
          .font-body2;
        }
      }
    }
    &__ins-form,
    &__nv-form,
    &__fb-form { text-align: center; }
    &__channel {
      &__tq,
      &__bq { text-align: center; }
    }
  }


  // 모바일 영역
  @media screen and (max-width: 767px) {
    top: 0;
    padding: 16px 16px 80px;
    margin: 0 auto;
    &__form {
      padding: 16px;
      &__logo {
        &__service-type {
          > div { width: 80px; height: 80px; }
        }
      }
      &__content {
        margin: 24px auto 0;
        &__group {
          .clearAfter;
          &__label { max-width: 88px; .font-body2; }
          &__input {
            max-width: -webkit-calc(~"100% - 105px");
            max-width: -moz-calc(~"100% - 105px");
            max-width: calc(~"100% - 105px");
          }
          //&__button { float: none; margin: 8px 0 0 88px; }
          &__subtext { padding: 8px 0 8px 88px; }
          &__checkbox {
            label {
              width: -webkit-calc(~"100% - 32px");
              width: -moz-calc(~"100% - 32px");
              width: calc(~"100% - 32px");
            }
            //.policy-wrap {
            //  text-align: left;
            //  padding-bottom: 0;
            //  .policy-link,
            //  .privacy-link,
            //  .location-link { margin: 0 8px 8px 0; }
            //}
          }
        }
        &__notice {
          padding: 16px 0 0;
          margin: 0 -8px;
          border: none;
          &__group {
            //width: 100%;
            padding: 0 4px;
            .title,
            .text { .font-caption; }
            .title { white-space: nowrap; }
            .text { white-space: normal; margin: 0 0 16px; }
          }
        }
        &__button { margin: 16px auto 8px; }
      }
    }
    &__join-link {
      .title { display: block; }
      .link { margin: 8px auto 0; }
    }
    &__channel {
      &__bq,
      &__tq {
        width: -webkit-calc(~"50% - 8px");
        width: -moz-calc(~"50% - 8px");
        width: calc(~"50% - 8px");
      }
      &__bq { margin-left: 8px; }
      &__tq { margin-right: 8px; }
      h5 { text-align: left; }
    }
  }

}


.re-qz-sub-login {
  position: relative;
  top: 10%;
  z-index: 1;
  max-width: 384px;
  width: 100%;
  margin: 0 auto 32px;
  &__form {
    padding: 24px 32px 32px;
    margin: 0 0 24px;
    border-radius: 16px;
    background: @color-white;
    .box-shadow--normal;
    .clearAfter;
    &__logo {
      //width: 272px;
      //height: 66px;
      //margin: 0 auto 16px;
      //background: @ico_logo center ~"/" 106% no-repeat;
      &__header {
        font-size: 0;
        .clearAfter;
        .qz-ico {
          display: inline-block;
          width: 110px;
          height: 40px;
          background: @ico_qz_logotype_en center ~"/" contain no-repeat;
          float: left;
        }
        > .text {
          float: right;
          text-align: left;
          .font-button;
        }
      }
      &__service-type {
        margin: 24px auto 16px;
        font-size: 0;
        text-align: center;
        > div {
          display: inline-block;
          width: 96px;
          height: 90px;
          background: center ~"/" contain no-repeat;
        }
        .ico-tq { float: left; background-image: @ico_symbol_tq; }
        .ico-dq { background-image: @ico_symbol; }
        .ico-bq { float: right; background-image: @ico_symbol_bq; }
      }
    }
    &__title { .font-h6; }
    &__subtitle {
      margin: 8px 0 24px;
      color: @color-black6;
      .font-body2;
    }
    &__content {
      margin: 0 auto;
      &__input {
        font-size: 0;
        text-align: left;
        margin: 0 0 8px;
        > label,
        > input { display: inline-block; vertical-align: middle; }
        > label {
          display: none;
          max-width: 120px;
          width: 100%;
          .font-body1;
        }
        > input {
          width: 100%;
          padding: 7px 16px;
          border: 1px solid @color-black6;
          border-radius: 4px;
          outline-color: @color-dq1;;
          .font-button;
        }
      }
      &__button {
        display: block;
        float: left;
        width: 100%;
        padding: 14px 0;
        margin: 8px auto 0;
        border: none;
        border-radius: 8px;
        background: @color-gre-dq1;
        outline: none;
        color: @color-white;
        font-weight: 700;
        .font-button;
        .transition_03s;
        .box-shadow--normal;
        &:hover { .transform_hover; }
      }
      &__link {
        display: inline-block;
        float: right;
        padding: 6px 16px;
        margin: 24px 0 0;
        border: none;
        border-radius: 100px;
        background: @color-gre-black1;
        color: @color-white;
        text-decoration: none;
        .font-button;
        .transition_03s;
        .box-shadow--normal;
        &:hover {
          color: @color-white;
          text-decoration: none;
          .transform_hover;
        }
      }
    }
  }

  // 태블릿 영역
  @media screen and (max-width: 1199px) {
    top: 10%;
    max-width: 768px;
    padding: 24px 32px 80px;
    margin: 0 auto;
    &__form {
      padding: 24px;
      &__logo {
        &__service-type {
          margin: 16px auto;
          .ico-tq,
          .ico-bq { float: none; }
        }
      }
      &__content {
        margin: 24px auto 0;
      }
    }
  }


  // 모바일 영역
  @media screen and (max-width: 767px) {
    top: 0;
    padding: 16px 16px 80px;
    margin: 0 auto;
    &__form {
      padding: 16px;
      &__logo {
        &__service-type {
          > div { width: 80px; height: 80px; }
        }
      }

    }
  }


}






//    9. 마이 페이지
// --------------------------------
.dq-mypage{
  max-width: 100%;
  padding: 30px 5%;
  margin: 0 auto;
  &-title{ // 마이페이지 상단
    display: inline-block;
    position: relative;
    max-width: 144px;
    width: 100%;
    float: left;
    margin: 24px 0 0;
    .mypage-ico{
      width: 48px;
      height: 48px;
      margin: 40px 4px 8px 0;
      background: @ico_mypage_b center ~"/" contain no-repeat;
    }
    > h3{
      position: relative;
      &:after{
        display: block;
        position: absolute;
        left: 4px;
        bottom: -24px;
        width: 32px;
        height: 2px;
        background: @color-black3;
        content: '';
      }
    }
    &-info{
      display: inline-block;
      position: relative;
      width: 100%;
      &-img{ //프로필 이미지
        position: relative;
        width: 80px;
        height: 80px;
        > img{
          width: 100%;
          height: 100%;
          border: 1px @color-black9 solid;
          border-radius: 100px;
          object-fit: contain;
        }
        .profile_sns_icon{ //프로필 해당 sns
          position: absolute;
          right: -16px;
          bottom: 0;
          width: 32px;
          height: 32px;
          background: @color-white;
          img{ .object-fit-contain; }
        }
      }
      h4{ //프로필 이름
        display: inline-block;
        position: relative;
        max-width: 100%;
        &:after{
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          content: '님';
        }
      }
    }
    &-logout{ //로그아웃
      position: relative;
      right: 16px;
      bottom: 0;
      margin: 32px 16px;
    }
  }
  &-tabs{ //마이페이지 탭 영역
    display: inline-block;
    clear: both;
    width: -webkit-calc(~"100% - 224px");
    width: -moz-calc(~"100% - 224px");
    width: calc(~"100% - 224px");
    padding-top: 64px;
    &-nav{ //탭버튼
      position: relative;
      width: -webkit-calc(~"100% - 80px");
      width: -moz-calc(~"100% - 80px");
      width: calc(~"100% - 80px");
      padding: 0 16px;
      margin: 0 auto;
      border-bottom: 4px solid @color-black3;
      text-align: left;
      box-sizing: content-box;
      .clearAfter;
      button{
        display: inline-block;
        position: relative;
        top: 4px;
        float: left;
        padding: 8px 24px 8px 48px;
        margin: 0 16px 0 0;
        border: 1px solid transparent;
        border-bottom: 4px solid @color-black3;
        border-radius: 8px 8px 0 0;
        background: none;
        color: @color-black9;
        font-size: @font-size-4;
        line-height: @line-height-4;
        font-weight: 300;
        outline: none;
        .transition_03s;
        will-change: color;
        &:before{
          display: block;
          position: absolute;
          left: 16px;
          top: 10px;
          width: 24px;
          height: 24px;
          background: center ~"/" contain no-repeat;
          content: '';
          opacity: 0.4;
          .transition_03s;
          will-change: opacity, background-image;
        }
        &:first-child:before{ background-image: @ico_taste_title_b; }
        &:last-child:before{ background-image: @ico_dq_pass_title_b; }
        &:hover,
        &:focus,
        &:active{
          color: @color-dq1;
          &:first-child:before{ background-image: @ico_taste_title; opacity: 1; }
          &:last-child:before{ background-image: @ico_dq_pass_title; opacity: 1; }
        }
        &:active{ opacity: 0.4 }
        &.active{
          color: @color-black3;
          font-weight: 700;
          border-color: @color-black3;
          border-bottom: 4px solid transparent;
          background: @color-white;
          &:before{ opacity: 1; }
          &:hover{ color: @color-dq1; }
        }
      }
      &-list{
        border: none;
        padding: 24px 0 8px;
        list-style: none;
        width: -webkit-calc(~"100% - 48px");
        width: -moz-calc(~"100% - 48px");
        width: calc(~"100% - 48px");
        margin: 0 auto;
        .clearAfter;
        li{
          display: inline-block;
          position: relative;
          float: left;
          padding: 0 24px 0 32px;
          .transition_03s;
          &:after{
            position: absolute;
            top: 6px;
            left: 8px;
            width: 16px;
            height: 16px;
            border: 1px solid @color-black3;
            border-radius: 100px;
            .transition_03s;
            will-change: color, border-color, background-color;
            content: '';
          }
          &:hover,
          &:focus,
          &:active{
            cursor: pointer;
            &:after{ border-color: @color-dq1; background-color: @color-dq1; }
            a{ color: @color-dq1; }
          }
          &:focus,&:active{ opacity: 0.4 }
          a{
            display: block;
            color: @color-black9;
            text-decoration: none;
            h4{
              font-weight: 300;
              padding: 0 0 4px;
              @media screen and (max-width: 340px){
                font-size: @font-size-6 !important;
                line-height: @font-size-6 !important;
              }
            }
          }
          &.active{
            &:hover,
            &:focus,
            &:active{
              cursor: pointer;
              &:after{ border-color: @color-dq1; background-color: @color-dq1; }
              a{ color: @color-dq1; }
            }
            &:after{  border-color: @color-dq1; background-color: @color-dq1; }
            a{
              color: @color-black3;
              h4{ font-weight: 700; }
            }
          }
        }
      }

    }


    &-body{ //탭 아래 콘텐츠 영역
      display: inline-block;
      width: 100%;
      &-nothing{ //콘텐츠 false
        padding: 160px 0;
        color: @color-black9;
        text-align: center;
      }
      &-content{ // 그리드 콘텐츠
        .item.dq-pass{ // 디너패스
          margin-bottom: 48px;
          a{ height: 56%; }
        }
      }
    }
  }
  /*

  */


}


// 퀸즈코퍼레이션 마이페이지
.qz-mypage {
  padding: 40px 16px 80px;
  max-width: 1440px;
  //max-width: 1504px; // 1440 + 32*2
  width: 100%;
  margin: 0 auto;
  font-size: 0;
  @media screen and (max-width: 1199px) { padding: 0 32px; }
  @media screen and (max-width: 767px) {
    padding: 0 16px;
    &.beaut,
    &.tqueens { margin: 56px auto 0; }
  }


  // 마이페이지 사이드 왼쪽
  &__side {
    display: inline-block;
    position: relative;
    max-width: 328px;
    width: 100%;
    vertical-align: top;
    &__profile {
      padding: 24px;
      margin: 0 0 24px;
      border-radius: 16px;
      background: @color-white;
      .box-shadow--normal;
      .user-profile {
        font-size: 0;
        margin: 0 0 24px;
        &__img {
          display: inline-block;
          position: relative;
          width: 48px;
          height: 48px;
          border-radius: 100px;
          background: @color-gre-black1;
          vertical-align: middle;
          .box-shadow--normal;
          .object-fit-cover {
            overflow: hidden;
            border-radius: 100px;
            .absolute-zero;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          &__change {
            position: absolute;
            right: -7px;
            bottom: -7px;
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 100px;
            background: @color-white @ico_edit_b 55% center ~"/" 70% no-repeat;
            font-size: 0;
            outline: none;
            .transition_03s;
            .box-shadow--normal;
            &:hover { .transform_hover; }
          }
        }
        &__name {
          display: inline-block;
          padding: 0 16px;
          width: -webkit-calc(~"100% - 48px");
          width: -moz-calc(~"100% - 48px");
          width: calc(~"100% - 48px");
          text-align: left;
          vertical-align: middle;
          .ellipsis;
        }
      }
      .user-sns {
        text-align: left;
        .abled,
        .disabled {
          font-size: 0;
          .sns-ico,
          .check-ico {
            display: inline-block;
            width: 48px;
            height: 48px;
            background: center ~"/" contain no-repeat;
            vertical-align: middle;
            &.ins { background-image: @ico_logo_ins; &.disabled { background-image: @ico_logo_ins_gray } }
            &.nv { background-image: @ico_logo_naver; &.disabled { background-image: @ico_logo_naver_gray } }
            &.fb { background-image: @ico_logo_fb; &.disabled { background-image: @ico_logo_fb_gray } }
          }
          .text {
            display: inline-block;
            width: -webkit-calc(~"100% - 80px");
            width: -moz-calc(~"100% - 80px");
            width: calc(~"100% - 80px");
            color: @color-black3;
            vertical-align: middle;
            .font-body2;
          }
          .check-ico {
            width: 32px;
            height: 32px;
            background-image: @ico_check;
          }
        }
        > .disabled {
          opacity: 0.7;
          .text { color: @color-black9; }
          .sns-ico {
            &.ins { background-image: @ico_logo_ins_gray }
            &.nv { background-image: @ico_logo_naver_gray }
            &.fb { background-image: @ico_logo_fb_gray }
          }
          .transition_03s;
          &:hover { .transform_hover; }
        }
      }
    }
    &__nav-group {
      list-style: none;
      padding: 0;
      margin: 0 0 24px;
      &__list{
        &.active {
          a {
            background: @color-gre-dq1;
            .apply-ico { background-image: @ico_term_w; }
            .settings-ico { background-image: @ico_mypage_w; }
            .arrow-ico { background-image: @ico_right_double_bracket_w; }
            .text { color: @color-white; font-weight: 700; }
          }
        }
        a {
          display: block;
          padding: 8px 24px 8px 32px;
          margin: 0 0 16px;
          border-radius: 8px;
          background: @color-white;
          .box-shadow--normal;
          text-decoration: none;
          font-size: 0;
          text-align: left;
          .transition_03s;
          &:hover { opacity: 0.8; .transform_hover; }
          > span { display: inline-block; vertical-align: middle; }
          .apply-ico,
          .settings-ico,
          .arrow-ico {
            width: 24px;
            height: 24px;
            background: center ~"/" contain no-repeat;
          }
          .apply-ico { background-image: @ico_term_b; }
          .settings-ico { background-image: @ico_mypage_b; }
          .arrow-ico {
            width: 32px;
            height: 32px;
            background-image: @ico_right_double_bracket_b;
          }
          .text {
            width: -webkit-calc(~"100% - 56px");
            width: -moz-calc(~"100% - 56px");
            width: calc(~"100% - 56px");
            padding: 0 8px;
            color: @color-black3;
            .font-button;
          }
        }
      }
    }
    &__subgroup {
      list-style: none;
      padding: 16px;
      margin: 0 0 48px;
      border-radius: 16px;
      background: @color-white;
      .box-shadow--normal;
      &__list {
        .faq,
        .contact{
          display: block;
          padding: 6px 16px;
          border-radius: 8px;
          background: @color-gre-black1;
          color: @color-white;
          font-size: 0;
          text-decoration: none;
          text-align: left;
          .transition_03s;
          .box-shadow--normal;
          &:hover {
            .transform_hover;
          }
          > span { display: inline-block; vertical-align: middle; }
          .faq-ico,
          .contact-ico {
            width: 24px;
            height: 24px;
            background: center ~"/" contain no-repeat;
          }
          .faq-ico { background-image: @ico_faq_w; }
          .contact-ico { background: @ico_contact_w }
          .text { .font-button; }
        }
        .faq { margin: 0 0 16px}
      }
    }
    &__logout {
      display: block;
      width: 100%;
      padding: 12px 32px;
      border: none;
      border-radius: 8px;
      background: @color-white;
      text-align: left;
      outline: none;
      .transition_03s;
      .box-shadow--normal;
      &:hover { .transform_hover; }
      .text {
        .font-button;
      }
    }

    // 태블릿 영역
    @media screen and (max-width: 1199px) {
      max-width: 100%;
      width: 100%;
      margin: 24px auto 32px;
      border-radius: 16px;
      background: @color-white;
      .box-shadow--normal;
      &__profile {
        margin: 0;
        border-radius: 0;
        font-size: 0;
        background: transparent;
        box-shadow: none;
        text-align: right;
        .clearAfter;
        .user-profile { display: inline-block; float: left; }
        .user-sns {
          display: inline-block;
          margin: 56px 0 0 8px;
          //overflow: hidden;
          //border-radius: 16px;
          //box-shadow: none;
          //float: none;
          //&.none-sns { float: right; .box-shadow--normal; }
          .abled,
          .disabled {
            position: relative;
            .check-ico { display: none; }
            > .text {
              .absolute-zero;
              width: 100%;
              height: 100%;
              font-size: 0;
            }
          }
          .disabled {
            &:after{
              display: block;
              position: absolute;
              bottom: -4px;
              width: 100%;
              text-align: center;
              color: @color-black9;
              .font-overline;
              content: '연동하기';
            }
          }
          //.disabled { opacity: 0.5; }
        }
        //&:before {
        //  position: absolute;
        //  top: 24px;
        //  right: 16px;
        //  .font-button;
        //  content: '';
        //}
      }
      &__nav-group {
        padding: 0 12px;
        font-size: 0;
        text-align: left;
        &__list {
          display: inline-block;
          width: -webkit-calc(~"33% - 24px");
          width: -moz-calc(~"33% - 24px");
          width: calc(~"33% - 24px");
          margin: 0 12px;
          > a {
            padding: 8px 16px;
            margin: 0;
            background: @color-gre-black1;
            .apply-ico { background-image: @ico_term_w; }
            .settings-ico { background-image: @ico_mypage_w; }
            .text { color: @color-white; white-space: nowrap; }
            .arrow-ico { background-image: @ico_right_double_bracket_w; .transition_03s; }
          }
          &.active {
            > a {
              .arrow-ico {
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                transform: rotate(90deg);
              }
            }
          }
        }
      }
      &__subgroup { display: none; }
      &__logout {
        //display: none;

        position: absolute;
        top: 16px;

        //padding: 4px;
        display: inline-block;
        width: auto;
        padding: 4px 16px;
        //bottom: 10px;
        //bottom: 71px;
        right: 18px;
        bottom: auto;
        //top: -16px;
        border-radius: 100px;

      }
    }

    // 모바일 영역
    @media screen and (max-width: 767px) {
      margin: 32px auto 40px;
      &__profile {
        padding: 24px 16px 0;
        .user-profile {
          margin: 0;
          text-align: left;
          &__img { width: 72px; height: 72px; }
          &__name {
            display: block;
            max-width: 120px;
            width: 100%;
            padding: 16px 0;
            font-weight: 700;
          }
        }
      }
      &__nav-group {
        padding: 0 12px;
        &__list {
          width: -webkit-calc(~"50% - 8px");
          width: -moz-calc(~"50% - 8px");
          width: calc(~"50% - 8px");
          margin: 0 4px;
          > a {
            padding: 14px 0;
            text-align: center;
            .apply-ico,
            .settings-ico,
            .arrow-ico { display: none; }
            .text{
              width: 100%;
              padding: 0;
              .font-button;
            }
          }
        }
      }
    }
  }




  // 마이페이지 메인 오른쪽
  &__main {
    display: inline-block;
    max-width: -webkit-calc(~"100% - 328px");
    max-width: -moz-calc(~"100% - 328px");
    max-width: calc(~"100% - 328px");
    width: 100%;
    padding-left: 152px;
    vertical-align: top;
    //신청 리스트
    &__apply-list {
      // 탭 해더
      &__tab-header  {
        list-style: none;
        position: relative;
        padding: 0;
        margin: 0 0 24px;
        border-bottom: 1px solid @color-gray3;
        text-align: left;
        font-size: 0;
        .clearAfter;
        &:before {
          position: absolute;
          right: 0;
          left: -16px;
          bottom: -25px;
          z-index: 1;
          width: -webkit-calc(~"100% + 36px");
          width: -moz-calc(~"100% + 36px");
          width: calc(~"100% + 36px");
          height: 24px;
          margin: 0 auto;
          background: @color-gray1;
          content: '';
        }
        li { display: inline-block; &.active { float: left; } }
        &__btn {
          padding: 8px 16px 9px;
          margin: 0 10px 0 0; /* 그리드 맞춤 16 -> 10 */
          border: none;
          border-radius: 8px 8px 0 0;
          background: @color-gre-white;
          outline: none;
          .font-button;
          .box-shadow--normal;
          &:hover,
          &.active { color: @color-white; background: @color-gre-black1; }
          &:hover { opacity: 0.6; }
          &:active { .transform_active; }
        }
      }
      // 탭 리스트
      &__tab-content {
        // 탭 리스트 - 상단 카테고리
        &__category {
          position: relative;
          z-index: 1;
          font-size: 0;
          text-align: left;
          margin: 0 0 48px;
          > button {
            display: inline-block;
            position: relative;
            padding: 6px 16px;
            margin: 0 19px 0 0; /* 그리드 맞춤 16 -> 19 */
            border: none;
            border-radius: 100px;
            background: @color-white;
            outline: none;
            .transition_03s;
            .box-shadow--normal;
            &:hover { .transform_hover; }
            &:active { .transform_active; }
            .num {
              position: absolute;
              top: -8px;
              right: 0;
              padding: 0 8px;
              border-radius: 100px;
              background: @color-gre-dq1;
              color: @color-white;
              .font-overline;
              .box-shadow--normal;
            }
            .text {
              color: @color-black3;
              .font-button;
            }
            &.active {
              background: @color-gre-dq1;
              .num {
                background: @color-white;
                color: @color-black3;
                font-weight: 700;
              }
              .text { color: @color-white; font-weight: 700; }
            }
          }
        }
        // 탭 리스트 - 카드 영역
        &__card {
          position: relative;
          font-size: 0;
          text-align: left;
          margin: 0 -16px;
          .item {
            display: inline-block;
            position: absolute;
            max-width: 208px;
            width: 100%;
            margin: 0 16px 56px;
            .qz-mypage-card {
              &__img {
                display: block;
                position: relative;
                overflow: hidden;
                height: 0;
                padding-bottom: 100%;
                border-radius: 8px;
                .box-shadow--normal;
                .status {
                  display: inline-block;
                  position: absolute;
                  top: 0;
                  left: 0;
                  z-index: 1;
                  padding: 6px 12px;
                  color: @color-white;
                  border-radius: 0 0 8px 0;
                  background: @color-gre-dq1;
                  .font-button;
                  // 신청 .diStatusApply
                  // 미당첨 .diStatusFail
                  // 당첨 .diStatusWin
                  // 동의안함 .diStatusConfirm
                  // 사용대기 .diStatusWait
                  // 리뷰미등록 .diStatusReviewFalse
                  // 사용완료 .diStatusSuccess
                  &.diStatusApply { background: @color-gre-yello; }
                  &.diStatusFail { background: @color-gre-black2; }
                  &.diStatusWin { background: @color-gre-green; }
                }
                .sns-type {
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  width: 36px;
                  height: 36px;
                  border-radius: 8px 0 0 0;
                  background: @color-white;
                  font-size: 0;
                  .box-shadow--normal;
                  &.nv { background: @color-white @ico_logo_naver center ~"/" contain no-repeat; }
                  &.ins { background: @color-white @ico_logo_ins center ~"/" contain no-repeat; }
                }
                .object-fit-cover {
                  .absolute-zero;
                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    .transition_03s;
                  }
                }
                &:hover {
                  .object-fit-cover img{
                    transform: scale(1.25);
                  }
                }
              }
              &__text {
                .title,
                .subtitle { .font-body1; .ellipsis; }
                .title { margin: 8px 0 0; }
              }
              &__cancel {
                display: inline-block;
                float: right;
                padding: 6px 16px;
                margin: 12px 0 0;
                border: none;
                border-radius: 100px;
                background: @color-gre-black1;
                color: @color-white;
                outline: none;
                .font-button;
                .transition_03s;
                .box-shadow--normal;
                &:hover { .transform_hover; }
              }
            }
          }
        }
        // 탭 리스트 - 더보기
        &__more {
          max-width: 206px;
          width: 100%;
          margin: 0 auto;
          button {
            width: 100%;
            padding: 13px 32px 14px;
            margin: 0 auto;
            color: @color-white;
            border: none;
            border-radius: 8px;
            background: @color-gre-black1;
            .font-button;
            .box-shadow--normal;
            .transition_03s;
            &:hover,
            &:focus { .transform_hover; }
          }
        }
        &__loading{
          display: none;
          width: 100%;
          margin: -48px auto 0;
          .ico {
            max-width: 48px;
            width: 100%;
            height: 48px;
            border: 1px solid @color-dq1;
            border-radius: 100px;
            border-left-color: transparent;
            margin: 0 auto;
            -webkit-animation: loading-rotate 3s linear infinite;
            -moz-animation: loading-rotate 3s linear infinite;
            -o-animation: loading-rotate 3s linear infinite;
            animation: loading-rotate 3s linear infinite;
          }
          @keyframes loading-rotate {
            from {
              -webkit-transform: rotate(0deg);
              -moz-transform: rotate(0deg);
              -ms-transform: rotate(0deg);
              -o-transform: rotate(0deg);
              transform: rotate(0deg);
            }
            to {
              -webkit-transform: rotate(360deg);
              -moz-transform: rotate(360deg);
              -ms-transform: rotate(360deg);
              -o-transform: rotate(360deg);
              transform: rotate(360deg);
            }
          }
          &.visible { display: block !important; }
        }
      }
    }
    // 내 정보 수정하기
    &__settings {
      &__base,
      &__sns,
      &__pass {
        padding: 24px 32px 40px;
        margin: 0 0 32px;
        border-radius: 16px;
        background: @color-white;
        text-align: left;
        .box-shadow--normal;
        &__title { margin-bottom: 32px; .font-h6; }
        &__save {
          border-top: 1px solid @color-gray2;
          font-size: 0;
          button {
            padding: 14px 32px;
            margin: 32px 0 0;
            border: none;
            border-radius: 8px;
            background: @color-gre-dq1;
            color: @color-white;
            outline: none;
            .font-button;
            .transition_03s;
            .box-shadow--normal;
            &:hover { .transform_hover; }
            &:active { .transform_active; }
            &.disabled {
              background: @color-gre-black2;
              opacity: 0.6;
              cursor: not-allowed;
              &:hover { transform: none; }
            }
          }
          .text {
            display: inline-block;
            margin: 0 0 0 16px;
            color: @color-dq1;
            .font-body2;
          }
        }
        &__group {
          .rotate { display: inline; }
        }
      }
      // 기본정보 수정
      &__base {
        &__img {
          font-size: 0;
          margin: 0 0 24px;
          .user-profile {
            display: inline-block;
            position: relative;
            width: 64px;
            height: 64px;
            margin-right: 56px;
            border-radius: 100px;
            background: @color-gre-black1;
            vertical-align: middle;
            .box-shadow--normal;
            .object-fit-cover {
              .absolute-zero;
              border-radius: 100px;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            &__button {
              display: inline-block;
              padding: 6px 16px;
              border: none;
              border-radius: 100px;
              background: @color-gre-black1;
              color: @color-white;
              outline: none;
              vertical-align: middle;
              .font-button;
              .transition_03s;
              .box-shadow--normal;
              &:hover { .transform_hover; }
            }
          }
        }
        &__group {
          margin-bottom: 24px;
          font-size: 0;
          .title {
            display: inline-block;
            max-width: 120px;
            width: 100%;
            .font-body1;
            vertical-align: middle;
          }
          .form {
            display: inline-block;
            max-width: 328px;
            width: 100%;
            border-radius: 4px;
            border: 1px solid @color-black6;
            padding: 5px 8px;
            vertical-align: middle;
            outline-color: @color-dq1;
            .font-button;
            &.add {
              display: block;
              margin: 16px 0 16px 120px;
            }
          }
          button {
            display: inline-block;
            padding: 6px 16px;
            margin-left: 16px;
            border: none;
            border-radius: 100px;
            background: @color-gre-black1;
            vertical-align: middle;
            color: @color-white;
            outline: none;
            .font-button;
            .transition_03s;
            .box-shadow--normal;
            &:hover { .transform_hover; }
          }
          .subtext {
            display: block;
            margin: 8px 0 0;
            padding-left: 120px;
            color: @color-black9;
            .font-caption;
          }
          &__checkbox {
            > input {
              display: inline-block;
              width: 24px;
              height: 24px;
              margin: 0 8px 0 0;
              border-radius: 4px;
              vertical-align: middle;
            }
            > label {
              width: -webkit-calc(~"70% - 32px");
              width: -moz-calc(~"70% - 32px");
              width: calc(~"70% - 32px");
              vertical-align: middle;
              word-break: keep-all;
              word-wrap: break-word;
              .font-button;
            }
          }
        }
        // 다음 주소지
        #conDiv {
          overflow: hidden;
          position:relative;
          max-width: 767px;
          width: 100%;
          height:300px;
          padding:0 0;
          margin: 0 auto 24px 120px !important;
          border: 1px solid @color-black6 !important;
          border-radius: 8px;
        }
        // 다음 주소지 모바일 순서 교체
        .rotate-delivery {

        }
      }
      // SNS 등록
      &__sns {
        &__group {
          font-size: 0;
          .title {
            display: inline-block;
            max-width: 188px;
            width: 100%;
            vertical-align: middle;
            .ico {
              display: inline-block;
              width: 48px;
              height: 48px;
              background: center ~"/" contain no-repeat;
              vertical-align: middle;
              &.ins { background-image: @ico_logo_ins; }
              &.fb { background-image: @ico_logo_fb; }
              &.nv { background-image: @ico_logo_naver; }
            }
            .text {
              display: inline-block;
              vertical-align: middle;
              .font-body1;
            }
          }
          .form {
            display: inline-block;
            max-width: 448px;
            width: 100%;
            border-radius: 4px;
            border: 1px solid @color-black9;
            padding: 5px 8px;
            vertical-align: middle;
            .font-button;
          }
          > button {
            display: inline-block;
            padding: 6px 16px;
            margin-left: 16px;
            border: none;
            border-radius: 100px;
            background: @color-gre-dq1;
            vertical-align: middle;
            color: @color-white;
            outline: none;
            .font-button;
            .transition_03s;
            .box-shadow--normal;
            &:hover { .transform_hover; }
            &.active { background: @color-gre-black1; }
          }
        }
      }
      // 비밀번호 변경
      &__pass {
        &__group {
          margin-bottom: 24px;
          font-size: 0;
          .title {
            display: inline-block;
            max-width: 120px;
            width: 100%;
            .font-body1;
            vertical-align: middle;
          }
          .form {
            display: inline-block;
            max-width: 328px;
            width: 100%;
            border-radius: 4px;
            border: 1px solid @color-black9;
            padding: 5px 8px;
            vertical-align: middle;
            .font-button;
          }
        }
      }
    }


    // 태블릿 영역
    @media screen and (max-width: 1199px) {
      display: block;
      max-width: 100%;
      padding: 0;
      // 신청 리스트
      &__apply-list {
        // 탭 헤더
        &__tab-header {
          li:last-of-type { > button { margin: 0; } }
          &__btn {
            padding: 7px 8px 8px;
            margin: 0 12px 0 0;
            .font-body2;
          }
        }
        // 탭 리스트
        &__tab-content {
          &__category {
            overflow-x: scroll;
            padding: 24px 16px;
            margin: -24px -16px 0;
            text-align: center;
            white-space: nowrap;
            > button { margin: 0 8px; }
          }
          &__card {
            margin: 8px -16px 0;
            .item {
              max-width: -webkit-calc(~"33.3% - 32px");
              max-width: -moz-calc(~"33.3% - 32px");
              max-width: calc(~"33.3% - 32px");
              .qz-mypage-card {
                &__cancel { margin: 12px 0 0; }
              }
            }
          }
        }
      }
      // 내 정보 수정하기
      &__settings {
        &__base,
        &__sns,
        &__pass {
          &__title {}
          &__save {
            .text {
              display: block;
              margin: 16px 0 8px;
              text-align: right;
            }
          }
        }
        // 기본정보 수정
        // 비밀번호 변경
        &__base,
        &__pass {
          &__group {
            .form {
              max-width: -webkit-calc(~"100% - 120px - 140px");
              max-width: -moz-calc(~"100% - 120px - 140px");
              max-width: calc(~"100% - 120px - 140px");
            }
          }
          #conDiv {
            max-width: -webkit-calc(~"100% - 120px - 140px");
            max-width: -moz-calc(~"100% - 120px - 140px");
            max-width: calc(~"100% - 120px - 140px");
            width: 100%;
          }
        }
        // SNS 등록
        &__sns {
          &__group {
            .form {
              max-width: -webkit-calc(~"100% - 188px - 105px");
              max-width: -moz-calc(~"100% - 188px - 105px");
              max-width: calc(~"100% - 188px - 105px");
            }
          }
        }
      }
    }


    // 모바일 영역
    @media screen and (max-width: 767px) {
      // 신청 리스트
      &__apply-list {
        // 탭 헤더
        &__tab-header {

        }
        // 탭 리스트
        &__tab-content {
          &__category {
            text-align: left;
            > button { margin: 0 8px 0 0; }
          }
          &__card {
            .item {
              max-width: -webkit-calc(~"50% - 33px");
              max-width: -moz-calc(~"50% - 33px");
              max-width: calc(~"50% - 33px");
              margin: 0 16px 32px;
              .qz-mypage-card {
                &__text {
                  .title,
                  .subtitle { .font-body2; }
                  .title { margin: 12px 0 0; }
                }
                &__img {
                  .sns-type { width: 32px; height: 32px; }
                }
                &__cancel { margin: 8px 0 0; }
              }
            }
          }
        }
      }
      // 내 정보 수정하기
      &__settings {
        &__base,
        &__sns,
        &__pass {
          padding: 16px;
          &__title {
            margin-bottom: 8px;
          }
          &__group {
            .form { max-width: 100%; }
          }
          #conDiv {
            max-width: 100%;
            margin: 0 auto 24px !important;
            border-radius: 0;
          }
          .rotate-delivery {
            .clearAfter;
            display: block;
            margin-top: -16px;
            margin-bottom: 16px;
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
            > div {
              -webkit-transform: rotate(180deg);
              -moz-transform: rotate(180deg);
              -ms-transform: rotate(180deg);
              -o-transform: rotate(180deg);
              transform: rotate(180deg);
            }
          }
          &__save {}
        }
        // 기본정보 수정
        &__base,
        &__pass {
          &__img {
            margin: 0 0 32px;
            .user-profile { margin-right: 24px; }
          }
          &__group {
            margin-bottom: 16px;
            .clearAfter;
            .title { .font-body2; margin-bottom: 8px; }
            .form {
              .font-body2;
              &.add { margin: 8px auto; }
            }
            button {margin: 8px 0}
            .subtext { padding: 8px 0; margin: 0; }
            .rotate {
              .clearAfter;
              display: block;
              -webkit-transform: rotate(180deg);
              -moz-transform: rotate(180deg);
              -ms-transform: rotate(180deg);
              -o-transform: rotate(180deg);
              transform: rotate(180deg);
              > button,
              > h5,
              > input {
                float: right;
                width: 100%;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
              }
              > button { width: auto; margin: 0;}
            }
            &__checkbox {
              > label {
                width: -webkit-calc(~"100% - 32px");
                width: -moz-calc(~"100% - 32px");
                width: calc(~"100% - 32px");
                .font-caption;
              }
            }
          }
          #conDiv {

          }
          &__save {
            margin-top: 24px;
            button { display: block; margin: 24px 0 0 auto; }
          }
        }
        // SNS 등록
        &__sns {
          &__title { .font-body1; }
          &__group {
            .clearAfter;
            .title {
              .font-body2;
              .ico { width: 36px; height: 36px; }
              .text { .font-body2; }
            }
            .form { margin-bottom: 8px; }
            > button { margin: 0 0 24px; }
          }
        }
      }

    }


  }


  //width: 20px;
  //height: 20px;
  //background: #ff4c42;
}


//    10. 문의하기 페이지
// --------------------------------
//.bq-contact{
//  position: relative;
//  right: 0;
//  left: 0;
//  max-width: 1280px;
//  height: 100%;
//  min-height: inherit;
//  margin: 0 auto;
//  background: none top~"/"100% no-repeat;
//  > div{ max-width: 1280px; margin: 0 auto; }
//  &-direct{
//    max-width: 416px;
//    padding: 16px;
//    margin: 0 auto 40px;
//    border: 1px @color-dq2 solid;
//    &:after{
//      display: block;
//      position: relative;
//      top: 32.5px;
//      left: 72px;
//      width: 32px;
//      height: 32px;
//      border: 1px @color-dq2 solid;
//      border-top: none;
//      border-left: none;
//      background: @color-white;
//      -webkit-transform: rotate(45deg);
//      -moz-transform: rotate(45deg);
//      -ms-transform: rotate(45deg);
//      -o-transform: rotate(45deg);
//      transform: rotate(45deg);
//      content: '';
//    }
//    &-wrap{
//      padding: 24px 24px 0;
//      background: @color-white;
//      &-line{
//        display: block;
//        width: 120px;
//        height: 1px;
//        margin: 16px auto 40px;
//        background: @color-dq1;
//      }
//      > h3{
//        &:after{
//          position: absolute;
//          top: 88px;
//          right: 0;
//          left: 240px;
//          width: 60px;
//          height: 60px;
//          margin: 0 auto;
//          background: @ico_question_mark center~"/"contain no-repeat;
//          content: '';
//        }
//      }
//      &-form{
//        &-group{
//          display: block;
//          width: 100%;
//          &.check{ height: 16px; }
//          &.open{
//            > .bq-dropdown-btn{
//              color: @color-white;
//              > .caret{ color: @color-white; }
//            }
//            > .dropdown-menu{ width: 100%; }
//          }
//          > .bq-dropdown-btn{ // 드롭박스 내용
//            width: 100%;
//            color: @color-black9;
//            > .caret{ color: @color-dq1; }
//          }
//          > .bq-contact-memo{ // 문의내용
//            height: 144px;
//            padding: 0 16px 8px;
//            border-radius: 16px;
//            white-space: normal;
//          }
//          > .bq-checkbox{
//            display: inline-block;
//            float: left;
//            margin: 0;
//            line-height: 40px;
//            &:hover{ opacity: 0.6; }
//          }
//          > .bq-btn{ float: right; }
//        }
//      }
//    }
//    &-btn{
//      display: inline-block;
//      width: 100%;
//      max-width: 416px;
//      margin: 0 auto;
//      > .dq-btn{
//        width: 100%;
//        max-width: 200px;
//        float: left;
//        &:last-child{ float: right; }
//      }
//    }
//  }
//}


//    11. 고객센터 페이지 (공지사항 & FAQ)
// --------------------------------
.dq-sc{
  position: relative;
  max-width: 1280px;
  min-height:  100%;
  margin: 0 auto;
  .clearAfter;
  &:before{
    display: none;
    position: absolute;
    left: 20%;
    background:-webkit-linear-gradient(to bottom, #ff4081, rgba(0,0,0,0));
    background: -moz-linear-gradient(to bottom, #ff4081, rgba(0,0,0,0));
    background: -ms-linear-gradient(to bottom, #ff4081, rgba(0,0,0,0));
    background: -o-linear-gradient(to bottom, #ff4081, rgba(0,0,0,0));
    background: linear-gradient(to bottom, #ff4081, rgba(0,0,0,0));
    width: 1px;
    height: 100%;
    content: '';
  }
  &-nav{ // 11-1. 고객센터 왼쪽 영역
    h2{
      &:after{
        display: block;
        width: 10%;
        height: 2px;
        margin: 16px 0;
        background: @color-black3;
        content: '';
      }
    }
    nav{
      ul{
        li{
          display: block;
          list-style: none;
          .clearAfter;
          &:hover{
            a{ color: @color-black9; }
          }
          a{
            display: block;
            color: @color-black3;
            text-decoration: none;
            .clearAfter;
            span,h4{ display: inline-block; float: left; }
            span{ width: 28px; height: 28px; }
            &.sc-notice span{ background: @ico_notice_gray center ~"/" contain no-repeat; }
            &.sc-faq span{ background: @ico_faq_gray center ~"/" contain no-repeat; }
            &.sc-contact span{ background: @ico_contact_gray center ~"/" contain no-repeat; }
            &.active{
              color: @color-dq1;
              &.sc-notice span{ background-image: @ico_notice; }
              &.sc-faq span{ background-image: @ico_faq; }
              &.sc-contact span{ background-image: @ico_contact; }
            }
          }
        }
      }
    }
  }
  &-body{ // 11-2. 고객센터 오른쪽 영역
    &-title {
      .clearAfter;
      .sc-ico {
        float: left;
        position: relative;
        top: -8px;
        width: 38px;
        height: 38px;
        &.faq-ico{ background: rgba(0, 0, 0, 0) @ico_faq center ~"/" 125% no-repeat; }
        &.contact-ico{ background: rgba(0, 0, 0, 0) @ico_contact center ~"/" 125% no-repeat; }
        &.notice-ico{ background: rgba(0, 0, 0, 0) @ico_notice center ~"/" 125% no-repeat; }
      }
      h3{ display: inline-block; }
    }
    &-tabs{ // 11-2-1. 고객센터 오른쪽 영역 - FAQ 영역
      &-content{
        .panel-group{ // 아코디언 버튼
          .panel{
            margin-top: 0;
            margin-bottom: 12px;
            border: none;
            border-radius: 0 !important;
            border-bottom: 8px @color-gray1 solid;
            box-shadow: none;
            &-heading{
              padding: 0;
              border-radius: 0;
              background: white;
              &:hover{ background: @color-gray1; }
              a{
                display: block;
                overflow: auto;
                position: relative;
                padding: 16px;
                text-decoration: none;
                &:after{
                  display: block;
                  position: absolute;
                  top: 8px;
                  right: 8px;
                  width: 40px;
                  height: 40px;
                  background: @ico_right_bracket center~"/"contain no-repeat;
                  .transition_03s;
                  will-change: transform;
                  content: '';
                }
                &[aria-expanded="false"]{
                  &:after{
                    -webkit-transform: rotate(0);
                    -moz-transform: rotate(0);
                    -ms-transform: rotate(0);
                    -o-transform: rotate(0);
                    transform: rotate(0);
                  }
                }
                &[aria-expanded="true"]{
                  &:after{
                    -webkit-transform: rotate(90deg);
                    -moz-transform: rotate(90deg);
                    -ms-transform: rotate(90deg);
                    -o-transform: rotate(90deg);
                    transform: rotate(90deg);
                  }
                }
                b{
                  display: inline-block;
                  float: left;
                  width: 100%;
                  max-width: 160px;
                  border-right: 1px @color-black3 solid;
                }
                span{
                  display: inline-block;
                  float: left;
                  max-width: -webkit-calc(~"100% - 160px");
                  max-width: -moz-calc(~"100% - 160px");
                  max-width: calc(~"100% - 160px");
                }
              }
            }
            &-body{
              padding-left: 40px;
              margin-bottom: 0;
              border: none !important;
              background: @color-gray2;
              color: @color-black6;
              img{ max-width: 100%; }
            }
          }
        }
      }
    }
    &-notice{ // 11-2-2. 고객센터 오른쪽 영역 - 공지사항 영역
      border-top: 1px @color-gray3 solid;
      border-bottom: 1px @color-gray3 solid;
      ul{
        li{
          list-style: none;
          border-bottom: 8px @color-gray1 solid;
          &:last-child{ border: none; }
          a{
            display: block;
            color: @color-black3;
            &:hover{ color: @color-dq1; }
            dl{
              overflow: hidden;
              dt{
                display: inline-block;
                position: relative;
                width: 100%;
                b{
                  display: inline-block;
                  max-width: -webkit-calc(~"100% - 52px");
                  max-width: -moz-calc(~"100% - 52px");
                  max-width: calc(~"100% - 52px");
                }
                .new{
                  display: inline-block;
                  position: relative;
                  border-radius: 8px;
                  background: @color-dq1;
                  vertical-align: top;
                  strong{
                    display: inline-block;
                    position: relative;
                    bottom: 2px;
                    color: @color-white;
                    font-weight: 100;
                  }
                }
              }
              dd:last-child{ font-size: @font-size-6; }
            }
          }
        }
      }
      &-detail{ // 디테일페이지
        position: relative;
        dl{
          dt{
            position: relative;
            border-top: 2px @color-gray3 solid;
            font-size: @font-size-4;
          }
          dd{ border-bottom: 1px @color-gray2 solid; }
        }
        article{
          border-bottom: 1px @color-gray3 solid;
          img{ width: auto; max-width: 100%; }
        }
      }
    }
    &-contact{ // 11-2-3. 고객센터 오른쪽 공지사항 영역 - 문의하기 영역
      &-kakao{ // 카카오 문의하기
        border-top: 1px @color-gray2 solid;
        .clearAfter;
        > a {
          max-width: 420px;
          border-color: rgba(0,0,0,0);
          background-color: #fcea50;
          color: @color-black3;
          &:hover{ color: inherit; }
          &:after{
            display: inline-block;
            position: absolute;
            top: 4px;
            left: 16px;
            width: 32px;
            height: 32px;
            background: @kakao_medium center~"/"contain no-repeat;
            content: '';
          }
        }
      }
      &-ads{ // 제휴문의하기
        border-top: 1px @color-gray2 solid;
        > form{
          max-width: 420px;
          input, textarea{ border-radius: 16px; }
        }
        > button{ max-width: 420px; }
      }
    }
    &-pagination{ // 11-2-4. 고객센터 오른쪽 공지사항 영역 - 문의하기 영역
      a{
        margin: 0 4px;
        border: none;
        border-radius: 100px;
      }
      .active{
        border-color: @color-dq1;
        border-radius: 100px;
        background: none;
        color: @color-dq1;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -o-box-shadow: none;
        box-shadow: none;
      }
    }
  }
}


//    12. 포스트 페이지
// --------------------------------
.dq-post {
  &-title {
    position: relative;
    max-width: 100%;
    margin-top: 96px;
    h1 {
      display: inline-block;
      position: relative;
      will-change: transform;
      span {
        display: block;
        position: absolute;
        top: -32px;
        left: -56px;
        z-index: -1;
        width: 48px;
        height: 48px;
        border-radius: 100px;
        background: @ico_post_title_w center 4px~"/"80% no-repeat @color-dq1;
        color: @color-white;
        will-change: transform;
        content: '';
      }
      &:after {
        width: 0;
        height: 0;
        position: absolute;
        top: 4px;
        left: -22px;
        border-top: 16px @color-dq1 solid;
        border-right: 8px transparent solid;
        border-left: 8px transparent solid;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        content: '';
      }
    }
    h3 { color: @color-black6; will-change: transform; }
  }
}


//    12-1. 포스트 디테일 페이지
// --------------------------------
.dq-post-detail{
  &-title{ //포스트 디테일 상단 헤더
    position: relative;
    width: 100%;
    height: 320px;
    background: @color-dq1;
    overflow: hidden;
    &:before{
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1;
      width: inherit;
      height: inherit;
      background: -webkit-linear-gradient(-45deg,
      rgba(255,255,255,1) 1%, rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 49%, rgba(255,255,255,1) 0,
      rgba(255,255,255,1) 51%, rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 99%, rgba(255,255,255,1) 0 );
      background: -moz-linear-gradient(-45deg,
      rgba(255,255,255,1) 1%, rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 49%, rgba(255,255,255,1) 0,
      rgba(255,255,255,1) 51%, rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 99%, rgba(255,255,255,1) 0 );
      background: -ms-linear-gradient(-45deg,
      rgba(255,255,255,1) 1%, rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 49%, rgba(255,255,255,1) 0,
      rgba(255,255,255,1) 51%, rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 99%, rgba(255,255,255,1) 0 );
      background: -o-linear-gradient(-45deg,
      rgba(255,255,255,1) 1%, rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 49%, rgba(255,255,255,1) 0,
      rgba(255,255,255,1) 51%, rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 99%, rgba(255,255,255,1) 0 );
      background: linear-gradient(-45deg,
      rgba(255,255,255,1) 1%, rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 49%, rgba(255,255,255,1) 0,
      rgba(255,255,255,1) 51%, rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 99%, rgba(255,255,255,1) 0 );
      -webkit-background-size: 16px 30px;
      -moz-background-size: 8px 8px;
      -o-background-size: 8px 8px;
      background-size: 8px 8px;
      opacity: 0.2;
      content: '';
    }
    &:after{
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 0;
      width: inherit;
      height: inherit;
      background: rgba(0,0,0,0.3);
      content: '';
    }
    &-bg{ //포스트 디테일 상단 헤더 배경
      width: 120%;
      height: 120%;
      margin-top: -30px;
      margin-left: -10%;
      img{ .object-fit-cover; }
    }
    &-header{ //포스트 디테일 상단 헤더 타이틀
      position: absolute;
      top: 35%;
      right: 0;
      left:0;
      z-index: 2;
      width: 100%;
      max-width: 560px;
      height: auto;
      margin: 0 auto;
      background: none;
      color: @color-white;
      .transformY_Minus50;
      &:after{
        display: block;
        width: 36px;
        height: 1px;
        margin: 12px auto 0;
        background: @color-white;
        content: '';
      }
      h1{
        display: -webkit-box;
        overflow: hidden;
        position: relative;
        max-width: 560px;
        padding: 0 6%;
        margin: 16px auto 0;
        line-height: @line-height-1;
        text-align: center;
        text-overflow: ellipsis;
        word-break: keep-all;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      h4{
        position: relative;
        max-width: 560px;
        padding: 0 6%;
        margin: 0 auto;
        text-align: center;
      }
    }
    &-share{ //포스트 디테일 상단 헤더 공유하기 버튼
      width: 100%;
      height: 48px;
      margin: 0 auto;
      position: absolute;
      right: 0;
      bottom: 8px;
      left: 0;
      z-index: 1;
      > h4{
        display: inline-block;
        position: relative;
        color: @color-white;
        line-height: 48px;
        &:before{
          display: inline-block;
          position: absolute;
          left: 0;
          height: 48px;
          width: 48px;
          background: center~"/"100% no-repeat;
          content: '';
        }
        &.like{ // 좋아요 수
          &:before{ background-image: @ico_heart_w; }
        }
        &.reply{ // 댓글 수
          &:before{ background-image: @ico_comment_w; background-size: 90%; }
        }
      }
      .share{
        display: inline-block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 48px;
        height: 48px;
        margin: 0 32px 8px 0;
        border-radius: 100px;
        background: @ico_share_gray center~"/"contain no-repeat @color-white;
        cursor: pointer;
      }
    }
  }
  &-content{ //포스트 디테일 콘텐츠 영역
    background: @color-gray1;
    &-card{
      max-width: 767px;
      margin: 0 auto;
      &-img{ //이미지영역 & 출처
        position: relative;
        width: 100%;
        max-width: 560px;
        height: auto;
        margin: 16px auto 0;
        img{
          width: 100%;
          height: auto;
          border-radius: 8px;
        }
        .credit-by-text{
          a{ color: @color-dq2; text-decoration: none; }
        }
      }
      &-text{ // 작성글 영역
        h4{ color: @color-black6; font-weight: 300; }
        a{
          display: inline-block;
          position: relative;
          padding: 0 64px;
          margin: 32px auto;
          &:before{
            position: absolute;
            top: 2px;
            left: 12px;
            width: 32px;
            height: 32px;
            background: @ico_restaurant_title center~"/"70% no-repeat;
            content: '';
          }
        }
      }
    }
  }

  &-bottom{ //포스트 디테일 하단 영역
    border-top: 1px @color-gray2 solid;
    background: @color-white;
    &-indicator{ //포스트 디테일 하단 정보
      position: relative;
      max-width: 767px;
      margin: 24px auto 8px;
      > div{
        float: left;
        position: relative;
        height:40px;
        font-size: @font-size-5;
        line-height: 40px;
        &:before{
          position: absolute;
          left: 0;
          width: 40px;
          height: 40px;
          background: center~"/"130% no-repeat;
          content: '';
        }
      }
      &-like:before{ background-image: @ico_heart_gray !important; }
      &-reply:before{ background-image: @ico_comment_gray !important; }
      a{ //버튼
        position: relative;
        padding-left: 36px;
        cursor: pointer;
        &.active{
          background: @color-dq1;
          color: @color-white;
          &.like{
            &:after{ background: @ico_heart_w no-repeat; }
          }
        }
        &:after{
          display: block;
          width: 38px;
          height: 38px;
          position: absolute;
          top: 0;
          left: 0;
          content: '';
        }
        &.like{
          &:after{ background: @ico_heart center~"/"contain no-repeat; }
        }
        &.share{
          border-color: @color-black3;
          background: @color-black3;
          &:after { background: @ico_share_w center~"/"contain no-repeat; }
        }
        @media screen and (max-width: 767px){
          float: left;
          width: -webkit-calc(~"50% - 4px");
          width: -moz-calc(~"50% - 4px");
          width: calc(~"50% - 4px");
          margin: 0 0 0 4px;
        }
        &:first-of-type{ margin: 0 4px 0 0; }
      }
    }
    &-reply{
      position: relative;
      max-width: 767px;
      margin: 0 auto;
    }
  }
}

.post-grid-hot{ //포스트 페이지에서 인기있는 게시물 (좋아요 500이상)
  position: absolute;
  top: -16px;
  left: -16px;
  z-index: 1;
  width: 56px;
  height: 56px;
  border: 4px @color-white solid;
  border-radius: 100px 0 100px 100px;
  background: @color-dq1;
  color: @color-white;
  &.good{ background: @color-dq2; }
  > h4{ line-height: 48px; }
}


//    13. TASTE 페이지
// --------------------------------
.dq-taste{
  &-title{ //타이틀 영역
    margin-top: 96px;
    h1{
      display: inline-block;
      position: relative;
      will-change: transform;
      span{
        display: block;
        position: absolute;
        top: -32px;
        left: -56px;
        z-index: -1;
        width: 48px;
        height: 48px;
        border-radius: 100px;
        background: @ico_restaurant_title_w center~"/"75% no-repeat @color-dq1;
        color: @color-white;
        will-change: transform;
        content: '';
      }
      &:after{
        position: absolute;
        top: 4px;
        left: -22px;
        width: 0;
        height: 0;
        border-top: 16px @color-dq1 solid;
        border-right: 8px transparent solid;
        border-left: 8px transparent solid;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        content: '';
      }
    }
    h3{ color: @color-black6; will-change: transform; }
  }
  &-sort{ //정렬 영역
    position: relative;
    max-width: 100%;
    margin: 0 auto 8px;
    .clearAfter;
    &-list{ //정렬 리스트
      display: inline-block;
      float: left;
      width: 100%;
      position: relative;
      text-align: left;
      line-height: 0;
      &-hamburger{ //햄버거 버튼
        display: inline-block;
        position: relative;
        width: 48px;
        height: 48px;
        border: 1px transparent solid;
        background: @ico_hamburger no-repeat;
        outline: none;
        cursor: pointer;
        .transition_03s;
        &:hover ~ .dq-taste-sort-list-area{ display: block; }
      }
      &-area{ //햄버거 액티브
        display: none;
        width: 100%;
        max-width: 1199px;
        min-height: 400px;
        position: absolute;
        top: 48px;
        left: 0;
        z-index: 2;
        border: 1px @color-dq1 solid;
        background: @color-white;
        margin: 0 auto;
        &:hover{ display: block; }
        div{
          padding-top: 8px;
          padding-bottom: 8px;
          &:after{
            display: block;
            clear: both;
            content: '';
          }
          h4{
            display: block;
            float: left;
            width: 120px;
            padding-left: 16px;
            margin: 0;
            font-weight: 700;
            text-align: left;
          }
          ul{

            display: inline-block;
            list-style: none;
            float: left;
            width: -webkit-calc(~"100% - 120px");
            width: -moz-calc(~"100% - 120px");
            width: calc(~"100% - 120px");
            margin: 0;
            text-align: left;
            -moz-column-count: 6;
            -webkit-column-count: 6;
            column-count: 6;
            column-width: 120px;
            column-gap: 2px;
            li{
              display: block;
              float: left;
              width: 100%;
              a{
                position: relative;
                color: @color-black6;
                font-size: @font-size-5;
                text-decoration: none;
                &:hover{ color: @color-dq1; }
              }
            }
          }
        }
      }
      &-select{ //셀렉트 영역
        display: inline-block;
        position: relative;
        min-width: 200px;
        height: 48px;
        vertical-align: top;
        select{
          position: relative;
          top: 50%;
          z-index: 1;
          padding: 4px 16px;
          border: 1px @color-dq1 solid;
          border-radius: 100px;
          background: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          font-size: @font-size-5;
          line-height: @line-height-5;
          .transformY_Minus50;
        }
        &:after{
          display: inline-block;
          position: absolute;
          top: 50%;
          right: 0;
          width: 32px;
          height: 32px;
          background: @ico_right_bracket center~"/"contain no-repeat;
          -webkit-transform: translateY(-50%) rotate(90deg);
          -moz-transform: translateY(-50%) rotate(90deg);
          -ms-transform: translateY(-50%) rotate(90deg);
          -o-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
          content: '';
        }
      }
    }
    &-category {
      max-width: 100%;
      width: 100%;
      float: left;
      padding: 0 8px;
      text-align: left;
      border-bottom: 1px solid @color-gray3;
      white-space: nowrap;
      overflow: auto;
      &::-webkit-scrollbar { display: none; }
      a {
        display: inline-block;
        color: @color-black9;
        font-size: 1rem;
        padding: 12px 8px;
        margin: 0 16px 0 0;
        &.active {
          color: @color-black3;
          font-weight: 700;
          border-bottom: 4px solid #ff4081;
        }
      }
    }
    &-btn{ //정렬 버튼
      position: absolute;
      bottom: 16px;
      right: 24px;
      text-align: right;
      button{
        position: relative;
        border: none;
        background: none;
        font-size: @font-size-5;
        font-weight: 400;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -o-box-shadow: none;
        box-shadow: none;
        outline: none;
        &:hover{
          color: @color-dq1;
          &:after{
            display: inline-block;
            position: absolute;
            top: 10px;
            left: 0;
            width: 8px;
            height: 8px;
            margin: 0 auto;
            border: 1px @color-dq1 solid;
            border-radius: 100px;
            background: none;
            content: '';
          }
        }
        &.active{
          color: @color-dq1;
          font-weight: 700;
          &:after{
            display: inline-block;
            position: absolute;
            top: 10px;
            left: 0;
            width: 8px;
            height: 8px;
            margin: 0 auto;
            border: 1px @color-dq1 solid;
            border-radius: 100px;
            background: @color-dq1;
            content: '';
          }
        }
      }
    }
  }
}


//      13-1. TASTE 디테일 페이지
// --------------------------------
.dq-taste-detail{
  header{ // TASTE 디테일 상단 헤더
    position: relative;
    width: 100%;
    background: none;
    overflow: hidden;
    article{
      padding-bottom: 18.563%; // 33.33 / 16:9
      .wrap{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        div{
          img{ .object-fit-cover; }
        }
      }
    }
  }
  &-title{ //TASTE 디테일 타이틀
    h2{
      display: inline-block;
      div,span{
        display: block;
        width: 100%;
        height: 1px;
        margin: 12px 0 8px;
        background: @color-gray3;
      }
    }
  }
  .taste-calendar{ //TASTE 디테일 달력 영역
    display: inline-block;
    max-width: 400px;
    margin: 56px auto 0;
    .date{ //TASTE 디테일 달력 날짜표기
      padding-top: 16px;
      border-top: 1px @color-gray2 solid;
      &:after{
        display: block;
        clear: both;
        content: '';
      }
      aside{
        h5{
          line-height: @line-height-6;
          &:first-child{
            position: relative;
            padding-left: 16px;
            &:before{
              display: inline-block;
              position: absolute;
              top: 6px;
              left: 0;
              width: 12px;
              height: 12px;
              border-radius: 100px;
              content: '';
            }
          }
        }
        h6{ line-height: @line-height-6; }
        &.step01{
          h5:first-child:before{ background-color: @color-dq3; opacity: .8}
        }
        &.step02{
          h5:first-child:before{ background-color: @color-dq1;}
        }
        &.step03{
          h5:first-child:before{ background-color: @color-dq2; opacity: .8}
        }
      }
    }
  }
  &-content{ // TASTE 디테일 콘텐츠 영역
    background: @color-gray1;
    article{
      max-width: 767px;
      margin: 0 auto;
      .img{  // 이미지영역
        position: relative;
        width: 100%;
        max-width: 680px;
        height: auto;
        margin: 16px auto 0;
        img{
          width: 100%;
          height: auto;
          border-radius: 8px;
        }
      }
      .text{ .clearAfter; } // 텍스트 영역
    }
  }
  &-info{ // TASTE 디테일 인포 영역
    margin: 0 auto;
    .title{ // TASTE 디테일 인포 영역 - 타이틀
      max-width: 767px;
      margin: 32px auto 0;
      h3{
        display: inline-block;
        div,span{
          display: block;
          width: 100%;
          height: 1px;
          margin: 12px 0 8px;
          background: @color-gray3;
        }
      }
    }
    .info-wrap{ // TASTE 디테일 인포 영역 - 정보
      max-width: 767px;
      margin: 56px auto 0;
      &:after{
        display: block;
        clear: both;
        content: '';
      }
      .info-group{
        text-align: left;
        .title{
          i{ font-size: 20px }
        }
        .text{
          line-height: @line-height-5;
          font-weight: 300;
          strong{
            display: inline-block;
            background: @color-dq1;
            border-radius: 100px;
          }
        }
      }
    }
    .map-api{ // TASTE 디테일 지도
      .taste-detail-map-canvas{
        display: block;
        max-width: 100%;
        height: 400px;
        margin: 12px auto 0;
        background-size: cover;
      }
    }
  }
  &-apply{ // TASTE 디테일 신청 영역
    .taste-apply-btn{
      background: @color-gray1;
      .dq-btn{
        width: 320px;
        height: 56px;
        padding: 0 32px;
        font-size: @font-size-5;
        line-height: 54px;
      }
    }
  }
  &-share{ // TASTE 디테일 공유 영역
    .dq-btn{
      &.ghost-btn.active{
        background: @color-dq1;
        color: @color-white;
      }
    }
  }
  &-list{ // TASTE 디테일 리스트 영역
    .apply-list{
      max-width: 640px;
      margin: 0 auto;
      border-top: 1px @color-gray2 solid;
      .clearAfter;
      &-wrap{
        display: inline-block;
        float: left;
        width: 12%;
        height: 75px;
        text-align: center;
        vertical-align: top;
        div{
          overflow: hidden;
          width: 48px;
          height: 48px;
          margin: 0 auto;
          border-radius: 100px;
          img{ .object-fit-cover; }
        }
        h6{
          font-size: @font-size-6;
          line-height: @line-height-6;
          .ellipsis;
        }
      }
      h5{ .clearAfter }
    }
  }
  &-friends-share{ // TASTE 디테일 다른 친구 공유 영역
    article{
      max-width: 640px;
      margin: 0 auto;
      border-top: 1px @color-gray2 solid;
      .share-btn{
        display: inline-block;
        width: 48px;
        height: 48px;
        img{ width: 100%; height: 100%; }
      }
    }
  }
  &-reply{ // TASTE 디테일 신청 댓글 영역
    article{
      &.reply-wrap{
        border-top: 1px @color-gray2 solid;
        max-width: 640px;
        margin: 0 auto;
        .clearAfter
      }
      &.reply-more-btn{
        max-width: 640px;
        width: 100%;
        margin: 40px auto 0;
        button{ max-width: 400px; width: 100%; }
      }
    }
  }
  &-others{ // TASTE 디테일 다른 TASTE 보기 영역
    border-top: 1px @color-gray3 solid;
    .others-taste{
      display: inline-block;
      width: 100%;
      max-width: 65%;
      margin: 0 auto;
      > h4{ margin: 0 auto; max-width: 640px; width: 100%;}
      .others-list-img{ // TASTE 디테일 다른 TASTE 보기 - 카드이미지
        padding-bottom: 65%;
        overflow: hidden;
        a{
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          &:hover,
          &:focus{
            img{
              -webkit-transform: scale(1.4);
              -moz-transform: scale(1.4);
              -ms-transform: scale(1.4);
              -o-transform: scale(1.4);
              transform: scale(1.4);
            }
          }
          > div{
            position: relative;
            overflow: hidden;
            img{
              -webkit-transition: 0.16s;
              -moz-transition: 0.16s;
              -o-transition: 0.16s;
              transition: 0.16s;
              .object-fit-cover;
            }
            .status{
              display: inline-block;
              position: absolute;
              top: -7.32px;
              left: -32.32px;
              bottom: 0;
              z-index: 2;
              width: 100px;
              height: 50px;
              border-radius: 0;
              background: @color-dq1;
              text-align: left;
              transform: -webkit-rotate(-45deg) !important;
              transform: -moz-rotate(-45deg) !important;
              transform: -ms-rotate(-45deg) !important;
              transform: -o-rotate(-45deg) !important;
              transform: rotate(-45deg) !important;
              &:after{
                position: absolute;
                top: auto;
                right: 0;
                bottom: 4px;
                left: 0;
                color: @color-white;
                font-size: @font-size-6;
                font-weight: 700;
                line-height: @line-height-6;
                text-align: center;
                content: '신청중';
              }
            }
          }
        }
      }
    }
    .more-taste{
      display: inline-block;
      width: 100%;
      max-width: 65%;
      margin: 24px auto 0;
      font-size: @font-size-4;
      font-weight: @400;
      button{ width: 100%; max-width: 400px; }
    }
  }
  &-fixed-apply-btn{ //TASTE 디테일 TASTE 신청 픽스드 버튼
    position: fixed;
    right: 0;
    bottom: 32px;
    left: 0;
    z-index: 100;
    width: 320px;
    margin: 0 auto;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    article{
      width: inherit;
      height: 100%;
      aside{
        width: 100%;
        height: auto;
        border-radius: 8px;
        border: 1px solid @color-gray2;
        background: @color-white;
        -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
        -o-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
        box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
        &:after{ .clearAfter; }
      }
      a, button{
        width: 100%;
        height: 50px;
        border-radius: 100px;
        background: @color-dq1;
        font-size: @font-size-5;
        line-height: @line-height-5;
      }
    }
  }
}





//  13. TASTE 디테일
.re-dq-taste-detail {
  position: relative;
  padding: 56px 16px 0;
  // taste 이미지 지사전용 문구
  &__branch-text {
    display: block;
    position: relative;
    bottom: 24px;
    margin: 8px auto 0;
    max-width: 1408px;
    text-align: left;
    h5 {
      display: block;
      max-width: 928px;
      color: #cccccc;
      text-align: left;
      text-shadow: 0 0 3px @color-white;
      .font-caption;
    }
  }
  // taste 디테일 캐러셀
  &__carousel {
    margin: 0 -16px 8px;
    .taste-carousel {
      width: 100%;
      &:hover {
        .slick-arrow {
          opacity: 1;
          pointer-events: auto;
        }
      }
      .slick-list { overflow: visible; }
      .slick-track { left: -400px; }
      .item {
        display: none;
        position: relative;
        z-index: 1;
        overflow: hidden;
        max-width: 1080px;
        //width: 100%;
        width: auto;
        margin: 0 8px;
        border-radius: 8px;
        .box-shadow--normal;
        &:hover {
          cursor: pointer;
          img {
            -webkit-transform: scale(1.05);
            -moz-transform: scale(1.05);
            -ms-transform: scale(1.05);
            -o-transform: scale(1.05);
            transform: scale(1.05);
          }
        }
        &.slick-slide { display: block; outline: none; height: auto; }
        .img {
          overflow: hidden;
          position: relative;
          //height: 0;
          //padding-bottom: 55.6945%;
          .object-fit-cover{
            //.absolute-zero;
            img {
              //width: 100%;
              //height: 100%;
              object-fit: cover;
              .transition_03s;
              will-change: transform;
              width: auto;
              height: 100%;
              max-height: 349px;
            }
          }
        }
      }
      .slick-arrow {
        position: absolute;
        top: 50%;
        z-index: 1;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 100px;
        background: rgba(52,52,52,0.6) center ~"/" contain no-repeat;
        font-size: 0;
        outline: none;
        opacity: 0;
        pointer-events: none;
        .transition_03s;
        .transformY_Minus50;
        .box-shadow--light;
        &.slick-next {
          right: -webkit-calc(~"50% - 232px");
          right: -moz-calc(~"50% - 232px");
          right: calc(~"50% - 232px");
          background-image: @ico_right_bracket_w;
        }
        &.slick-prev { left: 32px; background-image: @ico_left_bracket_w; }
      }
      .slick-dots {
        list-style: none;
        position: relative;
        left: -180px;
        max-width: 808px;
        width: 100%;
        padding: 0;
        margin: 0 auto;
        text-align: right;
        li {
          display: inline-block;
          position: relative;
          width: 8px;
          height: 8px;
          margin: 0 2px;
          border: 1px solid @color-black3;
          border-radius: 100px;
          background: transparent;
          &.slick-active { background: @color-black3; }
          button {
            .absolute-zero;
            width: inherit;
            height: inherit;
            padding: 0;
            margin: 0;
            border: none;
            font-size: 0;
            outline: none;
            cursor: pointer;
            background: none;
          }
        }
      }
    }
  }
  // taste 디테일 오른쪽 헤더
  &__header {
    position: absolute;
    right: -256px;
    top: 32px;
    height: auto;
    width: 50%;
    background: @color-gray1;
    &-box {
      position: relative;
      top: 0;
      left: 0;
      max-width: 448px;
      width: 100%;
      padding: 32px;
      border-radius: 16px;
      background: @color-white;
      text-align: left;
      .box-shadow--light;
      // taste 디테일 오른쪽 헤더 - 상태정보 영역
      &__taste-status{
        position: absolute;
        top: -16px;
        right: 32px;
        .status-content{
          display: inline-block;
          margin: 0 0 0 16px;
          font-size: 0;
          text-align: center;
          > div {
            position: relative;
            width: 32px;
            height: 32px;
            margin: 0 auto;
            border-radius: 100px;
            background: @color-gre-black1;
            .box-shadow--light;
            &:after {
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: inherit;
              height: inherit;
              content: '';
            }
          }
          &.reserved > div {
            background: @color-dq1;
            &:after { background: @ico_timer_w center ~"/" contain no-repeat; }
          }
          &.coupon > div {
            background: @color-gre-blue2;
            &:after { background: @ico_mail_w center ~"/" contain no-repeat; }
          }
          &.package > div {
            background: @color-gre-blue2;
            &:after { background: @ico_package_w center ~"/" 80% no-repeat; }
          }
          &.premium > div {
            background: @color-gre-black1;
            .box-shadow--light;
            &:after { background: @ico_premium_w center ~"/" contain no-repeat; }
          }
          p { color: @color-black6; .font-caption; }
        }
      }
      // taste 디테일 오른쪽 헤더 - 이름
      &__taste-title {
        word-break: keep-all;
        word-wrap: break-word;
        .font-h5;
      }
      // taste 디테일 오른쪽 헤더 - 소제목
      &__taste-subtitle { .font-subtitle1; }
      // taste 디테일 오른쪽 헤더 - 캘린더
      &__taste-calendar {
        padding: 8px 16px;
        margin: 16px 0;
        border: 1px solid @color-gray2;
        border-radius: 8px;
        .fc-header-toolbar { //캘린더 타이틀
          margin-bottom: 0 !important;
          .fc-right,
          .fc-center { display: none }
          .fc-left {
            h2 { .font-subtitle1; font-weight: 700}
          }
        }
        .fc-view-container { // 캘린더 콘텐츠
          .fc-head {
            display: block;
            margin: 0;
            border: none;
            &-container {
              border: none;
              .fc-widget-header {
                margin-right: 0;
                border: none;
                .fc-day-header {
                  text-align: left;
                  span{
                    .font-subtitle1;
                    font-weight: 700;
                  }
                }
              }
            }
          }
          .fc-body {
            border: none;
            .fc-widget-content {
              border: none;
              .fc-scroller {
                overflow: visible !important;
                height: auto !important;
                .fc-row {
                  min-height: 44px;
                  overflow: visible;
                  .fc-bg {
                    .fc-today {
                      position: relative;
                      background: none;
                      &:after{
                        display: block;
                        position: absolute;
                        top: -4px;
                        left: -6px;
                        width: 10px;
                        height: 10px;
                        border-radius: 100px;
                        background: @color-gre-yello;
                        content: '';
                      }
                    }
                  }
                  .fc-content-skeleton {
                    .fc-day-top {
                      border: none;
                      text-align: left;
                      span {
                        float: none;
                        color: @color-black6;
                        .font-subtitle2;
                      }
                    }
                    .fc-more { display: none; }
                    .fc-day-grid-event {
                      height: 16px;
                      margin: 0;
                      border: none;
                      border-radius: 100px;
                      .box-shadow--normal;
                      &.step01 { background: @color-gre-black2; }
                      &.step03 { background: @color-gre-black1; }
                      &.step02 {
                        position: relative;
                        top: -4px;
                        height: 24px;
                        background: @color-gre-dq1;
                        margin: 0 4px;
                        .fc-content {
                          span {
                            display: block;
                            width: 100%;
                            padding: 2px 0;
                            margin: 2px 0;
                            text-align: center;
                            .font-caption;
                          }
                        }
                      }
                      .fc-content {
                        height: inherit;
                        span {
                          padding: 0 8px;
                          vertical-align: top;
                          .font-overline;
                          line-height: 16px;
                        }
                      }
                    }
                    > table > tbody > tr:nth-of-type(2) {
                      -webkit-transform: translate(-4px,8px);
                      -moz-transform: translate(-4px,8px);
                      -ms-transform: translate(-4px,8px);
                      -o-transform: translate(-4px,8px);
                      transform: translate(-4px,8px);
                    }
                  }
                }
              }
            }
          }
        }
      }
      // taste 디테일 오른쪽 헤더 - 날짜
      &__taste-date {
        font-size: 0;
        .title {
          display: inline-block;
          max-width: 120px;
          width: 100%;
          .font-body1;
        }
        .date {
          display: inline-block;
          width: auto;
          .font-body1;
        }
      }
    }
    &-submit {
      &-wrap {
        max-width: 448px;
        width: 100%;
        margin: 16px 0 0;
        text-shadow: 4px 4px 6px rgba(0,0,0,0.1);
        .applied {
          width: inherit;
          height: inherit;
          padding: 8px 0 7px;
          border-radius: 16px;
          background: @color-gre-blue;
          .box-shadow--normal;
          .title,.sub-title { cursor: default }
          .title { color: @color-white; .font-h6; }
          .sub-title { color: @color-white; .font-subtitle2; }
        }
        .not-apply {
          width: inherit;
          height: inherit;
          padding: 16px 0;
          border-radius: 16px;
          background: @color-gre-black1;
          color: @color-white;
          .box-shadow--normal;
          h5 { cursor: default; .font-h6; }
        }
        .apply {
          display: block;
          position: relative;
          width: inherit;
          height: inherit;
          padding: 16px 0;
          border: none;
          border-radius: 16px;
          background: @color-gre-dq1;
          color: @color-white;
          text-decoration: none;
          outline: none;
          will-change: transform, opacity;
          .transition_03s;
          > span { .font-h6; }
          .box-shadow--normal;
          &:hover {
            background: @color-gre-yello;
            .queens {
              &:after{
                -webkit-transform: translate(0,-25%);
                -moz-transform: translate(0,-25%);
                -ms-transform: translate(0,-25%);
                -o-transform: translate(0,-25%);
                transform: translate(0,-25%);
              }
            }
          }
          .queens {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            pointer-events: none;
            &:after {
              display: block;
              width: 96px;
              height: 96px;
              margin: 0 0 0 24px;
              background: @img_dq_queen center ~"/" contain no-repeat;
              .transition_03s;
              -webkit-transform: translate(0,100%);
              -moz-transform: translate(0,100%);
              -ms-transform: translate(0,100%);
              -o-transform: translate(0,100%);
              transform: translate(0,100%);
              content: '';
            }
          }
          &:after {
            display: block;
            position: absolute;
            top: 0;
            right: -80px;
            width: 64px;
            height: 64px;
            background: @ico_left_double_bracket;
            animation-delay: 2s;
            animation: TasteApply linear 4s 1s;
            opacity: 0;
            pointer-events: none;
            content: '';
          }
          @keyframes TasteApply {
            0% {  opacity: 0; -webkit-transform: translateX(-20px);  -moz-transform: translateX(-20px);  -ms-transform: translateX(-20px);  -o-transform: translateX(-20px);  transform: translateX(-20px);  }
            10% {  opacity: 1; -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  }
            20% {  -webkit-transform: translateX(-20px);  -moz-transform: translateX(-20px);  -ms-transform: translateX(-20px);  -o-transform: translateX(-20px);  transform: translateX(-20px);  }
            30% {  -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  }
            40% {  -webkit-transform: translateX(-20px);  -moz-transform: translateX(-20px);  -ms-transform: translateX(-20px);  -o-transform: translateX(-20px);  transform: translateX(-20px);  }
            50% {  -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  }
            60% {  opacity: 1; -webkit-transform: translateX(-20px);  -moz-transform: translateX(-20px);  -ms-transform: translateX(-20px);  -o-transform: translateX(-20px);  transform: translateX(-20px);  }
            70% {  -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  }
            80% {  -webkit-transform: translateX(-20px);  -moz-transform: translateX(-20px);  -ms-transform: translateX(-20px);  -o-transform: translateX(-20px);  transform: translateX(-20px);  }
            90% {  -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  }
            100% { opacity: 0; }
          }
          @-webkit-keyframes TasteApply {
            0% {  opacity: 0; -webkit-transform: translateX(-20px);  -moz-transform: translateX(-20px);  -ms-transform: translateX(-20px);  -o-transform: translateX(-20px);  transform: translateX(-20px);  }
            10% {  opacity: 1; -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  }
            20% {  -webkit-transform: translateX(-20px);  -moz-transform: translateX(-20px);  -ms-transform: translateX(-20px);  -o-transform: translateX(-20px);  transform: translateX(-20px);  }
            30% {  -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  }
            40% {  -webkit-transform: translateX(-20px);  -moz-transform: translateX(-20px);  -ms-transform: translateX(-20px);  -o-transform: translateX(-20px);  transform: translateX(-20px);  }
            50% {  -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  }
            60% {  opacity: 1; -webkit-transform: translateX(-20px);  -moz-transform: translateX(-20px);  -ms-transform: translateX(-20px);  -o-transform: translateX(-20px);  transform: translateX(-20px);  }
            70% {  -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  }
            80% {  -webkit-transform: translateX(-20px);  -moz-transform: translateX(-20px);  -ms-transform: translateX(-20px);  -o-transform: translateX(-20px);  transform: translateX(-20px);  }
            90% {  -webkit-transform: translateX(0);  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -o-transform: translateX(0);  transform: translateX(0);  }
            100% { opacity: 0; }
          }
        }
      }

    }
    &-download {
      max-width: 448px;
      width: 100%;
      a {
        display: block;
        overflow: hidden;
        position: relative;
        width: inherit;
        height: 118px;
        margin: 32px 0 0;
        border-radius: 16px;
        background: @color-gre-white;
        .box-shadow--light;
        .clearAfter;
        .transition_03s;
        &:hover {
          opacity: 0.6;
          //.transform_hover;
          //background: @color-gre-yello;
          .img {
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
            transform: scale(1.2);
          }
        }
        .img {
          position: absolute;
          top: 0;
          left: 0;
          float: left;
          width: 50%;
          height: 100%;
          background: @img_dq_app_shot_01 center ~"/" cover no-repeat;
          .transition_03s;
          will-change: background, transform;
        }
        .title {
          position: relative;
          float: right;
          width: 60%;
          height: 100%;
          font-size: 0;
          h5 {
            padding: 8px 0 0 24px;
            color: @color-black3;
            text-align: left;
            text-decoration: none;
            .font-h6;
          }
        }
        .ico {
          position: absolute;
          right: 16px;
          bottom: 8px;
          font-size: 0;
          .ico-appstore,
          .ico-playstore {
            display: inline-block;
            width: 112px;
            height: 36px;
            padding: 8px 16px;
            border-radius: 8px;
          }
          .ico-appstore { background: @color-black3 @ico_appstore_btn_w center ~"/" contain no-repeat; }
          .ico-playstore {
            margin: 0 0 0 8px;
            background: @color-black3 @ico_googleplay_btn_w center ~"/" contain no-repeat; }
        }
      }
    }
  }
  // taste 디테일 콘텐츠
  &__content {
    max-width: 1408px;
    width: 100%;
    margin: 0 auto 80px;
    &__info {
      position: relative;
      max-width: 928px;
      width: 100%;
      #ShowDetailImage {
        position: relative;
        width: 100%;
        .wrap{
          height: 200px;
          overflow: hidden;
          &.on { height: auto; overflow: auto; }
          img{width: 100%;}
        }
        button {
          display: block;
          padding: 4px 8px;
          margin: 12px auto 24px;
          width: 100%;
          border: none;
          border-radius: 8px;
          background: #666;
          color: #fff;
          &:hover { opacity: .8; }
        }
      }
      &__tab-btn {
        position: relative;
        margin: 0 0 24px;
        border-bottom: 1px solid @color-gray3;
        text-align: left;
        font-size: 0;
        .clearAfter;
        &:before {
          position: absolute;
          right: 0;
          left: -16px;
          bottom: -25px;
          z-index: 1;
          width: -webkit-calc(~"100% + 36px");
          width: -moz-calc(~"100% + 36px");
          width: calc(~"100% + 36px");
          height: 24px;
          margin: 0 auto;
          background: @color-gray1;
          content: '';
        }
        .tab-btn {
          padding: 8px 16px 9px;
          margin: 0 32px 0 0;
          border: none;
          border-radius: 8px 8px 0 0;
          background: @color-gre-white;
          outline: none;
          .font-button;
          .box-shadow--normal;
          &:hover,
          &.active { color: @color-white; background: @color-gre-black1; }
          &:hover {
            opacity: 0.6;
          }
        }
      }
      &__tab-content {
        display: none;
        min-height: 352px;
        text-align: left;
        font-size: 0;
        -webkit-animation: TabFade 1s;
        animation: TabFade 1s;
        &#TasteTabImg { padding: 24px 0 0; }
        @keyframes TabFade {
          from {opacity: 0;}
          to {opacity: 1;}
        }
        @-webkit-keyframes TabFade {
          from {opacity: 0;}
          to {opacity: 1;}
        }
        .content-group {
          display: inline-block;
          position: relative;
          width: 100%;
          font-size: 0;
          margin-bottom: 16px;
          &.half { width: 50%;}
          .title {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            max-width: 120px;
            width: 100%;
            vertical-align: top;
            .font-body1;
          }
          .content {
            display: inline-block;
            max-width: -webkit-calc(~"100% - 120px");
            max-width: -moz-calc(~"100% - 120px");
            max-width: calc(~"100% - 120px");
            width: 100%;
            padding-right: 16px;
            margin: 0 0 0 120px;
            vertical-align: top;
            .font-body1;
            &.red { color: @color-dq1; }
            &.gray-bg { padding: 16px 24px; background: #efefef; }
            .indent {
              display: inline-block;
              padding: 0 0 0 24px;
            }
            .color-dq1 { color: @color-dq1; }
            //임시용
            b {color: @color-black3 !important; font-weight: 400 !important;}
          }
          .line {
            display: inline-block;
            max-width: -webkit-calc(~"100% - 120px");
            max-width: -moz-calc(~"100% - 120px");
            max-width: calc(~"100% - 120px");
            width: 100%;
            height: 0;
            margin: 16px 0 16px 120px;
            border-bottom: 1px dashed @color-gray3;
          }
          .taste-map {
            display: inline-block;
            max-width: -webkit-calc(~"100% - 120px");
            max-width: -moz-calc(~"100% - 120px");
            max-width: calc(~"100% - 120px");
            width: 100%;
            height: 300px;
            margin: 16px 0 16px 120px;
            #map-canvas { height: inherit; }
          }
        }
        .story {
          .img {
            max-width: 808px;
            width: 100%;
            margin: 0 0 40px;
            img {
              width: 100%;
              height: auto;
              border-radius: 16px;
              .box-shadow--light;
            }
            .caption {
              margin: 4px 0 8px;
              .font-overline;
              text-align: right;
              a {
                color: @color-dq1;
                .font-overline;
              }
            }
            .img-text {
              margin: 16px 0 32px;
              word-wrap: break-word;
              word-break: keep-all;
              .font-body1;
            }
          }
        }
        > hr {
          width: 100%;
          height: 1px;
          margin: 24px 0;
          background: @color-gray3;
          border: none;
        }
        #reply-box {
          margin: 24px 0 0;
          overflow: auto;
          font-size: 0;
          letter-spacing: 0;
          .dq-reply-list {
            display: inline-block;
            position: relative;
            width: 50%;
            padding: 0;
            margin: 0 0 24px;
            &__profile {
              padding: 0;
              &__img {
                width: 48px;
                height: 48px;
                vertical-align: top;
              }
              &__name { padding: 0 0 0 8px; vertical-align: top; }
            }
            &__comment {
              position: absolute;
              bottom: 0;
              padding: 0 0 0 56px;
              .comment { display: none; }
              .date { .font-caption; margin: 0 0 4px }
            }
          }
          .taste-empty {
            min-height: 324px;
            h5 { .font-h6; }
          }
        }
        #reply-more {
          display: block;
          max-width: 328px;
          width: 100%;
          padding: 8px 0;
          margin: 16px 0;
          border: none;
          border-radius: 8px;
          background: @color-gre-black1;
          color: @color-white;
          outline: none;
          .font-button;
          .box-shadow--normal;
          .transition_03s;
          &:hover {
            .transform_hover;
          }
        }
      }
    }
  }
  // taste 디테일 더 보기
  &__more {
    position: relative;
    z-index: 100;
    max-width: 1408px;
    width: 100%;
    padding: 8px 32px 24px;
    margin: 0 auto;
    border-radius: 16px;
    background: @color-white;
    font-size: 0;
    text-align: left;
    .box-shadow--light;
    &__title{
      display: inline-block;
      width: 50%;
      margin: 12px 0 0;
      //font-family: "Iropke Batang", serif;
      .font-h5;
      .ellipsis;
    }
    &__more-link,
    &__more-link--m{
      position: relative;
      float: right;
      padding: 6px 32px 6px 16px;
      margin-top: 12px;
      color: @color-black3;
      text-decoration: none;
      .font-subtitle1;
      .transition_03s;
      &:after{
        display: block;
        position: absolute;
        top: 7px;
        right: 8px;
        width: 24px;
        height: 24px;
        background: @ico_right_double_bracket_b center ~"/" contain no-repeat;
        .transition_03s;
        content: '';
      }
      &:hover,
      &:focus {
        color: @color-dq1;
        text-decoration: none;
        -webkit-transform: translateY(-4px);
        -moz-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
        -o-transform: translateY(-4px);
        transform: translateY(-4px);
        &:after{ background-image: @ico_right_double_bracket; }
      }
    }
    &__more-link--m{ display: none; }
    &__card{ margin: 24px -16px 8px; }
  }


  // 노트북 데스크탑 영역 (portrait)
  @media screen and (max-width: 1440px) {
    padding: 0 32px 0;
    // taste 이미지 지사용 문구
    &__branch-text {
      bottom: 80px;
      padding: 8px 32px 32px;
      margin: 0 auto -112px;
      background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
      opacity: 0.6;
      h5 { color: @color-white; text-shadow: none; }
    }
    // taste 디테일 캐러셀
    &__carousel {
      margin: -16px -32px 8px;
      .taste-carousel {
        .slick-track { left: 0; }
        .slick-arrow {
          &.slick-next { right: 32px; }
        }
        .item {
          max-width: 1080px;
          margin: 0;
          border-radius: 0;
          box-shadow: none;
        }
      }
    }
    // taste 디테일 오른쪽 헤더
    &__header {
      position: relative;
      right: auto;
      left: auto;
      width: 100%;
      top: 0;
      margin: -56px 0 0;
      background: none;
      &-box {
        max-width: 100%;
        .clearAfter;
        // taste 디테일 오른쪽 헤더 - 상태정보 영역
        &__taste-status {}
        // taste 디테일 오른쪽 헤더 - 이름
        &__taste__title {}
        // taste 디테일 오른쪽 헤더 - 소제목
        &__taste-subtitle {}
        // taste 디테일 오른쪽 헤더 - 캘린더
        &__taste-calendar {
          max-width: 420px;
          float: left;
        }
        // taste 디테일 오른쪽 헤더 - 날짜
        &__taste-date {
          display: inline-block;
          width: -webkit-calc(~"100% - 420px");
          width: -moz-calc(~"100% - 420px");
          width: calc(~"100% - 420px");
          padding: 0 32px 0;
          margin: 16px 0;
          .title,
          .date { display: block; max-width: 100%; }
        }
      }
      &-submit {
        position: absolute;
        right: 32px;
        bottom: 56px;
        max-width: 384px;
        width: 100%;
      }
      &-download {
        position: absolute;
        right: 32px;
        bottom: 150px;
        max-width: 384px;
        width: 100%;
        a { margin: 0; }
      }
    }
    // taste 디테일 콘텐츠
    &__content {
      margin: 32px auto 80px;
      &__info {
        max-width: 100%;
        //&__tab-btn {}
      }
    }
    // taste 디테일 콘텐츠 더 보기
    &__more {}
  }


  // 태블릿 영역
  @media screen and (max-width: 1199px) {
    // taste 디테일 캐러셀
    &__carousel {
      .taste-carousel {
        .item {
          //.img { padding-bottom: 40%; }
        }
      }
    }
    // taste 디테일 오른쪽 헤더
    &__header {
      &-box { max-width: 960px; }
      &-submit {
        position: relative;
        right: auto;
        bottom: auto;
        max-width: 560px;
        &-wrap {
          max-width: inherit;
          .apply {
            .queens {
              &:after { margin: 0 0 0 15%; }
            }
          }
        }
      }
      &-download {
        position: relative;
        right: auto;
        bottom: auto;
        max-width: 560px;
        margin: 16px 0;
        a {
          .title { width: 272px; }
        }
      }
    }
    // taste 디테일 콘텐츠
    &__content {
      &__info {
        &__tab-btn {}
        &__tab-content {
          .story { max-width: 560px; }
        }
      }
    }
    // taste 디테일 콘텐츠 더 보기
    &__more {}
  }

  // 모바일 영역
  @media screen and (max-width: 767px) {
    padding: 0 16px 0;
    // taste 이미지 지사용 문구
    &__branch-text {
      bottom: auto;
      max-width: 100%;
      padding: 8px 0 0;
      margin: 0 16px 32px 0;
      //border-top: 1px dotted @color-gray2;
      background: none;
      opacity: 1;
      h5 {
        color: #cccccc;
        font-size: 10px;
        text-align: center;
      }
    }
    // taste 디테일 캐러셀
    &__carousel {
      margin: 16px -16px 8px 0;
      .taste-carousel {
        .slick-list { max-width: 75%; }
        .item {
          overflow: hidden;
          max-width: none;
          margin-right: 16px;
          border-radius: 8px;
          .box-shadow--normal;
          .img {
            .object-fit-cover {
              img { max-height: 200px; }
            }
          }
          //.img { padding-bottom: 55.6945%; }
        }
        .slick-dots { left: -16px; }
      }
    }
    // taste 디테일 오른쪽 헤더
    &__header {
      margin: 0 auto;
      &-box {
        max-width: 452px;
        padding: 32px 16px 16px;
        // taste 디테일 오른쪽 헤더 - 상태정보 영역
        &__taste-status {
          top: -16px;
          right: auto;
          left: 0;
          .status-content {
            margin: 0 0 0 16px;
            > div { width: 24px; height: 24px; }
            p {
              position: relative;
              left: 1.5px;
              .font-overline;
            }
          }
        }
        // taste 디테일 오른쪽 헤더 - 이름
        &__taste-title { .font-h6; }
        // taste 디테일 오른쪽 헤더 - 소제목
        &__taste-subtitle {
          .font-subtitle2;
          > small { display: block; margin: 2px 0 0 }
        }
        // taste 디테일 오른쪽 헤더 - 캘린더
        &__taste-calendar {
          max-width: 100%;
          padding: 8px;
          .fc-header-toolbar {
            .fc-left {
              h2 { .font-subtitle2; }
            }
          }
          .fc-view-container {
            .fc-head {
              &-container {
                .fc-widget-header {
                  .fc-day-header {
                    span { .font-subtitle2; }
                  }
                }
              }
            }
            .fc-body {
              .fc-widget-content {
                .fc-scroller {
                  .fc-row {
                    .fc-content-skeleton {
                      .fc-day-grid-event {
                        &.step02 {
                          .fc-content {
                            span {
                              margin: 0 ;
                              .font-overline;
                              line-height: 20px;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        // taste 디테일 오른쪽 헤더 - 날짜
        &__taste-date {
          display: inline-block;
          width: 100%;
          padding: 0;
          margin: 0 0 8px;
          .title,
          .date { display: inline-block; .font-body2; }
          .title { max-width: 88px; }
          .date {
            max-width: -webkit-calc(~"100% - 88px");
            max-width: -moz-calc(~"100% - 88px");
            max-width: calc(~"100% - 88px");
          }
        }
      }
      &-submit,
      &-download { display: none; }
    }
    // taste 디테일 콘텐츠
    &__content {
      &__info {
        &__tab-btn {
          .tab-btn {
            padding: 8px 9px 9px;
            margin: 0 12px 0 0;
            &:hover { opacity: 1; }
          }
        }
        &__tab-content {
          min-height: 0;
          &#TasteTabImg { padding: 16px 0 0; }
          .content-group {
            &.half { width: 100%; }
            .title {
              max-width: 88px;
              .font-body2;
            }
            .content {
              max-width: -webkit-calc(~"100% - 88px");
              max-width: -moz-calc(~"100% - 88px");
              max-width: calc(~"100% - 88px");
              padding-right: 0;
              margin: 0 0 0 88px;
              .font-body2;
            }
            .line {
              max-width: -webkit-calc(~"100% - 88px");
              max-width: -moz-calc(~"100% - 88px");
              max-width: calc(~"100% - 88px");
              margin: 16px 0 16px 88px;
            }
            .taste-map { max-width: 100%; margin: 16px 0 0; }
          }
          .story {
            .img {
              .img-text { .font-body2; }
            }
          }
          #reply-box {
            .dq-reply-list { width: 100%; }
          }
        }
      }
    }
    // taste 디테일 콘텐츠 더 보기
    &__more {
      padding: 8px 16px 24px;
      .clearAfter;
      &__title{
        width: 100%;
        margin: 8px 0 0;
        word-break: keep-all;
        white-space: inherit;
        .font-h6;
      }
      &__more-link{ display: none; }
      &__more-link--m{
        display: block;
        padding: 4px 48px 4px 32px;
        margin: 0;
        color: @color-white;
        border-radius: 100px;
        background: @color-gre-dq1;
        .box-shadow--normal;
        &:after{
          top: 7px;
          right: 24px;
          background-image: @ico_right_double_bracket_w;
        }
        &:hover,
        &:focus {
          color: @color-white;
          opacity: 0.8;
          &:after { background-image: @ico_right_double_bracket_w; }
        }
      }
      &__card { margin: 16px 0 0; }
    }
  }
}
// TASTE 디테일 고정 신청하기 버튼
.re-dq-taste-fix {
  opacity: 0;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  padding: 8px 0;
  background: linear-gradient( 0deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  pointer-events: none;
  .transition_03s;
  -webkit-transform: scaleY(0) translateY(100%);
  -moz-transform: scaleY(0) translateY(100%);
  -ms-transform: scaleY(0) translateY(100%);
  -o-transform: scaleY(0) translateY(100%);
  transform: scaleY(0) translateY(100%);
  transform-origin: bottom;
  &-wrap {
    position: relative;
    bottom: 0;
    bottom: -webkit-calc(~"constant(safe-area-inset-bottom)"); //ios 노치 대음
    bottom: -moz-calc(~"constant(safe-area-inset-bottom)");
    bottom: calc(~"constant(safe-area-inset-bottom)");
    bottom: -webkit-calc(~"env(safe-area-inset-bottom)");
    bottom: -moz-calc(~"env(safe-area-inset-bottom)");
    bottom: calc(~"env(safe-area-inset-bottom)");
    max-width: 448px;
    width: 100%;
    margin: 0 auto 32px;
    text-shadow: 4px 4px 6px rgba(0,0,0,0.1);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    .transition_03s;
    .applied {
      width: inherit;
      height: inherit;
      padding: 8px 0 7px;
      border-radius: 16px;
      background: @color-gre-blue;
      .box-shadow--normal;
      .title,.sub-title { cursor: default }
      .title { color: @color-white; .font-h6; }
      .sub-title { color: @color-white; .font-subtitle2; }
    }
    .not-apply {
      width: inherit;
      height: inherit;
      padding: 16px 0;
      border-radius: 16px;
      background: @color-gre-black1;
      color: @color-white;
      .box-shadow--normal;
      h5 { cursor: default; .font-h6; }
    }
    .apply {
      display: block;
      position: relative;
      width: inherit;
      height: inherit;
      padding: 16px 0;
      border: none;
      border-radius: 16px;
      background: @color-gre-dq1;
      color: @color-white;
      text-decoration: none;
      outline: none;
      will-change: transform, opacity;
      .transition_03s;
      > span { .font-h6; }
      .box-shadow--normal;
      &:hover {
        background: @color-gre-yello;
        .queens {
          &:after{
            -webkit-transform: translate(0,-25%);
            -moz-transform: translate(0,-25%);
            -ms-transform: translate(0,-25%);
            -o-transform: translate(0,-25%);
            transform: translate(0,-25%);
          }
        }
      }
      .queens {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
        pointer-events: none;
        &:after {
          display: block;
          width: 96px;
          height: 96px;
          margin: 0 0 0 24px;
          background: @img_dq_queen center ~"/" contain no-repeat;
          .transition_03s;
          -webkit-transform: translate(0,100%);
          -moz-transform: translate(0,100%);
          -ms-transform: translate(0,100%);
          -o-transform: translate(0,100%);
          transform: translate(0,100%);
          content: '';
        }
      }
    }
  }
  &.fixed {
    opacity: 1;
    -webkit-transform: scaleY(1) translateY(0);
    -moz-transform: scaleY(1) translateY(0);
    -ms-transform: scaleY(1) translateY(0);
    -o-transform: scaleY(1) translateY(0);
    transform: scaleY(1) translateY(0);
    pointer-events: auto;
  }
  // 모바일 영역
  @media screen and (max-width: 767px) {
    //background: @color-white;
    background: linear-gradient( 0deg, rgba(255,255,255,1), rgba(255,255,255,0));
    padding: 8px;
    opacity: 1;
    -webkit-transform: scaleY(1) translateY(0);
    -moz-transform: scaleY(1) translateY(0);
    -ms-transform: scaleY(1) translateY(0);
    -o-transform: scaleY(1) translateY(0);
    transform: scaleY(1) translateY(0);
    &-wrap {
      margin: 0 auto 8px;
      .applied {
        padding: 6px 0;
        border-radius: 8px;
        .title { .font-button; }
        .sub-title { .font-caption; }
        .box-shadow--light;
        box-shadow: none;
      }
      .not-apply {
        padding: 14px 0;
        .box-shadow--light;
        h5 {
          border-radius: 8px;
          .font-button;
        }
      }
      .apply {
        padding: 12px 0;
        border-radius: 8px;
        pointer-events: auto;
        .box-shadow--light;
        > span { .font-button; }
        .queens {
          &:after { .transition_none; }
        }
      }
    }
    &.m-hide {
      pointer-events: none;
      background: none;
      .re-dq-taste-fix-wrap {
        margin: 0 auto;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
      }
    }
  }
}





//    14. 맛집랭킹 페이지
// --------------------------------
.dq-restaurant{
  &-header{ // 맛집랭킹 헤더
    position: relative;
    z-index: 2;
    max-width: 100%;
    width: 100%;
    height: 0;
    padding-bottom: 12%;
    overflow: hidden;
    &-bg{ // 맛집랭킹 헤더 - 배경
      .absolute-zero;
      will-change: transform;
      background: @img_res_bg_0 center~"/"cover no-repeat;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
    }
    &-search{ // 맛집랭킹 헤더 - 검색
      position: absolute;
      height: 100%;
      left: 0;
      right: 0;
      will-change: transform;
      > form{ // 맛집랭킹 헤더 - 맛집 검색 폼
        position: relative;
        top: 50%;
        max-width: 440px;
        width: 100%;
        margin: 0 auto;
        border: 4px @color-white solid;
        border-right-width: 8px;
        border-left-width: 8px;
        border-radius: 100px;
        background-color: @color-white;
        .clearAfter;
        .transformY_Minus50;
        -webkit-box-shadow: 8px 8px 16px rgba(51,51,51,.3), -4px -4px 16px rgba(255,255,255,.4);
        -moz-box-shadow: 8px 8px 16px rgba(51,51,51,.3), -4px -4px 16px rgba(255,255,255,.4);
        -o-box-shadow: 8px 8px 16px rgba(51,51,51,.3), -4px -4px 16px rgba(255,255,255,.4);
        box-shadow: 8px 8px 16px rgba(51,51,51,.3), -4px -4px 16px rgba(255,255,255,.4);
        &:before{
          display: none;
          position: absolute;
          right: 0;
          bottom: -24px;
          left: 0;
          width: 0;
          margin: 0 auto;
          border-top: 24px @color-white solid;
          border-left: 16px transparent solid;
          border-right: 16px transparent solid;
          content: '';
        }
        > input{
          float: left;
          position: relative;
          width: -webkit-calc(~"100% - 48px");
          width: -moz-calc(~"100% - 48px");
          width: calc(~"100% - 48px");
          height: 48px;
          padding: 8px 24px;
          margin: 0 auto;
          border: none;
          border-radius: 100px 0 0 100px;
          .font-h6;
          line-height: 56px;
          outline: 0;
        }
        > button{
          float: right;
          width: 48px;
          height: 48px;
          border: none;
          border-left: 1px @color-dq1 solid;
          border-radius: 0 100px 100px 0;
          background: @ico_search_b center~"/"contain no-repeat @color-white;
          outline: none;
        }
      }
    }
  }
  &-title{ // 타이틀 영역
    margin-top: 96px;
    h1{
      display: inline-block;
      position: relative;
      will-change: transform;
      span{
        display: block;
        position: absolute;
        top: -32px;
        left: -56px;
        z-index: -1;
        width: 48px;
        height: 48px;
        border-radius: 100px;
        background: @ico_taste_title_w center~"/"75% no-repeat @color-dq1;
        color: @color-white;
        will-change: transform;
        content: '';
      }
      &:after{
        position: absolute;
        top: 4px;
        left: -22px;
        width: 0;
        height: 0;
        border-top: 16px @color-dq1 solid;
        border-right: 8px transparent solid;
        border-left: 8px transparent solid;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        content: '';
      }
    }
    h3{ color: @color-black6; will-change: transform; }
  }
  &-area,
  &-theme,
  &-store{ // 지역별 맛집
    clear: both;
    .dq-grid{
      > h3{
        display: inline-block;
        float: left;
        margin-left: 32px;
        color: @color-black3;
        background: @color-white;
        text-align: left;
      }
      .item{
        width: 16.6%;
        @media screen and (max-width: 1440px){
          width: 33.3%;
        }
        a{
          height: 0;
          .box-shadow--normal;
          &:after{
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 100%;
            background: @px_dot rgba(24, 24, 24, 0.2) center ~"/" 3px;
            content: '';
          }
          > div{ .absolute-zero; }
        }
        h4{ text-align: left; }
        &.more-area{
          width: 100%;
          padding: 0 24px;
          text-align: right;
          button{
            width: 180px;
            outline: none;
            .box-shadow--normal;
            &:hover,
            &:focus{
              -webkit-box-shadow: -4px -4px 16px rgba(51,51,51,0.3), 4px 4px 16px rgba(51,51,51,0.1);
              -moz-box-shadow: -4px -4px 16px rgba(51,51,51,0.3), 4px 4px 16px rgba(51,51,51,0.1);
              -o-box-shadow: -4px -4px 16px rgba(51,51,51,0.3), 4px 4px 16px rgba(51,51,51,0.1);
              box-shadow: -4px -4px 16px rgba(51,51,51,0.3), 4px 4px 16px rgba(51,51,51,0.1);
            }
          }
        }
      }
      .restaurant-grid-area{ clear: both; }
    }
  }
  &-theme{ // 테마별 맛집
    .dq-grid{
      > h3{
        display: inline-block;
        float: left;
        margin-left: 32px;
        color: @color-black3;
        background: @color-white;
        text-align: left;
      }
      .item{
        width: -webkit-calc(~"50% - 1px");
        width: -moz-calc(~"50% - 1px");
        width: calc(~"50% - 1px");
        a{
          height: 0;
          padding-bottom: 28.14%;
          .box-shadow--normal;
          &:after{
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 100%;
            background: @px_dot rgba(24, 24, 24, 0.2) center ~"/" 3px;
            content: '';
          }
          > div{ .absolute-zero; }
          > h3{
            position: absolute;
            top: 50%;
            right: 0;
            left: 0;
            z-index: 1;
            margin: 0 auto;
            color: @color-white;
            letter-spacing: 0.667rem;
            text-shadow: 8px 8px 16px rgba(0, 0, 0, 1);
            .transformY_Minus50;
          }
        }
      }
    }
    .restaurant-grid-theme{ clear: both; }
  }
  &-store{ // 스토어별 맛집
    .dq-grid{
      > h3{}
      .item{
        width: 16.6%;
        a{
          .box-shadow--normal;
          &:after{
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 100%;
            background: @px_dot rgba(24, 24, 24, 0.2) center ~"/" 3px;
            content: '';
          }
        }
        &:nth-of-type(n+7){ display: none; }
      }
      .restaurant-grid-store{ clear: both; }
    }
  }
}


//    ??. 맛집랭킹 리스트 영역
// --------------------------------
// 맛집랭킹 리스트 영역 - 상단 태그
.dq-area-tag{
  position: relative;
  max-width: 767px;
  width: 100%;
  padding: 0 32px;
  margin: 0 auto;
  &__hashtag{
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    padding: 32px 8px;
    font-size: 0;
    text-align: left;
    a{
      display: inline-block;
      padding: 7px 12px 7px;
      margin: 4px;
      border-radius: 100px;
      background: @color-gre-black1;
      color: @color-white;
      .font-caption;
      text-align: left;
      text-decoration: none;
      .box-shadow--normal;
      .transition_03s;
      will-change: transform, opacity;
      &:hover,
      &:focus{
        background: @color-gre-dq1;
        .transform_hover;
      }
    }
    &--active{ overflow: visible; white-space: normal; }
  }
  &__moretag{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0;
    width: 48px;
    height: 108px;
    padding: 0 16px;
    border: none;
    background: @ico_right_bracket_b center ~"/" contain no-repeat @color-gray1;
    outline: none;
    &:after{
      display: block;
      position: absolute;
      top: 0;
      right: 48px;
      width: 104px;
      height: inherit;
      background: linear-gradient(to right, rgba(255,255,255,0), @color-gray1);
      content: '';
    }
  }
  // 모바일 영역
  @media screen and (max-width: 767px){
    // .dq-area-tag {
    padding: 0 16px;
    background-color: @color-white;
    &__hashtag{ padding: 16px 0; }
    &__moretag{
      right: 16px;
      height: 76px;
      background-color: @color-white;
      &:after{
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255,255,255,1));
      }
    }
  }
}
// 맛집랭킹 리스트 영역 - 상단 타이틀
.dq-area-title{
  position: relative;
  max-width: 1440px;
  width: 100%;
  padding: 16px 0 32px;
  margin: 0 auto;
  text-align: left;
  &__title{
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 16px 32px;
    background: @color-gray1;
    font-family: "Iropke Batang", serif;
    .font-h4;
  }
  &__line{
    display: block;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    z-index: -1;
    margin: 0 16px 0 auto;
    width: -webkit-calc(~"100% - 80px");
    width: -moz-calc(~"100% - 80px");
    width: calc(~"100% - 80px");
    height: 1px;
    padding: 0 40px;
    background: @color-black3;
    content: '';
  }
  &__subtitle{
    padding: 0 36px;
    .font-subtitle1;
    > strong{ color: @color-dq5; }
  }
  // 태블릿 영역
  @media screen and (max-width: 1199px){
    // .dq-area-title {
    padding: 0 0 32px;
    &__title{ padding: 16px 32px; }
    &__line{ top: 46px}
    &__subtitle{ padding: 0 32px}
  }
  // 모바일 영역
  @media screen and (max-width: 767px){
    // .dq-area-title {
    background-color: @color-white;
    &__title{ background-color: @color-white; padding: 16px; }
    &__subtitle{ padding: 0 20px; }
  }
}
// 맛집랭킹 리스트 영역 - 카드 영역
.dq-area-card {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  .clearAfter;
  a {
    display: block;
    float: left;
    width: -webkit-calc(~"50% - 32px");
    width: -moz-calc(~"50% - 32px");
    width: calc(~"50% - 32px");
    padding: 16px;
    margin: 16px;
    border-radius: 16px;
    background-color: @color-white;
    color: @color-black3;
    text-align: left;
    .clearAfter;
    .transition_03s;
    .box-shadow--light;
    &:hover,
    &:focus {
      opacity: 0.8;
      -webkit-transform: scale(1.025);
      -moz-transform: scale(1.025);
      -ms-transform: scale(1.025);
      -o-transform: scale(1.025);
      transform: scale(1.025);
    }
  }
  &__img {
    float: left;
    overflow: hidden;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    .box-shadow--normal;
    > div {
      width: 100%;
      height: 100%;
      background: @img_dq_no_image center ~"/" cover no-repeat;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        color: @color-black3;
      }
    }
  }
  &__text {
    float: left;
    width: -webkit-calc(~"100% - 120px");
    width: -moz-calc(~"100% - 120px");
    width: calc(~"100% - 120px");
    padding: 0 32px;
    &__title {
      max-width: 80%;
      float: left;
      margin: 0 0 4px;
      .font-h6;
      .ellipsis;
    }
    &__ranking { float: right; .font-h6; }
    &__area {
      clear: both;
      margin: 0 0 4px;
      .font-subtitle1;
      .ellipsis;
    }
    &__script {
      margin: 0 0 8px;
      color: @color-black9;
      .font-subtitle1;
      .ellipsis;
    }
    &__hashtag {
      position: relative;
      color: @color-dq5;
      .font-subtitle1;
      .ellipsis;
    }
  }
  &__more {
    max-width: 320px;
    width: 100%;
    padding: 8px 16px 7px;
    margin: 32px 30%;
    border: none;
    border-radius: 100px;
    background: @color-gre-dq1;
    color: @color-white;
    .font-button;
    outline: none;
    .transition_03s;
    .box-shadow--normal;
    &:hover,
    &:focus {
      opacity: 0.8;
      -webkit-transform: scale(1.025);
      -moz-transform: scale(1.025);
      -ms-transform: scale(1.025);
      -o-transform: scale(1.025);
      transform: scale(1.025);
    }
    .ani-rotate-0 {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    .ani-rotate-360 {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    .loading {
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto;
      border: 2px solid @color-white;
      border-left-color: transparent;
      border-radius: 100px;
      -webkit-animation: dq-shining linear 3s infinite;
      animation: ani-rotate linear 3s infinite;
    }
    @keyframes ani-rotate {
      0% { .ani-rotate-0; }
      100% { .ani-rotate-360; }
    }
    @-webkit-keyframes ani-rotate {
      0% { .ani-rotate-0; }
      100% { .ani-rotate-360; }
    }
  }
  // 태블릿 영역
  @media screen and (max-width: 1199px) {
    // .dq-area-card {
    a {
      width: -webkit-calc(~"100% - 32px");
      width: -moz-calc(~"100% - 32px");
      width: calc(~"100% - 32px");
      margin: 0 16px 32px;
    }
    &__more { padding: 14px 16px 13px; margin: 32px 0; }
  }
  // 모바일 영역
  @media screen and (max-width: 767px) {
    // .dq-area-card {
    a {
      width: 100%;
      padding: 16px 0;
      margin: 0 0 8px;
      border-radius: 0;
      border: none;
    }
    &__img {
      width: 116px;
      height: 116px;
      border-radius: 0 100px 100px 0;
      .box-shadow--light;
    }
    &__text {
      width: -webkit-calc(~"100% - 116px");
      width: -moz-calc(~"100% - 116px");
      width: calc(~"100% - 116px");
      padding: 0 16px 0 24px;
      &__script{ .font-subtitle2; .ellipsis; }
    }
    &__more {
      width: -webkit-calc(~"100% - 32px");
      width: -moz-calc(~"100% - 32px");
      width: calc(~"100% - 32px");
      padding: 8px 16px 7px;
    }
  }
}
// --------------------------------




//    ??. 맛집랭킹 스토어 영역
// --------------------------------
// 맛집랭킹 스토어 헤더
.dq-store-header{
  position: relative;
  font-size: 0;
  &:after{
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, rgba(51,51,51,0.4), rgba(51,51,51,0));
    content: '';
  }
  &__img{
    display: inline-block;
    position: relative;
    width: 25%;
    height: 420px;
    > div{
      .absolute-zero;
      overflow: hidden;
      background: @img_dq_no_image center ~"/" cover no-repeat;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  &__map{
    display: inline-block;
    position: relative;
    width: 25%;
    height: 420px;
    &--count{ width: 100%; }
    > div{ width: 100%; height: inherit; }
  }
  // 노트북 데스크탑 영역
  @media screen and (max-width: 1920px){
    // .dq-store-header {
    &__img{
      width: 33.33%;
      &:nth-of-type(3){ display: none }
    }
    &__map{ width: 33.33%; }
  }
  // 태블릿 영역
  @media screen and (max-width: 1199px){
    // .dq-store-header {
    &__img{
      width: 50%;
      height: 320px;
      &:nth-of-type(n+2){ display: none; }
    }
    &__map{ width: 50%; height: 320px; }
  }
  // 모바일 영역
  @media screen and (max-width: 767px){
    // .dq-store-header {
    &__img{ display: none; }
    &__map{ width: 100%; }
  }
}
// 맛집랭킹 스토어 콘텐츠
.dq-store-content{
  padding: 0 16px;
  &__title{
    position: relative;
    max-width: 1200px;
    width: 100%;
    background: @color-white;
    z-index: 100;
    padding: 16px 32px 32px;
    margin: -40px auto 0;
    text-align: left;
    border-radius: 16px;
    .box-shadow--light;
    &__name{
      max-width: -webkit-calc(~"100% - 320px");
      max-width: -moz-calc(~"100% - 320px");
      max-width: calc(~"100% - 320px");
      width: 100%;
      font-family: "Iropke Batang", serif;
      .font-h4;
      .ellipsis;
    }
    &__subtitle{
      margin: 8px 0;
      .font-subtitle1;
      > .null{
        display: block;
        width: 32px;
        height: 1px;
        margin: 31px 0 0 8px;
        background-color: @color-black3;
      }
    }
    &__more-img{
      position: absolute;
      top: 16px;
      right: 96px;
      width: auto;
      padding: 13px 32px 14px 72px;
      border-radius: 100px;
      background: @color-gre-dq1;
      color: @color-white;
      .box-shadow--normal;
      .transition_03s;
      &:hover,
      &:focus {
        color: @color-white;
        opacity: 0.8;
        text-decoration: none;
        -webkit-transform: translateY(-2px);
        -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
      }
      &:before{
        position: absolute;
        top: 0;
        left: 32px;
        width: 40px;
        height: 40px;
        margin: 4px 0;
        background: @ico_img_w center ~"/" contain no-repeat;
        content: '';
      }
      h5{ .font-button; }
    }
    &__share{
      line-height: 0;
      font-size: 0;
      position: absolute;
      top: 16px;
      right: 32px;
      width: 48px;
      height: 48px;
      margin: 0;
      border: none;
      border-radius: 100px;
      background: @ico_share_w center ~"/" contain no-repeat @color-dq2;
      .box-shadow--normal;
      outline: none;
      .transition_03s;
      &:hover,
      &:focus {
        opacity: 0.8;
        text-decoration: none;
        -webkit-transform: translateY(-2px);
        -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
      }
    }
  }
  &__slick-img{ display: none !important; }
  &__article{
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: auto;
    padding: 16px 32px 32px;
    margin: 32px auto 0;
    border-radius: 16px;
    background: @color-white;
    text-align: left;
    .box-shadow--light;
    .clearAfter;
    &__address,
    &__number{
      position: relative;
      padding: 8px 0;
      font-size: 0;
      .ico{
        display: inline-block;
        width: 36px;
        height: 36px;
        margin: 0 8px 0 0;
        vertical-align: middle;
      }
      > h5{
        display: inline-block;
        max-width: -webkit-calc(~"100% - 56px");
        max-width: -moz-calc(~"100% - 56px");
        max-width: calc(~"100% - 56px");
        width: 100%;
        padding: 6px 0 0;
        .font-subtitle1;
        word-break: keep-all;
        vertical-align: top;
      }
    }
    &__address{
      .ico{ background: @ico_map_b center ~"/" contain no-repeat; }
    }
    &__number{
      .ico{ background: @ico_call_b center ~"/" contain no-repeat; }
    }
    &__hashtag{
      display: inline-block;
      padding: 7px 12px 7px;
      margin: 16px 16px 16px 0;
      color: @color-white;
      border: none;
      border-radius: 100px;
      background: @color-gre-black1;
      will-change: transform, opacity, background;
      .font-caption;
      .transition_03s;
      .box-shadow--normal;
      &--null{ height: 0; }
      &:hover,
      &:focus{
        background: @color-gre-dq1;
        color: @color-white;
        text-decoration: none;
        .transform_hover;
      }
    }
    // 스토어 댓글 영역 시작
    &__comment{
      padding: 32px 0;
      margin: 32px 0;
      border-top: 1px solid @color-gray2;
      &__empty{
        text-align: center;
        font-size: 0;
        margin: 56px 0;
        .ico{
          display: inline-block;
          width: 48px;
          height: 48px;
          background: @ico_notice center ~"/" contain no-repeat;
        }
        h4{
          margin: 4px 0;
          .font-h5;
          .font-iropke;
        }
      }
      &__title{
        margin: 0 0 24px;
        .ico{
          display: inline-block;
          width: 36px;
          height: 36px;
          margin: 0 8px 0 0;
          background: @ico_comment_o_b center ~"/" contain no-repeat;
          vertical-align: middle;
        }
        > h5{
          display: inline-block;
          .font-subtitle1;
          vertical-align: middle;
        }
      }

      &__list{ //이하 공통영역 .dq-reply-list
        padding: 16px 0;
        border-radius: 4px;
        background-color: @color-gray1;
      }
      &__more{
        display: block;
        min-width: 64px;
        width: -webkit-calc(~"100% / 4");
        width: -moz-calc(~"100% / 4");
        width: calc(~"100% / 4");
        padding: 7px 16px 8px;
        margin: 32px 0 48px 48px;
        border: none;
        border-radius: 100px;
        background: @color-gre-black1;
        .box-shadow--normal;
        .transition_03s;
        outline: none;
        color: @color-white;
        .font-button;
        &:hover,
        &:focus { .transform_hover; }
      }
      &__form{
        .clearAfter;
        clear: both;
        padding: 32px 0 0;
        border-top: 1px solid @color-gray2;
      }
    }
  }
  // 태블릿 영역
  @media screen and (max-width: 1199px){
    // .dq-store-content {
    &__title{
      &__name{ max-width: 100%; }
    }
    &__article{
      &__address,
      &__number{ padding: 0 0 8px; }
      &__comment{
        padding: 24px 0;
        margin: 24px 0 0;
        &__list{ padding: 8px 0; }
        &__more{ margin: 24px 0 32px 48px; }
        &__form{ padding: 24px 0 0; }
      }
    }
  }
  // 모바일 영역
  @media screen and (max-width: 767px){
    // .dq-store-content {
    padding: 0 16px;
    &__title{
      padding: 16px 16px 24px;
      margin: -24px auto 24px;
      .box-shadow--normal;
      &__name{
        max-width: -webkit-calc(~"100% - 56px");
        max-width: -moz-calc(~"100% - 56px");
        max-width: calc(~"100% - 56px");
        margin: 0 0 4px;
        .font-h5;
      }
      &__subtitle{
        margin: 8px 0 0;
        color: @color-black6;
        .font-subtitle2;
      }
      &__more-img{ display: none; }
      &__share{
        right: 16px;
        width: 40px;
        height: 40px;
        background-size: 80%;
      }
    }
    &__slick-img{
      display: block !important;
      position: relative;
      margin: 0 -8px 24px;
      > .slick-list{ overflow: visible; }
      .item{
        padding: 0 8px;
        outline: none;
        .img-wrap,
        .img-more{
          display: block;
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 66.67%;
          outline: none;
          > .object-fit-cover{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            border-radius: 16px;
            .box-shadow--normal;
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
        .img-more{
          border-radius: 16px;
          background: @color-gre-dq1;
          span{
            position: absolute;
            top: -webkit-calc(~"50% - 12px");
            top: -moz-calc(~"50% - 12px");
            top: calc(~"50% - 12px");
            right: 0;
            left: 0;
            margin: 0 auto;
            color: @color-white;
            .font-button;
          }
        }
      }
    }
    &__article{
      padding: 16px 16px 24px;
      margin: 0 auto 24px;
      .box-shadow--normal;
      &__address,
      &__number{
        .ico{ margin: 0 4px 0 0; }
        .font-subtitle2;
      }
      &__comment{
        padding: 24px 0 0;
        &__title{
          margin: 0 0 16px;
          .ico{ margin: 0 4px 0 0; }
        }
        &__more{ width: 100%; margin: 24px 0 32px; }
        &__form{ padding: 32px 0 0; }
      }
    }
  }
}
.dq-store-more{
  display: inline-block;
  width: 100%;
  padding: 0 16px;
  &__taste,
  &__restaurant{
    position: relative;
    z-index: 100;
    max-width: 1200px;
    width: 100%;
    padding: 8px 32px 24px;
    border-radius: 16px;
    background: @color-white;
    margin: 32px auto 0;
    font-size: 0;
    text-align: left;
    .box-shadow--light;
    &__title{
      display: inline-block;
      width: 50%;
      margin: 12px 0 0;
      font-family: "Iropke Batang", serif;
      .font-h5;
      .ellipsis;
    }
    &__more-link,
    &__more-link--m{
      position: relative;
      float: right;
      padding: 6px 32px 6px 16px;
      margin-top: 12px;
      color: @color-black3;
      text-decoration: none;
      .font-subtitle1;
      .transition_03s;
      &:after{
        display: block;
        position: absolute;
        top: 7px;
        right: 8px;
        width: 24px;
        height: 24px;
        background: @ico_right_double_bracket_b center ~"/" contain no-repeat;
        .transition_03s;
        content: '';
      }
      &:hover,
      &:focus {
        color: @color-dq1;
        text-decoration: none;
        -webkit-transform: translateY(-4px);
        -moz-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
        -o-transform: translateY(-4px);
        transform: translateY(-4px);
        &:after{ background-image: @ico_right_double_bracket; }
      }
    }
    &__more-link--m{ display: none; }
    &__card{ margin: 24px -16px 8px; }
  }
  // 태블릿 영역
  @media screen and (max-width: 1199px) {
    // .dq-store-more {
    &__taste,
    &__restaurant{
      &__card{ margin: 24px -16px 8px; }
    }
  }
  // 모바일 영역
  @media screen and (max-width: 767px) {
    // .dq-store-more {
    padding: 0 16px;
    margin: 40px auto;
    &__taste,
    &__restaurant{
      padding: 8px 16px 24px;
      .clearAfter;
      &__title{
        width: 100%;
        margin: 8px 0 0;
        word-break: keep-all;
        white-space: inherit;
        .font-h6;
      }
      &__more-link{ display: none; }
      &__more-link--m{
        display: block;
        padding: 4px 48px 4px 32px;
        margin: 0;
        color: @color-white;
        border-radius: 100px;
        background: @color-gre-dq1;
        .box-shadow--normal;
        &:after{
          top: 7px;
          right: 24px;
          background-image: @ico_right_double_bracket_w;
        }
        &:hover,
        &:focus {
          color: @color-white;
          opacity: 0.8;
          &:after { background-image: @ico_right_double_bracket_w; }
        }
      }
      &__card { margin: 16px 0 0; }
    }
  }
}
.dq-store-adcode,
.dq-taste-adcode{
  position: relative;
  max-width: 1200px;
  width: -webkit-calc(~"100% - 32px");
  width: -moz-calc(~"100% - 32px");
  width: calc(~"100% - 32px");
  background: @color-white;
  z-index: 100;
  padding: 40px 32px;
  margin: 80px auto;
  font-size: 0;
  text-align: left;
  border-radius: 16px;
  .box-shadow--light;
  .dq_ads{
    max-width: 1136px;
    width: 100% !important;
    margin: 0 auto;
    ins{ width: 100%; }
  }
  // 모바일 영역
  @media screen and (max-width: 767px) {
    // .dq-store-adcode {
    width: 100%;
    padding: 32px 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.dq-taste-adcode { max-width: 1408px; width: 100%; }
// --------------------------------



//    ??. 맛집랭킹 사진모음 페이지 영역
// --------------------------------
.dq-store-picture {
  position: relative;
  max-width: 1440px;
  padding: 56px 16px 80px;
  margin: 0 auto;
  font-size: 0;
  text-align: left;
  .clearAfter;
  // 노트북 데스크탑 영역 (portrait)
  @media screen and (max-width: 1440px) { padding: 40px 32px; }
  // 모바일 영역
  @media screen and (max-width: 767px) { padding: 32px 16px; }
  &__header {
    display: inline-block;
    position: absolute;
    z-index: 1;
    max-width: 688px;
    width: -webkit-calc(~"50% - 32px");
    width: -moz-calc(~"50% - 32px");
    width: calc(~"50% - 32px");
    padding: 32px 32px 40px;
    margin: 16px 0 0;
    border-radius: 16px;
    background-color: @color-white;
    .box-shadow--normal;
    &__return-store {
      display: inline-block;
      position: absolute;
      top: -18px;
      left: 36px;
      z-index: 2;
      padding: 7px 32px 8px;
      border-radius: 100px;
      background: @color-gre-dq1;
      .font-button;
      color: @color-white;
      text-decoration: none;
      .transition_03s;
      .box-shadow--normal;
      &:hover,
      &:focus {
        color: @color-white;
        text-decoration: none;
        .transform_hover;
      }
    }
    &__title {
      position: relative;
      background-color: inherit;
      &__name {
        display: inline-block;
        position: relative;
        z-index: 1;
        padding-right: 32px;
        background-color: inherit;
        line-height: 44px;
        font-family: "Iropke Batang", serif;
        .font-h4;
      }
      &__number {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        padding: 8px 0 8px 32px;
        background-color: inherit;
        text-align: right;
        .font-h5;
        > span { color: @color-dq1; }
      }
      &__tag{
        margin: 8px 0 0;
        color: @color-black6;
        .font-subtitle1;
      }
      &:after{
        position: absolute;
        display: block;
        top: 26px;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        background-color: @color-black3;
        content: '';
      }
    }
    &__address {
      position: relative;
      margin: 24px 0 0;
      &__ico {
        display: inline-block;
        width: 36px;
        height: 36px;
        background: @ico_map_b center ~"/" contain no-repeat;
        vertical-align: top;
      }
      &__text {
        display: inline-block;
        width: -webkit-calc(~"100% - 222px");
        width: -moz-calc(~"100% - 222px");
        width: calc(~"100% - 222px");
        padding: 5px 0 7px;
        color: @color-black6;
      }
      &__map {
        position: absolute;
        top: 2px;
        right: 0;
        padding: 5px 32px 6px;
        border-radius: 100px;
        background: @color-gre-black1;
        color: @color-white;
        .font-button;
        .box-shadow--normal;
        .transition_03s;
        &:hover,
        &:focus {
          color: @color-white;
          text-decoration: none;
          .transform_hover;
        }
      }
    }
    // 노트북 데스크탑 영역 (portrait)
    @media screen and (max-width: 1440px) {
      position: relative;
      max-width: 100%;
      width: 100%;
      margin-bottom: 16px;
      &__address {
        &__ico { margin: 0 0 0 -8px; }
        &__text {
          width: -webkit-calc(~"100% - 28px");
          width: -moz-calc(~"100% - 28px");
          width: calc(~"100% - 28px");
        }
      }
    }
    // 모바일 영역
    @media screen and (max-width: 767px) {
      padding: 32px 16px 24px;
      margin: 0 0 16px;
      &__return-store{ left: 16px; }
      &__title {
        &__name { padding-right: 16px; .font-h5; }
        &__number { padding: 8px 0 8px 16px; .font-h6; }
        &__tag { margin: 0; }
      }
      &__address {
        margin: 8px 0 0;
        .clearAfter;
        &__ico {
          position: relative;
          width: 32px;
          height: 32px;
        }
        &__text {
          padding: 4px 0;
          width: -webkit-calc(~"100% - 24px");
          width: -moz-calc(~"100% - 24px");
          width: calc(~"100% - 24px");
        }
        &__map{
          position: relative;
          float: right;
          margin-top: 12px;
        }
      }
    }
  }
  &__content {
    margin: 0 -16px;
    .clearAfter;
    &__img{
      position: relative;
      display: inline-block;
      width: 100%;
      float: left;
      .item {
        position: absolute;
        display: inline-block;
        max-width: 16.6%;
        width: 100%;
        padding: 16px;
        will-change: transform;
        cursor: pointer;
        &:first-of-type { margin-left: 49.9%; }
        .img-wrap {
          padding-bottom: 100%;
          .object-fit-cover{
            overflow: hidden;
            border-radius: 16px;
            background: @img_dq_no_image center ~"/" cover no-repeat;
            animation: StorePicFadeIn ease-in-out 1s;
            .absolute-zero;
            .transition_03s;
            .box-shadow--normal;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              .transition_03s;
            }
          }
        }
        @-webkit-keyframes StorePicFadeIn{
          0%{
            opacity: 0;
            -webkit-transform: translateY(10%);
            -moz-transform: translateY(10%);
            -ms-transform: translateY(10%);
            -o-transform: translateY(10%);
            transform: translateY(10%);
          }
          100%{
            opacity: 1;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0);
          }
        }
        @keyframes StorePicFadeIn{
          0%{
            opacity: 0;
            -webkit-transform: translateY(10%);
            -moz-transform: translateY(10%);
            -ms-transform: translateY(10%);
            -o-transform: translateY(10%);
            transform: translateY(10%);
          }
          100%{
            opacity: 1;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0);
          }
        }
        &:hover,
        &:focus{
          .img-wrap{
            .object-fit-cover{
              opacity: 0.8;
              -webkit-transform: scale(1.025);
              -moz-transform: scale(1.025);
              -ms-transform: scale(1.025);
              -o-transform: scale(1.025);
              transform: scale(1.025);
            }
          }
        }
        // 임시용
        @media screen and (max-width: 767px) { max-width: 100%; }
      }
    }
    // 노트북 데스크탑 영역
    @media screen and (max-width: 1440px) {
      &__img{
        left: 0.1%;
        .item {
          display: inline-block;
          max-width: 19.9%;
          &:first-of-type { margin-left: auto; }
        }
      }
    }
    // 태블릿 영역
    @media screen and (max-width: 1199px) {
      &__img{ .item{ max-width: 24.9%; } }
    }
    // 모바일 영역
    @media screen and (max-width: 767px) {
      &__img{ .item { max-width: 33.2%; } }
    }
    // 모바일 영역 (portrait)
    @media screen and (max-width: 620px) {
      &__img{ .item { max-width: 49.9%; } }
    }
  }
  &__more{
    margin: 32px 0;
    button{
      display: block;
      max-width: 320px;
      width: 100%;
      padding: 8px 16px 7px;
      margin: 0 auto;
      border: none;
      border-radius: 100px;
      color: @color-white;
      font-size: @font-button;
      outline: none;
      background: @color-gre-dq1;
      .transition_03s;
      .box-shadow--normal;
      &:hover,
      &:focus{ .transform_hover; }
    }
  }
}
.dq-store-picture-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  &.on { display: block; }
  &__item {
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    z-index: 1;
    overflow: auto;
    max-width: 991px;
    width: 100%;
    max-height: 80vh;
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
    background: @img_dq_no_image center ~"/" cover no-repeat;
    animation: StorePicModalfadeIn ease-in-out .6s;
    .transformY_Minus50;
    .box-shadow--normal;
    &.active { display: block; }
    h5 {
      position: absolute;
      top: 24px;
      left: 24px;
      padding: 0 8px;
      border-radius: 8px;
      background-color: rgba(51,51,51,0.3);
      color: @color-white;
      font-size: @font-size-3;
      font-family: "Iropke Batang", serif;
      text-shadow: 4px 4px 12px rgba(0,0,0,0.9);
    }
    img { width: 100%; }
  }
  @keyframes StorePicModalFadeIn{
    0%{
      opacity: 0;
      -webkit-transform: translateY(-30%);
      -moz-transform: translateY(-30%);
      -ms-transform: translateY(-30%);
      -o-transform: translateY(-30%);
      transform: translateY(-30%);
    }
    100%{
      opacity: 1;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  }
  @-webkit-keyframes StorePicModalFadeIn{
    0%{
      opacity: 0;
      -webkit-transform: translateY(-30%);
      -moz-transform: translateY(-30%);
      -ms-transform: translateY(-30%);
      -o-transform: translateY(-30%);
      transform: translateY(-30%);
    }
    100%{
      opacity: 1;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  }
  &__fade {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.98);
    cursor: pointer;
    &:hover,
    &:focus{
      #mousemove{ display: block; }
    }
    &:active{
      #mousemove{
        span{ background-color: #ffd000; }
      }
    }
  }
  // 태블릿 영역
  @media screen and (max-width: 1199px) {
    &__item {
      width: -webkit-calc(~"100% - 64px");
      width: -moz-calc(~"100% - 64px");
      width: calc(~"100% - 64px");
      h5 {
        top: 16px;
        left: 16px;
        .font-h6;
      }
    }
    &__fade {
      background-color: rgba(0,0,0,0.8);
      &:after {
        display: block;
        position: absolute;
        top: 32px;
        right: 32px;
        width: 32px;
        height: 32px;
        background: @ico_close_w center ~"/" contain no-repeat;
        content: '';
      }
    }
  }
  // 모바일 영역
  @media screen and (max-width: 767px) {
    &__item {
      width: -webkit-calc(~"100% - 32px");
      width: -moz-calc(~"100% - 32px");
      width: calc(~"100% - 32px");
    }
    &__fade {
      &:after { top: 16px; right: 16px; }
    }
  }
}
#mousemove {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1111;
  pointer-events: none;
  &.on{
    display: block;
    span{ background-color: @color-dq1; }
  }
  &.hide{ opacity: 0; }
  span{
    display: block;
    position: absolute;
    top: 0;
    width: 32px;
    height: 32px;
    border: none;
    background-color: @color-dq3;
    border-radius: 100px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    &:before,
    &:after{
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 32px;
      height: 32px;
      white-space: nowrap;
      content: '';
    }
    &:before{
      background: @ico_close_w center ~"/" contain no-repeat;
    }
    &:after{
      top: 3px;
      left: 40px;
      content: '사진 팝업 닫기';
    }
  }
  // 태블릿 영역
  @media screen and (max-width: 1199px) { display: none !important; }
}
// --------------------------------




//    ??. 맛집랭킹 스토어 지도 페이지 영역
// --------------------------------
.dq-store-map {
  position: relative;
  max-width: 1440px;
  padding: 56px 16px 80px;
  margin: 0 auto;
  font-size: 0;
  text-align: left;
  .clearAfter;
  // 노트북 데스크탑 영역 (portrait)
  @media screen and (max-width: 1440px) { padding: 40px 32px; }
  // 모바일 영역
  @media screen and (max-width: 767px) { padding: 32px 16px; }
  &__header {
    display: inline-block;
    position: relative;
    z-index: 1;
    max-width: 688px;
    width: -webkit-calc(~"50% - 32px");
    width: -moz-calc(~"50% - 32px");
    width: calc(~"50% - 32px");
    padding: 32px 32px 40px;
    margin: 16px 0 0;
    border-radius: 16px;
    background-color: @color-white;
    .box-shadow--normal;
    &__return-store {
      display: inline-block;
      position: absolute;
      top: -18px;
      left: 36px;
      z-index: 2;
      padding: 7px 32px 8px;
      border-radius: 100px;
      background: @color-gre-dq1;
      .font-button;
      color: @color-white;
      text-decoration: none;
      .transition_03s;
      .box-shadow--normal;
      &:hover,
      &:focus {
        color: @color-white;
        text-decoration: none;
        .transform_hover;
      }
    }
    &__title {
      position: relative;
      background-color: inherit;
      &__name {
        display: inline-block;
        position: relative;
        max-width: 75%;
        width: 100%;
        z-index: 1;
        padding-right: 32px;
        background-color: inherit;
        .font-h4;
        font-family: "Iropke Batang", serif;
      }
      &__tag{
        margin: 8px 0 0;
        color: @color-black6;
        .font-subtitle1;
      }
    }
    &__address {
      position: relative;
      margin: 24px 0 0;
      &__ico {
        display: inline-block;
        width: 36px;
        height: 36px;
        background: @ico_map_b center ~"/" contain no-repeat;
        vertical-align: top;
      }
      &__text {
        display: inline-block;
        width: -webkit-calc(~"100% - 222px");
        width: -moz-calc(~"100% - 222px");
        width: calc(~"100% - 222px");
        padding: 5px 0 7px;
        color: @color-black6;
      }
      &__image {
        position: absolute;
        top: 2px;
        right: 0;
        padding: 5px 32px 6px;
        border-radius: 100px;
        background: @color-gre-black1;
        color: @color-white;
        .font-button;
        .box-shadow--normal;
        .transition_03s;
        &:hover,
        &:focus {
          color: @color-white;
          text-decoration: none;
          .transform_hover;
        }
      }
    }
    &__link {
      position: relative;
      margin: 16px 0 0;
      .clearAfter;
      &__image-link {
        display: inline-block;
        float: right;
        padding: 5px 32px 6px;
        margin-right: 0;
        border-radius: 100px;
        background: @color-gre-black1;
        color: @color-white;
        .font-button;
        .box-shadow--normal;
        .transition_03s;
        &:hover,
        &:focus {
          color: @color-white;
          text-decoration: none;
          .transform_hover;
        }
      }
      &__share {
        display: none !important;
        //display: inline-block;
        position: relative;
        width: 32px;
        height: 32px;
        padding: 5px;
        border: none;
        border-radius: 100px;
        background: @color-gre-black1;
        vertical-align: top;
        outline: none;
        .transition_03s;
        .box-shadow--normal;
        &:hover,
        &:focus {
          .transform_hover;
        }
        &:after {
          display: block;
          background: @ico_share_w center ~"/" contain no-repeat;
          .absolute-zero;
          content: '';
        }
      }
    }
    // 노트북 데스크탑 영역 (portrait)
    @media screen and (max-width: 1440px) {
      position: relative;
      max-width: 100%;
      width: 100%;
      margin-bottom: 16px;
      &__title {
        &__name { max-width: 100%; }
      }
      &__address {
        &__ico { margin: 0 0 0 -8px; }
        &__text {
          width: -webkit-calc(~"100% - 28px");
          width: -moz-calc(~"100% - 28px");
          width: calc(~"100% - 28px");
        }
      }
    }
    @media screen and (max-width: 767px) {
      padding: 32px 16px 24px;
      margin: 0;
      &__return-store{ left: 16px; }
      &__title {
        &__name { padding-right: 16px; .font-h5; }
        &__tag { margin: 0; }
      }
      &__address {
        margin: 8px 0 0;
        .clearAfter;
        &__ico {
          position: relative;
          width: 32px;
          height: 32px;
        }
        &__text {
          padding: 4px 0;
          width: -webkit-calc(~"100% - 24px");
          width: -moz-calc(~"100% - 24px");
          width: calc(~"100% - 24px");
        }
        &__image{
          position: relative;
          float: right;
          margin-top: 12px;
        }
      }
      &__link {
        .clearAfter;
        &__share { float: right; }
      }
    }
  }
  &__content {
    padding: 16px;
    margin: 40px 0;
    border-radius: 16px;
    overflow: hidden;
    .box-shadow--normal;
    #map-canvas{
      height: -webkit-calc(~"100vh - 504px");
      height: -moz-calc(~"100vh - 504px");
      height: calc(~"100vh - 504px");
      border-radius: 8px;
    }
    // 노트북 데스크탑 영역 (portrait)
    @media screen and (max-width: 1440px) {
      margin: 32px 0;
    }
    // 모바일 영역
    @media screen and (max-width: 767px) {
      #map-canvas {
        //height: -webkit-calc(~"100vh - 420px");
        //height: -moz-calc(~"100vh - 420px");
        //height: calc(~"100vh - 420px");
        height: -webkit-calc(~"100vh - 420px");
        height: -moz-calc(~"100vh - 420px");
        height: calc(~"100vh - 420px");
      }

    }
  }
}
// --------------------------------












//    디테일 공통영역 - 댓글 리스트
.dq-reply-list{
  width: 100%;
  padding: 16px 48px;
  text-align: left;
  &__profile{
    position: relative;
    padding: 0 0 0 2px;
    font-size: 0;
    &__img{
      display: inline-block;
      position: relative;
      z-index: 1;
      overflow: hidden;
      width: 24px;
      height: 24px;
      margin: 0;
      border-radius: 100px;
      background: @color-gray3;
      vertical-align: middle;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    &__name{
      display: inline-block;
      position: relative;
      z-index: 1;
      max-width: 80%;
      padding: 0 32px 0 12px;
      background: transparent;
      .font-subtitle1;
      vertical-align: middle;
      .ellipsis;
    }
  }
  &__comment{
    width: 100%;
    padding: 0 0 0 40px;
    text-align: left;
    .clearAfter;
    .comment{
      max-width: 70%;
      width: 100%;
      margin: 8px 0;
      word-break: keep-all;
      .font-body1;
      .clearAfter;
    }
    .date{
      margin: 0 0 8px;
      color: @color-black9;
      .font-caption;
    }
  }
  // 태블릿 영역
  @media screen and (max-width: 1199px){
    &__comment{
      .comment{ max-width: 85%; }
    }
  }
  // 모바일 영역
  @media screen and (max-width: 767px){
    padding: 8px 16px;
    margin: 0 0 16px;
    border-radius: 16px;
    &__profile{
      &__name{ padding: 0 24px 0 8px; .font-subtitle2; }
    }
    &__comment{
      max-width: 560px;
      width: 100%;
      padding: 0 8px 0 34px;
      .comment{
        max-width: 100%;
        padding: 4px 0 0;
        margin: 0;
        .font-body2;
      }
      .date{ margin: 0; }
    }
  }
}
// --------------------------------




//    디테일 공통영역 - 댓글 달기
.dq-reply-comment{
  .clearAfter;
  &__user{
    padding: 0 0 0 2px;
    &__img{
      display: inline-block;
      position: relative;
      z-index: 1;
      overflow: hidden;
      width: 24px;
      height: 24px;
      margin: 0;
      border-radius: 100px;
      vertical-align: middle;
      img{ width: 100%; height: 100%; }
    }
    &__name{
      display: inline-block;
      padding: 0 0 0 12px;
      vertical-align: bottom;
      .font-body1;
    }
  }
  &__form{
    display: block;
    width: 100%;
    padding: 16px;
    margin: 16px auto;
    border: 1px solid @color-black9;
    border-radius: 8px;
    outline: none;
    resize: none;
    box-shadow: none;
  }
  &__btn{
    display: block;
    float: right;
    padding: 12px 32px;
    border: none;
    border-radius: 100px;
    background: @color-gre-dq1;
    color: @color-white;
    outline: none;
    .box-shadow--normal;
    .transition_03s;
    &:hover,
    &:focus {
      opacity: 0.8;
      -webkit-transform: translateY(-2px);
      -moz-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
      -o-transform: translateY(-2px);
      transform: translateY(-2px);
    }
  }
  // 모바일 영역
  @media screen and (max-width: 767px){
    &__user{
      &__img{}
      &__name{
        padding: 0 0 0 8px;
        .font-body2;
      }
    }
    &__form{
      min-height: 90px;
      padding: 8px 16px;
      border-color: @color-gray3;
      border-radius: 4px;
      .font-body2;
    }
  }
}
// --------------------------------





//    디테일 공통영역 - 콘텐츠 카드 더 보기
.dq-detail-more{
  display: inline-block;
  width: 25%;
  padding: 0 16px;
  font-size: 0;
  vertical-align: top;
  &.three{ width: 33.33%; > a{ padding-bottom: 54.58%} }
  &.two{ width: 50%; > a{ padding-bottom: 35.328%} }
  &.one{ width: 100%; > a{ padding-bottom: 17.166%} }
  &__img{
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    border-radius: 8px;
    will-change: transform;
    .box-shadow--light;
    &:hover,
    &:focus {
      .object-fit-cover{
        &:after{ background-color: rgba(0,0,0,0.2) }
        img{
          -webkit-transform: scale(1.2);
          -moz-transform: scale(1.2);
          -ms-transform: scale(1.2);
          -o-transform: scale(1.2);
          transform: scale(1.2);
        }
      }
    }
    .object-fit-cover{
      .absolute-zero;
      background: @img_dq_no_image center ~"/" cover no-repeat;
      &:after{
        display: block;
        .absolute-zero;
        z-index: 0;
        background-color: rgba(0,0,0,0.1);
        .transition_03s;
        content: '';
      }
      img{
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        will-change: transform;
        .transition_03s;
      }
    }
    .taste-label{
      position: absolute;
      padding: 6px 12px 5px;
      border-radius: 8px 0 8px 0;
      background: @color-gre-dq1;
      opacity: 0.95;
      > h5{ color: @color-white; .font-subtitle2; }
    }
  }
  &__text{
    margin: 8px 0 0;
    .title { .font-subtitle1; font-weight: 700; }
    .sub_title {
      max-width: 80%;
      width: 100%;
      margin: 0;
      color: @color-black9;
      .font-subtitle1;
    }
  }
  // 태블릿 영역
  @media screen and (max-width: 1199px){
    width: 50%;
    margin: 0 0 32px;
    &__img {}
    &__text {}
  }

  // 모바일 영역
  @media screen and (max-width: 767px){
    width: 100%;
    padding: 0;
    margin: 0 0 24px;
    &__img{ padding-bottom: 56.25%; } // 16:9 비율
    &.three,
    &.two,
    &.one{
      width: 100%;
      > a { padding-bottom: 56.25%; } // 16:9 비율
    }
    &__img{}
    &__text{
      //margin: 8px 0 0;
      .title { .font-subtitle2; }
      .sub_title{ margin: 0; .font-subtitle2 }
    }
  }
}
// --------------------------------
















//      현재 없음. Post 디테일 페이지와 같이 공유됨. 추후 개정 되면 추가 예정.
//      해당 하단 영역 부터는 리팩토링 들어가야함.
//      TASTE 디테일페이지 / 이벤트 모달 / 맛집랭킹 etc.
// --------------------------------












//    14. 이벤트 모달 영역
// --------------------------------
.modal.fade.in{ background: rgba(51,51,51,.6) !important; }
#eventLayer{
  position: absolute;
  top: 0;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dq-modal-taste{
  max-width: 1280px;
  width: auto;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  background: @color-white;
  &:after{ .clearAfter }
  &-wrap{
    float: left;
    position: relative;
    z-index: inherit;
    width: 100%;
    &-close{ //닫기
      float: right;
      position: relative;
      top: 8px;
      right: 8px;
      width: 50px;
      height: 50px;
      padding: 8px;
      border: none;
      background: @ico_close center~"/"contain no-repeat;
    }
    &-body{
      display: inline-block;
      width: 100%;
      padding-top: 16px;
      padding-bottom: 66px;
    }
  }
}

//      14-1. 이벤트 모달 영역 - 신청하기
// --------------------------------
.bq-event-apply{
  text-align: center;
  pointer-events: auto;
  .border-line{
    clear: both;
    height: 1px;
    background: @color-gray2;
  }
  .modal-backdrop.in{ opacity: 0.7; position: fixed; overflow: hidden; }
  &-modal{
    display: inline-block;
    text-align: left;
    &.modal-dialog{ width: auto; }
  }
  &-content{ // 이벤트 모달 영역 - 신청하기 - 콘텐츠
    float: left;
    width: 100%;
    min-height: 840px;
    border: none;
    border-radius: 0;
    &-close{ // 이벤트 모달 영역 - 신청하기 - 모달창 닫기
      position: absolute;
      top: 18px;
      right: 16px;
      width: 32px;
      height: 32px;
      border: 1px @color-darkpurple solid !important;
      background: @ico_close_w center~"/"65% no-repeat @color-darkpurple !important;
      opacity: 1;
    }
    &-header{ // 이벤트 모달 영역 - 신청하기 - 콘텐츠 헤더영역
      position: relative;
      border: none;
      &-title{
        display: inline-block;
        > h4{
          .title-div{
            width: 80px;
            height: 1px;
            background: @color-purple;
          }
        }
      }
    }
    &-body{ // 이벤트 모달 영역 - 신청하기 - 콘텐츠 바디영역
      padding: 8px 16px 56px;
      .info-group{ // 이벤트 모달 영역 - 신청하기 - 그룹 컴포넌트
        h5, h6{
          width: 100%;
          > strong{
            display: inline-block;
            border-radius: 100px;
            background: @color-dq1;
          }
        }
        &:after{ .clearAfter; }
        .info-map{ width: 100%; height: 560px; } // 네이버 지도
      }
      #event-info{ // 이벤트 모달 영역 - 신청하기 - 바디영역 TASTE 인포
        &.vanish{ display: none; }
        .info-main-img{
          padding-bottom: 75%;
          > div{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            img{ .object-fit-cover; }
          }
        }
        .default{ float:left; width: 400px; }
        .package{ float:left; width: 400px; }
      }
      #event-apply{ // 이벤트 모달 영역 - 신청하기 - 바디영역 TASTE 신청동의
        display: none;
        &.active{ display: block; }
        .default, .package{ float:left; width: 400px; }
        .policy-form{ // 이용약관
          border: 1px @color-gray3 solid;
          background: @color-gray1;
          label > span{ float: left; font-size: 14px; }
          .bq-btn{
            height: 32px;
            border-color: @color-dq4;
            background: @color-dq4;
            line-height: 30px;
            padding: 0 16px;
          }
        }
        .policy-form-all-check{ // 전체 동의
          .policy_all_label{ background: @color-dq4; }
          &:hover{ cursor: pointer; }
          .bq-btn{ background: @color-dq4; border-color: @color-dq4; }
        }
        .package-form{ // 우편번호 입력
          input{ color: @color-black6; }
          .bq-btn{
            height: 32px;
            border-color: @color-dq4;
            background: @color-dq4;
            line-height: 30px;
          }
        }
      }
      &-img{
        display: inline-block;
        overflow: hidden;
        float: left;
        height: 0;
        padding-bottom: 56.25%;
        img{
          position: absolute;
          .object-fit-cover;
          border-radius: 16px;
        }
      }
      &-policy {
        position:  relative;
        top:  4px;
        right:  10px;
        border: 1px @color-gray2 solid;
        background: @color-gray1;
        label {
          margin: 8px 0;
          color: @color-black3;
          font-size: inherit !important;
        }
        input[type=checkbox] + label:before{
          width: 16px;
          height: 16px;
          border-radius: 4px;
        }
        input[type=checkbox]:checked + label:before { font-size: 14px; line-height: 14px; }
        .policy_all_label{ /* 전체 동의 */
          border-color: @color-purple;
          background: @color-purple;
          color: @color-white;
          font-size: 0.9375rem !important;
          font-weight: 400;
          cursor: pointer;
        }
        #policy_all{
          position: absolute;
          visibility: hidden;
          &[type=checkbox]:checked + label{
            border-color: @color-darkpurple;
            background: @color-darkpurple !important;
            &:before{
              display: block;
              position: absolute;
              top: 10px;
              right: 0;
              left: -136px;
              width: 24px;
              height: 24px;
              margin: 0 auto;
              background: none;
              font-size: 32px;
              content: "\2713";
            }
          }
        }
      }
    }
    &-footer{ // 이벤트 모달 영역 - 신청하기 - 푸터영역
      position: absolute;
      bottom: 0;
      left: 0;
      a,button{ position: absolute; width: 160px; }
      #event-pre{
        display: none;
        top: 0;
        left: 32px;
        &:after{
          position: absolute;
          top: 50%;
          left: 16px;
          width: 16px;
          height: 16px;
          background: @chevron_darkpurple_left center~"/"contain no-repeat;
          .transformY_Minus50;
          content: '';
        }
        &.active{
          display: block;
        }
      }
      #event-next,#event-submit{
        top:0;
        right: 32px;
        &.vanish{ display: none; }
      }
      > .sns-event-wrap {
        position: absolute;
        text-align: right;
        > .sns {
          position: relative;
          border-color: transparent;
          &.sns-nv { background: @color-gre-green; }
          &.sns-ins { background: @color-instagram; margin: 0 0 0 16px; }
        }
      }
      #event-submit{
        display: none;
        width: 45%;
        &.active{ display: block; }
      }
    }


    // ??????????????
    .bq-event-success{
      &-wrap{
        background: @bq_bg02 top no-repeat;
        .bq-event-content-header-close{
          border: none;
          background: @close;
        }
        &-character{
          width: 320px;
          height: 230px;
          margin: 32px auto 0;
          background: @bq_character center~"/"contain no-repeat;
        }
        &-grid{
          &-box{
            &-img{
              position: relative;
              width: 25%;
              height: 0;
              padding-top: 25%;
            }
            > h6{
              position: absolute;
              top: 8px;
              right: 24px;
            }
          }
        }
      }
    }
    // ??????????????


  }
}


//      14-2. 이벤트 모달 영역 - 신청완료
// --------------------------------
.dq-modal-success{
  width: 100%;
  float: left;
  &-title{ // 모달 상단 타이틀 영역
    position: relative;
    &-img{ //이미지
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 200px;
      background: @img_dq_queen center~"/"contain no-repeat;
    }
    h2{
      display: block;
      clear: both;
      width: -webkit-calc(~"100% - 200px");
      width: -moz-calc(~"100% - 200px");
      width: calc(~"100% - 200px");
      border-left: 1px transparent solid;
      font-weight: 300;
      &:first-child { border-color: @color-dq1; }
    }
  }
  &-grid{
    max-width: 100%;
    &-wrap{
      overflow: hidden;
      .clearAfter;
    }
  }
  &-more{
    clear: both;
    button{
      width: 100%;
      margin: 24px auto 0;
      font-size: @font-size-5;
      font-weight: 400;
    }
  }
}





//    15. 이벤트 모달 공유하기 영역
// --------------------------------
.dq-share-modal{
  > div{
    position: absolute;
    top: 40%;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 304px;
    margin: 0 auto;
    -webkit-transform: translateY(-50%) !important;
    -moz-transform: translateY(-50%) !important;
    -ms-transform: translateY(-50%) !important;
    -o-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
  }
  &-content{
    margin: 0 auto;
    border-radius: 0;
    &-header{
      padding-top: 32px;
      border: none;
      .close{
        position: absolute;
        top: 4px;
        right: 4px;
        width: 40px;
        height: 40px;
        background: @ico_close center~"/"contain no-repeat;
        outline: none;
        opacity: 1;
      }
    }
    &-body{
      font-size: 0;
      a{
        display: inline-block;
        width: 33.33%;
        padding: 16px;
        text-align: center;
      }
    }
  }
}


//    16. 약관페이지 영역
// --------------------------------
.dq-policy{
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  &-nav{
    list-style: none;
    .clearAfter;
    li{
      display: inline-block;
      float: left;
      margin: 0 8px 0 0;
      a {
        &.active { background: @color-dq1; color: @color-white; }
      }
    }
  }
  &-content{
    &-wrap{
      padding: 16px;
      .privacy{ padding: 0; border: none; }
    }
  }
}



//    17. 리뷰가이드 페이지
// --------------------------------
.bq-review{
  position: relative;
  > div{
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    background-repeat: 100% -64px~"/"contain no-repeat;
  }
  &-title{
    border-bottom: 1px @color-dq1 solid;
    h4.line{ display: inline-block; border-bottom: 1px @color-dq1 solid; }
    h5{ color: @color-black6; }
    a{
      position: relative;
      padding: 0 48px;
      .kakao{
        position: absolute;
        top: 50%;
        left: 16px;
        width: 24px;
        height: 24px;
        background: @kakao_medium center~"/"contain no-repeat;
        .transformY_Minus50;
      }
    }
  }
  &-content{
    background: @color-white;
    &-memo{
      > h5.color-dq1{ display: inline-block; }
    }
    &-tabs{
      padding: 8px;
      background: @color-gray1;
      > aside.col-sm-11{
        display: inline-block;
        float: none;
        margin: 0 auto;
      }
      > aside:hover{ background: @color-gray3; }
      &-title{
        display:  inline-block;
        padding:  4px 16px;
        margin: 4px 0 8px;
        border-left: 8px @color-black3 solid;
        color: @color-black3;
      }
      &-step{
        float: left;
        width: 100%;
        padding: 16px;
        margin: 8px 0;
        border: 1px @color-gray2 solid;
        background: @color-white;
        -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.05);
        -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.05);
        -o-box-shadow: 4px 4px 8px rgba(0,0,0,0.05);
        box-shadow: 4px 4px 8px rgba(0,0,0,0.05);
        &-input{
          textarea{
            height: 48px;
            border: 1px @color-black3 solid;
            resize: none;
          }
          button{
            height: 48px;
            border: 1px @color-black3 solid;
            border-radius: 0;
            background: @color-black3;
            color: @color-white;
            &:hover, &:active, &:focus{ color: @color-white; opacity: 0.6; }
          }
        }
        &-img{
          display:  inline-block;
          position: relative;
          float: left;
          clear: both;
          width: 100%;
          padding: 8px;
          margin: 8px 0;
          border: 1px @color-gray3 solid;
          text-align: left;
          &.gif-img{
            overflow: hidden;
            border: none;
            &:after{
              display: inline-block;
              position: absolute;
              top: 50%;
              right: 0;
              left: 0;
              width: 190px;
              padding: 4px;
              margin: 0 auto;
              border: 1px @color-black3 solid;
              background: rgba(255,255,255,.8);
              text-align: center;
              color: #ff4081;
              font-size: @font-size-5;
              font-weight: 700;
              -webkit-transform: translateY(-50%);
              -moz-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              -o-transform: translateY(-50%);
              transform: translateY(-50%);
              content: '이해를 위한 예시화면';
            }
            img{
              -webkit-transform: scale(1.5);
              -moz-transform: scale(1.5);
              -ms-transform: scale(1.5);
              -o-transform: scale(1.5);
              transform: scale(1.5);
            }
          }
          img{ max-width: 100%; }
          &.banner{
            float: none;
            width: 100%;
            padding: 16px;
            border: 4px @color-dq1 double;
            text-align: center;
          }
        }
        h4 {
          display: inline-block;
          float: left;
          padding: 0 0 4px;
          margin:  0 0 8px;
          border-bottom:  1px @color-black3 solid;
        }
        h5 { clear: both; padding: 4px 0; }
      }
    }
    .bq-tabs {
      ul > li {
        @media screen and (max-width: 767px) {
          width: 50%;
          > a { padding: 0; text-align: center; }
        }
      }
    }
  }
}







/*임시용*/
.taste_detail { text-align: center; }
#content{
  //position: relative;
  //width: 100% !important;
  //max-width: 100% !important;
  //min-height: -webkit-calc(~"100% - 412px");
  //min-height: -moz-calc(~"100% - 412px");
  //min-height: calc(~"100% - 412px");
  //text-align: center;
  //overflow: hidden;
}
.t6{ padding: 0 !important; }


.taste_dropdown_wrap{
  max-width: 90%;
  margin: 0 auto;
  .taste_dropdown{ display: none; }
  @media screen and (max-width: 1199px){
    max-width: 100%;
    .taste_dropdown{ display: block; }
  }
}

@media screen and (max-width: 1440px) {
  #content {
    margin-top: 112px;
  }
}





//    18. 디너패스 영역
// --------------------------------
.dq-pass{
  // 디너패스 배경 영역 (논의중...)
  // ___________________

  // 디너패스 네비 영역
  // ___________________
  &-nav{
    display: inline-block;
    width: 100%;
    height: 96px;
    box-sizing: content-box;
    will-change: transform;
    .clearAfter;
    &-rank{
      display: inline-block;
      float: left;
      width: auto;
      > div{
        display: inline-block;
        float: left;
        width: 40px;
        height: 40px;
        margin: 4px;
        background: center ~"/" contain no-repeat;
        &.rank-none{ background-image: @ico_dq_pass_rank_01; }
        &.rank-1{ background-image: @ico_dq_pass_rank_02; }
        &.rank-2{ background-image: @ico_dq_pass_rank_03; }
        &.rank-3{ background-image: @ico_dq_pass_rank_04; }
        &.rank-4{ background-image: @ico_dq_pass_rank_05; }
        &.rank-5{ background-image: @ico_dq_pass_rank_06; }
      }
      h4{
        display: inline-block;
        padding: 10px 8px;
        font-weight: 300;
      }
    }
    > ul{
      float: left;
      padding-top: 32px;
      > li{
        list-style: none;
        float: left;
        margin-right: 16px;
        > h4{ border-right: 1px solid @color-black3; }
        .dq-radio{
          top: 2px;
          input{ .clearAfter; }
        }
      }
    }
    &-list-btn{
      display: inline-block;
      float: right;
      position: relative;
      width: 96px;
      height: inherit;
      border: none;
      background: none;
      outline: none;
      &:after{
        display: inline-block;
        color: @color-black6;
        font-size: @font-size-5;
        line-height: @line-height-5;
        content: '맵';
      }
      > div{
        width: 32px;
        height: 32px;
        background: @ico_map_gray center ~"/" 150% no-repeat;
        margin: 4px auto 0;
        .transition_03s;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        will-change: background-image, transform;
      }
      &.map-mode{
        &:after{
          content: '리스트';
        }
        > div{
          background-image: @ico_grid_list_gray;
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      &:hover,
      &:focus{ text-decoration: none; }
      h5{ color: @color-black9 }
    }
  }
  // 디너패스 그리드 영역
  // ___________________
  &-grid{
    &-title{
      position: relative;
      margin-top: 24px;
      h1{
        display: inline-block;
        position: relative;
        will-change: transform;
        > span{
          display: block;
          position: absolute;
          top: -32px;
          left: -56px;
          z-index: -1;
          width: 48px;
          height: 48px;
          border-radius: 100px;
          background: @ico_dq_pass_title_w center ~"/" 80% no-repeat @color-dq1;
          color: @color-white;
          will-change: transform;
          content: '';
        }
        &:after{
          position: absolute;
          top: 4px;
          left: -22px;
          width: 0;
          height: 0;
          border-top: 16px @color-dq1 solid;
          border-right: 8px transparent solid;
          border-left: 8px transparent solid;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
          content: '';
        }
      }
      h3{ color: @color-black6; will-change: transform; }
    }
    .dq-grid-wrap-content-text{
      &-taste{
        width: 100%;
        .ellipsis{ display: block; }
      }
      width: 100%;
      .store-title{ // 타이틀
        position: relative;
        line-height: 0;
        b{  // 상점명
          display: inline-block;
          max-width: 76%;
          font-weight: normal;
          line-height: @line-height-4;
          .ellipsis;
        }
        span{ // 오른쪽 카테고리
          position: absolute;
          top: 4px;
          right: 0;
          float: right;
          border-radius: 100px;
          background: @color-black3;
          color: @color-white;
        }
      }
      .sale{
        .num{
          font-size: @font-size-2;
          line-height: @line-height-2;
          font-weight: 700;
        }
        .num-sub{
          display: block;
          font-size: @font-size-6;
          line-height: @line-height-6;
        }
      }
      .living-date{ border-bottom: 1px solid @color-gray3; }
    }
  }

  // 디너패스 맵 영역
  // ___________________
  &-map{
    min-height: -webkit-calc(~"100% - 20px");
    min-height: -moz-calc(~"100% - 20px");
    min-height: calc(~"100% - 20px");
    background: @color-black6;
    overflow: hidden;
    will-change: transform;
    #dinnerpass-map{
      height: 960px;
      margin: 0 auto;
      -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.8);
      -moz-box-shadow: 0 0 16px rgba(0,0,0,0.8);
      -o-box-shadow: 0 0 16px rgba(0,0,0,0.8);
      box-shadow: 0 0 16px rgba(0,0,0,0.8);
    }
  }
  // 디너패스 고정 스토어 박스 영역
  // ___________________
  &-fixed-storebox{
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    background: @color-white;
    color: @color-black3;
    &:hover{
      color: @color-black6;
      > .object-fit-cover{
        position: relative;
        &:after{
          display: block;
          .absolute-zero;
          background: rgba(0,0,0,0.35);
          color: @color-white;
          padding-top: 35%;
          font-size: @font-size-4;
          content: '보러가기';
        }
        img{
          -webkit-transform: scale(1.2);
          -moz-transform: scale(1.2);
          -ms-transform: scale(1.2);
          -o-transform: scale(1.2);
          transform: scale(1.2);
        }
      }
    }
    > div { float: left; width: 50%; }
    > .object-fit-cover{ // 1. 왼쪽 이미지
      overflow: hidden;
      border-radius: 8px;
      img{
        .object-fit-cover;
        min-height: 200px;
        .transition_03s;
      }
    }
    &-text{ // 2. 오른쪽 텍스트
      text-align: left;
      .store-title{ // 타이틀
        line-height: 0;
        b{  // 상점명
          display: inline-block;
          max-width: 189px;
          font-size: @font-size-4;
          line-height: @line-height-4;
          .ellipsis;
        }
        span{ // 오른쪽 카테고리
          float: right;
          border-radius: 100px;
          background: @color-black3;
          color: @color-white;
        }
      }
      .sale{
        .num{
          color: @color-dq1;
          font-size: @font-size-2;
          line-height: @line-height-2;
          font-weight: 700;
        }
        .num-sub{
          display: block;
          font-size: @font-size-6;
          line-height: @line-height-6;
        }
      }
      .living-date{ border-bottom: 1px solid @color-black9; }
    }
  }
}



//    19. 디너패스 스토어 디테일 영역
// --------------------------------
.dq-pass-store{
  .dq-taste-detail;
  overflow-x: hidden;
  header{ // 디너패스 스토어 디테일 상단 헤더
    position: relative;
    z-index: 1;
    overflow: visible;
    width: 100%;
    background: @color-white;
    .clearAfter;
    #dq-pass-store-img{
      width: 100%;
      float: left;
      height: 0;
      padding-bottom: 18.563%; // 33.33 / 16:9
      .slick-list{
        .absolute-zero;
        > div{
          height: 100%;
          .slick-slide{
            outline: none;
            img{ .object-fit-cover; }
          }
        }
      }
      .slick-arrow{
        display: inline-block;
        position: absolute;
        top: -webkit-calc(~"50% - 24px");
        top: -moz-calc(~"50% - 24px");
        top: calc(~"50% - 24px");
        z-index: 1;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 100px;
        font-size: 0;
        outline: none;
        .transition_03s;
        &:hover{
          -webkit-transform: scale(1.2);
          -moz-transform: scale(1.2);
          -ms-transform: scale(1.2);
          -o-transform: scale(1.2);
          transform: scale(1.2);
        }
        &.slick-prev{ left: 16px; background: rgba(0,0,0,0.6) @ico_left_bracket_w center ~"/" contain no-repeat; }
        &.slick-next{ right: 16px; background: rgba(0,0,0,0.6) @ico_right_bracket_w center ~"/" contain no-repeat; }
      }
      .slick-dots{
        position: absolute;
        right: 0;
        bottom: -30px;
        left: 0;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
        li{
          display: inline-block;
          position: relative;
          width: 8px;
          height: 8px;
          margin: 0 4px;
          border: 1px solid @color-black3;
          border-radius: 100px;
          box-sizing: content-box;
          .transition_03s;
          &.slick-active{ width: 24px; background: @color-black3; }
          button{
            .absolute-zero;
            width: 100%;
            border: none;
            background-color: transparent;
            font-size: 0;
            outline: none;
          }
        }
      }
    }
  }
  &-title{ // 디너패스 스토어 디테일 타이틀
    position: relative;
    max-width: 767px;
    margin: 0 auto 24px;
    //border-bottom: 2px solid @color-black3;
    .pass-logo{
      display: block;
      position: relative;
      width: 240px;
      height: 116px;
      margin: 0 auto 16px;
      background: @ico_logo_pass center ~"/" contain no-repeat;
      .pass-laurel-option{
        display: block;
        position: absolute;
        top: 16px;
        width: 88px;
        height: 88px;
        background: center ~"/" contain no-repeat;
        opacity: 0.8;
        content: '';
      }
      &:before{
        .pass-laurel-option;
        left: -88px;
        background-image: @ico_dq_laurel_left_b;
        -webkit-transform: rotate(-16deg);
        -moz-transform: rotate(-16deg);
        -ms-transform: rotate(-16deg);
        -o-transform: rotate(-16deg);
        transform: rotate(-16deg);
      }
      &:after{
        .pass-laurel-option;
        right: -88px;
        background-image: @ico_dq_laurel_right_b;
        -webkit-transform: rotate(16deg);
        -moz-transform: rotate(16deg);
        -ms-transform: rotate(16deg);
        -o-transform: rotate(16deg);
        transform: rotate(16deg);
      }
    }
    .pass-area{
      &:before{
        display: block;
        padding-left: 8px;
        width: 24px;
        height: 1px;
        background: @color-black3;
        margin: 0 auto 16px;
        color: @color-black9;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 8px;
        content: '';
      }
    }
    .pass-title{ width: 100%; }
    .pass-category{
      display: inline-block;
      padding: 4px 24px;
      margin: 16px auto 0;
      border-radius: 100px;
      border: 1px solid @color-black3;
      //background: @color-black3;
      color: @color-black3;
    }
    .pass-notice{

      display: block;
      position: relative;
      //padding: 16px 0;
      padding: 8px;
      border: 1px solid @color-dq1;
      border-radius: 25px 100px;
      margin-top: 40px;
      color: @color-dq1;
      //background: @ico_notice no-repeat;
      h6{
      }
    }
    &-alert{
      max-width: 590px;
      margin: 0 auto;
      border: 1px solid @color-dq1;
      border-radius: 100px;
      box-sizing: content-box;
      > div{
        display: inline-block;
        position: relative;
        float: left;
        width: 32px;
        height: 32px;
        margin: 10px 24px 8px 8px;
        border-radius: 4px;
        background: @color-dq1;
        &:before{
          display: block;
          .absolute-zero;
          z-index: 1;
          color: @color-white;
          font-size: @font-size-4;
          font-weight: 100;
          line-height: 32px;
          content: '%';
        }
        &:after{
          display: inline-block;
          .absolute-zero;
          border-radius: 4px;
          background: @color-dq1;
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          content: '';
        }
      }
    }
  }

  &-info{
    &-group{
      max-width: 767px;
      padding: 32px 16px 16px;
      margin: 0 auto;
      .clearAfter;
      > div{
        display: inline-block;
        float: left;
        text-align: left;
        p,h5,h4{
          position: relative;
          z-index: 1;
          padding: 4px 16px;
        }
      }
      &.full{ width: 100%; }
      &.half{ width: 50%; }
      .title{
        position: relative;
        max-width: 184px;
        width: 100%;
        &:after{
          display: block;
          position: absolute;
          top: 16px;
          width: 100%;
          height: 1px;
          background: @color-black9;
          content: '';
        }
        .ico{
          display: inline-block;
          float: left;
          position: relative;
          z-index: 1;
          width: 32px;
          height: 32px;
          background: @color-white center ~"/" 90% no-repeat;
          &-taste{ background-image: @ico_restaurant_title; }
          &-text{ background-image: @ico_term; }
          &-notice{ background-image: @ico_notice; }
        }
        p{
          display: inline-block;
          padding-left: 4px;
          background: @color-white;
          font-size: @font-size-4 }
      }
      .info{
        width: -webkit-calc(~"100% - 184px");
        width: -moz-calc(~"100% - 184px");
        width: calc(~"100% - 184px");
        padding-left: 24px;
        ul,ol{
          //padding: 0;
          p{ padding-left: 8px;}
        }
        p{
          .big{ font-size: @font-size-3; vertical-align: sub;}
        }
      }
    }
  }

  &-content{
    > div{
      max-width: 767px;
      margin: 0 auto 80px;
      img{ width: 100%; height: auto;}
    }
  }
  &-info{
  }

}


//    20. 디너패스 스토어 디테일 신청 모달 영역
// --------------------------------
#DinnerPassModal{
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow: auto;
  background: rgba(0,0,0,0.7);
  .dq-pass-modal-content{
    position: absolute;
    top: 88px;
    right: 0;
    left: 0;
    max-width: 420px;
    width: 100%;
    margin: 0 auto 40px;
    border-radius: 16px;
    background: @color-white;
    text-align: left;
    will-change: transform, opacity;
    &-title{ position: relative; }
    &-close{
      position: absolute;
      top: 0;
      right: -48px;
      width: 48px;
      height: 48px;
      border: none;
      outline: none;
      background: @ico_close_w center ~"/" contain no-repeat;
      &:hover{ opacity: 0.8; }
    }
    &-body{
      position: relative;
      &:after{
        display: block;
        position: absolute;
        left: 0;
        top: 4px;
        width: 12px;
        height: 1px;
        background: @color-black3;
        content: '';
      }
      .clearAfter;
      > h4{
        b{ font-size: @font-size-2; line-height: @line-height-2; }
      }
      .apply-policy{
        border-top: 2px solid @color-black3;
        ul{
          list-style: none;
          border: 1px solid @color-black9;
          border-radius: 8px 0 8px;
          li{
            label{ font-size: @font-size-6; line-height: @line-height-6; }
          }
        }
        > .dq-checkbox{
          label{
            padding-top: 2px;
            vertical-align: top;
            font-size: @font-size-6;
            line-height: 20px;
          }
        }
      }
      > form{
        border-top: 1px dashed @color-black3;
        input{ width: 100%; }
      }
      > button{
        float: right;
        height: auto;
        padding: 4px 32px;
      }
    }
  }
}


//    21. 디너패스 스토어 디테일 신청 모달 - 신청 가이드 캐러셀(우현님 요청)
// --------------------------------
#DinnerPassGuideCarousel{
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow: auto;
  background: rgba(0,0,0,0.7);
  &.visible{ display: block !important;}
  .dq-pass-guide-carousel{
    position: absolute;
    top: 88px;
    right: 0;
    left: 0;
    max-width: 420px;
    width: 100%;
    margin: 0 auto 40px;
    border-radius: 16px;
    background: @color-white;
    text-align: left;
    will-change: transform, opacity;
    &-title{ position: relative; }
    &-close{
      position: absolute;
      top: 0;
      right: -48px;
      width: 48px;
      height: 48px;
      border: none;
      outline: none;
      background: @ico_close_w center ~"/" contain no-repeat;
      &:hover{ opacity: 0.8; }
    }
    &-slide{
      .slick-arrow{
        display: inline-block;
        position: absolute;
        top: -webkit-calc(~"50% - 24px");
        top: -moz-calc(~"50% - 24px");
        top: calc(~"50% - 24px");
        z-index: 1;
        width: 48px;
        height: 48px;
        border: 1px solid @color-gray3;
        border-radius: 100px;
        font-size: 0;
        outline: none;
        .transition_03s;
        &.slick-prev{ left: -104px; background: @color-white @ico_left_bracket_gray center ~"/" 100% no-repeat; }
        &.slick-next{ right: -104px; background: @color-white @ico_right_bracket_gray center ~"/" 100% no-repeat; }
        &.slick-disabled{ opacity: 0; }
        &:hover{
          background-color: @color-white;
          &.slick-prev{ background: @color-white @ico_left_bracket center ~"/" 100% no-repeat; }
          &.slick-next{ background: @color-white @ico_right_bracket center ~"/" 100% no-repeat; }
        }
      }
      .slick-dots{
        padding: 8px 0;
        margin: 4px 0 16px;
        border-top: 1px solid @color-gray2;
        list-style: none;
        text-align: center;
        li{
          display: inline-block;
          position: relative;
          width: 16px;
          height: 16px;
          margin: 0 4px;
          border: 1px solid @color-black3;
          border-radius: 100px;
          box-sizing: content-box;
          &.slick-active{ background: @color-black3; }
          button{
            .absolute-zero;
            border: none;
            background-color: transparent;
            font-size: 0;
          }
        }
      }
      .dq-pass-slide-div {
        height: 560px;
        padding: 16px;
        outline: none;
        border: 1px solid @color-gray1;
        h1,h2,h3,h4,h5,h6,p{word-break: keep-all}
        &.slide-0{
          text-align: center;
          .logo{
            width: 100%;
            height: 220px;
            background: @img_dq_queen center ~"/" contain no-repeat;
          }
        }
        &.slide-1{
          .logo{
            width: 100%;
            height: 168px;
            background: @ico_logo_pass left ~"/" contain no-repeat;
          }
        }
        &.slide-2{
          img{
            max-width: 264px;
            width: 100%;
            margin: 32px auto 16px;
          }
        }
        &.slide-3,
        &.slide-4,
        &.slide-5,
        &.slide-6{
          img{
            max-height: 352px;
            height: 100%;
            margin: 24px auto 0;
            border-radius: 8px;
          }
        }
        &.slide-5{
          img{ max-height: 292px}
        }
      }
    }
    &-close-btn{ width: 100%; }
  }
}




















// 그리드 레이아웃
.grid-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 1440px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  pointer-events: none;
  font-size: 0;
  z-index: 111;
  text-align: center;
  opacity: 0.5;
  ul.grid{
    width: -webkit-calc(~"100% + 32px"); /* gutter 양쪽 튀어나온 12px 교정 */
    width: -moz-calc(~"100% + 32px");
    width: calc(~"100% + 32px");
    height: 100%;
    font-size: 0;
    padding: 0 16px;
    margin: 0 -16px; /* gutter 양쪽 튀어나온 12px 교정 */
    li.g-12 {
      display: inline-block;
      /*max-width: 8.3333%;*/
      max-width: -webkit-calc(~"100% / 12");
      max-width: -moz-calc(~"100% / 12");
      max-width: calc(~"100% / 12");
      width: 100%;
      height: inherit;
      padding: 0 16px;
      span {
        display: block;
        width: 100%;
        height: inherit;
        border-left: 1px solid @color-dq1;
        border-right: 1px solid @color-dq1;
      }
      &:last-of-type { margin-right: 0; }
    }
  }
  @media screen and (max-width: 1440px) {
    padding: 0 16px;
    ul.grid li.g-12 {
      max-width: -webkit-calc(~"100% / 6");
      max-width: -moz-calc(~"100% / 6");
      max-width: calc(~"100% / 6");
      &:nth-of-type(n+7) { display: none; }
    }
  }
  @media screen and (max-width: 767px) {
    padding: 0;
    ul.grid li.g-12 {
      max-width: -webkit-calc(~"100% / 4");
      max-width: -moz-calc(~"100% / 4");
      max-width: calc(~"100% / 4");
      &:nth-of-type(n+5) {
        display: none;
        background: #FFd000;
      }
    }
  }
}






//.item.fds .dq-grid-wrap-content {
//  > a ,
//  > div {
//    background: #000;
//    transform: scale(1.5)
//  }
//}


@keyframes test_hoi {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}