@dmsej108/design-system 2.2.0

package/src/styles/base/reset.css

@@ -0,0 +1,241 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+font,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+sub,
+sup,
+tt,
+var,
+b,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+audio,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+mark,
+menu,
+meter,
+nav,
+output,
+progress,
+section,
+summary,
+time,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+}
+
+input,
+select,
+textarea,
+button {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--strong-txt-color);
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+legend,
+caption {
+  position: absolute;
+  overflow: hidden;
+  width: 0;
+  height: 0;
+  color: transparent;
+  clip: rect(0 0 0 0);
+  opacity: 0;
+  font-size: 0;
+  z-index: -1;
+  text-indent: -100%;
+}
+
+li {
+  list-style: none;
+}
+
+code {
+  font-family: inherit;
+}
+
+table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+a[href*='tel'] {
+  cursor: default;
+}
+
+button,
+input[type='button'] {
+  border: none;
+  background: none;
+  cursor: pointer;
+  letter-spacing: inherit;
+  padding: 0;
+  color: inherit;
+}
+
+optgroup,
+pre,
+input[type='date'],
+input[type='datetime-local'],
+input[type='month'],
+input[type='time'] {
+  font-family: inherit;
+}
+
+i,
+em {
+  font-style: normal;
+}
+
+hr {
+  margin: 2rem 0;
+  border: 0;
+  border-bottom: 0.1rem solid #ddd;
+}
+
+sub {
+  vertical-align: 0;
+}
+
+iframe,
+textarea {
+  width: 100%;
+}
+
+::placeholder {
+  font-size: 12px;
+  color: var(--placeholder-txt-color);
+  opacity: 1;
+}
+
+::-webkit-input-placeholder {
+  font-size: 12px;
+  color: var(--placeholder-txt-color);
+  opacity: 1;
+}
+
+:-moz-placeholder {
+  font-size: 12px;
+  color: var(--placeholder-txt-color);
+  opacity: 1;
+}
+
+::-moz-placeholder {
+  font-size: 12px;
+  color: var(--placeholder-txt-color);
+  opacity: 1;
+}
+
+:-ms-input-placeholder {
+  font-size: 12px;
+  color: var(--placeholder-txt-color);
+  opacity: 1;
+}
+
+/*****************************************************************
+   scroll custom
+   *****************************************************************/
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d2d2d2;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #ebebeb;
+  border-radius: 10px;
+}

package/src/styles/components/breadcrumb.css

@@ -0,0 +1,39 @@
+.breadcrumb {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 40px;
+    padding: 0;
+    margin: 0;
+    background-color: transparent;
+  }
+  .breadcrumb .breadcrumb-item {
+    font-size: 12px;
+    color: #767676;
+  }
+  .breadcrumb .breadcrumb-item:first-child {
+    position: relative;
+    padding-left: 18px;
+  }
+  .breadcrumb .breadcrumb-item:first-child::before {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 0;
+    width: 16px;
+    height: 16px;
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7.41418L12 12H10V9.99997C10 8.8954 9.10457 7.99997 8 7.99997C6.89543 7.99997 6 8.8954 6 9.99997V12H4V7.41418L8 3.41418L12 7.41418ZM7 12V9.99997C7 9.44769 7.44772 8.99997 8 8.99997C8.55228 8.99997 9 9.44769 9 9.99997V12H7ZM6.4536 13H4C3.44772 13 3 12.5523 3 12V7.41418C3 7.14897 3.10536 6.89461 3.29289 6.70708L7.29289 2.70708C7.68342 2.31655 8.31658 2.31655 8.70711 2.70708L12.7071 6.70708C12.8946 6.89461 13 7.14897 13 7.41418V12C13 12.5523 12.5523 13 12 13H9.5464C9.54608 13 9.54577 13 9.54545 13H6.45455C6.45423 13 6.45392 13 6.4536 13Z' fill='%23767676'/%3E%3C/svg%3E");
+  }
+  .breadcrumb .breadcrumb-item + .breadcrumb-item {
+    position: relative;
+    padding-left: 20px;
+  }
+  .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 4px;
+    width: 12px;
+    height: 12px;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.99976 2L7.99976 6L3.99976 10' stroke='%23767676'/%3E%3C/svg%3E");
+  }  

package/src/styles/components/button.css

@@ -0,0 +1,423 @@
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+  background-color: #fff;
+}
+
+.btn.inline {
+  display: inline-block;
+}
+
+.btn:hover:not(:disabled) {
+  background-color: #f2f2f2;
+  color: #444;
+}
+
+.btn:disabled {
+  border-color: #ebebeb;
+  color: #ababab;
+}
+
+.btn.full {
+  width: 100%;
+}
+
+.btn.posi {
+  border-color: #253349;
+  background-color: #253349;
+  color: #fff;
+}
+
+.btn.posi:hover:not(:disabled) {
+  background-color: #464646;
+  color: #fff;
+}
+
+.btn.posi:disabled {
+  background-color: #ebebeb;
+  color: #999;
+}
+
+.btn-sl:not([class*='wp-']) {
+  min-width: 120px;
+} 
+
+.btn-sl {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+  border-color: #222;
+  background-color: #fff;
+  font-weight: bold;
+  font-size: 14px;
+  color: #222;
+}
+
+.btn-sl+.btn-sl {
+  margin-left: 10px;
+}
+
+.btn-slm {
+  padding: 0px 10px;
+  height: 32px;
+  border-color: #c0c0c0;
+  font-size: 12px;
+  color: #444;
+}
+
+.btn-slm [class*='ico-'] {
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  background-size: 20px 20px;
+  background-position: 50% 50%;
+}
+
+.btn-slm.sg [class*='ico-'] {
+  margin-right: 0;
+}
+
+.btn-slm .ico-arrow {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3EArtboard-51%3C/title%3E%3Cg id='Down-2' data-name='Down'%3E%3Cpath d='M16.924,9.617A1,1,0,0,0,16,9H8a1,1,0,0,0-.707,1.707l4,4a1,1,0,0,0,1.414,0l4-4A1,1,0,0,0,16.924,9.617Z' style='fill:%23444444'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.btn-slm.fold .ico-arrow {
+  transform: rotate(180deg);
+}
+
+.btn-sm {
+  padding: 0px 10px;
+  height: 30px;
+  border-color: #444;
+  font-weight: bold;
+  font-size: 12px;
+  color: #444;
+}
+
+.btn-sm+.btn-sm {
+  margin-left: 6px;
+}
+
+.flex-column>.btn-sm+.btn-sm {
+  margin-left: 0;
+  margin-top: 6px;
+}
+
+.btn-sm [class*='ico-'] {
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  background-size: 20px 20px;
+  background-position: 50% 50%;
+}
+
+.btn-sm [class*='ico-'].right {
+  margin: 0 0 0 4px;
+}
+
+.btn-sm [class*='ico-'].sg {
+  margin: 0 -6px;
+}
+
+.btn-sm:disabled [class*='ico-'] {
+  opacity: 0.6;
+}
+
+.btn-sm .ico-search {
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.9165 11.6666H12.2581L12.0248 11.4416C13.0248 10.275 13.5415 8.68331 13.2581 6.99164C12.8665 4.67497 10.9331 2.82497 8.59979 2.54164C5.07479 2.10831 2.10812 5.07497 2.54146 8.59997C2.82479 10.9333 4.67479 12.8666 6.99146 13.2583C8.68312 13.5416 10.2748 13.025 11.4415 12.025L11.6665 12.2583V12.9166L15.2081 16.4583C15.5498 16.8 16.1081 16.8 16.4498 16.4583C16.7915 16.1166 16.7915 15.5583 16.4498 15.2166L12.9165 11.6666ZM7.91646 11.6666C5.84146 11.6666 4.16646 9.99164 4.16646 7.91664C4.16646 5.84164 5.84146 4.16664 7.91646 4.16664C9.99146 4.16664 11.6665 5.84164 11.6665 7.91664C11.6665 9.99164 9.99146 11.6666 7.91646 11.6666Z' fill='%23444444'/%3E%3C/svg%3E");
+}
+
+.btn-sm .ico-reload {
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7079 5.29249C13.3496 3.93416 11.4246 3.15083 9.30794 3.36749C6.24961 3.67583 3.73294 6.15916 3.39128 9.21749C2.93294 13.2592 6.05794 16.6675 9.99961 16.6675C12.6579 16.6675 14.9413 15.1092 16.0079 12.8675C16.2746 12.3092 15.8746 11.6675 15.2579 11.6675C14.9496 11.6675 14.6579 11.8342 14.5246 12.1092C13.5829 14.1342 11.3246 15.4175 8.85794 14.8675C7.00794 14.4592 5.51628 12.9508 5.12461 11.1008C4.42461 7.86749 6.88294 5.00083 9.99961 5.00083C11.3829 5.00083 12.6163 5.57583 13.5163 6.48416L12.2579 7.74249C11.7329 8.26749 12.0996 9.16749 12.8413 9.16749H15.8329C16.2913 9.16749 16.6663 8.79249 16.6663 8.33416V5.34249C16.6663 4.60083 15.7663 4.22583 15.2413 4.75083L14.7079 5.29249Z' fill='%23444444'/%3E%3C/svg%3E");
+}
+
+.btn-sm .ico-next {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00043 7.27278L12.7284 12.0008L8.00043 16.7288L9.27243 18.0008L15.2724 12.0008L9.27243 6.00078L8.00043 7.27278Z' fill='%23444444'/%3E%3C/svg%3E");
+}
+
+.btn-sm .ico-prev {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0001 16.7272L11.2721 11.9992L16.0001 7.27121L14.7281 5.99921L8.72808 11.9992L14.7281 17.9992L16.0001 16.7272Z' fill='%23444444'/%3E%3C/svg%3E");
+}
+
+.btn-sm .ico-arrow {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3EArtboard-51%3C/title%3E%3Cg id='Down-2' data-name='Down'%3E%3Cpath d='M16.924,9.617A1,1,0,0,0,16,9H8a1,1,0,0,0-.707,1.707l4,4a1,1,0,0,0,1.414,0l4-4A1,1,0,0,0,16.924,9.617Z' style='fill:%23444444'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.btn-sm.fold .ico-arrow {
+  transform: rotate(180deg);
+}
+
+.btn-sm .ico-add {
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='4' width='2' height='12' fill='black'/%3E%3Crect x='16' y='9' width='2' height='12' transform='rotate(90 16 9)' fill='black'/%3E%3C/svg%3E");
+}
+
+.btn-ss {
+  padding: 0px 10px;
+  height: 28px;
+  border-color: #767676;
+  font-weight: 500;
+  font-size: 12px;
+  color: #444;
+}
+
+.btn-ss.active {
+  border-color: #fed700;
+  background-color: #fed700;
+  color: #222;
+}
+
+.btn-ss+.btn-ss {
+  margin-left: 6px;
+}
+
+.btn-ss [class*='ico-'] {
+  display: block;
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  background-size: 12px 12px;
+  background-position: 50% 50%;
+}
+
+.btn-ss [class*='ico-'].right {
+  margin: 0 0 0 4px;
+}
+
+.btn-ss .ico-plus {
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='1.00003' width='2' height='10' fill='%23767676'/%3E%3Crect x='11' y='5.00003' width='2' height='10' transform='rotate(90 11 5.00003)' fill='%23767676'/%3E%3C/svg%3E");
+}
+
+.btn-ss .ico-minus {
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='11' y='5.00003' width='2' height='10' transform='rotate(90 11 5.00003)' fill='%23767676'/%3E%3C/svg%3E");
+}
+
+.btn-ss .ico-all-open {
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25757 3.82843L6.086 1L8.91442 3.82843' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.91431 7.82843L6.08588 10.6569L3.25745 7.82843' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.08579 9.17169V1' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.btn-opt {
+  height: 28px;
+  padding: 0 8px;
+  border-color: var(--base-bd-color);
+  font-size: 12px;
+  color: #767676;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+}
+
+.btn-opt+.btn-opt {
+  margin-left: 6px;
+}
+
+.btn-opt [class*='ico-'] {
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  background-size: 16px 16px;
+}
+
+.btn-opt:disabled [class*='ico-'] {
+  opacity: 0.6;
+}
+
+.btn-opt .ico-download {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.34375 12H12.6562V13.3438H3.34375V12ZM12.6562 6L8 10.6562L3.34375 6H6V2H10V6H12.6562Z' fill='%23222222'/%3E%3C/svg%3E");
+}
+
+.btn-opt-ico {
+  height: 28px;
+  padding: 0 13px;
+  border-color: var(--base-bd-color);
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+}
+
+.btn-opt-ico.filter {
+  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='6' height='6' fill='%23767676'/%3E%3Crect x='8' width='6' height='6' fill='%23767676'/%3E%3Crect y='8' width='6' height='6' fill='%23767676'/%3E%3Crect x='8' y='8' width='6' height='6' fill='%23767676'/%3E%3C/svg%3E");
+}
+
+.btn-opt-ico.close {
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 4L4 16.5' stroke='%238C949E' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M4 4L16.5 16.5' stroke='%238C949E' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+.btn-opt-ico.fit {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1H15V7' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 1L9 7' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 15H1V9' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 9L1 15' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.btn-opt-ico.fit.full {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 9H7V15' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 9L1 15' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 7H9V1' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 1L9 7' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.btn-next-wrok {
+  min-width: 120px;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 35px;
+  border-color: #ccc;
+  background-color: #f2f2f2;
+  font-weight: bold;
+  font-size: 14px;
+  color: #222;
+}
+
+.btn-next-wrok span {
+  display: inline-block;
+  position: relative;
+  padding-right: 24px;
+}
+
+.btn-next-wrok span::after {
+  content: '';
+  position: absolute;
+  top: 10px;
+  right: 0;
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 15.5L12.9167 10.0833L7.5 4.66667' stroke='%23222222' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+.btn-bottom-set {
+  position: relative;
+  margin-top: 20px;
+}
+
+.btn-bottom-set .right {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.btn-add-info-toggle, .btn-add-info {
+  display: inline-block;
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 15px 0 36px;
+  border: 1px solid #d2d2d2;
+  background-color: #f2f2f2;
+  border-radius: 30px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.btn-add-info.dep2 {
+  border: 1px solid #FFCC00;
+  background-color: #FFFBED;
+}
+
+.btn-add-info.dep3 {
+  border: 1px solid #89E393;
+  background-color: #F0FCF1;
+}
+
+.btn-add-info-toggle::before {
+  content: '';
+  position: absolute;
+  top: 4px;
+  left: 11px;
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3EArtboard-51%3C/title%3E%3Cg id='Down-2' data-name='Down'%3E%3Cpath d='M16.924,9.617A1,1,0,0,0,16,9H8a1,1,0,0,0-.707,1.707l4,4a1,1,0,0,0,1.414,0l4-4A1,1,0,0,0,16.924,9.617Z' style='fill:%23444444'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.btn-add-info::before {
+  content: '';
+  position: absolute;
+  top: 6px;
+  left: 13px;
+  width: 16px;
+  height: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='4' width='2' height='12' style='fill:%23444444' /%3E%3Crect x='16' y='9' width='2' height='12' transform='rotate(90 16 9)' style='fill:%23444444' /%3E%3C/svg%3E");
+  background-size: 16px 16px;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+}
+
+.btn-add-info-toggle.active::before {
+  transform: rotate(180deg);
+}
+
+/*****************************************************************
+  tag
+*****************************************************************/
+.ui-tag {
+  display: inline-block;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: bold;
+  color: #000;
+  text-align: center;
+  border-radius: 20px;
+}
+
+.ui-tag.s {
+  height: 16px;
+  line-height: 16px;
+  padding: 0 8px;
+  border-radius: 16px;
+  font-size: 10px;
+}
+
+.ui-tag.l {
+  height: 32px;
+  line-height: 32px;
+  border-radius: 30px;
+}
+
+.ui-tag.bc1 {
+  background-color: #fed700;
+}
+
+.ui-tag.bc2 {
+  border: 1px solid #464646;
+  background-color: #fff;
+}
+
+.ui-tag.bc3 {
+  border: 1px solid #d2d2d2;
+  background-color: #fff;
+}
+
+.ui-mark {
+  display: inline-block;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 10px;
+  background-color: #fff;
+  border: 1px solid #d2d2d2;
+  border-radius: 3px;
+}
+
+/*****************************************************************
+  icon
+*****************************************************************/
+.ico-new {
+  display: inline-block;
+  width: 24px;
+  height: 12px;
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 122.88 69.4' style='enable-background:new 0 0 122.88 69.4' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill-rule:evenodd;clip-rule:evenodd;%7D%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M7.85,0h107.18c4.32,0,7.85,3.53,7.85,7.85v53.69c0,4.32-3.53,7.85-7.85,7.85H7.85C3.53,69.4,0,65.87,0,61.55 V7.85C0,3.53,3.53,0,7.85,0L7.85,0z M44.22,14.59v39.37h-9.48l-5.63-17.9v17.9h-9.05V14.59h9.05l6.05,17.73V14.59H44.22 L44.22,14.59z M48.56,14.59h18.06v7.86h-7.21v7.52h6.74v7.47h-6.74v8.66h7.95v7.86H48.56V14.59L48.56,14.59z M111.18,14.59 l-4.83,39.37H92.86c-1.21-6.05-2.31-12.94-3.29-20.67c-0.45,3.33-1.46,10.22-3.03,20.67H73.13l-4.85-39.37h10.53l1.14,13.75 l1.1,13.29c0.41-6.88,1.41-15.89,3-27.04h11.21c0.13,1.17,0.52,5.5,1.15,13.01l1.22,14.98c0.64-9.53,1.65-18.86,3.03-27.99H111.18 L111.18,14.59z' style='fill:%23ff3232' /%3E%3C/g%3E%3C/svg%3E");
+  background-size: 24px 12px;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  vertical-align:text-top;
+}
+
+.ico-fix {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg style='enable-background:new 0 0 91 91;' version='1.1' viewBox='0 0 91 91' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M31.7,54.2h13.6v21.5h3.4V54.2h13.6c0.9,0,1.7-0.8,1.7-1.7v-4.7c0-3.4-2.6-6.3-5.9-6.7l-1-8.7c-0.1-0.8-0.8-1.5-1.7-1.5 c0,0,0,0,0,0l-16.7,0c-0.9,0-1.6,0.6-1.7,1.5l-1,8.6c-3.3,0.4-5.9,3.2-5.9,6.7v4.7C30,53.5,30.8,54.2,31.7,54.2z'/%3E%3Cpath d='M35.9,28.6h22.2c0.9,0,1.7-0.8,1.7-1.7v-3.6c0-3-2.5-5.5-5.5-5.5H39.7c-3,0-5.5,2.5-5.5,5.5v3.6 C34.2,27.9,35,28.6,35.9,28.6z'/%3E%3C/g%3E%3C/svg%3E");
+  background-size: 20px 20px;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  vertical-align: middle;
+}