/* =Reset */

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
      
table { border-collapse: collapse; border-spacing: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* =General */

body {
  font-family: '宋体';
}

.wrapper {
  margin: 30px auto;
  width: 800px;
}

h1 {
  margin-bottom: 10px;
}

p {
  margin-bottom: 30px;
}

form {
  margin-bottom: 30px;
}

/* =Custom Select Menu */

.custom-select-menu {
  display: inline-block;
  margin-bottom: 8px;
  outline: none;
  position:relative;
  line-height:24px;
  background-color:#ffffff;
  float:left;
}

.custom-select-menu label {
  border: 1px solid #D2CECE;
  color: #676f72;
  display: inline-block;
  position: relative;
  /* Prevents text-selection on the label. */
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;  
  user-select: none;
  /* We're giving the label a specific width. 
  Don't forget to set a width for the list of options
  as well (see below). */
  width: 130px;
  padding-left:8px;
}

/* Sometimes you want to change the look of the menu/label
when a selection with a value has been made. In this case,
we're increasing the contrast of the font color. */
.custom-select-menu label.selection-made {
  color: #000;
}

/* Here we're adding a down arrow to make it look more
like a select menu. */
.custom-select-menu label:after {
  border-top: 5px solid #39393b;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: '';
  position: absolute;
  right: 8px;
  top: 8px;
}

/* When the list of options is displayed we'll remove
the bottom border-radius on the label so that it sits
flush next the menu. */
.custom-select-menu label.opened {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* When the label has focus or is hovered over, increase
the contrast of the border. */
.custom-select-menu:focus label,
.custom-select-menu:hover label {
}

/* If you don't want the menu to be too tall, then 
give it a max-height, but don't forget to allow it to
scroll so all the options are visible. */
.custom-select-menu ul {
  background: #fff;
  border-left: 1px solid #D9D9DA;
  border-right: 1px solid #D9D9DA;
  border-bottom: 1px solid #D9D9DA;
  left: 10px;
  list-style: none;
  margin: 0 -10px;
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: scroll; /* Allow it to scroll vertically. */
  position: absolute;
  top: 40px;
  width: 138px; /* Set a width equal to the label. */
  z-index: 2;
  margin-top:-14px;
}

.custom-select-menu  li {
  background-color: #fff;
  cursor: pointer;
  padding: 7px 10px;
}

/* When you hover over an option we'll change the 
background color. We'll do the same when an option 
is selected. */
.custom-select-menu li:hover,
.custom-select-menu .selected {
  background-color: rgba(0,0,0,.05);
}