// DinnerQueenStyleSheetLess // dq_guide.less - 디너의여왕 범용적 디자인 가이드 요소 (2) // 스타일시트 작성자 : 개발팀 디자이너 - 박재한 (2019.02) // -------------------------------- // common - 범용적 디자인 가이드 요소 (1) // dq_guide - 디너의여왕 범용적 디자인 가이드 요소 (2) // dq - 디너의여왕 각 개별 스타일 (3) // dq_xs - 디너의여왕 모바일 각 개별 스타일 (4) // *디너의여왕은 xs버전은 모바일/테블렛등을 포괄한 max-width:1199px으로 설정함. // -------------------------------- // 스타일 속성 기술 순서는 '모질라 파이어폭스 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. 공통요소 // 1-1. 공통요소 - 전체 기본값 // 1-2. 공통요소 - Float/Clear // 1-3. 공통요소 - 포지션 // 1-4. 공통요소 - 오브젝트 이미지처리 // 1-5. 공통요소 - 타이포 생략처리 // 1-6. 공통요소 - 패딩 // 1-7. 공통요소 - 마진 // 2. [DQ] 컬러 클래스 // 2-1. 컬러 일반 // 2-2. 컬러 모바일 // 3. [DQ] 폰트 영역 // 3-1. 폰트 패밀리 // 3-2. 폰트 기본 단위 설정 // 4. [DQ] 애니메이션 영역 // 4-1. 애니메이트 css 커스텀 // 4-2. 화면 로딩 이미지 // 5. [BQ] 버튼 스타일 // 5-1. 일반 버튼 // 5-2. 그레이 버튼 // 5-3. 고스트 버튼 // 5-4. 네거티브 버튼 // 6. [DQ] 리스트 스타일 - 디테일페이지 // 7. [DQ] 텍스트 폼 스타일 // 8. [DQ] 텍스트 폼 드롭다운 메뉴 // 9. [DQ] 체크박스 // 9. [DQ] 셀렉트 박스 // 10. [DQ] 라디오 버튼 // 11. [DQ] 탭버튼 - 부트스트랩 기본 탭버튼 변형 // 12. [DQ] 검색버튼 // 13. [DQ] 네비게이션 // 14. [DQ] 정렬버튼 // 15. [DQ] 빵가루 영역 // 16. [DQ] 기본 캐러셀 // 17. [DQ] Muuri.js 기본 스타일 - 메인 카드레이아웃 // 18. [DQ] 모달 페이드인 // 19. [DQ] 리플 댓글 // 20. [DQ] 다른 콘텐츠 더보기 // 21. [DQ] 아코디언 버튼 // 22. [BQ] fullCalendar.js 달력 // -------------------------------- .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } #codeigniter_profiler{ display: none; } // Less 변수 // -------------------------------- // 컬러 변수 @color-purple : #ff7878; //삭제 대기요망 @color-darkpurple : #ff4081; //삭제 대기요망 @color-darkpurple-alpha : rgba(85,40,120,0.75); //삭제 대기요망 @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-faf5f5 :#FAF5F5; @color-fade-alpha : rgba(0,0,0,0.8); @color-beige : #ffdbd1; @color-shellpink : #ff82ac; @color-naver : #4ec772; @color-facebook : #5a72a1; @color-instagram : #ff6e9e; @color-gre-dq1 : linear-gradient(45deg, #ff4081, #ff7878); @color-gre-black1 : linear-gradient(45deg, #333333, #666666); @color-gre-gray1 : linear-gradient(45deg, #d1d1d1, #e6e7e9); // 폰트 변수 @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; // 폰트 행간변수 @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_reporter: url('@{svg}/ico_reporter.svg'); @ico_reporter_b: url('@{svg}/ico_reporter_b.svg'); @ico_reporter_gray: url('@{svg}/ico_reporter_gray.svg'); @ico_reporter_w: url('@{svg}/ico_reporter_w.svg'); // 아이콘 - 배달 @ico_riding: url('@{svg}/ico_riding.svg'); @ico_riding_b: url('@{svg}/ico_riding_b.svg'); @ico_ridingr_gray: url('@{svg}/ico_riding_gray.svg'); @ico_riding_w: url('@{svg}/ico_riding_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.svg'); @ico_check_gray: url('@{svg}/ico_check.svg'); @ico_check_w: url('@{svg}/ico_check.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'); // -------------------------------- // 구글플레이 / 앱스토어 아이콘 @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_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'); // -------------------------------- // 디너 심볼마크 이미지 @img_dq_queen : url('@{img}/img_dq_queen.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'); // -------------------------------- // 서비스 로딩화면 애니메이션 @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. 자주쓰는 스타일 가이드 모음 // -------------------------------- // 타이포생략처리 .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; }// [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값 .box-shadow{ -webkit-box-shadow: 4px 8px 8px rgba(51,51,51,0.2), -4px -8px 8px rgba(255,255,255,0.05); -moz-box-shadow: 4px 8px 8px rgba(51,51,51,0.2), -4px -8px 8px rgba(255,255,255,0.05); -o-box-shadow: 4px 8px 8px rgba(51,51,51,0.2), -4px -8px 8px rgba(255,255,255,0.05); box-shadow: 4px 8px 8px rgba(51,51,51,0.2), -4px -8px 8px rgba(51,51,51,0.05) } .absolute-zero{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } // 1. 공통요소 // 1-1. 공통요소 - 전체 기본값 // -------------------------------- * { /*line-height: 1.6rem;*/ box-sizing: border-box} html, body { height: 100%; min-height: 100%; //overflow-x: hidden; font-size: 16px; -webkit-text-size-adjust: 100%; // 2 브라우저 텍스트 크기 통일 조정 -moz-text-size-adjust: 100%; // 2 브라우저 텍스트 크기 통일 조정 -ms-text-size-adjust: 100%; // 2 브라우저 텍스트 크기 통일 조정 //scroll-behavior: smooth; word-break: keep-all; word-wrap: break-word; } //body{ overflow-x: hidden !important; } small{ font-size: 90% !important; } // 1-2. 공통요소 - Float/Clear // -------------------------------- .clear{ clear: both; } .float-l{ float: left; } .float-r{ float: right; } // 1-3. 공통요소 - 포지션 // -------------------------------- .relative{ position: relative; } .absolute{ position: absolute; } .fixed{ position: fixed; } // 1-4. 공통요소 - 오브젝트 이미지처리 // -------------------------------- .object-fit, .object-fit-contain{ width: 100%; height: 100%; } // 1-5. 공통요소 - 타이포 생략처리 // -------------------------------- .ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .font-100{ font-weight: 100; } .font-200{ font-weight: 200; } .font-300{ font-weight: 300; } .font-400{ font-weight: 400; } .font-500{ font-weight: 500; } .font-600{ font-weight: 600; } .font-700{ font-weight: 700; } @media screen and (max-width: 1199px){ .m-font-100{ font-weight: 100; } .m-font-200{ font-weight: 200; } .m-font-300{ font-weight: 300; } .m-font-400{ font-weight: 400; } .m-font-500{ font-weight: 500; } .m-font-600{ font-weight: 600; } .m-font-700{ font-weight: 700; } } // 1-6. 공통요소 - 패딩 // ** 해당 가이드 요소는 8의 배수로 가이드 하였음. (항상 짝수형을 유지할 것.) // ** 반드시 일반형을 먼저 클래스에 작성 후에 일방향형을 사용할 것. // ** 일방향의 경우 시계방향 순서로 작성한다. // 가변 패딩 일반 : 상하좌우 | 상하 | 상 | 우 | 좌우 | 하 | 좌 // -------------------------------- .p0{ padding: 0; } .p05{ padding: 4px; } .p1{ padding: 8px; } .p2{ padding: 16px; } .p3{ padding: 24px; } .p4{ padding: 32px; } .p5{ padding: 40px; } .p6{ padding: 48px; } .p7{ padding: 56px; } .p8{ padding: 64px; } .p9{ padding: 72px; } .p10{ padding: 80px; } .p05-0{ padding: 4px 0; } .p1-0{ padding: 8px 0; } .p2-0{ padding: 16px 0; } .p3-0{ padding: 24px 0; } .p4-0{ padding: 32px 0; } .p5-0{ padding: 40px 0; } .p6-0{ padding: 48px 0; } .p7-0{ padding: 56px 0; } .p8-0{ padding: 64px 0; } .p9-0{ padding: 72px 0; } .p10-0{ padding: 80px 0; } .p05-0-0{ padding: 4px 0 0; } .p1-0-0{ padding: 8px 0 0; } .p2-0-0{ padding: 16px 0 0; } .p3-0-0{ padding: 24px 0 0; } .p4-0-0{ padding: 32px 0 0; } .p5-0-0{ padding: 40px 0 0; } .p6-0-0{ padding: 48px 0 0; } .p7-0-0{ padding: 56px 0 0; } .p8-0-0{ padding: 64px 0 0; } .p9-0-0{ padding: 72px 0 0; } .p10-0-0{ padding: 80px 0 0; } .p0-05-0-0{ padding: 0 4px 0 0; } .p0-1-0-0{ padding: 0 8px 0 0; } .p0-2-0-0{ padding: 0 16px 0 0; } .p0-3-0-0{ padding: 0 24px 0 0; } .p0-4-0-0{ padding: 0 32px 0 0; } .p0-5-0-0{ padding: 0 40px 0 0; } .p0-6-0-0{ padding: 0 48px 0 0; } .p0-7-0-0{ padding: 0 56px 0 0; } .p0-8-0-0{ padding: 0 64px 0 0; } .p0-9-0-0{ padding: 0 72px 0 0; } .p0-10-0-0{ padding: 0 80px 0 0; } .p0-05{ padding: 0 4px; } .p0-1{ padding: 0 8px; } .p0-2{ padding: 0 16px; } .p0-3{ padding: 0 24px; } .p0-4{ padding: 0 32px; } .p0-5{ padding: 0 40px; } .p0-6{ padding: 0 48px; } .p0-7{ padding: 0 56px; } .p0-8{ padding: 0 64px; } .p0-9{ padding: 0 72px; } .p0-10{ padding: 0 80px; } .p0-0-05{ padding: 0 0 4px; } .p0-0-1{ padding: 0 0 8px; } .p0-0-2{ padding: 0 0 16px; } .p0-0-3{ padding: 0 0 24px; } .p0-0-4{ padding: 0 0 32px; } .p0-0-5{ padding: 0 0 40px; } .p0-0-6{ padding: 0 0 48px; } .p0-0-7{ padding: 0 0 56px; } .p0-0-8{ padding: 0 0 64px; } .p0-0-9{ padding: 0 0 72px; } .p0-0-10{ padding: 0 0 80px; } .p0-0-0-05{ padding: 0 0 0 4px; } .p0-0-0-1{ padding: 0 0 0 8px; } .p0-0-0-2{ padding: 0 0 0 16px; } .p0-0-0-3{ padding: 0 0 0 24px; } .p0-0-0-4{ padding: 0 0 0 32px; } .p0-0-0-5{ padding: 0 0 0 40px; } .p0-0-0-6{ padding: 0 0 0 48px; } .p0-0-0-7{ padding: 0 0 0 56px; } .p0-0-0-8{ padding: 0 0 0 64px; } .p0-0-0-9{ padding: 0 0 0 72px; } .p0-0-0-10{ padding: 0 0 0 80px; } // 가변 패딩 일방향 : 상 | 우 | 하 | 좌 .p-top-0{ padding-top: 0; } .p-top-05{ padding-top: 4px; } .p-top-1{ padding-top: 8px; } .p-top-2{ padding-top: 16px; } .p-top-3{ padding-top: 24px; } .p-top-4{ padding-top: 32px; } .p-top-5{ padding-top: 40px; } .p-top-6{ padding-top: 48px; } .p-top-7{ padding-top: 56px; } .p-top-8{ padding-top: 64px; } .p-top-9{ padding-top: 72px; } .p-top-10{ padding-top: 80px; } .p-right-0{ padding-right: 0; } .p-right-05{ padding-right: 4px; } .p-right-1{ padding-right: 8px; } .p-right-2{ padding-right: 16px; } .p-right-3{ padding-right: 24px; } .p-right-4{ padding-right: 32px; } .p-right-5{ padding-right: 40px; } .p-right-6{ padding-right: 48px; } .p-right-7{ padding-right: 56px; } .p-right-8{ padding-right: 64px; } .p-right-9{ padding-right: 72px; } .p-right-10{ padding-right: 80px; } .p-bottom-0{ padding-bottom: 0; } .p-bottom-05{ padding-bottom: 4px; } .p-bottom-1{ padding-bottom: 8px; } .p-bottom-2{ padding-bottom: 16px; } .p-bottom-3{ padding-bottom: 24px; } .p-bottom-4{ padding-bottom: 32px; } .p-bottom-5{ padding-bottom: 40px; } .p-bottom-6{ padding-bottom: 48px; } .p-bottom-7{ padding-bottom: 56px; } .p-bottom-8{ padding-bottom: 64px; } .p-bottom-9{ padding-bottom: 72px; } .p-bottom-10{ padding-bottom: 80px; } .p-left-0{ padding-left: 0; } .p-left-05{ padding-left: 4px; } .p-left-1{ padding-left: 8px; } .p-left-2{ padding-left: 16px; } .p-left-3{ padding-left: 24px; } .p-left-4{ padding-left: 32px; } .p-left-5{ padding-left: 40px; } .p-left-6{ padding-left: 48px; } .p-left-7{ padding-left: 56px; } .p-left-8{ padding-left: 64px; } .p-left-9{ padding-left: 72px; } .p-left-10{ padding-left: 80px; } // 가변 패딩 md : 상하좌우 | 상하 | 상 | 우 | 좌우 | 하 | 좌 @media screen and (max-width: 1199px){ .md-p0{ padding: 0; } .md-p05{ padding: 4px; } .md-p1{ padding: 8px; } .md-p2{ padding: 16px; } .md-p3{ padding: 24px; } .md-p4{ padding: 32px; } .md-p5{ padding: 40px; } .md-p6{ padding: 48px; } .md-p7{ padding: 56px; } .md-p8{ padding: 64px; } .md-p9{ padding: 72px; } .md-p10{ padding: 80px; } .md-p05-0{ padding: 4px 0; } .md-p1-0{ padding: 8px 0; } .md-p2-0{ padding: 16px 0; } .md-p3-0{ padding: 24px 0; } .md-p4-0{ padding: 32px 0; } .md-p5-0{ padding: 40px 0; } .md-p6-0{ padding: 48px 0; } .md-p7-0{ padding: 56px 0; } .md-p8-0{ padding: 64px 0; } .md-p9-0{ padding: 72px 0; } .md-p10-0{ padding: 80px 0; } .md-p05-0-0{ padding: 4px 0 0; } .md-p1-0-0{ padding: 8px 0 0; } .md-p2-0-0{ padding: 16px 0 0; } .md-p3-0-0{ padding: 24px 0 0; } .md-p4-0-0{ padding: 32px 0 0; } .md-p5-0-0{ padding: 40px 0 0; } .md-p6-0-0{ padding: 48px 0 0; } .md-p7-0-0{ padding: 56px 0 0; } .md-p8-0-0{ padding: 64px 0 0; } .md-p9-0-0{ padding: 72px 0 0; } .md-p10-0-0{ padding: 80px 0 0; } .md-p0-05-0-0{ padding: 0 4px 0 0; } .md-p0-1-0-0{ padding: 0 8px 0 0; } .md-p0-2-0-0{ padding: 0 16px 0 0; } .md-p0-3-0-0{ padding: 0 24px 0 0; } .md-p0-4-0-0{ padding: 0 32px 0 0; } .md-p0-5-0-0{ padding: 0 40px 0 0; } .md-p0-6-0-0{ padding: 0 48px 0 0; } .md-p0-7-0-0{ padding: 0 56px 0 0; } .md-p0-8-0-0{ padding: 0 64px 0 0; } .md-p0-9-0-0{ padding: 0 72px 0 0; } .md-p0-10-0-0{ padding: 0 80px 0 0; } .md-p0-05{ padding: 0 4px; } .md-p0-1{ padding: 0 8px; } .md-p0-2{ padding: 0 16px; } .md-p0-3{ padding: 0 24px; } .md-p0-4{ padding: 0 32px; } .md-p0-5{ padding: 0 40px; } .md-p0-6{ padding: 0 48px; } .md-p0-7{ padding: 0 56px; } .md-p0-8{ padding: 0 64px; } .md-p0-9{ padding: 0 72px; } .md-p0-10{ padding: 0 80px; } .md-p0-0-05{ padding: 0 0 4px; } .md-p0-0-1{ padding: 0 0 8px; } .md-p0-0-2{ padding: 0 0 16px; } .md-p0-0-3{ padding: 0 0 24px; } .md-p0-0-4{ padding: 0 0 32px; } .md-p0-0-5{ padding: 0 0 40px; } .md-p0-0-6{ padding: 0 0 48px; } .md-p0-0-7{ padding: 0 0 56px; } .md-p0-0-8{ padding: 0 0 64px; } .md-p0-0-9{ padding: 0 0 72px; } .md-p0-0-10{ padding: 0 0 80px; } .md-p0-0-0-05{ padding: 0 0 0 4px; } .md-p0-0-0-1{ padding: 0 0 0 8px; } .md-p0-0-0-2{ padding: 0 0 0 16px; } .md-p0-0-0-3{ padding: 0 0 0 24px; } .md-p0-0-0-4{ padding: 0 0 0 32px; } .md-p0-0-0-5{ padding: 0 0 0 40px; } .md-p0-0-0-6{ padding: 0 0 0 48px; } .md-p0-0-0-7{ padding: 0 0 0 56px; } .md-p0-0-0-8{ padding: 0 0 0 64px; } .md-p0-0-0-9{ padding: 0 0 0 72px; } .md-p0-0-0-10{ padding: 0 0 0 80px; } // 가변 패딩 일방향 md : 상 | 우 | 하 | 좌 .md-p-top-0{ padding-top: 0; } .md-p-top-05{ padding-top: 4px; } .md-p-top-1{ padding-top: 8px; } .md-p-top-2{ padding-top: 16px; } .md-p-top-3{ padding-top: 24px; } .md-p-top-4{ padding-top: 32px; } .md-p-top-5{ padding-top: 40px; } .md-p-top-6{ padding-top: 48px; } .md-p-top-7{ padding-top: 56px; } .md-p-top-8{ padding-top: 64px; } .md-p-top-9{ padding-top: 72px; } .md-p-top-10{ padding-top: 80px; } .md-p-right-0{ padding-right: 0; } .md-p-right-05{ padding-right: 4px; } .md-p-right-1{ padding-right: 8px; } .md-p-right-2{ padding-right: 16px; } .md-p-right-3{ padding-right: 24px; } .md-p-right-4{ padding-right: 32px; } .md-p-right-5{ padding-right: 40px; } .md-p-right-6{ padding-right: 48px; } .md-p-right-7{ padding-right: 56px; } .md-p-right-8{ padding-right: 64px; } .md-p-right-9{ padding-right: 72px; } .md-p-right-10{ padding-right: 80px; } .md-p-bottom-0{ padding-bottom: 0; } .md-p-bottom-05{ padding-bottom: 4px; } .md-p-bottom-1{ padding-bottom: 8px; } .md-p-bottom-2{ padding-bottom: 16px; } .md-p-bottom-3{ padding-bottom: 24px; } .md-p-bottom-4{ padding-bottom: 32px; } .md-p-bottom-5{ padding-bottom: 40px; } .md-p-bottom-6{ padding-bottom: 48px; } .md-p-bottom-7{ padding-bottom: 56px; } .md-p-bottom-8{ padding-bottom: 64px; } .md-p-bottom-9{ padding-bottom: 72px; } .md-p-bottom-10{ padding-bottom: 80px; } .md-p-left-0{ padding-left: 0; } .md-p-left-05{ padding-left: 4px; } .md-p-left-1{ padding-left: 8px; } .md-p-left-2{ padding-left: 16px; } .md-p-left-3{ padding-left: 24px; } .md-p-left-4{ padding-left: 32px; } .md-p-left-5{ padding-left: 40px; } .md-p-left-6{ padding-left: 48px; } .md-p-left-7{ padding-left: 56px; } .md-p-left-8{ padding-left: 64px; } .md-p-left-9{ padding-left: 72px; } .md-p-left-10{ padding-left: 80px; } } // 가변 패딩 sm : 상하좌우 | 상하 | 상 | 우 | 좌우 | 하 | 좌 @media screen and (max-width: 991px){ .sm-p0{ padding: 0; } .sm-p05{ padding: 4px; } .sm-p1{ padding: 8px; } .sm-p2{ padding: 16px; } .sm-p3{ padding: 24px; } .sm-p4{ padding: 32px; } .sm-p5{ padding: 40px; } .sm-p6{ padding: 48px; } .sm-p7{ padding: 56px; } .sm-p8{ padding: 64px; } .sm-p9{ padding: 72px; } .sm-p10{ padding: 80px; } .sm-p05-0{ padding: 4px 0; } .sm-p1-0{ padding: 8px 0; } .sm-p2-0{ padding: 16px 0; } .sm-p3-0{ padding: 24px 0; } .sm-p4-0{ padding: 32px 0; } .sm-p5-0{ padding: 40px 0; } .sm-p6-0{ padding: 48px 0; } .sm-p7-0{ padding: 56px 0; } .sm-p8-0{ padding: 64px 0; } .sm-p9-0{ padding: 72px 0; } .sm-p10-0{ padding: 80px 0; } .sm-p05-0-0{ padding: 4px 0 0; } .sm-p1-0-0{ padding: 8px 0 0; } .sm-p2-0-0{ padding: 16px 0 0; } .sm-p3-0-0{ padding: 24px 0 0; } .sm-p4-0-0{ padding: 32px 0 0; } .sm-p5-0-0{ padding: 40px 0 0; } .sm-p6-0-0{ padding: 48px 0 0; } .sm-p7-0-0{ padding: 56px 0 0; } .sm-p8-0-0{ padding: 64px 0 0; } .sm-p9-0-0{ padding: 72px 0 0; } .sm-p10-0-0{ padding: 80px 0 0; } .sm-p0-05-0-0{ padding: 0 4px 0 0; } .sm-p0-1-0-0{ padding: 0 8px 0 0; } .sm-p0-2-0-0{ padding: 0 16px 0 0; } .sm-p0-3-0-0{ padding: 0 24px 0 0; } .sm-p0-4-0-0{ padding: 0 32px 0 0; } .sm-p0-5-0-0{ padding: 0 40px 0 0; } .sm-p0-6-0-0{ padding: 0 48px 0 0; } .sm-p0-7-0-0{ padding: 0 56px 0 0; } .sm-p0-8-0-0{ padding: 0 64px 0 0; } .sm-p0-9-0-0{ padding: 0 72px 0 0; } .sm-p0-10-0-0{ padding: 0 80px 0 0; } .sm-p0-05{ padding: 0 4px; } .sm-p0-1{ padding: 0 8px; } .sm-p0-2{ padding: 0 16px; } .sm-p0-3{ padding: 0 24px; } .sm-p0-4{ padding: 0 32px; } .sm-p0-5{ padding: 0 40px; } .sm-p0-6{ padding: 0 48px; } .sm-p0-7{ padding: 0 56px; } .sm-p0-8{ padding: 0 64px; } .sm-p0-9{ padding: 0 72px; } .sm-p0-10{ padding: 0 80px; } .sm-p0-0-05{ padding: 0 0 4px; } .sm-p0-0-1{ padding: 0 0 8px; } .sm-p0-0-2{ padding: 0 0 16px; } .sm-p0-0-3{ padding: 0 0 24px; } .sm-p0-0-4{ padding: 0 0 32px; } .sm-p0-0-5{ padding: 0 0 40px; } .sm-p0-0-6{ padding: 0 0 48px; } .sm-p0-0-7{ padding: 0 0 56px; } .sm-p0-0-8{ padding: 0 0 64px; } .sm-p0-0-9{ padding: 0 0 72px; } .sm-p0-0-10{ padding: 0 0 80px; } .sm-p0-0-0-05{ padding: 0 0 0 4px; } .sm-p0-0-0-1{ padding: 0 0 0 8px; } .sm-p0-0-0-2{ padding: 0 0 0 16px; } .sm-p0-0-0-3{ padding: 0 0 0 24px; } .sm-p0-0-0-4{ padding: 0 0 0 32px; } .sm-p0-0-0-5{ padding: 0 0 0 40px; } .sm-p0-0-0-6{ padding: 0 0 0 48px; } .sm-p0-0-0-7{ padding: 0 0 0 56px; } .sm-p0-0-0-8{ padding: 0 0 0 64px; } .sm-p0-0-0-9{ padding: 0 0 0 72px; } .sm-p0-0-0-10{ padding: 0 0 0 80px; } // 가변 패딩 일방향 sm : 상 | 우 | 하 | 좌 .sm-p-top-0{ padding-top: 0; } .sm-p-top-05{ padding-top: 4px; } .sm-p-top-1{ padding-top: 8px; } .sm-p-top-2{ padding-top: 16px; } .sm-p-top-3{ padding-top: 24px; } .sm-p-top-4{ padding-top: 32px; } .sm-p-top-5{ padding-top: 40px; } .sm-p-top-6{ padding-top: 48px; } .sm-p-top-7{ padding-top: 56px; } .sm-p-top-8{ padding-top: 64px; } .sm-p-top-9{ padding-top: 72px; } .sm-p-top-10{ padding-top: 80px; } .sm-p-right-0{ padding-right: 0; } .sm-p-right-05{ padding-right: 4px; } .sm-p-right-1{ padding-right: 8px; } .sm-p-right-2{ padding-right: 16px; } .sm-p-right-3{ padding-right: 24px; } .sm-p-right-4{ padding-right: 32px; } .sm-p-right-5{ padding-right: 40px; } .sm-p-right-6{ padding-right: 48px; } .sm-p-right-7{ padding-right: 56px; } .sm-p-right-8{ padding-right: 64px; } .sm-p-right-9{ padding-right: 72px; } .sm-p-right-10{ padding-right: 80px; } .sm-p-bottom-0{ padding-bottom: 0; } .sm-p-bottom-05{ padding-bottom: 4px; } .sm-p-bottom-1{ padding-bottom: 8px; } .sm-p-bottom-2{ padding-bottom: 16px; } .sm-p-bottom-3{ padding-bottom: 24px; } .sm-p-bottom-4{ padding-bottom: 32px; } .sm-p-bottom-5{ padding-bottom: 40px; } .sm-p-bottom-6{ padding-bottom: 48px; } .sm-p-bottom-7{ padding-bottom: 56px; } .sm-p-bottom-8{ padding-bottom: 64px; } .sm-p-bottom-9{ padding-bottom: 72px; } .sm-p-bottom-10{ padding-bottom: 80px; } .sm-p-left-0{ padding-left: 0; } .sm-p-left-05{ padding-left: 4px; } .sm-p-left-1{ padding-left: 8px; } .sm-p-left-2{ padding-left: 16px; } .sm-p-left-3{ padding-left: 24px; } .sm-p-left-4{ padding-left: 32px; } .sm-p-left-5{ padding-left: 40px; } .sm-p-left-6{ padding-left: 48px; } .sm-p-left-7{ padding-left: 56px; } .sm-p-left-8{ padding-left: 64px; } .sm-p-left-9{ padding-left: 72px; } .sm-p-left-10{ padding-left: 80px; } } // 가변 패딩 xs : 상하좌우 | 상하 | 상 | 우 | 좌우 | 하 | 좌 //@media screen and (max-width:767px) { @media screen and (max-width:1199px) { .xs-p0{ padding: 0; } .xs-p05{ padding: 4px; } .xs-p1{ padding: 8px; } .xs-p2{ padding: 16px; } .xs-p3{ padding: 24px; } .xs-p4{ padding: 32px; } .xs-p5{ padding: 40px; } .xs-p6{ padding: 48px; } .xs-p7{ padding: 56px; } .xs-p8{ padding: 64px; } .xs-p9{ padding: 72px; } .xs-p10{ padding: 80px; } .xs-p05-0{ padding: 4px 0; } .xs-p1-0{ padding: 8px 0; } .xs-p2-0{ padding: 16px 0; } .xs-p3-0{ padding: 24px 0; } .xs-p4-0{ padding: 32px 0; } .xs-p5-0{ padding: 40px 0; } .xs-p6-0{ padding: 48px 0; } .xs-p7-0{ padding: 56px 0; } .xs-p8-0{ padding: 64px 0; } .xs-p9-0{ padding: 72px 0; } .xs-p10-0{ padding: 80px 0; } .xs-p05-0-0{ padding: 4px 0 0; } .xs-p1-0-0{ padding: 8px 0 0; } .xs-p2-0-0{ padding: 16px 0 0; } .xs-p3-0-0{ padding: 24px 0 0; } .xs-p4-0-0{ padding: 32px 0 0; } .xs-p5-0-0{ padding: 40px 0 0; } .xs-p6-0-0{ padding: 48px 0 0; } .xs-p7-0-0{ padding: 56px 0 0; } .xs-p8-0-0{ padding: 64px 0 0; } .xs-p9-0-0{ padding: 72px 0 0; } .xs-p10-0-0{ padding: 80px 0 0; } .xs-p0-05-0-0{ padding: 0 4px 0 0; } .xs-p0-1-0-0{ padding: 0 8px 0 0; } .xs-p0-2-0-0{ padding: 0 16px 0 0; } .xs-p0-3-0-0{ padding: 0 24px 0 0; } .xs-p0-4-0-0{ padding: 0 32px 0 0; } .xs-p0-5-0-0{ padding: 0 40px 0 0; } .xs-p0-6-0-0{ padding: 0 48px 0 0; } .xs-p0-7-0-0{ padding: 0 56px 0 0; } .xs-p0-8-0-0{ padding: 0 64px 0 0; } .xs-p0-9-0-0{ padding: 0 72px 0 0; } .xs-p0-10-0-0{ padding: 0 80px 0 0; } .xs-p0-05{ padding: 0 4px; } .xs-p0-1{ padding: 0 8px; } .xs-p0-2{ padding: 0 16px; } .xs-p0-3{ padding: 0 24px; } .xs-p0-4{ padding: 0 32px; } .xs-p0-5{ padding: 0 40px; } .xs-p0-6{ padding: 0 48px; } .xs-p0-7{ padding: 0 56px; } .xs-p0-8{ padding: 0 64px; } .xs-p0-9{ padding: 0 72px; } .xs-p0-10{ padding: 0 80px; } .xs-p0-0-05{ padding: 0 0 4px; } .xs-p0-0-1{ padding: 0 0 8px; } .xs-p0-0-2{ padding: 0 0 16px; } .xs-p0-0-3{ padding: 0 0 24px; } .xs-p0-0-4{ padding: 0 0 32px; } .xs-p0-0-5{ padding: 0 0 40px; } .xs-p0-0-6{ padding: 0 0 48px; } .xs-p0-0-7{ padding: 0 0 56px; } .xs-p0-0-8{ padding: 0 0 64px; } .xs-p0-0-9{ padding: 0 0 72px; } .xs-p0-0-10{ padding: 0 0 80px; } .xs-p0-0-0-05{ padding: 0 0 0 4px; } .xs-p0-0-0-1{ padding: 0 0 0 8px; } .xs-p0-0-0-2{ padding: 0 0 0 16px; } .xs-p0-0-0-3{ padding: 0 0 0 24px; } .xs-p0-0-0-4{ padding: 0 0 0 32px; } .xs-p0-0-0-5{ padding: 0 0 0 40px; } .xs-p0-0-0-6{ padding: 0 0 0 48px; } .xs-p0-0-0-7{ padding: 0 0 0 56px; } .xs-p0-0-0-8{ padding: 0 0 0 64px; } .xs-p0-0-0-9{ padding: 0 0 0 72px; } .xs-p0-0-0-10{ padding: 0 0 0 80px; } // 가변 패딩 일방향 sm : 상 | 우 | 하 | 좌 .xs-p-top-0{ padding-top: 0; } .xs-p-top-05{ padding-top: 4px; } .xs-p-top-1{ padding-top: 8px; } .xs-p-top-2{ padding-top: 16px; } .xs-p-top-3{ padding-top: 24px; } .xs-p-top-4{ padding-top: 32px; } .xs-p-top-5{ padding-top: 40px; } .xs-p-top-6{ padding-top: 48px; } .xs-p-top-7{ padding-top: 56px; } .xs-p-top-8{ padding-top: 64px; } .xs-p-top-9{ padding-top: 72px; } .xs-p-top-10{ padding-top: 80px; } .xs-p-right-0{ padding-right: 0; } .xs-p-right-05{ padding-right: 4px; } .xs-p-right-1{ padding-right: 8px; } .xs-p-right-2{ padding-right: 16px; } .xs-p-right-3{ padding-right: 24px; } .xs-p-right-4{ padding-right: 32px; } .xs-p-right-5{ padding-right: 40px; } .xs-p-right-6{ padding-right: 48px; } .xs-p-right-7{ padding-right: 56px; } .xs-p-right-8{ padding-right: 64px; } .xs-p-right-9{ padding-right: 72px; } .xs-p-right-10{ padding-right: 80px; } .xs-p-bottom-0{ padding-bottom: 0; } .xs-p-bottom-05{ padding-bottom: 4px; } .xs-p-bottom-1{ padding-bottom: 8px; } .xs-p-bottom-2{ padding-bottom: 16px; } .xs-p-bottom-3{ padding-bottom: 24px; } .xs-p-bottom-4{ padding-bottom: 32px; } .xs-p-bottom-5{ padding-bottom: 40px; } .xs-p-bottom-6{ padding-bottom: 48px; } .xs-p-bottom-7{ padding-bottom: 56px; } .xs-p-bottom-8{ padding-bottom: 64px; } .xs-p-bottom-9{ padding-bottom: 72px; } .xs-p-bottom-10{ padding-bottom: 80px; } .xs-p-left-0{ padding-left: 0; } .xs-p-left-05{ padding-left: 4px; } .xs-p-left-1{ padding-left: 8px; } .xs-p-left-2{ padding-left: 16px; } .xs-p-left-3{ padding-left: 24px; } .xs-p-left-4{ padding-left: 32px; } .xs-p-left-5{ padding-left: 40px; } .xs-p-left-6{ padding-left: 48px; } .xs-p-left-7{ padding-left: 56px; } .xs-p-left-8{ padding-left: 64px; } .xs-p-left-9{ padding-left: 72px; } .xs-p-left-10{ padding-left: 80px; } } // 1-7. 공통요소 - 마진 // ** 해당 가이드 요소는 8의 배수로 가이드 하였음. (항상 짝수형을 유지할 것.) // ** 반드시 일반형을 먼저 클래스에 작성 후에 일방향형을 사용할 것. // ** 일방향의 경우 시계방향 순서로 작성한다. // 가변 마진 일반 : 상하좌우 | 상하 | 상 | 우 | 좌우 | 하 | 좌 // -------------------------------- .m0{ margin: 0; } .m05{ margin: 4px; } .m1{ margin: 8px; } .m2{ margin: 16px; } .m3{ margin: 24px; } .m4{ margin: 32px; } .m5{ margin: 40px; } .m6{ margin: 48px; } .m7{ margin: 56px; } .m8{ margin: 64px; } .m9{ margin: 72px; } .m10{ margin: 80px; } .m05-0{ margin: 4px 0; } .m1-0{ margin: 8px 0; } .m2-0{ margin: 16px 0; } .m3-0{ margin: 24px 0; } .m4-0{ margin: 32px 0; } .m5-0{ margin: 40px 0; } .m6-0{ margin: 48px 0; } .m7-0{ margin: 56px 0; } .m8-0{ margin: 64px 0; } .m9-0{ margin: 72px 0; } .m10-0{ margin: 80px 0; } .m05-0-0{ margin: 4px 0 0; } .m1-0-0{ margin: 8px 0 0; } .m2-0-0{ margin: 16px 0 0; } .m3-0-0{ margin: 24px 0 0; } .m4-0-0{ margin: 32px 0 0; } .m5-0-0{ margin: 40px 0 0; } .m6-0-0{ margin: 48px 0 0; } .m7-0-0{ margin: 56px 0 0; } .m8-0-0{ margin: 64px 0 0; } .m9-0-0{ margin: 72px 0 0; } .m10-0-0{ margin: 80px 0 0; } .m0-05-0-0{ margin: 0 4px 0 0; } .m0-1-0-0{ margin: 0 8px 0 0; } .m0-2-0-0{ margin: 0 16px 0 0; } .m0-3-0-0{ margin: 0 24px 0 0; } .m0-4-0-0{ margin: 0 32px 0 0; } .m0-5-0-0{ margin: 0 40px 0 0; } .m0-6-0-0{ margin: 0 48px 0 0; } .m0-7-0-0{ margin: 0 56px 0 0; } .m0-8-0-0{ margin: 0 64px 0 0; } .m0-9-0-0{ margin: 0 72px 0 0; } .m0-10-0-0{ margin: 0 80px 0 0; } .m0-05{ margin: 0 4px; } .m0-1{ margin: 0 8px; } .m0-2{ margin: 0 16px; } .m0-3{ margin: 0 24px; } .m0-4{ margin: 0 32px; } .m0-5{ margin: 0 40px; } .m0-6{ margin: 0 48px; } .m0-7{ margin: 0 56px; } .m0-8{ margin: 0 64px; } .m0-9{ margin: 0 72px; } .m0-10{ margin: 0 80px; } .m0-0-05{ margin: 0 0 4px; } .m0-0-1{ margin: 0 0 8px; } .m0-0-2{ margin: 0 0 16px; } .m0-0-3{ margin: 0 0 24px; } .m0-0-4{ margin: 0 0 32px; } .m0-0-5{ margin: 0 0 40px; } .m0-0-6{ margin: 0 0 48px; } .m0-0-7{ margin: 0 0 56px; } .m0-0-8{ margin: 0 0 64px; } .m0-0-9{ margin: 0 0 72px; } .m0-0-10{ margin: 0 0 80px; } .m0-0-0-05{ margin: 0 0 0 4px; } .m0-0-0-1{ margin: 0 0 0 8px; } .m0-0-0-2{ margin: 0 0 0 16px; } .m0-0-0-3{ margin: 0 0 0 24px; } .m0-0-0-4{ margin: 0 0 0 32px; } .m0-0-0-5{ margin: 0 0 0 40px; } .m0-0-0-6{ margin: 0 0 0 48px; } .m0-0-0-7{ margin: 0 0 0 56px; } .m0-0-0-8{ margin: 0 0 0 64px; } .m0-0-0-9{ margin: 0 0 0 72px; } .m0-0-0-10{ margin: 0 0 0 80px; } // 가변 마진 일방향 : 상 | 우 | 하 | 좌 | 자동 .m-top-0{ margin-top: 0; } .m-top-05{ margin-top: 4px; } .m-top-1{ margin-top: 8px; } .m-top-2{ margin-top: 16px; } .m-top-3{ margin-top: 24px; } .m-top-4{ margin-top: 32px; } .m-top-5{ margin-top: 40px; } .m-top-6{ margin-top: 48px; } .m-top-7{ margin-top: 56px; } .m-top-8{ margin-top: 64px; } .m-top-9{ margin-top: 72px; } .m-top-10{ margin-top: 80px; } .m-right-0{ margin-right: 0; } .m-right-05{ margin-right: 4px; } .m-right-1{ margin-right: 8px; } .m-right-2{ margin-right: 16px; } .m-right-3{ margin-right: 24px; } .m-right-4{ margin-right: 32px; } .m-right-5{ margin-right: 40px; } .m-right-6{ margin-right: 48px; } .m-right-7{ margin-right: 56px; } .m-right-8{ margin-right: 64px; } .m-right-9{ margin-right: 72px; } .m-right-10{ margin-right: 80px; } .m-bottom-0{ margin-bottom: 0; } .m-bottom-05{ margin-bottom: 4px; } .m-bottom-1{ margin-bottom: 8px; } .m-bottom-2{ margin-bottom: 16px; } .m-bottom-3{ margin-bottom: 24px; } .m-bottom-4{ margin-bottom: 32px; } .m-bottom-5{ margin-bottom: 40px; } .m-bottom-6{ margin-bottom: 48px; } .m-bottom-7{ margin-bottom: 56px; } .m-bottom-8{ margin-bottom: 64px; } .m-bottom-9{ margin-bottom: 72px; } .m-bottom-10{ margin-bottom: 80px; } .m-left-0{ margin-left: 0; } .m-left-05{ margin-left: 4px; } .m-left-1{ margin-left: 8px; } .m-left-2{ margin-left: 16px; } .m-left-3{ margin-left: 24px; } .m-left-4{ margin-left: 32px; } .m-left-5{ margin-left: 40px; } .m-left-6{ margin-left: 48px; } .m-left-7{ margin-left: 56px; } .m-left-8{ margin-left: 64px; } .m-left-9{ margin-left: 72px; } .m-left-10{ margin-left: 80px; } .m-top-auto { margin-top: auto; } .m-right-auto { margin-right: auto; } .m-bottom-auto { margin-bottom: auto; } .m-left-auto { margin-left: auto; } // 가변 마진 md : 상하좌우 | 상하 | 상 | 우 | 좌우 | 하 | 좌 @media screen and (max-width: 1199px){ .md-m0{ margin: 0; } .md-m05{ margin: 4px; } .md-m1{ margin: 8px; } .md-m2{ margin: 16px; } .md-m3{ margin: 24px; } .md-m4{ margin: 32px; } .md-m5{ margin: 40px; } .md-m6{ margin: 48px; } .md-m7{ margin: 56px; } .md-m8{ margin: 64px; } .md-m9{ margin: 72px; } .md-m10{ margin: 80px; } .md-m05-0{ margin: 4px 0; } .md-m1-0{ margin: 8px 0; } .md-m2-0{ margin: 16px 0; } .md-m3-0{ margin: 24px 0; } .md-m4-0{ margin: 32px 0; } .md-m5-0{ margin: 40px 0; } .md-m6-0{ margin: 48px 0; } .md-m7-0{ margin: 56px 0; } .md-m8-0{ margin: 64px 0; } .md-m9-0{ margin: 72px 0; } .md-m10-0{ margin: 80px 0; } .md-m05-0-0{ margin: 4px 0 0; } .md-m1-0-0{ margin: 8px 0 0; } .md-m2-0-0{ margin: 16px 0 0; } .md-m3-0-0{ margin: 24px 0 0; } .md-m4-0-0{ margin: 32px 0 0; } .md-m5-0-0{ margin: 40px 0 0; } .md-m6-0-0{ margin: 48px 0 0; } .md-m7-0-0{ margin: 56px 0 0; } .md-m8-0-0{ margin: 64px 0 0; } .md-m9-0-0{ margin: 72px 0 0; } .md-m10-0-0{ margin: 80px 0 0; } .md-m0-05-0-0{ margin: 0 4px 0 0; } .md-m0-1-0-0{ margin: 0 8px 0 0; } .md-m0-2-0-0{ margin: 0 16px 0 0; } .md-m0-3-0-0{ margin: 0 24px 0 0; } .md-m0-4-0-0{ margin: 0 32px 0 0; } .md-m0-5-0-0{ margin: 0 40px 0 0; } .md-m0-6-0-0{ margin: 0 48px 0 0; } .md-m0-7-0-0{ margin: 0 56px 0 0; } .md-m0-8-0-0{ margin: 0 64px 0 0; } .md-m0-9-0-0{ margin: 0 72px 0 0; } .md-m0-10-0-0{ margin: 0 80px 0 0; } .md-m0-05{ margin: 0 4px; } .md-m0-1{ margin: 0 8px; } .md-m0-2{ margin: 0 16px; } .md-m0-3{ margin: 0 24px; } .md-m0-4{ margin: 0 32px; } .md-m0-5{ margin: 0 40px; } .md-m0-6{ margin: 0 48px; } .md-m0-7{ margin: 0 56px; } .md-m0-8{ margin: 0 64px; } .md-m0-9{ margin: 0 72px; } .md-m0-10{ margin: 0 80px; } .md-m0-0-05{ margin: 0 0 4px; } .md-m0-0-1{ margin: 0 0 8px; } .md-m0-0-2{ margin: 0 0 16px; } .md-m0-0-3{ margin: 0 0 24px; } .md-m0-0-4{ margin: 0 0 32px; } .md-m0-0-5{ margin: 0 0 40px; } .md-m0-0-6{ margin: 0 0 48px; } .md-m0-0-7{ margin: 0 0 56px; } .md-m0-0-8{ margin: 0 0 64px; } .md-m0-0-9{ margin: 0 0 72px; } .md-m0-0-10{ margin: 0 0 80px; } .md-m0-0-0-05{ margin: 0 0 0 4px; } .md-m0-0-0-1{ margin: 0 0 0 8px; } .md-m0-0-0-2{ margin: 0 0 0 16px; } .md-m0-0-0-3{ margin: 0 0 0 24px; } .md-m0-0-0-4{ margin: 0 0 0 32px; } .md-m0-0-0-5{ margin: 0 0 0 40px; } .md-m0-0-0-6{ margin: 0 0 0 48px; } .md-m0-0-0-7{ margin: 0 0 0 56px; } .md-m0-0-0-8{ margin: 0 0 0 64px; } .md-m0-0-0-9{ margin: 0 0 0 72px; } .md-m0-0-0-10{ margin: 0 0 0 80px; } // 가변 마진 일방향 md : 상 | 우 | 하 | 좌 | 자동 .md-m-top-0{ margin-top: 0; } .md-m-top-05{ margin-top: 4px; } .md-m-top-1{ margin-top: 8px; } .md-m-top-2{ margin-top: 16px; } .md-m-top-3{ margin-top: 24px; } .md-m-top-4{ margin-top: 32px; } .md-m-top-5{ margin-top: 40px; } .md-m-top-6{ margin-top: 48px; } .md-m-top-7{ margin-top: 56px; } .md-m-top-8{ margin-top: 64px; } .md-m-top-9{ margin-top: 72px; } .md-m-top-10{ margin-top: 80px; } .md-m-right-0{ margin-right: 0; } .md-m-right-05{ margin-right: 4px; } .md-m-right-1{ margin-right: 8px; } .md-m-right-2{ margin-right: 16px; } .md-m-right-3{ margin-right: 24px; } .md-m-right-4{ margin-right: 32px; } .md-m-right-5{ margin-right: 40px; } .md-m-right-6{ margin-right: 48px; } .md-m-right-7{ margin-right: 56px; } .md-m-right-8{ margin-right: 64px; } .md-m-right-9{ margin-right: 72px; } .md-m-right-10{ margin-right: 80px; } .md-m-bottom-0{ margin-bottom: 0; } .md-m-bottom-05{ margin-bottom: 4px; } .md-m-bottom-1{ margin-bottom: 8px; } .md-m-bottom-2{ margin-bottom: 16px; } .md-m-bottom-3{ margin-bottom: 24px; } .md-m-bottom-4{ margin-bottom: 32px; } .md-m-bottom-5{ margin-bottom: 40px; } .md-m-bottom-6{ margin-bottom: 48px; } .md-m-bottom-7{ margin-bottom: 56px; } .md-m-bottom-8{ margin-bottom: 64px; } .md-m-bottom-9{ margin-bottom: 72px; } .md-m-bottom-10{ margin-bottom: 80px; } .md-m-left-0{ margin-left: 0; } .md-m-left-05{ margin-left: 4px; } .md-m-left-1{ margin-left: 8px; } .md-m-left-2{ margin-left: 16px; } .md-m-left-3{ margin-left: 24px; } .md-m-left-4{ margin-left: 32px; } .md-m-left-5{ margin-left: 40px; } .md-m-left-6{ margin-left: 48px; } .md-m-left-7{ margin-left: 56px; } .md-m-left-8{ margin-left: 64px; } .md-m-left-9{ margin-left: 72px; } .md-m-left-10{ margin-left: 80px; } .md-m-top-auto { margin-top: auto; } .md-m-right-auto { margin-right: auto; } .md-m-bottom-auto { margin-bottom: auto; } .md-m-left-auto { margin-left: auto; } } // 가변 마진 sm : 상하좌우 | 상하 | 상 | 우 | 좌우 | 하 | 좌 @media screen and (max-width: 991px){ .sm-m0{ margin: 0; } .sm-m05{ margin: 4px; } .sm-m1{ margin: 8px; } .sm-m2{ margin: 16px; } .sm-m3{ margin: 24px; } .sm-m4{ margin: 32px; } .sm-m5{ margin: 40px; } .sm-m6{ margin: 48px; } .sm-m7{ margin: 56px; } .sm-m8{ margin: 64px; } .sm-m9{ margin: 72px; } .sm-m10{ margin: 80px; } .sm-m05-0{ margin: 4px 0; } .sm-m1-0{ margin: 8px 0; } .sm-m2-0{ margin: 16px 0; } .sm-m3-0{ margin: 24px 0; } .sm-m4-0{ margin: 32px 0; } .sm-m5-0{ margin: 40px 0; } .sm-m6-0{ margin: 48px 0; } .sm-m7-0{ margin: 56px 0; } .sm-m8-0{ margin: 64px 0; } .sm-m9-0{ margin: 72px 0; } .sm-m10-0{ margin: 80px 0; } .sm-m05-0-0{ margin: 4px 0 0; } .sm-m1-0-0{ margin: 8px 0 0; } .sm-m2-0-0{ margin: 16px 0 0; } .sm-m3-0-0{ margin: 24px 0 0; } .sm-m4-0-0{ margin: 32px 0 0; } .sm-m5-0-0{ margin: 40px 0 0; } .sm-m6-0-0{ margin: 48px 0 0; } .sm-m7-0-0{ margin: 56px 0 0; } .sm-m8-0-0{ margin: 64px 0 0; } .sm-m9-0-0{ margin: 72px 0 0; } .sm-m10-0-0{ margin: 80px 0 0; } .sm-m0-05-0-0{ margin: 0 4px 0 0; } .sm-m0-1-0-0{ margin: 0 8px 0 0; } .sm-m0-2-0-0{ margin: 0 16px 0 0; } .sm-m0-3-0-0{ margin: 0 24px 0 0; } .sm-m0-4-0-0{ margin: 0 32px 0 0; } .sm-m0-5-0-0{ margin: 0 40px 0 0; } .sm-m0-6-0-0{ margin: 0 48px 0 0; } .sm-m0-7-0-0{ margin: 0 56px 0 0; } .sm-m0-8-0-0{ margin: 0 64px 0 0; } .sm-m0-9-0-0{ margin: 0 72px 0 0; } .sm-m0-10-0-0{ margin: 0 80px 0 0; } .sm-m0-05{ margin: 0 4px; } .sm-m0-1{ margin: 0 8px; } .sm-m0-2{ margin: 0 16px; } .sm-m0-3{ margin: 0 24px; } .sm-m0-4{ margin: 0 32px; } .sm-m0-5{ margin: 0 40px; } .sm-m0-6{ margin: 0 48px; } .sm-m0-7{ margin: 0 56px; } .sm-m0-8{ margin: 0 64px; } .sm-m0-9{ margin: 0 72px; } .sm-m0-10{ margin: 0 80px; } .sm-m0-0-05{ margin: 0 0 4px; } .sm-m0-0-1{ margin: 0 0 8px; } .sm-m0-0-2{ margin: 0 0 16px; } .sm-m0-0-3{ margin: 0 0 24px; } .sm-m0-0-4{ margin: 0 0 32px; } .sm-m0-0-5{ margin: 0 0 40px; } .sm-m0-0-6{ margin: 0 0 48px; } .sm-m0-0-7{ margin: 0 0 56px; } .sm-m0-0-8{ margin: 0 0 64px; } .sm-m0-0-9{ margin: 0 0 72px; } .sm-m0-0-10{ margin: 0 0 80px; } .sm-m0-0-0-05{ margin: 0 0 0 4px; } .sm-m0-0-0-1{ margin: 0 0 0 8px; } .sm-m0-0-0-2{ margin: 0 0 0 16px; } .sm-m0-0-0-3{ margin: 0 0 0 24px; } .sm-m0-0-0-4{ margin: 0 0 0 32px; } .sm-m0-0-0-5{ margin: 0 0 0 40px; } .sm-m0-0-0-6{ margin: 0 0 0 48px; } .sm-m0-0-0-7{ margin: 0 0 0 56px; } .sm-m0-0-0-8{ margin: 0 0 0 64px; } .sm-m0-0-0-9{ margin: 0 0 0 72px; } .sm-m0-0-0-10{ margin: 0 0 0 80px; } // 가변 마진 일방향 sm : 상 | 우 | 하 | 좌 | 자동 .sm-m-top-0{ margin-top: 0; } .sm-m-top-05{ margin-top: 4px; } .sm-m-top-1{ margin-top: 8px; } .sm-m-top-2{ margin-top: 16px; } .sm-m-top-3{ margin-top: 24px; } .sm-m-top-4{ margin-top: 32px; } .sm-m-top-5{ margin-top: 40px; } .sm-m-top-6{ margin-top: 48px; } .sm-m-top-7{ margin-top: 56px; } .sm-m-top-8{ margin-top: 64px; } .sm-m-top-9{ margin-top: 72px; } .sm-m-top-10{ margin-top: 80px; } .sm-m-right-0{ margin-right: 0; } .sm-m-right-05{ margin-right: 4px; } .sm-m-right-1{ margin-right: 8px; } .sm-m-right-2{ margin-right: 16px; } .sm-m-right-3{ margin-right: 24px; } .sm-m-right-4{ margin-right: 32px; } .sm-m-right-5{ margin-right: 40px; } .sm-m-right-6{ margin-right: 48px; } .sm-m-right-7{ margin-right: 56px; } .sm-m-right-8{ margin-right: 64px; } .sm-m-right-9{ margin-right: 72px; } .sm-m-right-10{ margin-right: 80px; } .sm-m-bottom-0{ margin-bottom: 0; } .sm-m-bottom-05{ margin-bottom: 4px; } .sm-m-bottom-1{ margin-bottom: 8px; } .sm-m-bottom-2{ margin-bottom: 16px; } .sm-m-bottom-3{ margin-bottom: 24px; } .sm-m-bottom-4{ margin-bottom: 32px; } .sm-m-bottom-5{ margin-bottom: 40px; } .sm-m-bottom-6{ margin-bottom: 48px; } .sm-m-bottom-7{ margin-bottom: 56px; } .sm-m-bottom-8{ margin-bottom: 64px; } .sm-m-bottom-9{ margin-bottom: 72px; } .sm-m-bottom-10{ margin-bottom: 80px; } .sm-m-left-0{ margin-left: 0; } .sm-m-left-05{ margin-left: 4px; } .sm-m-left-1{ margin-left: 8px; } .sm-m-left-2{ margin-left: 16px; } .sm-m-left-3{ margin-left: 24px; } .sm-m-left-4{ margin-left: 32px; } .sm-m-left-5{ margin-left: 40px; } .sm-m-left-6{ margin-left: 48px; } .sm-m-left-7{ margin-left: 56px; } .sm-m-left-8{ margin-left: 64px; } .sm-m-left-9{ margin-left: 72px; } .sm-m-left-10{ margin-left: 80px; } .sm-m-top-auto { margin-top: auto; } .sm-m-right-auto { margin-right: auto; } .sm-m-bottom-auto { margin-bottom: auto; } .sm-m-left-auto { margin-left: auto; } } // 가변 마진 xs : 상하좌우 | 상하 | 상 | 우 | 좌우 | 하 | 좌 //@media screen and (max-width:767px){ @media screen and (max-width:1199px){ .xs-m0{ margin: 0; } .xs-m05{ margin: 4px; } .xs-m1{ margin: 8px; } .xs-m2{ margin: 16px; } .xs-m3{ margin: 24px; } .xs-m4{ margin: 32px; } .xs-m5{ margin: 40px; } .xs-m6{ margin: 48px; } .xs-m7{ margin: 56px; } .xs-m8{ margin: 64px; } .xs-m9{ margin: 72px; } .xs-m10{ margin: 80px; } .xs-m05-0{ margin: 4px 0; } .xs-m1-0{ margin: 8px 0; } .xs-m2-0{ margin: 16px 0; } .xs-m3-0{ margin: 24px 0; } .xs-m4-0{ margin: 32px 0; } .xs-m5-0{ margin: 40px 0; } .xs-m6-0{ margin: 48px 0; } .xs-m7-0{ margin: 56px 0; } .xs-m8-0{ margin: 64px 0; } .xs-m9-0{ margin: 72px 0; } .xs-m10-0{ margin: 80px 0; } .xs-m05-0-0{ margin: 4px 0 0; } .xs-m1-0-0{ margin: 8px 0 0; } .xs-m2-0-0{ margin: 16px 0 0; } .xs-m3-0-0{ margin: 24px 0 0; } .xs-m4-0-0{ margin: 32px 0 0; } .xs-m5-0-0{ margin: 40px 0 0; } .xs-m6-0-0{ margin: 48px 0 0; } .xs-m7-0-0{ margin: 56px 0 0; } .xs-m8-0-0{ margin: 64px 0 0; } .xs-m9-0-0{ margin: 72px 0 0; } .xs-m10-0-0{ margin: 80px 0 0; } .xs-m0-05-0-0{ margin: 0 4px 0 0; } .xs-m0-1-0-0{ margin: 0 8px 0 0; } .xs-m0-2-0-0{ margin: 0 16px 0 0; } .xs-m0-3-0-0{ margin: 0 24px 0 0; } .xs-m0-4-0-0{ margin: 0 32px 0 0; } .xs-m0-5-0-0{ margin: 0 40px 0 0; } .xs-m0-6-0-0{ margin: 0 48px 0 0; } .xs-m0-7-0-0{ margin: 0 56px 0 0; } .xs-m0-8-0-0{ margin: 0 64px 0 0; } .xs-m0-9-0-0{ margin: 0 72px 0 0; } .xs-m0-10-0-0{ margin: 0 80px 0 0; } .xs-m0-05{ margin: 0 4px; } .xs-m0-1{ margin: 0 8px; } .xs-m0-2{ margin: 0 16px; } .xs-m0-3{ margin: 0 24px; } .xs-m0-4{ margin: 0 32px; } .xs-m0-5{ margin: 0 40px; } .xs-m0-6{ margin: 0 48px; } .xs-m0-7{ margin: 0 56px; } .xs-m0-8{ margin: 0 64px; } .xs-m0-9{ margin: 0 72px; } .xs-m0-10{ margin: 0 80px; } .xs-m0-0-05{ margin: 0 0 4px; } .xs-m0-0-1{ margin: 0 0 8px; } .xs-m0-0-2{ margin: 0 0 16px; } .xs-m0-0-3{ margin: 0 0 24px; } .xs-m0-0-4{ margin: 0 0 32px; } .xs-m0-0-5{ margin: 0 0 40px; } .xs-m0-0-6{ margin: 0 0 48px; } .xs-m0-0-7{ margin: 0 0 56px; } .xs-m0-0-8{ margin: 0 0 64px; } .xs-m0-0-9{ margin: 0 0 72px; } .xs-m0-0-10{ margin: 0 0 80px; } .xs-m0-0-0-05{ margin: 0 0 0 4px; } .xs-m0-0-0-1{ margin: 0 0 0 8px; } .xs-m0-0-0-2{ margin: 0 0 0 16px; } .xs-m0-0-0-3{ margin: 0 0 0 24px; } .xs-m0-0-0-4{ margin: 0 0 0 32px; } .xs-m0-0-0-5{ margin: 0 0 0 40px; } .xs-m0-0-0-6{ margin: 0 0 0 48px; } .xs-m0-0-0-7{ margin: 0 0 0 56px; } .xs-m0-0-0-8{ margin: 0 0 0 64px; } .xs-m0-0-0-9{ margin: 0 0 0 72px; } .xs-m0-0-0-10{ margin: 0 0 0 80px; } // 가변 마진 일방향 xs : 상 | 우 | 하 | 좌 .xs-m-top-0{ margin-top: 0; } .xs-m-top-05{ margin-top: 4px; } .xs-m-top-1{ margin-top: 8px; } .xs-m-top-2{ margin-top: 16px; } .xs-m-top-3{ margin-top: 24px; } .xs-m-top-4{ margin-top: 32px; } .xs-m-top-5{ margin-top: 40px; } .xs-m-top-6{ margin-top: 48px; } .xs-m-top-7{ margin-top: 56px; } .xs-m-top-8{ margin-top: 64px; } .xs-m-top-9{ margin-top: 72px; } .xs-m-top-10{ margin-top: 80px; } .xs-m-right-0{ margin-right: 0; } .xs-m-right-05{ margin-right: 4px; } .xs-m-right-1{ margin-right: 8px; } .xs-m-right-2{ margin-right: 16px; } .xs-m-right-3{ margin-right: 24px; } .xs-m-right-4{ margin-right: 32px; } .xs-m-right-5{ margin-right: 40px; } .xs-m-right-6{ margin-right: 48px; } .xs-m-right-7{ margin-right: 56px; } .xs-m-right-8{ margin-right: 64px; } .xs-m-right-9{ margin-right: 72px; } .xs-m-right-10{ margin-right: 80px; } .xs-m-bottom-0{ margin-bottom: 0; } .xs-m-bottom-05{ margin-bottom: 4px; } .xs-m-bottom-1{ margin-bottom: 8px; } .xs-m-bottom-2{ margin-bottom: 16px; } .xs-m-bottom-3{ margin-bottom: 24px; } .xs-m-bottom-4{ margin-bottom: 32px; } .xs-m-bottom-5{ margin-bottom: 40px; } .xs-m-bottom-6{ margin-bottom: 48px; } .xs-m-bottom-7{ margin-bottom: 56px; } .xs-m-bottom-8{ margin-bottom: 64px; } .xs-m-bottom-9{ margin-bottom: 72px; } .xs-m-bottom-10{ margin-bottom: 80px; } .xs-m-left-0{ margin-left: 0; } .xs-m-left-05{ margin-left: 4px; } .xs-m-left-1{ margin-left: 8px; } .xs-m-left-2{ margin-left: 16px; } .xs-m-left-3{ margin-left: 24px; } .xs-m-left-4{ margin-left: 32px; } .xs-m-left-5{ margin-left: 40px; } .xs-m-left-6{ margin-left: 48px; } .xs-m-left-7{ margin-left: 56px; } .xs-m-left-8{ margin-left: 64px; } .xs-m-left-9{ margin-left: 72px; } .xs-m-left-10{ margin-left: 80px; } .xs-m-top-auto { margin-top: auto; } .xs-m-right-auto { margin-right: auto; } .xs-m-bottom-auto { margin-bottom: auto; } .xs-m-left-auto { margin-left: auto; } } // 2. [DQ] 컬러 클래스 // 2-1. 컬러 일반 // * 컬러 추가할때마다 명시할것. // -------------------------------- .color-white{ color: @color-white; } .color-dq1{ color: @color-dq1; } .color-dq2{ color: @color-dq2; } .color-dq3{ color: @color-dq3; } .color-dq4{ color: @color-dq4; } .color-dq5{ color: @color-dq5; } .color-black{ color: @color-black; } .color-black2{ color: @color-black2; } .color-black3{ color: @color-black3; } .color-black6{ color: @color-black6; } .color-black9{ color: @color-black9; } .color-gray1{ color: @color-gray1; } .color-gray2{ color: @color-gray2; } .color-gray3{ color: @color-gray3; } .color-faf5f5{ color: @color-faf5f5; } .color-fade-alpha{ color: @color-fade-alpha; } .color-beige{ color: @color-beige; } .color-shellpink{ color: @color-shellpink; } .color-naver{ color: @color-naver; } .color-facebook{ color: @color-facebook; } .color-instagram{ color: @color-instagram; } // 2-2. 컬러 모바일 @media screen and (max-width: 1199px) { .m-color-white{ color: @color-white; } .m-color-dq1{ color: @color-dq1; } .m-color-dq2{ color: @color-dq2; } .m-color-dq3{ color: @color-dq3; } .m-color-dq4{ color: @color-dq4; } .m-color-dq5{ color: @color-dq5; } .m-color-black{ color: @color-black; } .m-color-black2{ color: @color-black2; } .m-color-black3{ color: @color-black3; } .m-color-black6{ color: @color-black6; } .m-color-black9{ color: @color-black9; } .m-color-gray1{ color: @color-gray1; } .m-color-gray2{ color: @color-gray2; } .m-color-gray3{ color: @color-gray3; } .m-color-faf5f5{ color: @color-faf5f5; } .m-color-fade-alpha{ color: @color-fade-alpha; } .m-color-beige{ color: @color-beige; } .m-color-shellpink{ color: @color-shellpink; } .m-color-naver{ color: @color-naver; } .m-color-facebook{ color: @color-facebook; } .m-color-instagram{ color: @color-instagram; } } // 3. [DQ] 폰트 영역 // 3-1. 폰트 패밀리 // -------------------------------- @import url(//fonts.googleapis.com/earlyaccess/kopubbatang.css); @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'); } /*/ * Copyright (c) 2015 Spoqa, Inc. * * Permission is hereby granted, free of charge, to any person obtaining * a copy of this software and associated documentation files (the * "Software"), to deal in the Software without restriction, including * without limitation the rights to use, copy, modify, merge, publish, * distribute, sublicense, and/or sell copies of the Software, and to * permit persons to whom the Software is furnished to do so, subject to * the following conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. /*/ //@font-face { // 스포카 한 산스 - 볼드 // font-family: 'Spoqa Han Sans'; // font-weight: 700; // src: local('Spoqa Han Sans'), // url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansBold.woff2') format('woff2'), // url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansBold.woff') format('woff'), // url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansBold.ttf') format('truetype'); //} @font-face { // 스포카 한 산스 - 레귤러 font-family: 'Spoqa Han Sans'; font-weight: 400; src: local('Spoqa Han Sans'), url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansRegular.woff2') format('woff2'), url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansRegular.woff') format('woff'), url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansRegular.ttf') format('truetype'); } //@font-face { // 스포카 한 산스 - 라이트 // font-family: 'Spoqa Han Sans'; // font-weight: 300; // src: local('Spoqa Han Sans'), // url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansLight.woff2') format('woff2'), // url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansLight.woff') format('woff'), // url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansLight.ttf') format('truetype'); //} //@font-face { // 스포카 한 산스 - 씬 // font-family: 'Spoqa Han Sans'; // font-weight: 100; // src: local('Spoqa Han Sans'), // url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansThin.woff2') format('woff2'), // url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansThin.woff') format('woff'), // url('/dqstatic/assets/font/SpoqaHanSans/SpoqaHanSansThin.ttf') format('truetype'); //} @font-face { // IBM 플렉스 - font-family: 'IBM Plex Sans KR'; src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Bold.eot') format('eot'); src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Bold.eot?#iefix') format('eot'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Bold.woff') format('woff'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Bold.woff2') format('woff2'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Bold.ttf') format('truetype'); font-weight: 800; } @font-face { // IBM 플렉스 - font-family: 'IBM Plex Sans KR'; src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-SemiBold.eot') format('eot'); src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-SemiBold.eot?#iefix') format('eot'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-SemiBold.woff') format('woff'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-SemiBold.woff2') format('woff2'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-SemiBold.ttf') format('truetype'); font-weight: 700; } @font-face { // IBM 플렉스 - font-family: 'IBM Plex Sans KR'; src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Medium.eot') format('eot'); src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Medium.eot?#iefix') format('eot'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Medium.woff') format('woff'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Medium.woff2') format('woff2'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Medium.ttf') format('truetype'); font-weight: 600; } @font-face { // IBM 플렉스 - font-family: 'IBM Plex Sans KR'; src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Text.eot') format('eot'); src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Text.eot?#iefix') format('eot'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Text.woff') format('woff'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Text.woff2') format('woff2'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Text.ttf') format('truetype'); font-weight: 500; } @font-face { // IBM 플렉스 - font-family: 'IBM Plex Sans KR'; src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Regular.eot') format('eot'); src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Regular.eot?#iefix') format('eot'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Regular.woff') format('woff'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Regular.woff2') format('woff2'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Regular.ttf') format('truetype'); font-weight: 400; } @font-face { // IBM 플렉스 - font-family: 'IBM Plex Sans KR'; src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Light.eot') format('eot'); src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Light.eot?#iefix') format('eot'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Light.woff') format('woff'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Light.woff2') format('woff2'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Light.ttf') format('truetype'); font-weight: 300; } @font-face { // IBM 플렉스 - font-family: 'IBM Plex Sans KR'; src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-ExtraLight.eot') format('eot'); src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-ExtraLight.eot?#iefix') format('eot'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-ExtraLight.woff') format('woff'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-ExtraLight.woff2') format('woff2'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-ExtraLight.ttf') format('truetype'); font-weight: 200; } @font-face { // IBM 플렉스 - font-family: 'IBM Plex Sans KR'; src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Thin.eot') format('eot'); src: url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Thin.eot?#iefix') format('eot'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Thin.woff') format('woff'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Thin.woff2') format('woff2'), url('/dqstatic/assets/font/IBMPlexSans/IBMPlexSansKR-Thin.ttf') format('truetype'); font-weight: 100; } * {-webkit-font-smoothing: antialiased !important; } h1, h2, h3, h4, h5, h6, p, a, td, tr, label, span, i, div { // 기본 폰트 설정 padding: 0; margin: 0; font-family: Spoqa Han Sans, sans-serif; //font-family: "IBM Plex Sans KR", sans-serif; //font-family: "Iropke Batang", sans-serif; font-weight: 500; line-height: 1.5; -webkit-font-smoothing: antialiased !important; } b,strong { font-weight: 800; } // 3-2. 폰트 기본 단위 설정 // *html rem 단위 기준 = 16px = 12pt = 1rem (중요함) // h1/h2 - 대 제목 전용 // h4/h3 - 텍스트 헤더용 // h5,h6 - 기존 텍스트용 // -------------------------------- html{ font-size: 16px; } // 16px = 12pt h1{ font-size: 2.5rem; } // 40px h2{ font-size: 2rem; } // 32px h3{ font-size: 1.5rem; } // 24px h4{ font-size: 1.125rem; } // 18px h5,p,a,button,form,input,textarea,ul,li{ font-size: 1rem; } //16px h6{ font-size: .75rem; } //12px @media screen and (max-width: 1199px) { .m-h1{ font-size: 2.5rem; } // 40px .m-h2{ font-size: 2rem; } // 32px .m-h3{ font-size: 1.5rem; } // 24px .m-h4{ font-size: 1.125rem; } // 18px .m-h5{ font-size: 1rem; } //16px .m-h6{ font-size: .75rem; } //12px } // 3-3. 폰트 정렬 .text-right{ text-align: right; } .text-center{ text-align: center; } .text-left{ text-align: left; } @media screen and (max-width: 1199px) { .md-text-right{ text-align: right; } .md-text-center{ text-align: center; } .md-text-left{ text-align: left; } } @media screen and (max-width: 991px) { .sm-text-right{ text-align: right; } .sm-text-center{ text-align: center; } .sm-text-left{ text-align: left; } } @media screen and (max-width: 767px) { .xs-text-right{ text-align: right; } .xs-text-center{ text-align: center; } .xs-text-left{ text-align: left; } } // 4. [DQ] 애니메이션 영역 // 4-1. 애니메이트 css 커스텀 // -------------------------------- .animated.delay-06s { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } @media screen and (min-width: 1200px) { // 1200px 이상에서 동작금지 .animated{ &.no-animated-sm{ -webkit-animation-duration: 0s !important; animation-duration: 0s !important; -webkit-animation-fill-mode: both; animation-fill-mode: both; } } } @media screen and (max-width: 1199px) { // 1200px 이하에서 동작금지 .animated{ &.no-animated-xs{ -webkit-animation-duration: 0s !important; animation-duration: 0s !important; -webkit-animation-fill-mode: both; animation-fill-mode: both; } } } // 4-2. 화면 로딩 이미지 // -------------------------------- #dq-load{ position: fixed; top: 0; right: 0; left: 0; z-index: 2; width: 100%; height: 100%; border-radius: 0; background: rgba(255,255,255,.7); margin: 0 auto; opacity: 1; @media screen and (max-width: 1199px){ background: #fbfbfb; //gif파일 화이트 고유 컬러값 span{ top: 50%; bottom: auto; } } &.none{ display: none !important; } span{ display: inline-block; position: absolute; top: 50%; right: 0; left: 0; width: 100px; height: 100px; margin: 0 auto; border-radius: 100px; background: @gif_dq_loading center~"/"contain no-repeat #fbfbfb; .transformY_Minus50; &:after{ display: block; position: absolute; top: -10px; right: 0; left: -10px; width: 120px; height: 120px; margin: 0 auto; border: 1px solid @color-dq1; border-bottom: 2px transparent solid; border-radius: 100px; -webkit-animation: circle 6s linear infinite; -moz-animation: circle 6s linear infinite; -o-animation: circle 6s linear infinite; animation: circle 6s linear infinite; content: ''; } &:before{ display: block; position: absolute; top: -5px; left: -5px; right: 0; width: 110px; height: 110px; margin: 0 auto; border: 1px solid @color-dq1; border-bottom: 2px transparent solid; border-radius: 100px; -webkit-animation: bcircle 6s linear infinite; -moz-animation: bcircle 6s linear infinite; -o-animation: bcircle 6s linear infinite; animation: bcircle 6s linear infinite; content: ''; } @media screen and (max-width: 1199px){ width: 60px; height: 60px; border-radius: 0; &:after{ width: 80px; height: 80px; } &:before{ width: 70px; height: 70px; } } @keyframes circle { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes bcircle { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } } } // 5. [BQ] 버튼 스타일 // 5-1. 일반 버튼 // *일반 버튼에서 버튼 클래스를 추가하는 형태로 갈 것. // 예시) 네거티브 버튼 표현시 -> class="bq-btn negative-btn" // -------------------------------- .dq-btn, .bq-btn { display: inline-block; position: relative; text-align: center; height: auto; border: 1px solid @color-dq1; border-radius: 100px; padding: 5px 8px; background: @color-dq1; color: #fff; font-size: @font-button; line-height: @line-height-5; .transition_02s; will-change: transform, opacity; resize: none; > .right{ position: absolute; top: 50%; right: 8px; width: 16px; height: 16px; background: @ico_right_bracket_w center~"/"160% no-repeat; .transformY_Minus50; &.bottom{ -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); } } &:hover, &:focus, &:active{ color: @color-white; text-decoration: none; -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); opacity: 0.9; } &.no-hover:hover,&.no-hover:focus,&.no-hover:active{ opacity: 1; transform: none; } > h1,> h2,> h3,> h4,> h5,> h6,> p, > a, > button{ margin: 0; } } @media screen and (max-width: 1199px){ body{ .bq-btn{ //height: auto; //line-height: 30px; //> h1,> h2,> h3,> h4,> h5,> h6,> p, > a, > button{ line-height: 30px; } } } } // 5-2. 그레이 버튼 // -------------------------------- .gray-btn { border: 1px solid @color-black9; background: @color-black9; color: @color-white; > .right{ background-image: @ico_right_bracket_w; } &:hover, &:focus, &:active{ color: @color-white; -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); } } // 5-3. 고스트 버튼 // -------------------------------- .ghost-btn { border: 1px solid @color-darkpurple; background: @color-white; color: @color-dq1; > .right{ background-image: @ico_right_bracket; } &:hover, &:focus, &:active{ color: @color-dq1; -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); } } // 5-4. 네거티브 버튼 // -------------------------------- .negative-btn { border: 1px solid @color-white; background: none; color: @color-white; > .right{ background-image: @ico_right_bracket; } &:hover, &:focus, &:active{ color: @color-white; -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); } } // 5-5. 블랙 버튼 // -------------------------------- .b-btn { border: 1px solid @color-black3; background: @color-black3; color: @color-white; > .right{ background-image: @ico_right_bracket_w; } &:hover, &:focus, &:active{ color: @color-white; background-color: @color-black6; -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); } } // 5-5. 디너 버튼 (2.0) // -------------------------------- .dq-button{ &-normal, &-small{ background: @color-gre-dq1; } &-normal{ padding: 12px 32px; } &-small{ padding: 7px 16px 8px; } } // 6. [DQ] 리스트 스타일 - 디테일페이지 // -------------------------------- .list-style-circle{ display: inline-block; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; background: @color-dq1; border-radius: 100px; .transformY_Minus50; } // 7. [DQ] 텍스트 폼 스타일 // -------------------------------- .bq-textarea, .bq-input, .dq-textarea, .dq-input{ display: block; position: relative; overflow-x: auto; overflow-y: hidden; height: 32px; padding: 0 16px; border: 1px solid @color-darkpurple; border-radius: 100px; color: @color-dq1; line-height: 28px; text-align: left; white-space: nowrap; resize: none; &:hover{ opacity: 0.6; } &.no-hover:hover, &.no-hover:focus, &.no-hover:active{ opacity: 1; } } // 8. [DQ] 텍스트 폼 드롭다운 메뉴 // -------------------------------- .dropdown { .bq-dropdown-btn, .dq-dropdown-btn { display: inline-block; position: relative; height: 32px; padding: 0 32px 0 16px; border: 1px solid @color-darkpurple; border-radius: 100px; resize: none; color: @color-dq1; line-height: 28px; text-align: left; .ellipsis; &:hover, &:focus, &:active { border: 1px solid @color-purple !important; color: @color-dq2; outline: none !important; } > .caret { position: absolute; top: 50%; right: 16px; .transformY_Minus50; } } .bq-dropdown-menu, .dq-dropdown-menu{ padding: 16px 0; border: 1px solid @color-darkpurple; border-radius: 16px; background: @color-dq1; color: @color-white; > li, > option { &.divider { background: @color-dq2; } > a { color: @color-white; font-size: 1rem; &:hover { background: @color-dq2; } } } } &.open { .bq-dropdown-btn, .dq-dropdown-btn { background: @color-dq1; color: @color-white; } } } // 9. [DQ] 체크박스 // -------------------------------- .bq-checkbox, .dq-checkbox { input[type=checkbox] { display: none; } input[type=checkbox] + label { display: inline-block; position: relative; padding-left: 25px; margin-right: 0; font-size: 1rem; font-weight: 400; line-height: 1rem; cursor: pointer; } input[type=checkbox] + label:before { display: inline-block; position: absolute; top: 4px; left: 0; width: 20px; height: 20px; margin-right: 10px; border: 1px solid @color-purple; border-radius: 100px; background-color: #fff; content: ""; } input[type=checkbox]:checked + label:before { border: 1px solid @color-darkpurple; background: @color-dq1; color: #fff; font-size: 18px; font-weight: 800; line-height: 18px; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); content: "\2713"; /* 체크모양 */ } } // 10. [DQ] 라디오 버튼 // -------------------------------- select{ &::-ms-expand{ display: none; } } .dq-select{ display: inline-block; position: relative; min-width: 200px; height: auto; vertical-align: top; select{ position: relative; z-index: 1; width: 100%; height: 100%; padding: 8px 16px; border: 1px @color-dq1 solid; border-radius: 100px; outline: none; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: @font-size-5; line-height: 1rem; &::-ms-expand{ display: none; } } &: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: ''; } } // 10. [DQ] 라디오 버튼 // -------------------------------- .bq-radio, .dq-radio { position: relative; input[type="radio"] { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip:rect(0,0,0,0); } input[type="radio"] + label { display: inline-block; position: relative; padding-left: 24px; margin: 0 8px 0 0; font-size: @font-size-5; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } input[type="radio"] + label:before { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border: 1px solid @color-purple; border-radius: 100%; background: #fafafa; text-align: center; content: ''; } input[type="radio"]:checked + label:before { border-color: @color-dq1; background: @color-dq1; } input[type="radio"]:checked + label:after { position: absolute; top: 9px; left: 7px; width: 6px; height: 6px; border-radius: 100%; background: @color-white; content: ''; } } // 11. [DQ] 탭버튼 - 부트스트랩 기본 탭버튼 변형 // -------------------------------- .dq-tabs,.bq-tabs{ .nav-tabs{ border-bottom: 1px @color-darkpurple solid; > li{ > a{ height: 40px; padding: 0 16px; border-radius: 0; color: @color-black3; line-height: 40px; &:hover{ border: 1px solid @color-purple; border-bottom-color: @color-darkpurple; background: @color-gray1 !important; } } } > li.active{ > a, > a:hover, > a:focus, > a:active{ border: 1px solid @color-darkpurple; border-bottom-color: @color-white; color: @color-dq1; font-weight: 700; } } > li.hover,li.focus{ border: none; background: none; } } } // 12. [DQ] 검색버튼 // -------------------------------- .bq-search{ padding: 0 8px 0 16px; &-input{ float: left; width: -webkit-calc(~"100% - 40px"); width: -moz-calc(~"100% - 40px"); width: calc(~"100% - 40px"); height: 38px; padding: 0; border: none; background: none; outline: none; .transition_02s; will-change: transform; &:focus{ padding: 0 8px; border-right: 1px @color-darkpurple solid; } &:before{ position: absolute; bottom: 2px; left: 5px; width: 10px; height: 20px; background: @color-dq1; } } &-btn{ float: right; width: 40px; height: 40px; border: none; background: @search center 6px~"/"64% no-repeat; outline: none; .transition_02s; will-change: transform; &:hover{ background: @search_purple center 6px~"/"64% no-repeat; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } } } // 13. [DQ] 네비게이션 // -------------------------------- .bq-nav{ text-align: center; .nav-tabs{ border: none; > li{ display: inline-block; float: none; border: none; > a{ padding: 0 16px; color: @color-black9; font-size: @font-size-4; &:hover{ border: 1px solid @color-white; border-bottom-color: @color-purple; background: none; color: @color-dq2; } } } > li.active{ border: none; > a, > a:hover, > a:focus{ border: none; color: @color-dq1; font-weight: 700; } > .arrow, > .arrow:hover, > .arrow:focus{ &:before{ display: inline-block; position: absolute; top: 32px; right: 0; left: 0; width: 0; height: 0; margin: 0 auto; border-right: 8px solid transparent; border-bottom: 12px solid @color-dq1; border-left: 8px solid transparent; content: ''; } } } } .tab-content{ width: auto; padding: 0 16px; > li.active{ display: inline-block; height: auto; padding: 0 16px; word-break: keep-all; &:hover{ opacity: 1; } > a{ display: inline-block; padding: 0 8px; color: @color-dq1; font-size: @font-size-6; &:hover{ font-weight: 700; } &.active{ font-weight: 700; text-decoration: underline; } } } } } // 14. [DQ] 정렬버튼 // -------------------------------- .bq-sortbtn{ > a, > button{ padding: 0 8px 2px; border: 1px solid @color-dq1; color: @color-dq1; &:hover{ color: @color-dq2; } &.active{ border-bottom: 3px @color-dq2 solid; font-weight: 700; } } } // 15. [DQ] 빵가루 영역 // -------------------------------- .bq-breadcrumb{ background: none; margin: 0; .breadcrumb-item{ > a{ color: @color-black6; font-size: @font-size-6; } &+li:before{ width: 12px; height: 12px; position: relative; bottom: 3px; padding: 0 6px; margin: 0 8px 0 4px; background: @chevron_darkpurple_right no-repeat; color: @color-dq1; font-size: 8px; content: ''; } &.active{ color: @color-dq2; font-size: @font-size-6; } } } // 16. [DQ] 기본 캐러셀 // -------------------------------- .bq-carousel{ //메인 배너 슬릭슬라이드 max-width: 1256px; max-height: 350px; overflow: hidden; padding: 0 8px; margin: 0 auto; .carousel-indicators{ bottom: 0; z-index: 9; } .carousel-inner{ .item{ -webkit-transition: transform .4s ease-in-out; -moz-transition: transform .4s ease-in-out; -o-transition: transform .4s ease-in-out; transition: transform .4s ease-in-out; cursor: pointer; will-change: transform; > img{ width: 100%; } } } .carousel-control{ margin: 0 8px; background: none; opacity: 0; > span{ width: 24px; height: 24px; position: absolute; top:50%; right: 0; left: 0; margin: 0 auto; .transition_02s; .transformY_Minus50; } &.left{ background: -webkit-linear-gradient(to right,rgba(0,0,0,.2) 0,rgba(0,0,0,.0001) 100%), -moz-linear-gradient(to right,rgba(0,0,0,.2) 0,rgba(0,0,0,.0001) 100%), -ms-linear-gradient(to right,rgba(0,0,0,.2) 0,rgba(0,0,0,.0001) 100%), -o-linear-gradient(to right,rgba(0,0,0,.2) 0,rgba(0,0,0,.0001) 100%), linear-gradient(to right,rgba(0,0,0,.2) 0,rgba(0,0,0,.0001) 100%); .transition_02s; opacity: 0; &:hover{ opacity: 1; } > span{ right: 80px; background: @chevron_w_left no-repeat; } } &.right{ background: -webkit-linear-gradient(to left,rgba(0,0,0,.1) 0,rgba(0,0,0,.0001) 100%), -moz-linear-gradient(to left,rgba(0,0,0,.1) 0,rgba(0,0,0,.0001) 100%), -ms-linear-gradient(to left,rgba(0,0,0,.1) 0,rgba(0,0,0,.0001) 100%), -o-linear-gradient(to left,rgba(0,0,0,.1) 0,rgba(0,0,0,.0001) 100%), linear-gradient(to left,rgba(0,0,0,.1) 0,rgba(0,0,0,.0001) 100%); .transition_02s; opacity: 0; &:hover{ opacity: 1; } > span{ left: 80px; background: @chevron_w_right no-repeat; } } } } @media screen and (max-width:767px){ .bq-carousel{ padding: 0; .carousel-inner{ width: 125%; left: 50%; .transformY_Minus50; } .carousel-control{ margin: 0; &.left,&.right{ span{ right: 0; left: 0; } } } } } // 17. [DQ] Muuri.js 기본 스타일 - 메인 카드레이아웃 // -------------------------------- .dq-home, .dq-home + section, .dq-home + section + section, .dq-home + section + section + section { .dq-grid { .item { width: 24.8%; //4분할 임시 &:nth-of-type(n+9) { display: none; } @media screen and (max-width: 1199px) { left: 0.02%; width: 49.8%; } } } } //.dq-home + section + section { // .dq-grid { // .item { // width: 19.8%; // } // } //} .dq-grid #taste_list { .item > div > a { padding-bottom: 100%; } } .dq-grid #posts, .dq-grid #dqpass_list{ .item { width: 24.8%; //4분할 임시 @media screen and (max-width: 767px) { left: 0.02% !important; width: 49.8% !important; } } } .dq-grid #posts { .item { width: 16.5%; @media screen and (max-width:1199px) { width: 33.33%; } @media screen and (max-width: 767px) { width: 48.8%; } } } .dq-grid, .dq-wrap{ display: block; position: relative; width: 100%; max-width: 90%; margin: 0 auto; line-height: 0; .clearAfter; .dq-modal-success-grid-wrap > .item{ width: 24.8%; //4분할 } .item{ // 그리드의 너비/높이 비율 조정 (1:1) position: absolute; left: 0.1% !important; z-index: 1; float: left; //width: 24.8%; //4분할 width: 16.5%; // 6분할 will-change: transform, left, top; } &-wrap{ // 1. 메인 페이지 그리드 시작 지점. position: relative; left: 0.4%; // 화면 중앙 &-content{ // 1-1. 그리드 wrap width: -webkit-calc(~"100% - 32px"); width: -moz-calc(~"100% - 32px"); width: calc(~"100% - 32px"); margin: 16px 16px 48px; text-align: center; will-change: transform, opacity; .clearAfter; > a{ // 1-1-1. 상단 이미지 및 링크 영역 display: block; position: relative; z-index: 1; // 사파리 radius 버그 대용 overflow: hidden; height: 0; padding-bottom: 56.28%; border-radius: 8px; background: @color-gray2; &.post{ padding-bottom: 100%; &:hover{ img{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 0.7; } } } &:hover{ 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); } } .item-content-img{ .absolute-zero; z-index: -1; // 사파리 radius 버그 대용 .package_ico, .reporter_ico, .riding_ico { // 1-1-1-1. *배송딜 표시 배너 (독립표시) width: 48px; height: 48px; position: absolute; top: 8px; right: 8px; z-index: 1; border-radius: 100px; border: 1px solid @color-dq1; background: @ico_package center~"/"80% no-repeat @color-white; //background: @ico_reporter center~"/"100% no-repeat @color-white; &:after{ display: none; position: absolute; right: 0; bottom: 5px; left: 0; padding-left: .1rem; margin: 0 auto; color: @color-dq1; font-size: @font-size-6; font-weight: 700; letter-spacing: .1rem; line-height: 1rem; content: '배송'; } } .riding_ico { background: @ico_riding center~"/"70% no-repeat @color-white; &:after { content: '배달'; } } .reporter_ico { background: @ico_reporter center~"/"80% no-repeat @color-white; &:after { content: '기자단'; } } .premium_banner { // 1-1-1-2. *프리미엄딜 표시 배너 (독립표시) display: block; position: absolute; z-index: 1; width: 100%; height: 100%; background: @img_premium center ~"/" cover no-repeat; } .taste-status{ // 1-1-1-3. 기본 상태 배너 // status-a : 신청중 // status-b : 신청마감 // status-c : 신청중 (오늘마감) // status-d : 신청예정 display: inline-block; position: absolute; top: -7.322px; bottom: 0; left: -32.322px; z-index: 2; 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; &.status-a{ // 신청중 background: @color-dq1; &:after{ position: absolute; top: auto; right: 0; bottom: 4px; left: 0; color: @color-white; font-size: @font-size-5; font-weight: 700; text-align: center; line-height: @line-height-5; content: '신청중'; } } &.status-b{ // 신청마감 width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.85); -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; &:before{ display: block; position: absolute; top: -webkit-calc(~"50% - 48px"); top: -moz-calc(~"50% - 48px"); top: calc(~"50% - 48px"); right: 0; left: 0; height: 48px; width: 48px; margin: 0 auto; background: @ico_ban_gray no-repeat; content: ''; } &:after{ display: inline-block; position: absolute; top: 50%; right: 0; left: 0; height: auto; padding-left: 1rem; color: @color-black9; font-size: @font-size-4; font-weight: 100; text-align: center; letter-spacing: 1rem; content: '신청마감'; } } &.status-c{ // 신청중 (오늘마감) background: @color-dq1; &:after{ position: absolute; top: auto; right: 0; bottom: 4px; left: 0; color: @color-white; font-size: @font-size-5; font-weight: 700; text-align: center; line-height: @line-height-5; content: '신청중'; } } &.status-d{ // 신청예정 top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; &:before{ display: block; position: absolute; top: -webkit-calc(~"50% - 48px"); top: -moz-calc(~"50% - 48px"); top: calc(~"50% - 48px"); right: 0; left: 0; height: 48px; width: 48px; margin: 0 auto; background: @ico_timer_w no-repeat; content: ''; } &:after{ display: inline-block; position: absolute; top: 50%; right: 0; left: 0; height: auto; padding-left: 1rem; color: @color-white; font-size: @font-size-4; font-weight: 100; letter-spacing: 1rem; text-align: center; line-height: @line-height-6; content: '신청예정'; } } } .mypage-status{ .absolute-zero; z-index: 1; background: rgba(0,0,0,0.5); // 이상 차일드의 경우 renew.css에 참고할것 } } img{ .object-fit-cover; -webkit-transition: 0.16s; -moz-transition: 0.16s; -o-transition: 0.16s; transition: 0.16s; cursor: pointer; will-change: transform, opacity; } } &-text{ // 1-1-2. 하단 텍스트 정보 영역 float: left; width: 100%; h4 { font-size: @font-size-5; } > div{ display: inline-block; float: left; max-width: 100%; font-size: @font-size-6; > span{ display: inline-block; float: left; width: 25px; height: 25px; } p { max-width: 100%; float: left; color: @color-black9; } } &-like > span{ background: @ico_heart_o_gray center~"/"140% no-repeat; } &-comment > span{ background: @ico_comment_o_gray center~"/"140% no-repeat; } &-taste p{ color: @color-dq1; .status-a{ color: @color-dq1; } //일반형 .status-b{ } .status-c{ display: inline-block; position: relative; padding: 0 0 0 28px; border-radius: 100px; background: @color-white; color: @color-dq1; &:before{ display: inline-block; position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 100px; background: @color-dq1; color: @color-white; font-size: @font-size-5; font-weight: 700; text-align: center; line-height: 22px; content: '!'; } } .status-d{ color: @color-black9; } //신청예정 } &-cancel-btn{ float: right; clear: both; } // 마이페이지 취소 버튼 } } } } @media screen and (max-width: 1199px) { .dq-grid, .dq-wrap{ max-width: 1199px; .item{ left: 0.03%; width: 33.3%; } &-wrap{ &-content{ overflow: hidden; margin: 0 16px 32px; border-radius: 8px; -webkit-animation-delay: .3s !important; -moz-animation-delay: .3s !important; -o-animation-delay: .3s !important; animation-delay: .3s !important; a{ border-radius: 4px; .item-content-img { // 그리드 콘텐츠 이미지 .package_ico, .reporter_ico, .riding_ico { width: 32px; height: 32px; top: 4px; right: 4px; border: 1px solid @color-dq1; background-size: 90%; box-shadow: none; } .taste-status { top: -5.4915px; left: -24.2415px; width: 75px; height: 38px; &:after { font-size: 0.75rem; line-height: 38px; } &.status-a{ &:after{ top: 12px; font-size: 0.75rem; } } &.status-b{ &:before{ top: -webkit-calc(~"50% - 24px"); top: -moz-calc(~"50% - 24px"); top: calc(~"50% - 24px"); width: 24px; height: 24px; } &:after{ top: -webkit-calc(~"50% - 8px"); top: -moz-calc(~"50% - 8px"); top: calc(~"50% - 8px"); padding-left: 0.4rem; font-size: @font-size-6; letter-spacing: 0.4rem; } } &.status-c{ &:after{ top: 12px; font-size: 0.75rem; } } &.status-d{ &:before{ top: -webkit-calc(~"50% - 24px"); top: -moz-calc(~"50% - 24px"); top: calc(~"50% - 24px"); width: 24px; height: 24px; } &:after{ top: -webkit-calc(~"50% - 8px"); top: -moz-calc(~"50% - 8px"); top: calc(~"50% - 8px"); padding-left: .4rem; font-size: @font-size-6; letter-spacing: .4rem; } } } } } &-text{ h1,h2,h3,h4,h5,h6{ font-size: @font-size-6; } > div{ p{ font-size: @font-size-6; line-height: 25px; } } &-taste{ p{ .status-c{ padding: 0 0 0 20px; &:before{ width: 16px; height: 16px; font-size: @font-size-6; line-height: 16px; } } .status-d{ .timer{ display: none; width: 18px; height: 18px; background-size: 130%; } } } } &-cancel-btn{ display: block; right: 5%; bottom: -8px; left: 0; width: 100%; height: 24px; margin: 0 auto; font-size: @font-size-6; line-height: 24px; } } } } } } @media screen and (max-width: 767px) { .dq-grid, .dq-wrap{ max-width: 100%; .item{ left: 0.02%; width: 49.8%; } &-wrap{ &-content{ width: -webkit-calc(~"100% - 32px"); width: -moz-calc(~"100% - 32px"); width: calc(~"100% - 32px"); margin: 0 16px 32px; > a{ padding-bottom: 74.98%; border-radius: 3%; } &-text{ h1,h2,h3,h4,h5,h6{ padding-bottom: 4px; font-size: @font-size-6; } > div{ > span{ width: 16px; height: 16px; } p{ max-width: 100%; font-size: @font-size-6; line-height: 16px; } } } } } } } // 18. [DQ] 모달 페이드인 // -------------------------------- .modal-backdrop.in{ background: rgba(0,0,0,0.8); opacity: 1; } // 19. [DQ] 리플 댓글 // -------------------------------- .dq-reply1{ position: relative; min-height: 48px; border-bottom: 1px @color-gray2 solid; &-left{ position: absolute; width: 48px; &-profile{ &-img{ display: inline-block; float: left; width: 40px; height: 40px; img{ border: 1px solid @color-gray2; border-radius: 100px; .object-fit-cover; } } } } &-right{ width: 100%; padding-left: 64px; &-profile{ &-user{ display: block; font-weight: 500; line-height: 28px; } &-date{ display: block; line-height: 28px; } } p{ display: block; } } // 리플 댓글 버튼 &-comment { display: inline-block; position: relative; width: 100%; max-width: 767px; margin: 0 auto; border-bottom: 1px @color-gray2 solid; &-btn{ width: 100%; float: left; textarea{ width: 100%; min-height: 80px; padding: 8px; border: 2px solid @color-gray3; resize: none; } button{ float: right; border-radius: 0 100px 100px 100px; @media screen and (max-width: 767px){ width: 75%; border-radius: 1000px; } } &-name{ padding: 8px; text-align: left; } } } } // 20. [DQ] 다른 콘텐츠 더보기 // -------------------------------- .dq-other-more{ text-align: center; &-title{ margin-bottom: 16px; border-top: 1px @color-gray2 solid; a{ position: absolute; right: 0; } } &-body{ display: inline-block; position: relative; width: 100%; max-width: 1280px; margin: 0 auto; > a{ position: absolute; top: -48px; right: 20px; z-index: 1; height: 32px; border: none; border-radius: 0; background: none; color: @color-dq1; line-height: 32px; .right{ display: inline-block; float: right; position: absolute; top: 18px; right: 0; width: 24px; height: 24px; background: @ico_right_double_bracket center~"/"140% no-repeat; } } } } // 21. [DQ] 아코디언 버튼 // -------------------------------- @media screen and (max-width: 767px) { .bq-accordion{ display: block; margin: 16px 0 0; &-btn{ display: block; padding: 0 0 8px; margin: 8px 0 0; border-bottom: 1px @color-purple solid; color: @color-dq1; &:hover, &:focus, &:active{ color: @color-dq1; } &:after{ display: inline-block; float: right; position: relative; top: 4px; right: 12px; width: 16px; height: 16px; background: @chevron_darkpurple_left no-repeat; .transition_02s; content: ''; } &.active{ &:after{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } } } > .panel{ overflow: hidden; max-height: 0; padding: 0; margin: 0; border: none; border-radius: 0; background-color: @color-faf5f5; -webkit-transition: max-height 0.2s ease-out; -moz-transition: max-height 0.2s ease-out; -o-transition: max-height 0.2s ease-out; transition: max-height 0.2s ease-out; > li{ padding: 4px 0; border-bottom: 1px #fff solid; > a{ display: block; width: 100%; height: 100%; padding: 0 8px; color: @color-black6; font-size: @font-size-6; line-height: @line-height-5; &:hover{ border-radius: 100px; background: @color-dq2; color: @color-white; } } } } } } // 22. [BQ] fullCalendar.js 달력 // -------------------------------- .taste-calendar{ &-wrap{ display: inline-block; .today-icon{ display: inline-block; position: relative; top: 4px; width: 32px; max-width: 32px; height: 16px; margin: 0 0 0 4px; border: 1px solid @color-purple; } h6{ float: left; margin: 0 0 16px !important; } &-date{ text-align: right; } } .fc{ &-header-toolbar{ /* 캘린더 헤더 */ float: left; width: 100%; height: 44px; margin: 0 !important; @media screen and (max-width:767px){ margin: 0 !important; } .fc { &-center { display: inline-block; position: relative; width: 100px; height: 40px; h2{ position: absolute; right: 0; bottom: 12px; left: 0; font-size: @font-size-5; } } &-left, &-right { button { width: 40px; height: 40px; padding: 0; border: none; background: none center~"/"80% !important; font-size: @font-size-3; outline: none; box-shadow: none; } } &-left{ button{ background: @ico_left_bracket no-repeat; font-size: 0; } } &-right{ button{ background: @ico_right_bracket no-repeat; font-size: 0; } } } } &-view-container{ float: left; } &-head{ border-bottom: 16px transparent solid; background: none; color: @color-black3; .fc-day-header{ border: none; } } &-body{ .fc{ &-scroller{ overflow: hidden; height: auto !important; } // 스크롤담당 &-row{ height: 40px !important; min-height: inherit !important; } // 전체 height 조정 &-bg{ .fc-today{ padding: 2px; background: @color-white; &:after{ display: block; position: relative; top: 0; width: 80%; height: 14px; padding: 0; margin: 0 auto; border: 1px solid @color-purple; background: @color-white; font-size: 8px; content: ''; } } } &-content-skeleton{ // 윗마디 / 아랫마디 padding: 0; thead{ // 윗마디 border-bottom: 5px transparent solid; td{ text-align: center; line-height: 1.2rem !important; span{ width: 100%; padding: 0; color: @color-black6; font-weight: 300; line-height: 1.2rem !important; } } } tbody{ // 아랫마디 td{ a{ height: 10px; padding: 0 4px; margin: 0 2px; border: none; border-radius: 100px; font-size: 0; text-align: center; @media screen and (max-width:767px){ font-size: 0; } &.step01, &.step03{ text-align: left; span{ position: relative; bottom: 4px; } } &.step01{ top: 2px; border: 1px solid @color-dq3; background: @color-dq3; opacity: 0.8; } &.step02{ border: none; background: none; &:after{ position: absolute; top: 0; right: 0; left: 0; width: 30px; margin: 0 auto; border-radius: 8px; background: @color-dq1; color: #fff; font-size: 8pt; line-height: 16px; content: '발표'; } } &.step03{ top: 2px; border: 1px solid @color-dq2; background: @color-dq2; opacity: 0.8; } } } } } } } table{ td,tr{ border: none; } } } } //ios 모달 스크롤시 커서 비고정 이슈 /* Apply CSS to iOS affected versions only */ body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }