@charset "utf-8";
/* CSS Document */

/*****************public elements define*******************/
/*font*/
.com-font12{ font-size:12px;}
.com-font14{ font-size:14px;}
.com-font16{ font-size:16px;}
.com-font18{ font-size:18px;}
.com-font20{ font-size:20px;}
.com-font22{ font-size:22px;}
.com-font24{ font-size:24px;}
.com-font26{ font-size:26px;}
.com-font28{ font-size:28px;}
.com-font30{ font-size:30px;}
.com-font32{ font-size:32px;}
.com-font34{ font-size:34px;}
.com-font36{ font-size:36px;}
.com-font38{ font-size:38px;}
.com-font40{ font-size:40px;}

.com-fontn{ font-weight:normal;}
.com-fontb{ font-weight:bold;}
.com-fontl{ font-weight:lighter;}

/*color*/
.com-colorblue{ color:#006bad;}
.com-coloryello{ color:#ff9418;}
.com-coloryello02{ color:#ffb629;}
.com-colorgrey{ color:#5a5a5a;}
.com-colorfff{ color:#fff;}
.com-color000{ color:#000;}
.com-color333{ color:#333;}
.com-color666{ color:#666;}
.com-color999{ color:#999;}
.com-colorred{ color:#f00;}

/*text-shadow*/
.com-textshadowyello{ text-shadow: 0 1px rgba(212,110,0,.62);}
.com-textshadowblue{ text-shadow: 0 1px rgba(0,158,163,1);}

/*text-decoration*/
.com-textunderline{ text-decoration:underline;}
.com-textnone{ text-decoration:none;}

/*margin*/
.com-marg0{ margin:0;}
.com-marg3{ margin:3px;}
.com-marg6{ margin:6px;}
.com-marg9{ margin:9px;}
.com-marg10{ margin:10px;}
.com-marg12{ margin:12px;}
.com-marg14{ margin:14px;}
.com-marg16{ margin:16px;}
.com-marg18{ margin:18px;}
.com-marg20{ margin:20px;}

.com-top0{ margin-top:0;}
.com-top3{ margin-top:3px;}
.com-top6{ margin-top:6px;}
.com-top9{ margin-top:9px;}
.com-top10{ margin-top:10px;}
.com-top12{ margin-top:12px;}
.com-top14{ margin-top:14px;}
.com-top16{ margin-top:16px;}
.com-top18{ margin-top:18px;}
.com-top20{ margin-top:20px;}

.com-right0{ margin-right:0;}
.com-right3{ margin-right:3px;}
.com-right6{ margin-right:6px;}
.com-right9{ margin-right:9px;}
.com-right10{ margin-right:10px;}
.com-right12{ margin-right:12px;}
.com-right14{ margin-right:14px;}
.com-right16{ margin-right:16px;}
.com-right18{ margin-right:18px;}
.com-right20{ margin-right:20px;}

.com-bottom0{ margin-bottom:0;}
.com-bottom3{ margin-bottom:3px;}
.com-bottom6{ margin-bottom:6px;}
.com-bottom9{ margin-bottom:9px;}
.com-bottom10{ margin-bottom:10px;}
.com-bottom12{ margin-bottom:12px;}
.com-bottom14{ margin-bottom:14px;}
.com-bottom16{ margin-bottom:16px;}
.com-bottom18{ margin-bottom:18px;}
.com-bottom20{ margin-bottom:20px;}

.com-left0{ margin-left:0;}
.com-left3{ margin-left:3px;}
.com-left6{ margin-left:6px;}
.com-left9{ margin-left:9px;}
.com-left10{ margin-left:10px;}
.com-left12{ margin-left:12px;}
.com-left14{ margin-left:14px;}
.com-left16{ margin-left:16px;}
.com-left18{ margin-left:18px;}
.com-left20{ margin-left:20px;}

/*padding*/
.com-pad0{ padding:0;}
.com-pad3{ padding:3px;}
.com-pad6{ padding:6px;}
.com-pad9{ padding:9px;}
.com-pad10{ padding:10px;}
.com-pad12{ padding:12px;}
.com-pad14{ padding:14px;}
.com-pad16{ padding:16px;}
.com-pad18{ padding:18px;}
.com-pad20{ padding:20px;}

.com-padtop0{ padding-top:0;}
.com-padtop3{ padding-top:3px;}
.com-padtop6{ padding-top:6px;}
.com-padtop9{ padding-top:9px;}
.com-padtop10{ padding-top:10px;}
.com-padtop12{ padding-top:12px;}

.com-padright0{ padding-right:0;}
.com-padright3{ padding-right:3px;}
.com-padright6{ padding-right:6px;}
.com-padright9{ padding-right:9px;}
.com-padright10{ padding-right:10px;}
.com-padright12{ padding-right:12px;}

.com-padbottom0{ padding-bottom:0;}
.com-padbottom3{ padding-bottom:3px;}
.com-padbottom6{ padding-bottom:6px;}
.com-padbottom9{ padding-bottom:9px;}
.com-padbottom10{ padding-bottom:10px;}
.com-padbottom12{ padding-bottom:12px;}

.com-padleft0{ padding-left:0;}
.com-padleft3{ padding-left:3px;}
.com-padleft6{ padding-left:6px;}
.com-padleft9{ padding-left:9px;}
.com-padleft10{ padding-left:10px;}
.com-padleft12{ padding-left:12px;}

/*width*/
.com-width10{ width:10px;}
.com-width15{ width:15px;}
.com-width20{ width:20px;}
.com-width25{ width:25px;}
.com-width30{ width:30px;}
.com-width33{ width:33.333%;}
.com-width35{ width:35px;}
.com-width40{ width:40px;}
.com-width45{ width:45px;}
.com-width50{ width:50px;}
.com-width55{ width:55px;}
.com-width60{ width:60px;}
.com-width65{ width:65px;}
.com-width70{ width:70px;}
.com-width75{ width:75px;}
.com-width80{ width:80px;}
.com-width85{ width:85px;}
.com-width90{ width:90px;}
.com-width95{ width:95px;}
.com-width100{ width:100px;}

.com-width960{ width:960px;}
.com-width980{ width:980px;}
.com-width1000{ width:1000px;}
.com-width1100{ width:1100px;}
.com-width1200{ width:1200px;}

/*height*/
.com-height10{ height:10px;}
.com-height12{ height:12px;}
.com-height14{ height:14px;}
.com-height16{ height:16px;}
.com-height18{ height:18px;}
.com-height20{ height:20px;}
.com-height22{ height:22px;}
.com-height24{ height:24px;}
.com-height26{ height:26px;}
.com-height28{ height:28px;}
.com-height30{ height:30px;}
.com-height32{ height:32px;}
.com-height34{ height:34px;}
.com-height36{ height:36px;}
.com-height38{ height:38px;}
.com-height40{ height:40px;}
.com-height42{ height:42px;}
.com-height44{ height:44px;}
.com-height46{ height:46px;}
.com-height48{ height:48px;}
.com-height50{ height:50px;}

/*line-height*/
.com-lineheight10{ line-height:10px;}
.com-lineheight12{ line-height:12px;}
.com-lineheight14{ line-height:14px;}
.com-lineheight16{ line-height:16px;}
.com-lineheight18{ line-height:18px;}
.com-lineheight20{ line-height:20px;}
.com-lineheight22{ line-height:22px;}
.com-lineheight24{ line-height:24px;}
.com-lineheight26{ line-height:26px;}
.com-lineheight28{ line-height:28px;}
.com-lineheight30{ line-height:30px;}
.com-lineheight32{ line-height:32px;}
.com-lineheight34{ line-height:34px;}
.com-lineheight36{ line-height:36px;}
.com-lineheight38{ line-height:38px;}
.com-lineheight40{ line-height:40px;}
.com-lineheight42{ line-height:42px;}
.com-lineheight44{ line-height:44px;}
.com-lineheight46{ line-height:46px;}
.com-lineheight48{ line-height:48px;}
.com-lineheight50{ line-height:50px;}

/*line*/
.com-lineblue{ height:1px; border-bottom:1px solid #46afd4;}
.com-lineblue2{ height:1px; border-bottom:2px solid #00529f;}
.com-linegrey{ height:1px; border-bottom:1px solid #9b9b9b;}
.com-linegrey2{ height:1px; border-bottom:2px solid #9b9b9b;}

/*border-radius*/
.com-radius3{ border-radius: 3px;}
.com-radius5{ border-radius: 5px;}
.com-radius7{ border-radius: 7px;}
.com-radius9{ border-radius: 9px;}
.com-radius10{ border-radius: 10px;}

/*border-line*/
.com-borderblue{ border:1px solid #46afd4;}
.com-bordertopblue{ border-top:1px solid #46afd4;}
.com-borderrightblue{ border-right:1px solid #46afd4;}
.com-borderbottomblue{ border-bottom:1px solid #46afd4;}
.com-borderleftblue{ border-left:1px solid #46afd4;}

.com-bordergrey{ border:1px solid #9b9b9b;}
.com-bordertopgrey{ border-top:1px solid #9b9b9b;}
.com-borderrightgrey{ border-right:1px solid #9b9b9b;}
.com-borderbottomgrey{ border-bottom:1px solid #9b9b9b;}
.com-borderleftgrey{ border-left:1px solid #9b9b9b;}

/*float*/
.com-left{ float:left; display:inline;}
.com-right{ float:right; display:inline;}

/*align*/
.com-alignleft{ text-align:left;}
.com-alignright{ text-align:right;}
.com-aligncenter{ text-align:center;}

/*vertical-align*/
.com-veralignm{ vertical-align:middle;}
.com-veralignt{ vertical-align:top;}
.com-veralignb{ vertical-align:bottom;}

/*display*/
.com-block{ display:block;}
.com-inline{ display:inline;}
.com-inlineblock{ display:inline-block;}

/*position*/
.com-relative{ position:relative;}
.com-absolute{ position:absolute;}
.com-fixed{position:fixed;}

/*相关组件*/
textarea{ 
  background-color: #fff;
  border: 1px solid #ebebeb;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}
textarea:focus{  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

select{ border-radius: 5px; border:1px solid #9b9b9b;}

/*background-color*/
.com-backfff{ background-color: #fff;}
.com-backblue{ background-color: #00b7bc;}
.com-backblue01{ background-color: #53c5dd;}
.com-backblue02{ background-color: #5eadcb;}
.com-backgreen{ background-color: #56b65f;}
.com-backyello{ background-color: #ffb629;}
.com-backyello02{ background-color: #ffc452;}
.com-backred{ background-color: #ffefdd;}
.com-backbrown{ background-color: #c2af74;}
.com-backviolet{ background-color: #c79cc9;}
.com-backgrey{ background-color: #eee;}
.com-backgrey01{ background-color: #f1f1f1;}

/***buttons***/
/*flat*/
.com-flat-btnblue{ border:none; background: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #46afd4; display: inline-block;}
.com-flat-btnyello{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #ffb629; display: inline-block;}

/*skeuomorphism*/
.com-ske-btnblue{
	padding: 5px;
	min-width: 42px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #fe0001;
	-webkit-box-shadow: inset 0 1px rgba(255,255,255,.75);
	-moz-box-shadow: inset 0 1px rgba(255,255,255,.75);
	box-shadow: inset 0 1px rgba(255,255,255,.75);
	border: solid 1px #0b7094;
	background-image: -webkit-linear-gradient(bottom, #46afd4, #51c7f0);
	background-image: -moz-linear-gradient(bottom, #46afd4, #51c7f0);
	background-image: -o-linear-gradient(bottom, #46afd4, #51c7f0);
	background-image: -ms-linear-gradient(bottom, #46afd4, #51c7f0);
	background-image: linear-gradient(to top, #46afd4, #51c7f0);}
.com-ske-btnyello{
	padding: 5px;
	min-width: 42px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #f17e05;
	-webkit-box-shadow: inset 0 1px rgba(255,255,255,.53);
	-moz-box-shadow: inset 0 1px rgba(255,255,255,.53);
	box-shadow: inset 0 1px rgba(255,255,255,.53);
	border: solid 1px #cb5102;
	background-image: -webkit-linear-gradient(bottom, #ef7301, #f5900a);
	background-image: -moz-linear-gradient(bottom, #ef7301, #f5900a);
	background-image: -o-linear-gradient(bottom, #ef7301, #f5900a);
	background-image: -ms-linear-gradient(bottom, #ef7301, #f5900a);
	background-image: linear-gradient(to top, #ef7301, #f5900a);
}

/***flex***/
/*flex-horizontal*/
.com-flex-hor{ display: -webkit-box; -webkit-box-orient: horizontal;}
.com-flex-hor-child{ -webkit-box-align: center; -webkit-box-flex: 1;}

/*flex-vertical*/
.com-flex-ver{ display: -webkit-box; -webkit-box-orient:vertical; -moz-box-orient:vertical; -ms-box-orient:vertical; -o-box-orient:vertical;}
.com-flex-ver-child{ -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; -o-box-flex: 1;}

/*box-sizing*/
.com-borderBox{ box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing:border-box;}

/*表单*/
.errorInput{border:1px solid #FFA0A0}
.successInput{border:1px solid green}

/*表单输入框/select效果*/
.field-wrap{position:relative}
.field-wrap label{color:#999;position:absolute;left:13px;top:5px;opacity:0;transition: all 0.2s ease-out 0s;}
.field-input{transition: all 0.2s ease-out 0s;width:100%;border-radius: 4px;box-sizing: border-box;display:block;padding:13px 11px;box-shadow: 0 0 0 1px #d9d9d9;border:none; font-family: '宋体';}
.field-input:focus{box-shadow:0 0 0 2px #f68529}
.field-input-show{padding:21px 11px 5px}
.field-input-show::-moz-placeholder{color:transparent}
.field-input-show::-webkit-input-placeholder{color:transparent}
.field-input-show::-ms-input-placeholder{color:transparent}
select::-ms-expand{display:none}
select.field-input{ box-sizing: border-box; height: 43px; padding:21px 11px 5px 9px; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; background: url(../images/select-bg.gif) right center no-repeat;}
label.field-select{ opacity: 1;}

span.tip{ width: 18px; height: 18px; border-radius: 50%; background-color: #d4d4d4; display: inline-block; position: absolute; right: 12px;}