body, html { font-size: 100%; 	padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	background: #f9f7f6;
	color: #404d5b;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
}
a{color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus{color:#74777b;}

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            /*height: 100%;*/
            background-color: #eee;
            font-family: 'Raleway';
        }

        ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .icon {
            position: relative;
            width: 32px;
            height: 32px;
            display: block;
            fill: rgba(51, 51, 51, 0.5);
            margin-right: 20px;
            -webkit-transition: all .2s ease-out;
            transition: all .2s ease-out;
        }

            .icon.active {
                fill: #E74C3C;
            }

            .icon.big {
                width: 64px;
                height: 64px;
                fill: rgba(51, 51, 51, 0.5);
            }


#wrapper {
  width: 85%;
  min-height: 500px;
  margin: auto;
  margin-top: 50px;
  background-color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

#left-side {
  height: 70%;
  width: 20%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
	  -ms-flex-align: center;
		  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
	  -ms-flex-pack: center;
		  justify-content: center;
}
#left-side ul li {
  padding-top: 10px;
  padding-bottom: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  line-height: 34px;
  color: rgba(51, 51, 51, 0.5);
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: all .2s ease-out;
		  transition: all .2s ease-out;
}
#left-side ul li:hover {
  color: #333333;
  -webkit-transition: all .2s ease-out;
		  transition: all .2s ease-out;
}
#left-side ul li:hover > .icon {
  fill: #333;
}
#left-side ul li.active {
  color: #333333;
}
#left-side ul li.active:hover > .icon {
  fill: #E74C3C;
}

#border {
  height: 288px;
  width: 1px;
  background-color: rgba(51, 51, 51, 0.2);
}
#border #line.one {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 35px;
  -webkit-transition: all .4s ease-in-out;
		  transition: all .4s ease-in-out;
}
#border #line.two {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 89px;
  -webkit-transition: all .4s ease-in-out;
		  transition: all .4s ease-in-out;
}
#border #line.three {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 143px;
  -webkit-transition: all .4s ease-in-out;
		  transition: all .4s ease-in-out;
}
#border #line.four {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 197px;
  -webkit-transition: all .4s ease-in-out;
		  transition: all .4s ease-in-out;
}
#border #line.five {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 251px;
  -webkit-transition: all .4s ease-in-out;
		  transition: all .4s ease-in-out;
}

#right-side {
  width: 80%;
}
#right-side .active{
	display: block;
}
.sel_info{
	display: none;
	padding: 20px;
}