@charset "utf-8"; /* ---------------------------------- Name: map-service.css Categorie : 지도서비스 Author : 이상혁 Version : v.1.0 Created : 2021-06-01 Last update : 2021-06-01 ------------------------------------- Table of contents 01. 레이아웃 02. 테이블 스타일 03. 스타일 */ /* =================================== 레이아웃 시작 ====================================== */ .global-link-wrapper .btn, .ground-info-left-treeview *, .animation-inactive *, .map-wrapper { transition-timing-function: inherit; transition-duration: 0s; } * { transition-timing-function: none; -ms-transition-timing-function: none; -moz-transition-timing-function: none; -webkit-transition-timing-function: none; -o-transition-timing-function: none; transition-duration: .0s; -ms-transition-duration: .0s; -moz-transition-duration: .0s; -webkit-transition-duration: .0s; -o-transition-duration: .0s; } *:hover { transition-timing-function: none; -ms-transition-timing-function: none; -moz-transition-timing-function: none; -webkit-transition-timing-function: none; -o-transition-timing-function: none; transition-duration: .0s; -ms-transition-duration: .0s; -moz-transition-duration: .0s; -webkit-transition-duration: .0s; -o-transition-duration: .0s; } .animation-type1 { transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -ms-transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; } body, html { height: auto; } body, .navbar, .parallax, .page-footer, .page-content-wrapper, .nav-header-container, .menu-all-popup-wrapper .mfp-container { min-width: 1280px; } .page-content-wrapper, .navbar-global-wrapper, .navbar-collapse-wrapper, .page-footer .page-footer-inner { width: auto; } .page-container { margin-top: 0px; } .page-footer { height: 76px; padding: 15px 30px; z-index: 1; } .page-content { padding: 0px 0px 0px 340px; } .page-content-wrapper { background-color: #f9f9f9; } .page-content-inner { position: relative; padding: 30px; } .page-sidebar-wrapper { position: relative; width: 340px; margin-top: auto; padding-bottom: 0px; background-color: #fff; box-shadow: 4px 0px 10px rgba(0,0,0,0.2); z-index: 2; } .sidebar-toggler { position: absolute; display: block; width: 30px; height: 60px; text-indent: -9999em; top: 50%; left: 340px; margin-top: -30px; box-shadow: 3px 0px 3px rgba(0,0,0,0.2); border-radius: 5px; } .sidebar-toggler a { font-size: 0; display: block; width: 100%; height: 100%; background: url(../../com/img/map-service/btn/btn_left_map.png) no-repeat; } .sidebar-toggler a.active { background-position: 0 -60px; } .sidebar-top-toggler { position: absolute; display: block; width: 60px; height: 30px; text-indent: -9999em; top: 70px; left: 50%; margin-left: -30px; box-shadow: 0px 3px 3px rgba(0,0,0,0.2); border-radius: 5px; z-index: 9; } .sidebar-top-toggler a { font-size: 0; display: block; width: 100%; height: 100%; background: url(../../com/img/map-service/btn/btn_top_map.png) no-repeat; } .sidebar-top-toggler a.active { background-position: -60px 0px; } .sidebar-right-toggler { position: absolute; display: block; width: 30px; height: 60px; text-indent: -9999em; top: 50%; left: -30px; margin-top: -30px; box-shadow: 0px 3px 3px rgba(0,0,0,0.2); border-radius: 5px; } .sidebar-right-toggler a { font-size: 0; display: block; width: 100%; height: 100%; background: url(../../com/img/map-service/btn/btn_right_map.png) no-repeat; } .sidebar-right-toggler a.active { background-position: 0 -60px; } .page-sidebar { overflow-y: auto; padding: 12px; } .page-sidebar-closed .page-sidebar-wrapper { width: 0px; } .page-sidebar-closed .page-sidebar-wrapper .page-sidebar { padding: 0px; overflow: hidden; } .page-sidebar-closed .page-content { padding: 0px; } .page-sidebar-closed .map-wrapper { padding-left: 0px; } .page-sidebar-closed .sidebar-toggler { left: 0px; } .page-sidebar-top-closed .map-top-control-wrapper { top: -100px; } .page-sidebar-right-closed .map-right-control-wrapper { right: -30px; } .page-sidebar-right-closed .map-right-control-wrapper .map-right-control-group { width: 0px; overflow: hidden; border: none; } .page-footer .page-footer-inner .page-footer-container .address, .page-footer .page-footer-inner .page-footer-container .tel { display: inline; } .page-footer .page-footer-inner .page-footer-container .tel { margin-left: 20px; } .page-system-title { font-size: 20px; font-weight: bold; vertical-align: middle; padding-left: 40px; background: url(../img/map-service/bu/bu_top_item.png) no-repeat 14px 50%; } .page-title-1depth { font-size: 18px; line-height: 28px; text-align: left; color: #000; margin: 0px; padding: 0px 0px 10px 18px; background: url(../img/map-service/bu/bu_title_1depth.png) no-repeat 0px 6px; } .page-title-2depth { font-size: 18px; text-align: left; color:#000; margin: 0px; padding: 0px 0px 10px 24px; background: url(../img/map-service/bu/bu_title_2depth.png) no-repeat 0px 4px; } .page-title-3depth { font-size: 24px; text-align: left; color:#000; margin: 0px; padding: 0px 0px 10px 24px; background: url(../img/map-service/bu/bu_title_3depth.png) no-repeat 0px 4px; } /* 글로벌 시작 */ .nav-header-bg { height: 60px; background-color: #00a2ff; background-image: linear-gradient(141deg, #00a2ff 0%, #2dc0c6 100%); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .navbar-collapse { border-top: 0px; } .navbar-collapse-wrapper, .navbar-collapse.collapse, nav.navbar.navbar-default ul.nav > li > a { height: 60px !important; } header nav.navbar .navbar-nav > li > a, nav.navbar.bootsnav ul.nav > li > a { line-height: 60px; font-size: 18px; } .navbar-collapse.collapse, nav.navbar.bootsnav .navbar-collapse.collapse { display: table !important; margin: 0px auto; } header .dropdown.simple-dropdown::after { background: none; } header .dropdown.simple-dropdown::before { height: 60px; background-color: #fff; opacity: 0.4; } .nav-header-container { height: auto; } header .dropdown.simple-dropdown.on > a, header .dropdown.simple-dropdown:hover > a { color: #002b38 !important; } .navbar-global-wrapper { padding: 10px 30px; } header.sticky .navbar-global-wrapper { padding: 4px 30px; } header.sticky .nav-header-container { height: auto; } header .global-link-wrapper { right: 30px; } /* 글로벌 끝 */ /* 탭 시작 */ .nav-tabs { border-bottom: 3px solid #19b3e5; } .nav-tabs > li { margin-bottom: 0px; } .nav-tabs > li > a { font-size: 16px; font-weight: bold; padding: 10px 30px; color: #114672 ; background-color: #e5ebf0; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { color: #fff; background-color: #19b3e5; border: 1px solid #19b3e5; } .tab-content { margin-top: 10px; } /* 탭 끝 */ /* 지도서비스 왼쪽 탭 시작 */ .map-service .page-sidebar .map-left-tab-group { width: 100%; display: table; border: 1px solid #d1d1d1; border-radius: 5px; } .map-service .page-sidebar .map-left-tab-group > li { float: none; display: table-cell; } .map-service .page-sidebar .map-left-tab-group > li > a { position: relative; display: block; font-size: 14px; font-weight: bold; color: #114672; padding: 7px 8px 7px 36px; border-radius: 5px; } .map-service .page-sidebar .map-left-tab-group > li.active > a { color: #fff; background-color: #00479d; } .map-service .page-sidebar .map-left-tab-group > li > a::before { content: ""; position: absolute; top: 0px; left: 0px; width: 38px; height: 38px; display: block; } .map-service .page-sidebar .map-left-tab-group > li > a.tab-search-area::before { background: url(../img/common/icon/ico_btn_search_area.png) no-repeat 50% 50%; } .map-service .page-sidebar .map-left-tab-group > li > a.tab-search-business::before { background: url(../img/common/icon/ico_btn_search_business.png) no-repeat 50% 50%; } .map-service .page-sidebar .map-left-tab-group > li > a.tab-search-coordinate::before { background: url(../img/common/icon/ico_btn_search_coordinate.png) no-repeat 50% 50%; } .map-service .page-sidebar .map-left-tab-group > li > a.tab-total-search::before { background: url(../img/common/icon/ico_btn_area_search.png) no-repeat 50% 50%; } .map-service .page-sidebar .tab-content { margin-top: 20px; } .map-service .page-sidebar .table-bottom-control { margin-top: 20px; } .map-service .page-sidebar .table > tbody > tr > th.td-head, .map-service .page-sidebar .table > tbody > tr > td.td-head, .map-service .page-sidebar .table > tfoot > tr > th.td-head, .map-service .page-sidebar .table > tfoot > tr > td.td-head { text-align: left; } .map-left-search-control { } .map-left-search-result { margin-top: 20px; } .map-left-search-result .table.table-thead { margin-bottom: 14px; } .map-left-search-result .table.table-thead > thead > tr > th { text-align: center; border-top: 1px solid #d1d1d1 !important; border-bottom: 1px solid #d1d1d1 !important; background-color: #f9f9f9; font-size: 14px; font-weight: normal; padding: 8px 4px; } .map-left-search-result .table.table-tbody { overflow-y: auto; } .map-left-search-result .table.table-tbody > tbody > tr > td { font-size: 14px; } .map-left-search-result .table.table-tbody > tbody > tr > td.search-result-icon { background: url(../img/map-service/icon/ico_search_result.png) no-repeat 0px 50%; padding-left: 26px; } .map-left-guide { margin-top: 20px; } .map-service .page-sidebar hr { margin-top: 10px; margin-bottom: 10px; border-top: 1px solid #d1d1d1; } .map-guide-list { border-top: 1px solid #d1d1d1; border-bottom: 1px dotted #d1d1d1; padding: 10px 12px; } .map-guide-list > li { height: 42px; font-size: 14px; padding: 10px 10px 10px 50px; } .map-guide-list > li.list-expert { background: url(../img/map-service/icon/ico_map_guide_list_expert.png) no-repeat 0px 50%; } .map-guide-list > li.list-phys { background: url(../img/map-service/icon/ico_map_guide_list_phys.png) no-repeat 0px 50%; } .map-guide-notice { position: relative; margin-top: 20px; padding: 22px 20px 22px 70px; background-color: #f3f7f8; font-size: 14px; line-height: 18px; } .map-guide-notice::before { content: ""; position: absolute; display: block; top: 50%; left: 12px; width: 42px; height: 42px; margin-top: -21px; background: url(../img/map-service/icon/ico_map_guide_notice.png) no-repeat 50% 50%; } /* 지도서비스 왼쪽 탭 끝 */ .category-wrapper { position: relative; width: 100%; display: table; background-color: #fff; height: 50px; box-shadow: 4px 4px 10px rgba(0,0,0,0.2); margin-bottom: 20px; } .category-wrapper .page-category { top: 12px; left: 26px; right: auto; background: url(../img/common/icon/ico_category_home.png) no-repeat 0px 3px; } .category-wrapper .btn-help { position: absolute; top: 0px; right: 0px; color: #fff; height: 50px; line-height: 36px; font-weight: bold; padding: 6px 16px 6px 54px; background: #19b3e5 url(../img/ground-info/icon/ico_category_btn_help.png) no-repeat 12px 12px; } .content-wrapper { background-color: #fff; padding: 20px; box-shadow: 4px 4px 10px rgba(0,0,0,0.2); } .content-row { position: relative; width: 100%; display: table; box-sizing: border-box; } .scroll-top-arrow, .scroll-top-arrow:focus { right: 30px; bottom: 30px; } /* 트리메뉴 시작 */ .treeview-project-name { background-color: #f9f9f9; margin-bottom: 10px; box-shadow: 2px 2px 4px rgba(0,0,0,0.2); } .treeview-project-name .project-title { background-color: #2cbfc8; padding: 2px; color: #fff; font-weight: bold; text-align: center; } .treeview-project-name .project-value { padding: 10px 18px; line-height: 18px; text-align: left; } .treeview li { padding: 0px 0pt 0px 20px; background: url(../img/ground-info/icon/treeview-default-line.gif) 0px 0px no-repeat; } .treeview .hitarea { margin-top: 4px; margin-left: -20px; background: url(../img/ground-info/icon/ico_treeview_hitarea.png) -16px 0px no-repeat; transition-timing-function: ease-in-out; transition-duration: .2s; } .treeview .expandable-hitarea { background-position: 0px 0px; } .icon-floder { width: 22px; height: 22px; float: left; margin-right: 10px; background: url(../img/ground-info/icon/ico_treeview_floder.png) 0px 1px no-repeat; } .icon-floder.floder-check { background: url(../img/ground-info/icon/ico_treeview_floder_check.png) 0px 1px no-repeat; } .icon-floder.floder-x { background: url(../img/ground-info/icon/ico_treeview_floder_x.png) 0px 1px no-repeat; } /* 트리메뉴 끝 */ .map-left-search-control .gg-checkbox-list .hitarea { position: absolute; left: 0px; height: 16px; width: 16px; margin-top: 2px; background: url(../img/ground-info/icon/ico_treeview_hitarea.png) -16px 0px no-repeat; transition-timing-function: ease-in-out; transition-duration: .2s; cursor: pointer; } .map-left-search-control .gg-checkbox-list .hitarea.closed-hitarea { background-position: 0px 0px; } .map-left-search-control .gg-checkbox-list .gg-checkbox.gg-checkbox-1dep { padding-left: 42px; } .map-left-search-control .gg-checkbox-list .gg-checkbox.gg-checkbox-1dep > span { left: 20px; } /* =================================== 레이아웃 끝 ====================================== */ /* =================================== 테이블 스타일 시작 ====================================== */ .row-control-input { border: 1px solid #232323; margin-bottom: 0px; width: 140px; } .row-control-input:focus { border-color: #19b3e5; } .table-scrollable { border-top: 2px solid #114672; border-bottom: 1px solid #114672; margin-bottom: 20px; } .table-scrollable.content-info-table .table.table-bordered tbody > tr > td.td-head { background-color:#e5ebf0; } .table-scrollable.content-info-table .table { background-color:#f9f9f9; } .table-top-control .table-info-group { float: left; } .table-top-control .table-btn-group { float: right; } /* =================================== 테이블 스타일 끝 ====================================== */ /* =================================== 스타일 시작 ====================================== */ .btn { font-weight: bold; } .navbar .btn { font-weight: normal; } .btn.btn-small { font-size: 14px; } /* =================================== 스타일 끝 ====================================== */ /* =================================== kendo UI 스타일 시작 ====================================== */ .k-grid { transition-timing-function: inherit; transition-duration: 0s; } .k-grid tr td { font-size: 14px; } /* =================================== kendo UI 스타일 끝 ====================================== */ .map-wrapper { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding-left: 340px; z-index: 1; } .map-wrapper .map-area { width: 100%; height: 100%; } .map-top-control-wrapper { position: relative; background-color: #fff; box-shadow: 4px 4px 10px rgba(0,0,0,0.2); z-index: 2; } .map-top-btn-group { display: table; width: 100%; padding: 5px 1.3em; } .map-top-btn-group > li { float: none; display: table-cell; vertical-align: middle; } .map-top-btn-group > li .map-top-btn { position: relative; display: table-cell; font-size: 14px; font-weight: bold; padding: 0px 10px 0px 66px; height: 60px; line-height: 16px; vertical-align: middle; } .map-top-btn-group > li .map-top-btn::before { content: ""; position: absolute; top: 0px; left: 0px; width: 60px; height: 60px; } .map-top-btn-group > li .map-top-btn.map-btn-icon-section::before { background: url(../img/map-service/icon/ico_map_top_control_01.png) no-repeat 50% 50%; } .map-top-btn-group > li .map-top-btn.map-btn-icon-column::before { background: url(../img/map-service/icon/ico_map_top_control_02.png) no-repeat 50% 50%; } .map-top-btn-group > li .map-top-btn.map-btn-icon-info::before { background: url(../img/map-service/icon/ico_map_top_control_03.png) no-repeat 50% 50%; } .map-top-btn-group > li .map-top-btn.map-btn-icon-3D::before { background: url(../img/map-service/icon/ico_map_top_control_04.png) no-repeat 50% 50%; } .map-top-btn-group > li .map-top-btn.map-btn-icon-dril-download::before { background: url(../img/map-service/icon/ico_map_top_control_05.png) no-repeat 50% 50%; } .map-top-btn-group > li .map-top-btn.map-btn-icon-geo-analysis::before { background: url(../img/map-service/icon/ico_map_top_control_06.png) no-repeat 50% 50%; } .map-top-btn-group > li .map-top-btn.map-btn-icon-lique-control::before { background: url(../img/map-service/icon/ico_map_top_control_07.png) no-repeat 50% 50%; } .map-top-btn-group > li .map-top-btn.map-btn-icon-lique-download::before { background: url(../img/map-service/icon/ico_map_top_control_08.png) no-repeat 50% 50%; } .map-top-btn-group > li .map-top-btn.map-btn-icon-under-info::before { background: url(../img/map-service/icon/ico_map_top_control_09.png) no-repeat 50% 50%; } .map-service .page-content-inner { float: left; width: 100%; } .map-control-wrapper { position: relative; float: left; width: 100%; } .map-service .page-content-inner::after, .map-control-wrapper::after { content: ""; clear: both; } .map-right-control-wrapper { position: relative; float: right; display: inline-block; margin-top: 20px; z-index: 2; } .map-right-control-wrapper::after { content: ''; display: block; clear: both; } .map-right-control-group { background-color: #fff; box-shadow: 4px 4px 10px rgba(0,0,0,0.2); margin-top: 20px; border-radius: 10px; border: 1px solid #b6b6b6; overflow: hidden; } .map-right-control-group:first-child { margin-top: 0px; } .map-right-control-title { position: relative; background-color: #00479d; color: #fff; font-size: 14px; font-weight: bold; text-align: center; padding: 4px; margin-bottom: -1px; white-space: nowrap; } .map-right-btn-group { width: 128px; margin-top: -1px; margin-right: -1px; } .map-right-btn-group > li { float: left; width: 50%; margin-bottom: -1px; border: 1px solid #b6b6b6; border-left: none; } .map-right-btn-group > li.row-all { width: 100%; } .map-right-btn-group > li .map-right-btn { position: relative; text-align: center; display: block; font-size: 12px; font-weight: bold; line-height: 14px; padding: 38px 4px 4px 4px; } .map-right-btn-group > li .map-right-btn::before { content: ""; position: absolute; top: 0px; left: 50%; width: 50px; height: 40px; margin-left: -25px; } .map-right-btn-group > li .map-right-btn.map-btn-icon-all::before { background: url(../img/map-service/icon/ico_map_right_control_01.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-zoom-in::before { background: url(../img/map-service/icon/ico_map_right_control_02.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-zoom-out::before { background: url(../img/map-service/icon/ico_map_right_control_03.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-choice::before { background: url(../img/map-service/icon/ico_map_right_control_04.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-move::before { background: url(../img/map-service/icon/ico_map_right_control_05.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-business::before { background: url(../img/map-service/icon/ico_map_right_control_06.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-area-choice::before { background: url(../img/map-service/icon/ico_map_right_control_07.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-screen::before { background: url(../img/map-service/icon/ico_map_right_control_08.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-search::before { background: url(../img/map-service/icon/ico_map_right_control_09.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-distance::before { background: url(../img/map-service/icon/ico_map_right_control_10.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-area::before { background: url(../img/map-service/icon/ico_map_right_control_11.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-index-map::before { background: url(../img/map-service/icon/ico_map_right_control_12.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-legend::before { background: url(../img/map-service/icon/ico_map_right_control_13.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-line::before { background: url(../img/map-service/icon/ico_map_right_control_14.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-triangle::before { background: url(../img/map-service/icon/ico_map_right_control_15.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-circle::before { background: url(../img/map-service/icon/ico_map_right_control_16.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-square::before { background: url(../img/map-service/icon/ico_map_right_control_17.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-delete::before { background: url(../img/map-service/icon/ico_map_right_control_18.png) no-repeat 50% 50%; } .map-right-btn-group > li .map-right-btn.map-btn-icon-delete-all::before { background: url(../img/map-service/icon/ico_map_right_control_19.png) no-repeat 50% 50%; } /* 지도구분 탭 시작 */ .map-division-add .page-sidebar-wrapper { width: 540px; } .map-division-add .page-content, .map-division-add .map-wrapper { padding: 0px 0px 0px 540px; } .map-division-add .map-left-tab-wrapper { width: 312px; } .map-division-add .sidebar-toggler { left: 540px; } .page-sidebar-closed .map-division-add .sidebar-toggler { left: 0px; } .page-sidebar-closed .map-division-add .page-sidebar-wrapper { width: 0px; } .page-sidebar-closed .map-division-add .page-content, .page-sidebar-closed .map-division-add .map-wrapper { padding: 0px; } .map-division-wrapper { position: absolute; top: 0px; right: 0px; width: 210px; height: 100%; background-color: #f9f9f9; border-left: 1px solid #b6b6b6; } .map-division-title { background-color: #00479d; color: #fff; font-size: 14px; font-weight: bold; text-align: center; padding: 4px; white-space: nowrap; height: 32px; } .map-division-contents { padding: 10px; overflow-y: auto; height: calc(100% - 32px); } .icon-legend { width: 14px; height: 14px; display: inline-block; border-radius: 50%; margin-right: 2px; background-color: #fff; vertical-align: middle; } .map-division-wrapper .treeview input[type=checkbox], .map-division-wrapper .treeview input[type=radio] { margin: 0px; } .map-division-wrapper .treeview { font-size: 14px; } .map-division-wrapper .treeview label { display: inline; } /* 지도구분 탭 끝 */ /* =================================== 레이아웃 v2 시작 ====================================== */ .map-service-v2 .map-division-wrapper { } .map-service.map-service-v2 .page-sidebar .map-left-tab-group > li > a { line-height: 16px; } .map-service.map-service-v2 .page-sidebar .map-left-tab-group > li > a::before { top: 4px; } .map-left-search-control .panel-heading { padding: 0px; } .map-left-search-control .panel-title { background: url(../img/common/bu/bu_title_4depth.png) no-repeat 10px 10px; } .map-left-search-control .panel-title > a { padding: 4px 10px 4px 33px; display: block; background: url(../img/map-service/icon/ico_accordion_top.png) no-repeat 98% 50%; } .map-left-search-control .panel-title > a.collapsed { background: url(../img/map-service/icon/ico_accordion_bottom.png) no-repeat 98% 50%; } .map-left-search-control .panel-body { padding: 10px; } .shopping-cart-group { float: right; } .shopping-cart-group .badge { background-color: #ff0000; } .shopping-btn { position: relative; display: inline-block; width: 34px; height: 34px; margin-right: 14px; } .shopping-btn.shopping-cart { background: url(../img/common/icon/ico_btn_shopping_cart.png) no-repeat 50% 50%; } .shopping-btn.shopping-cart-add { background: url(../img/common/icon/ico_btn_shopping_cart_add.png) no-repeat 50% 50%; } .shopping-btn .badge { position: absolute; top: 0px; right: -14px; } .scrollableY { overflow-y: auto; } /* =================================== 레이아웃 v2 끝 ====================================== */