common map

BUTTON
name	structure	class
1. Text Button1	Learn more Learn more Show more Show more 참고 .btn--invert : 까만글씨 .white : 아이콘배경 흰색 .btn--plus : 아이콘 플러스 모양	.btn.btn--round .btn.btn--round.white .btn.btn--round.btn--invert .btn.btn--round.btn--invert.btn--plus
2. Text Button2	Learn more Learn more View all results View all results View all results 참고 .white : 흰 글씨 .btn--bg : 배경색 O	.btn.btn--arrow .btn.btn--arrow.white .btn.btn--arrow.btn--bg .btn.btn--bg .btn.btn--ghost
3. Text-Line Button		.btn.btn--round.btn--line
4. Icon Button	참고 .btn.btn--zoom : tablet/mobile 에서만 사용	.btn.btn--zoom .btn.btn--zoom.out .icon-question
5. Video Button	참고 정지표시가 기본 상태 재생표시로 바꾸려면 클래스명 'is-play' 추가 (.video-wrap) 내부에 있어야 스타일 제대로 먹힘	.btn.btn--play .btn.btn--play.is-play
6. Paging Box	1 2 3 4 5 참고 페이지 이동버튼 비활성화시 클래스명 'disabled' 추가 활성화된 페이지 표시시 클래스명 'is-active' 추가	.paging-box

ETC
name	structure	class
1. Select Box	참고 흰 배경이 기본 어두운 배경인 경우 (.select-box)에 클래스명 'dark' 추가 각진 스타일인 경우 (.select-box)에 클래스명 'rect' 추가 기본 스타일은 (.select-box)로 잡혀있지만 높이 계산 후 초기화를 위해 (.select-wrap) 엘리먼트로 감싸줘야 함	.select-wrap
2. Select Box + Search	검색어	.select-search-box
3. Slider Prev/Next Button	Slide 참고 Swiper 기본 클래스 사용시 스타일 적용됨 swiper-button-next swiper-button-prev	.swiper-button-next .swiper-button-prev
3. RADIO/CHECKBOX	All Passenger car/SUV/Van Truck/Bus c1 c2 c3 c4 c5 c6	.radio-box .checkbox .checkbox.input-block
4. Tab - Link Type	Europe North America Asia Oceania 참고 링크 이동인 경우에 사용 블록이 들어가는 자리의 크기가 정해져 있어야 스크롤이 정상적으로 생성	.tab-link-box
5. Tab - Block Type	참고 탭 전환인 경우에 사용 ! 구조 변경 가능성 있음. 라인모션 추가시 변경 필요 ! 탭 블록 자리의 크기가 정해져 있어야 스크롤이 정상적으로 생성	.tab-block-box
6. Popup	COOOOO TTTTTTTTTTTT TITLE HERE 참고 .popup_wrapper로 반드시 감싸줘야 함 팝업 여는 버튼 필수값 : 클래스명 : pop_btn 데이터셋 : data-popup="열고자하는 팝업 ID값" 셀렉트 타입 팝업, 팝업 여는 버튼 (모바일) : 기본 구조, 추가 필수값 반드시 확인 [21.12.07] hbs 내의 popup_wrapper id -> class 로 변경. scss 셀렉터는 #popup_wrapper 로 동일	.tab-block-box