/* ====================================================================================================================================== */

* { margin:0; padding:0; }
a { text-decoration:none; color:#000; }
a:hover { text-decoration:none; }
ul { margin:0; padding:0; }
li { list-style-type:none; }
body { background-color:#f5f5f5; }

.framepage { box-sizing:border-box; border:0px solid #390; }
.framepage header { position:relative; background:#393D49; padding:20px; }
.framepage header h1 { font:28px/45px "微软雅黑"; color:#fff; margin:0; }
.framepage header a { position:absolute; right:25px; top:25px; padding:0 20px; font:15px/35px "微软雅黑"; color:#94979e; background:#393D49; border:1px solid #94979e; transition:all 0.3s ease 0s; border-radius:20px; }
.framepage header a:hover { color:#c4c7d2; border:1px solid #c4c7d2; }

.framepage footer { background:#f5f5f5; }
.framepage footer.fix { position:fixed; left:0; bottom:0; z-index: 500; width:100%; }
.framepage footer .content { width:100%; margin:auto; padding:20px 0; text-align:center; border:0px solid #f00; }
.framepage footer .content .copyright { font:13px/15px "微软雅黑"; color:#818692; margin:5px 0; }
.framepage footer .content a { display:inline-block; font:13px/1em "微软雅黑"; color:#818692; transition:all 0.2s ease 0s; }
.framepage footer .content a:hover { color:#47C1F4; }

/* ====================================================================================================================================== */

.framepage .title { font:20px/35px "微软雅黑"; margin:20px; padding:10px; background:#eee; }

.framepage .section1 { position:relative; background:#fff; margin:20px; padding:12px 10px; font-size:0; border:1px solid #e9e9e9; border-radius:5px; }
.framepage .section1 h3 { font:16px/35px "微软雅黑"; color:#888; margin:0; padding:0 5px 5px; }
.framepage .section1 h3 span { color:#bbb; }
.framepage .section1 li { position:relative; display:inline-block; width:120px; margin:5px; box-sizing:border-box; border:1px solid #eee; border-radius:5px; }
.framepage .section1 li b { position:absolute; right:-8px; top:-8px; z-index:5; display:block; width:28px; height:28px; padding:2px; background:#fff; border-radius:50%; cursor:pointer; box-sizing:content-box; }
.framepage .section1 li img { width:100%; border-radius:5px; opacity:0.9; }
.framepage .section1 .btn_add { cursor:pointer; }
.framepage .section1 .btn_add:active { border:1px solid #e5e5e5; }

.framepage .section2 { position:relative; background:#fff; margin:20px; padding:10px 15px 15px; border:1px solid #e9e9e9; border-radius:5px; }
.framepage .section2 h3 { font:16px/35px "微软雅黑"; color:#888; margin:0; padding:0 0 5px; }
.framepage .section2 img { width:200px; border:1px solid #eee; border-radius:3px; cursor:pointer; }
.framepage .section2 img:active { border:1px solid #e5e5e5; }

.framepage .section3 { position:relative; background:#fff; margin:20px; padding:10px 15px 15px; border:1px solid #e9e9e9; border-radius:5px; }
.framepage .section3 h3 { font:16px/35px "微软雅黑"; color:#888; margin:0; padding:0 0 5px; }
.framepage .section3 li { position:relative; margin:10px 0; padding-right: 40px; font:16px/1.5em "微软雅黑"; word-break: break-all; }
.framepage .section3 li b { position:absolute; right:0; top:2px; z-index:5; display:block; width:20px; height:20px; cursor:pointer; }
.framepage .section3 li img { width:100%; border-radius:5px; opacity:0.9; }
.framepage .section3 .btn_add { width:100px; margin: 10px 0 0; border:1px solid #eee; border-radius:3px; cursor:pointer; }
.framepage .section3 .btn_add:active { border:1px solid #e5e5e5; }

/* ====================================================================================================================================== */

.btn { position:relative; display:block; font:15px/45px "微软雅黑"; color:#fff; text-align:center; background-color:#6EC174; border:none; border-radius:5px; cursor:pointer; overflow:hidden; }
.btn:after { position:absolute; left:0; top:0; width:200%; height:200%; box-sizing:border-box; content:""; -webkit-transform:scale(0.5); transform:scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.btn:active:after { background:rgba(0,0,0,0.1); }

.btn.red     { background-color:#ff7777; }
.btn.blue    { background-color:#5BC0DE; }
.btn.grey    { background-color:#dddddd; }
.btn.green   { background-color:#6EC174; }
.btn.yellow  { background-color:#E9CC7F; }
.btn.disable { background-color:#dddddd !important; color:#f5f5f5 !important; }
.btn.disable:after { display:none; }


.red01 { background:#ee2222 !important; }
.red02 { background:#ff3333 !important; }
.red03 { background:#DB6446 !important; }
.red04 { background:#F86F45 !important; }
.red05 { background:#ED5565 !important; }
.red06 { background:#d9534f !important; }
.red07 { background:#ff7777 !important; }

.blue01 { background:#54729C !important; }
.blue02 { background:#5BC0DE !important; }
.blue03 { background:#2B3141 !important; }
.blue04 { background:#58A1AC !important; }
.blue05 { background:#0088D1 !important; }
.blue06 { background:#4BC1F3 !important; }
.blue07 { background:#5B74AE !important; }
.blue08 { background:#1C84C6 !important; }
.blue09 { background:#23C6C8 !important; }

.grey01 { background:#dddddd !important; }
.grey02 { background:#6C798C !important; }

.green01 { background:#4AA301 !important; }
.green02 { background:#10A64F !important; }
.green03 { background:#419341 !important; }
.green04 { background:#1cad68 !important; }
.green05 { background:#1AB394 !important; }
.green06 { background:#6EC174 !important; }
.green07 { background:#5CB85C !important; }

.orange01 { background:#f8a82a !important; }
.orange02 { background:#ee8e11 !important; }
.orange03 { background:#FFBA1F !important; }
.orange04 { background:#F8AC59 !important; }
.orange05 { background:#E9CC7F !important; }


.hhform input[type=text],
.hhform input[type=password],
.hhform input[type=number],
.hhform input[type=tel] {
	display:block;
	width:100%; height:50px;
	margin:10px 0; padding:0 12px;
	font:16px/20px "微软雅黑"; color:#888;
	background:#fff;
	border:1px solid #e5e5e5;
	border-radius:4px;
	outline:none;
	-webkit-appearance:none;
	appearance:none;
	box-sizing:border-box;
	box-shadow:none;
}
.hhform input[type=text]:disabled,
.hhform input[type=password]:disabled,
.hhform input[type=number]:disabled,
.hhform input[type=tel]:disabled {
	background:#f7f7f7 !important;
	border:1px solid #e5e5e5 !important;
	color:#ddd !important;
	opacity:1;
}
.hhform input[type=text]:focus,
.hhform input[type=password]:focus,
.hhform input[type=number]:focus,
.hhform input[type=tel]:focus {
	border:1px solid #6EC174;
	box-shadow:none;
	outline:none;
}
.hhform input.sm { height:45px; padding:0 10px; font:15px/20px "微软雅黑"; }
.hhform input.lg { height:55px; padding:0 12px; font:18px/20px "微软雅黑"; }

/* placeholder 样式修改 */
.hhform input::-webkit-input-placeholder { font-size: 16px; line-height: 22px; }
.hhform input::-moz-placeholder { font-size: 16px; line-height: 22px; }
.hhform input:-moz-placeholder { font-size: 16px; line-height: 22px; }
.hhform input:-ms-placeholder { font-size: 16px; line-height: 22px; }

.hhform input.sm::-webkit-input-placeholder { font-size: 16px; line-height: 22px; }
.hhform input.sm::-moz-placeholder { font-size: 16px; line-height: 22px; }
.hhform input.sm:-moz-placeholder { font-size: 16px; line-height: 22px; }
.hhform input.sm:-ms-placeholder { font-size: 16px; line-height: 22px; }

.hhform input.lg::-webkit-input-placeholder { font-size: 18px; line-height: 28px; }
.hhform input.lg::-moz-placeholder { font-size: 18px; line-height: 25px; }
.hhform input.lg:-moz-placeholder { font-size: 18px; line-height: 25px; }
.hhform input.lg:-ms-placeholder { font-size: 18px; line-height: 25px; }


.hhform select {
	position:relative;
	display:block;
	width:100%; height:50px;
	margin:10px 0; padding:0 12px;
	font:16px/20px "微软雅黑"; color:#888;
	background:#fff;
	border:1px solid #e5e5e5;
	border-radius:4px;
	outline:none;
	-webkit-appearance:none;
	appearance:none;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	box-shadow:none;
}
.hhform select:focus    { border:1px solid #6EC174; box-shadow:none; outline:none; }
.hhform select:disabled { background:#f7f7f7 !important; border:1px solid #e5e5e5; color:#ddd !important; opacity:1; }
.hhform select.sm { height:45px; padding:0 10px; font:15px/20px "微软雅黑"; }
.hhform select.lg { height:55px; padding:0 12px; font:18px/20px "微软雅黑"; }


.hhform textarea {
	display:block;
	width:100%; min-height:125px;
	margin:10px 0; padding:12px 12px;
	font:16px/25px "微软雅黑"; color:#888;
	border:1px solid #e5e5e5;
	border-radius:4px;
	outline:none;
	-webkit-appearance:none;
	appearance:none;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	box-shadow:none;
	resize:vertical;
}
.hhform textarea:disabled {
	background:#f5f5f5 !important;
	border:1px solid #e5e5e5;
	color:#ddd !important;
	opacity:1;
}
.hhform textarea:focus {
	border:1px solid #6EC174;
	box-shadow:none;
	outline:none;
}
.hhform textarea.sm { min-height:115px; padding:10px 8px; font:15px/24px "微软雅黑"; }
.hhform textarea.lg { min-height:140px; padding:12px 12px; font:18px/28px "微软雅黑"; }


input[type=checkbox].hh_switch {
    position:relative;
    width:35px; height:20px;
    margin:0; padding:0;
    background:#DFDFDF;
    overflow:hidden;
    border:1px solid #DFDFDF;
    border-radius:16px;
    -webkit-appearance:none;
    appearance:none;
	box-sizing:content-box;
	box-shadow:none;
    outline:none;
	cursor:pointer;
    -webkit-transition: all .25s;
    transition: all .25s;
}
input[type=checkbox].hh_switch:before {
    content:"";
    position:absolute;
    left:0; top:0;
    width:35px; height:20px;
    border-radius:20px;
    background:#eee;
    -webkit-transition: all .25s;
    transition: all .25s;
}
input[type=checkbox].hh_switch:after {
    content:"";
    position:absolute;
    left:-1px; top:-1px;
    width:20px; height:20px;
    border-radius:20px;
    background:#fff;
    border:1px solid #DFDFDF;
    -webkit-transition: all .25s;
    transition: all .25s;
}
input[type=checkbox].hh_switch:checked {
    border-color:#74b073;
    background-color:#74b073;
}
input[type=checkbox].hh_switch:checked:before {
    -webkit-transform:scale(0);
    transform:scale(0);
}
input[type=checkbox].hh_switch:checked:after {
	border-color:#74b073;
    -webkit-transform:translateX(15px);
    transform:translateX(15px);
}

input[type=checkbox].hh_switch:disabled       { opacity:0.4; }
input[type=checkbox].hh_switch:disabled:after { background:#f9f9f9; }

input[type=checkbox].hh_switch.round1        { width:40px; height:18px; border-radius:3px; }
input[type=checkbox].hh_switch.round1:before { width:40px; height:18px; border-radius:3px; }
input[type=checkbox].hh_switch.round1:after  { width:18px; height:18px; border-radius:3px; }
input[type=checkbox].hh_switch.round1:checked:after { -webkit-transform:translateX(22px); transform:translateX(22px); }

input[type=checkbox].hh_switch.round2        { border-radius:3px; }
input[type=checkbox].hh_switch.round2:before { border-radius:3px; }
input[type=checkbox].hh_switch.round2:after  { border-radius:3px; top:1px; left:1px; width:16px; height:16px; }

input[type=checkbox].hh_switch.sm { width:32px; height:18px; }
input[type=checkbox].hh_switch.sm:before { width:32px; height:18px; }
input[type=checkbox].hh_switch.sm:after  { width:18px; height:18px; }
input[type=checkbox].hh_switch.sm:checked:after { -webkit-transform:translateX(14px); transform:translateX(14px); }

input[type=checkbox].hh_switch.lg { width:38px; height:22px; }
input[type=checkbox].hh_switch.lg:before { width:38px; height:22px; }
input[type=checkbox].hh_switch.lg:after  { width:22px; height:22px; }
input[type=checkbox].hh_switch.lg:checked:after { -webkit-transform:translateX(16px); transform:translateX(16px); }

input[type=checkbox].hh_switch.light:checked        { background:#04BE02; border-color:#04BE02; }
input[type=checkbox].hh_switch.light:checked:after  { border-color:#04BE02; }
input[type=checkbox].hh_switch.red:checked          { background:#ED5565; border-color:#ED5565; }
input[type=checkbox].hh_switch.red:checked:after    { border-color:#ED5565; }
input[type=checkbox].hh_switch.blue:checked         { background:#54c7fc; border-color:#54c7fc; }
input[type=checkbox].hh_switch.blue:checked:after   { border-color:#54c7fc; }
input[type=checkbox].hh_switch.dark:checked         { background:#0074D9; border-color:#0074D9; }
input[type=checkbox].hh_switch.dark:checked:after   { border-color:#0074D9; }
input[type=checkbox].hh_switch.yellow:checked       { background:#E9CC7F; border-color:#E9CC7F; }
input[type=checkbox].hh_switch.yellow:checked:after { border-color:#E9CC7F; }


input[type=checkbox].hh_checkbox {
    position:relative;
    width:18px; height:18px;
    margin:0; padding:0;
    background:#fff;
    overflow:hidden;
    border:1px solid #DFDFDF;
    border-radius:3px;
    -webkit-appearance:none;
    appearance:none;
	box-sizing:content-box;
	box-shadow:none;
    outline:none;
	cursor:pointer;
	-webkit-transition: all 300ms cubic-bezier(.4,0,.23,1);
	transition: all 300ms cubic-bezier(.4,0,.23,1);
}
input[type=checkbox].hh_checkbox:checked {
	background:#5ECD62;
	border:1px solid #5ECD62;
	-webkit-animation: hh_check .3s cubic-bezier(.4,0,.5,1);
	animation: hh_check .3s cubic-bezier(.4,0,.5,1);
}
input[type=checkbox].hh_checkbox:checked:before {
	position:absolute;
	left:35%; top:15%;
	width:4px; height:8px;
	content:"";
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
input[type=checkbox].hh_checkbox:disabled {
	background2:#e5e5e5 !important;
	border-color2:#e5e5e5 !important;
	opacity:0.4 !important;
}

input[type=checkbox].hh_checkbox.circle { width:20px; height:20px; border-radius:40px; }
input[type=checkbox].hh_checkbox.circle:before { left:35%; top:18%; width:4px; height:9px; }

input[type=checkbox].hh_checkbox.circle.sm { width:17px; height:17px; }
input[type=checkbox].hh_checkbox.circle.sm:before { left:38%; top:20%; width:3px; height:7px; }

input[type=checkbox].hh_checkbox.circle.lg { width:22px; height:22px; }
input[type=checkbox].hh_checkbox.circle.lg:before { left:32%; top:18%; width:5px; height:10px; }

input[type=checkbox].hh_checkbox.sm { width:16px; height:16px; }
input[type=checkbox].hh_checkbox.sm:before { width:4px; height:8px; }

input[type=checkbox].hh_checkbox.lg { width:20px; height:20px; }
input[type=checkbox].hh_checkbox.lg:before { width:5px; height:10px; }

input[type=checkbox].hh_checkbox.red:checked    { background:#ED5565; border-color:#ED5565; }
input[type=checkbox].hh_checkbox.blue:checked   { background:#54c7fc; border-color:#54c7fc; }
input[type=checkbox].hh_checkbox.dark:checked   { background:#0074D9; border-color:#0074D9; }
input[type=checkbox].hh_checkbox.yellow:checked { background:#E9CC7F; border-color:#E9CC7F; }
input[type=checkbox].hh_checkbox.black:checked  { background:#111111; border-color:#111111; }

@-webkit-keyframes hh_check {
  0%{
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  33%{    
    -webkit-transform: scale(.5);    
            transform: scale(.5);
  }
  100%{
    -webkit-transform: scale(1);
            transform: scale(1);    
  }
}

@keyframes hh_check {
  0%{
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  33%{    
    -webkit-transform: scale(.5);    
            transform: scale(.5);
  }
  100%{
    -webkit-transform: scale(1);
            transform: scale(1);    
  }
}



input[type=radio].hh_radio {
    position:relative;
    width:20px; height:20px;
    margin:0; padding:0;
    background:#fff;
    overflow:hidden;
    border:1px solid #dfdfdf;
    border-radius:20px;
    -webkit-appearance:none;
    appearance:none;
	box-sizing:content-box;
	box-shadow:none;
    outline:none;
	cursor:pointer;
}
input[type=radio].hh_radio:before {
	-webkit-animation: hh_check .35s cubic-bezier(.4,0,.5,1);
	animation: hh_check .35s cubic-bezier(.4,0,.5,1);
}
input[type=radio].hh_radio:checked:before {
	content:"";
	position:absolute;
	left:2px; top:2px;
	width:16px; height:16px;
	border-radius:20px;
	background:#5ECD62;
}
input[type=radio].hh_radio:disabled {
	background2:#e5e5e5 !important;
	border-color2:#e5e5e5 !important;
	opacity:0.4 !important;
}

input[type=radio].hh_radio.sm { width:18px; height:18px; }
input[type=radio].hh_radio.sm:before { width:14px; height:14px; }

input[type=radio].hh_radio.lg { width:22px; height:22px; }
input[type=radio].hh_radio.lg:before { width:18px; height:18px; }

input[type=radio].hh_radio.red:before    { background:#ED5565; }
input[type=radio].hh_radio.blue:before   { background:#54c7fc; }
input[type=radio].hh_radio.dark:before   { background:#0074D9; }
input[type=radio].hh_radio.yellow:before { background:#E9CC7F; }
input[type=radio].hh_radio.black:before  { background:#111111; }





.hhform .bindgroup { display:table; width:100%; margin:10px 0 15px; border-collapse:separate; position:relative; background:#fafafa; border:1px solid #e5e5e5; border-radius:3px; overflow:hidden; box-sizing:border-box; background:#fff; }
.hhform .bindgroup .label  { display:table-cell; width:0.1%; white-space:nowrap; vertical-align:top; font:16px/50px "微软雅黑" !important; color:#555; padding-left:12px; }
.hhform .bindgroup .hhicon { display:table-cell; width:0.1%; white-space:nowrap; vertical-align:top; font:16px/50px "微软雅黑" !important; color:#555; padding-left:12px; }
.hhform .bindgroup .hhicon:before { font:22px/30px "hhicon"; vertical-align:-7%; }
.hhform .bindgroup .hhicon.label:before { padding:0 7px 0 0; }
.hhform .bindgroup input,
.hhform .bindgroup select,
.hhform .bindgroup textarea { display:table-cell; float:left; width:100%; margin:0; border:none; outline:none; border-radius:3px; }
.hhform .bindgroup input:focus { border:none; box-shadow:none; }
.hhform .bindgroup .btn_clean { display:table-cell; width:1%; padding:0 10px; vertical-align:top; white-space:nowrap; cursor:pointer; display:none; }
.hhform .bindgroup .btn_clean:before { font:22px/50px "hhicon"; content:"\e608"; color:#bbb; vertical-align:-7%; }
.hhform .bindgroup .btn_clean:hover:before { color:#888; }
.hhform .bindgroup .unit { position:absolute; right:0; top:0; max-width:20%; min-width:20px; padding:0 15px 0 0; font:16px/50px "微软雅黑"; color:#999; background:#fff; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.hhform .bindgroup.lg .label  { font:18px/55px "微软雅黑" !important; }
.hhform .bindgroup.lg .hhicon { font:18px/55px "微软雅黑" !important; }
.hhform .bindgroup.lg .hhicon:before { font:25px/30px "hhicon"; }
.hhform .bindgroup.lg .btn_clean:before { font:22px/55px "hhicon"; }
.hhform .bindgroup.lg .unit { font:18px/55px "微软雅黑"; }

.hhform .bindgroup.active { border:1px solid #6EC174; }
.hhform .bindgroup.active .btn_clean { display:table-cell; }


.hhform .group { border:1px solid #e5e5e5; margin:10px 0 0; border-radius:3px; overflow:hidden; }
.hhform .group .bindgroup { margin:-1px; box-sizing:content-box; border-radius:0; border:1px solid #e5e5e5 !important; }


/* temp style */

.hhform .phonegroup { position:relative; margin-bottom:15px; padding-right:132px; }
.hhform .phonegroup input { margin:0; }
.hhform .phonegroup .get_yzm { display:block; font:16px/50px "微软雅黑"; color:#777; text-align:center; position:absolute; right:0; top:0; width:120px; background:#fff; border:1px solid #e5e5e5; border-radius:3px; box-sizing:border-box; }
.hhform .phonegroup .get_yzm.disable { background:#f5f5f5; color:#bbb; }

.hhform .phonegroup.lg .bindgroup { margin:0 ; }
.hhform .phonegroup.lg input { height:55px; margin:0; font-size:18px; }
.hhform .phonegroup.lg .label  { font:18px/55px "微软雅黑" !important; }
.hhform .phonegroup.lg .hhicon { font:18px/55px "微软雅黑" !important; }
.hhform .phonegroup.lg .hhicon:before { font:25px/30px "hhicon"; }
.hhform .phonegroup.lg .btn_clean:before { font:22px/55px "hhicon"; }
.hhform .phonegroup.lg .unit { font:18px/55px "微软雅黑"; }
.hhform .phonegroup.lg .get_yzm { font:18px/55px "微软雅黑"; }

.hhform .phonegroup.lg input::-webkit-input-placeholder { font-size: 18px; line-height: 28px; }
.hhform .phonegroup.lg input::-moz-placeholder { font-size: 18px; line-height: 25px; }
.hhform .phonegroup.lg input:-moz-placeholder { font-size: 18px; line-height: 25px; }
.hhform .phonegroup.lg input:-ms-placeholder { font-size: 18px; line-height: 25px; }

.hhform .conidgroup { position:relative; height:50px; margin-bottom:15px; }
.hhform .conidgroup .bindgroup:nth-child(1) { position:absolute; left:0; right:62px; background:#fff; border:1px solid #e5e5e5; border-radius:5px; }
.hhform .conidgroup .bindgroup:nth-child(1) input { width:100%; }
.hhform .conidgroup .bindgroup:nth-child(2) { position:absolute; right:0; top:0; width:50px; height:50px; overflow:hidden; background:#fff; border:1px solid #e5e5e5; border-radius:5px; }
.hhform .conidgroup .bindgroup:nth-child(2) .scan { display:block; font:17px/50px "微软雅黑"; color:#777; text-align:center; }
.hhform .conidgroup .bindgroup:nth-child(2) .scan:before { display:block; font:25px/50px "iconfont"; content:"\e612"; }

.hhform .protocol { position:relative; color:#999; display:inline-block; padding:0 0 0 28px; margin:8px 0 3px; }
.hhform .protocol:before { position:absolute; left:0; top:0; font:22px/1em "iconfont"; color:#690; content:"\e644"; }
.hhform .protocol.active:before { content:"\e643"; }

.hhform p.info { font:12px/20px "微软雅黑"; color:#666; text-align:center; margin-top:20px;}
.hhform p.info a { padding:0.2em; color:#390;}
.hhform p.info a:hover { font-weight:700;}

/* ====================================================================================================================================== */

/* 动画特效（由小变大） */

@-webkit-keyframes hhFancyIn
{
	0%   { opacity:0; -webkit-transform: scale(.6); transform: scale(.6); }
	33%  {            -webkit-transform: scale(.5); transform: scale(.5); }
	100% { opacity:1; -webkit-transform: scale(1);  transform: scale(1); }
}
@keyframes hhFancyIn
{
	0%   { opacity:0; -webkit-transform: scale(.6); transform: scale(.6); }
	33%  {            -webkit-transform: scale(.5); transform: scale(.5); }
	100% { opacity:1; -webkit-transform: scale(1);  transform: scale(1); }
}
@-webkit-keyframes hhFancyOut
{
	0%   { opacity:1; -webkit-transform: scale(1);   transform: scale(1); }
	33%  {            -webkit-transform: scale(1.1); transform: scale(1.1); }
	100% { opacity:0; -webkit-transform: scale(.5);  transform: scale(.5); }
}
@keyframes hhFancyOut
{
	0%   { opacity:1; -webkit-transform: scale(1);   transform: scale(1); }
	33%  {            -webkit-transform: scale(1.1); transform: scale(1.1); }
	100% { opacity:0; -webkit-transform: scale(.5);  transform: scale(.5); }
}
.anim_fancyIn  { -webkit-animation: hhFancyIn .3s cubic-bezier(.4,0,.5,1);  animation: hhFancyIn .3s cubic-bezier(.4,0,.5,1); }
.anim_fancyOut { -webkit-animation: hhFancyOut .3s cubic-bezier(1,.5,0,.4); animation: hhFancyOut .3s cubic-bezier(1,.5,0,.4); }


/* 动画特效（由小变大） */

@-webkit-keyframes hhBounceIn
{
	0%   { opacity:0; -webkit-transform: scale(.5); transform: scale(.5); }
	100% { opacity:1; -webkit-transform: scale(1);  transform: scale(1); }
}
@keyframes hhBounceIn
{
	0%   { opacity:0; -webkit-transform: scale(.5); transform: scale(.5); }
	100% { opacity:1; -webkit-transform: scale(1);  transform: scale(1); }
}
@-webkit-keyframes hhBounceOut
{
	0%   { opacity:1; -webkit-transform: scale(1);    transform: scale(1); }
	30%  { opacity:0.7; -webkit-transform: scale(1.05); transform: scale(1.05); }
	100% { opacity:0; -webkit-transform: scale(.7);   transform: scale(.7); }
}
@keyframes hhBounceOut
{
	0%   { opacity:1; -webkit-transform: scale(1);    transform: scale(1); }
	30%  { opacity:0.7; -webkit-transform: scale(1.05); transform: scale(1.05); }
	100% { opacity:0; -webkit-transform: scale(.7);   transform: scale(.7); }
}
.anim_bounceIn  { -webkit-animation: hhBounceIn .3s;  animation: hhBounceIn .3s; }
.anim_bounceOut { -webkit-animation: hhBounceOut .2s; animation: hhBounceOut .2s; }



/* 动画特效（从下滑入） */

@-webkit-keyframes hhSlideUpIn
{
	0%   { opacity:0; -webkit-transform:translateY(300px); transform:translateY(300px); }
	100% { opacity:1; -webkit-transform:translateY(0);     transform:translateY(0);     }
}
@keyframes hhSlideUpIn
{
	0%   { opacity:0; -webkit-transform:translateY(300px); transform:translateY(300px); }
	100% { opacity:1; -webkit-transform:translateY(0);     transform:translateY(0);     }
}
@-webkit-keyframes hhSlideUpOut
{
	0%   { opacity:1; -webkit-transform:translateY(0);     transform:translateY(0);     }
	100% { opacity:0; -webkit-transform:translateY(200px); transform:translateY(200px); }
}
@keyframes hhSlideUpOut
{
	0%   { opacity:1; -webkit-transform:translateY(0);     transform:translateY(0);     }
	100% { opacity:0; -webkit-transform:translateY(200px); transform:translateY(200px); }
}
.anim_slideUpIn  { -webkit-animation: hhSlideUpIn .3s;  animation: hhSlideUpIn .3s; }
.anim_slideUpOut { -webkit-animation: hhSlideUpOut .2s; animation: hhSlideUpOut .2s; }



/* 动画特效（从上滑入） */

@-webkit-keyframes hhSlideDownIn
{
	0%   { opacity:0; -webkit-transform:translateY(-200px); transform:translateY(-200px); }
	100% { opacity:1; -webkit-transform:translateY(0);      transform:translateY(0);      }
}
@keyframes hhSlideDownIn
{
	0%   { opacity:0; -webkit-transform:translateY(-200px); transform:translateY(-200px); }
	100% { opacity:1; -webkit-transform:translateY(0);      transform:translateY(0);      }
}
@-webkit-keyframes hhSlideDownOut
{
	0%   { opacity:1; -webkit-transform:translateY(0);      transform:translateY(0);      }
	100% { opacity:0; -webkit-transform:translateY(-100px); transform:translateY(-100px); }
}
@keyframes hhSlideDownOut
{
	0%   { opacity:1; -webkit-transform:translateY(0);      transform:translateY(0);      }
	100% { opacity:0; -webkit-transform:translateY(-100px); transform:translateY(-100px); }
}
.anim_slideDownIn  { -webkit-animation: hhSlideDownIn .3s;  animation: hhSlideDownIn .3s; }
.anim_slideDownOut { -webkit-animation: hhSlideDownOut .2s; animation: hhSlideDownOut .2s; }



/* 动画特效（从左滑入） */

@-webkit-keyframes hhSlideLeftIn
{
	0%   { opacity:0; -webkit-transform:translateX(-500px); transform:translateX(-500px); }
	100% { opacity:1; -webkit-transform:translateX(0);      transform:translateX(0);      }
}
@keyframes hhSlideLeftIn
{
	0%   { opacity:0; -webkit-transform:translateX(-500px); transform:translateX(-500px); }
	100% { opacity:1; -webkit-transform:translateX(0);      transform:translateX(0);      }
}
@-webkit-keyframes hhSlideLeftOut
{
	0%   { opacity:1; -webkit-transform:translateX(0);       transform:translateX(0);       }
	100% { opacity:0; -webkit-transform:translateX(-500px); transform:translateX(-500px); }
}
@keyframes hhSlideLeftOut
{
	0%   { opacity:1; -webkit-transform:translateX(0);      transform:translateX(0);      }
	100% { opacity:0; -webkit-transform:translateX(-500px); transform:translateX(-500px); }
}
.anim_slideLeftIn  { -webkit-animation: hhSlideLeftIn .3s;  animation: hhSlideLeftIn .3s; }
.anim_slideLeftOut { -webkit-animation: hhSlideLeftOut .2s; animation: hhSlideLeftOut .2s; }



/* 动画特效（从右滑入） */

@-webkit-keyframes hhSlideRightIn
{
	0%   { opacity:0; -webkit-transform:translateX(500px); transform:translateX(500px); }
	100% { opacity:1; -webkit-transform:translateX(0);     transform:translateX(0);     }
}
@keyframes hhSlideRightIn
{
	0%   { opacity:0; -webkit-transform:translateX(500px); transform:translateX(500px); }
	100% { opacity:1; -webkit-transform:translateX(0);     transform:translateX(0);     }
}
@-webkit-keyframes hhSlideRightOut
{
	0%   { opacity:1; -webkit-transform:translateX(0);     transform:translateX(0);     }
	100% { opacity:0; -webkit-transform:translateX(500px); transform:translateX(500px); }
}
@keyframes hhSlideRightOut
{
	0%   { opacity:1; -webkit-transform:translateX(0);     transform:translateX(0);     }
	100% { opacity:0; -webkit-transform:translateX(500px); transform:translateX(500px); }
}
.anim_slideRightIn  { -webkit-animation: hhSlideRightIn .3s;  animation: hhSlideRightIn .3s; }
.anim_slideRightOut { -webkit-animation: hhSlideRightOut .2s; animation: hhSlideRightOut .2s; }



/* 动画特效（从上放大滑入） */

@-webkit-keyframes zoomDownIn
{
	0%   { opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
	60%  { opacity:0.6;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	100% { opacity:1; }
}
@keyframes zoomDownIn
{
	0%   { opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
	60%  { opacity:0.6;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	100% { opacity:1; }
}
.anim_zoomDownIn  { -webkit-animation:zoomDownIn .3s; animation:zoomDownIn .3s; }
.anim_zoomDownOut { -webkit-animation: hhBounceOut .2s; animation: hhBounceOut .2s; }



/* 动画特效（左右震动） */

@-webkit-keyframes shake_x
{
	0%,100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
	10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}
	20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}
}
@keyframes shake_x
{
	0%,100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
	10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}
	20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}
}
.anim_shakeIn  { -webkit-animation: shake_x .3s; animation:shake_x .3s; }
.anim_shakeOut { -webkit-animation: hhBounceOut .2s; animation: hhBounceOut .2s; }



/* 动画特效（上下震动） */

@-webkit-keyframes shake_y
{
	0%,100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
	10%,30%,50%,70%,90%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}
	20%,40%,60%,80%{-webkit-transform:translateY(10px);transform:translateY(10px)}
}
@keyframes shake_y
{
	0%,100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
	10%,30%,50%,70%,90%{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}
	20%,40%,60%,80%{-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}
}
.anim_shake2In  { -webkit-animation: shake_y .3s; animation:shake_y .3s; }
.anim_shake2Out { -webkit-animation: hhBounceOut .2s; animation: hhBounceOut .2s; }


/* ================================================================================================ */

@font-face {
	font-family: 'hhicon';
	src: url('./hhframe/font/hhicon.eot'); /* IE9*/
	src: url('./hhframe/font/hhicon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('./hhframe/font/hhicon.woff') format('woff'), /* chrome、firefox */
	url('./hhframe/font/hhicon.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	url('./hhframe/font/hhicon.svg#hhicon') format('svg'); /* iOS 4.1- */
}

@font-face {
	font-family: 'statefont';
	src: url('./hhframe/font/statefont.eot'); /* IE9*/
	src: url('./hhframe/font/statefont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('./hhframe/font/statefont.woff') format('woff'), /* chrome、firefox */
	url('./hhframe/font/statefont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	url('./hhframe/font/statefont.svg#statefont') format('svg'); /* iOS 4.1- */
}

/* ================================================================================================ */

.col_groups { padding:10px; overflow: hidden; }
.col_groups .group { float:left; width:25%; box-sizing:border-box; border:0px solid #f00; }
.col_groups .group > div { margin:10px; padding:20px; height:500px; background:#e5e5e5; overflow:auto; }
.col_groups .group > div:hover { background:#ddd; }
.col_groups .group > div h2 { font:18px/1.5em "微软雅黑"; color:#555; margin: 5px 0 20px; }
.col_groups .group > div .btn { margin: 15px 0; }

.level2 .btn { background:#E9CC7F !important; }
.level3 .btn { background:#5BC0DE !important; }
.level4 .btn { background:#ff7777 !important; }

@media (max-width:1920px)
{
	.col_groups .group { width:16.6%; }
}

@media (max-width:1600px)
{
	.col_groups .group { width:20%; }
}

@media (max-width:1440px)
{
	.col_groups .group { width:25%; }
}

@media (max-width:1024px)
{
	.col_groups .group { width:33.3%; }
}

@media (max-width:768px)
{
	.col_groups .group { width:50%; }
}

@media (max-width:500px)
{
	.col_groups .group { width:100%; }
	.col_groups .group:hover div { background:none; }
	.col_groups .group div { margin:10px; padding:0; height:auto; background:none; }
}

/* ================================================================================================ */