/* common.css*/
@charset "utf-8";
/*-----------------------------------------------------

    Title :  Secret China
    Usage :  common styles
    Edited:  2017-03-04

-------------------------------------------------------

    1. reset
    2. font
    3. typography
    4. default
    5. container
    6. banner
       6.1. search
       6.2. site navigation
       6.3. branches and language
       6.4. social links
    7. main content
    8. content info
       8.1. supplementary navigation
       8.2. copyright
    9. responsive (1220px)

-------------------------------------------------------*/



/*  1. reset
-------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
}

* {
	margin: 0;
	padding: 0;
}
body {
	/*font-size: 62.5%;*/
	line-height: 1.5;
	-webkit-text-size-adjust: none;
	color:#000;
}
h1, h2, h3, h4, h5, h6, input, select, button, textarea, small {
	font-size: 100%;
}
li {
	list-style: none;
}





strong {
	font-weight: 700;
}
img {
	vertical-align: top;
}
img, abbr, fieldset, iframe {
	border: none;
}
abbr {
	text-decoration: none;
}
img, video {
	/*max-width: 100%;*/
	height: auto;
}
iframe {
	max-width: 100%;
}
object {
	outline: none;
}
dfn {
	font-style: normal;
}
mark {
	background: none;
}
sup, sub {
	position: relative;
	vertical-align: baseline;
	font-size: 75%;
	line-height: 0;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
kbd, samp, input, select, textarea, button {
	color: inherit;
	font-weight: inherit;
	font-family: inherit;
	outline: none;
	box-shadow: none;
}
textarea {
	-webkit-appearance: none;
	border-radius: 0;
}
input[type="text"], input[type="email"], input[type="tel"] {
	-webkit-appearance: none;
	border-radius: 0;
}
input[type="checkbox"], input[type="radio"] {
	padding: 0;
}
input[type="search"] {
	-webkit-appearance: none;
	border-radius: 0;
}
 input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
 -webkit-appearance: none;
}
 input[type="search"]::-ms-clear {
 display: none;
}
textarea {
	vertical-align: top;
	overflow: auto;
}
 [placeholder]::-webkit-input-placeholder {
 color: inherit;
}
 [placeholder]:focus::-webkit-input-placeholder {
 color: transparent;
}
 [placeholder]::-moz-placeholder {
 opacity: 1;
}
 [placeholder]:focus:-moz-placeholder {
 color: transparent;
}
 [placeholder]:focus::-moz-placeholder {
 color: transparent;
}
button {
	cursor: pointer;
	overflow: visible;
}
 button::-moz-focus-inner {
 padding: 0;
 border: none;
}
/*  2. font
-------------------------------------------------------*/










/*  3. typography
-------------------------------------------------------*/

body, input, select, textarea, button {
	font-family: "宋体", PMingLiU, "新細明體", SimSun, sans-serif;
	/*font-family: "Microsoft JhengHei", "微軟正黑體", "Microsoft Yahei", "微软雅黑", "宋体", PMingLiU, "新細明體", SimSun, Arial, sans-serif; */
}
.winxp body, .winxp input, .winxp select, .winxp textarea, .winxp button {
	font-family: "宋体", PMingLiU, "新細明體", SimSun, sans-serif;
	/*font-family: "Microsoft JhengHei", "微軟正黑體", "Microsoft Yahei", "微软雅黑", "宋体", PMingLiU, "新細明體", SimSun, Arial, sans-serif; */

}
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	background-color: transparent;
}
/*  4. default
-------------------------------------------------------*/

/*  Fontello  */

@font-face {
	font-style: normal;
	font-weight: 400;
	font-family: Fontello;
	src: url(../fonts/fontello.eot?26716866);
	src: url(../fonts/fontello.eot?26716866#iefix) format("embedded-opentype"),  url(../fonts/fontello.woff2?26716866) format("woff2"),  url(../fonts/fontello.woff?26716866) format("woff"),  url(../fonts/fontello.ttf?26716866) format("truetype");
}
/*  5. container
-------------------------------------------------------*/

html {
	background: #fff;
}
/*  6. banner
-------------------------------------------------------*/

#banner {
	position: relative;
	margin: 0 auto;
	width: 1000px;
	height: 214px;
	overflow: hidden;
	background: #fff;
}
#banner h3 {
	position: absolute;
	top: 0;
	left: 0;
}
#banner .banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 177px;
	animation: Move 30s infinite;
	-moz-animation: Move 30s infinite;
	-webkit-animation: Move 30s infinite;
}
#banner h3 a {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 250px;
	height:100px;overflow: hidden;
	text-indent: -5000px;
	background: url(../images/sprite2.png) no-repeat;
	_behavior: url(2017/js/PIE.htc);
	-pie-png-fix: true;
}

 @keyframes Move {
 0% {
left:0%;
}
 50% {
left:-20%;
}
 100% {
left:0%;
}
}
@-moz-keyframes Move {
 0% {
left:0%;
}
 50% {
left:-20%;
}
 100% {
left:0%;
}
}
@-webkit-keyframes Move {
 0% {
left:0%;
}
 50% {
left:-20%;
}
 100% {
left:0%;
}
}

#banner h2 {
	position: absolute;
	top: 154px;
	left: 0;
	width: 100%;
	height: 31px;
	overflow: hidden;
	text-indent: -5000px;
	background: #cc6d00 url(../images/bg_banner_h2.png) repeat-x;
}
#banner .w1 {
	position: absolute;
	top: 154px;
	left: 0;
	width: 5000px;
}
/*  6.1. search
-------------------------------------------------------*/
 
#banner .w1 form {
	position: relative;
	float: left;
	width: 31px;
	overflow: hidden;
	transition: width 250ms ease-out;
}
#banner .w1 form.expanded {
	width: 159px;
}
#banner .w1 form p input {
	margin:3px 0 0 31px;
	width: 120px;
	height: 25px;
	color: #fff;
	font-size: 13px;

	border:1px #fff solid;
	background: none;
	border-radius:3px

}
.lt-ie9 #banner .w1 form p input {
	padding: 8px 0;
	height: 23px;
}
#banner .w1 form p button {
	position: absolute;
 *position: expression($(this).html('<before></before>'), style.position = 'absolute', 0);
	top: 0;
	left: 0;
 _clear: expression($(this).filter('[type="submit"]').css('left', -5000), style.clear = 'none', 0);
	width: 0px;
	height: 0px;
	font-size: 0;
	background: none;
	border:none

}

/*
#banner .w1 form p button:before, #banner .w1 form p button before {
	content: "\e800";
	color: #fff;
	font-size: 14px;
	font-family: Fontello;
 *zoom: expression(this.runtimeStyle['zoom'] = 1, this.innerHTML = '&#xe800;');
}
#banner .w1 form p button[type="submit"] {
	left: -5000px;

}
 */
/*  6.2. site navigation
-------------------------------------------------------*/

#sitenav {
	position: relative;
	float: left;
}
#sitenav ul.l1 li.l1 {
	float: left;
}
#sitenav ul.l1 li.l1 a.l1 {
 _clear: expression($(this).mouseover(function() {
$(this).addClass('li-hover')
}
).mouseout(function() {
$(this).removeClass('li-hover')
}
), style.clear = 'none', 0);
 display: inline-block;
 padding: 0 12px;
 height: 31px;
 overflow: hidden;
 color: #fffbd9;
 font-weight: 600;
 font-size: 18px;
 *font-size: 17px;
 line-height: 33px;

 text-decoration: none;
}
#sitenav ul.l1 li a.l1:hover, #sitenav ul.l1 li a.li-hover, #sitenav ul.l1 li.curr a.l1 {
	    color: #7c3806;
	    background-color: #F1D032;
}
#sitenav ul.l1 li.l1 ul {
	position: absolute;
	top: -5000px;
	left: 6px;
	width: 5000px;
}
#sitenav ul.l1 li.curr ul {
	top: 32px;
}
#sitenav ul.l1 li.l1 ul li {
	float: left;
 _clear: expression($(this).filter(':first-child').css('margin-left', 0), style.clear = 'none', 0);
	margin-left: 8px;
}
#sitenav ul.l1 li.l1 ul li:first-child {
	margin-left: 0;
}
#sitenav ul.l1 li.l1 ul li a {
	display: inline-block;
	padding: 0px 5px 0px 4px;
	/*padding-top: 4px \ ;
 *padding-top: 2px;
	_padding-top: 5px;
	padding-bottom: 1px \ ;

	_padding-bottom: 0;
		color: #244b40;

	*/
	color:#7c3806;
	font-size: 16px;
	/*font-family: "標楷體", PMingLiU, "新細明體", SimSun, serif;*/
	text-decoration: none;

}

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#sitenav ul.l1 li.l1 ul li a {
	padding-top: 4px;
	padding-bottom: 1px;
}
}
#sitenav ul.l1 li.l1 ul li a:hover, #sitenav ul.l1 li.l1 ul li a.hover, #sitenav ul.l1 li.l1 ul li.curr a {
	/*background: #d8f6ec;*/
	border-bottom:2px #0e6049 solid;
	color:#0e6049;

}
/*  6.3. branches and language
-------------------------------------------------------*/

#l10n {
	position: absolute;
	top: 7px;
	left: 22px;
}
#branches {
	float: left;
 _clear: expression($(this).mouseover(function() {
$(this).addClass('hover')
}
).mouseout(function() {
$(this).removeClass('hover')
}
), style.clear = 'none', 0);
 overflow: hidden;
 color: #fff;
 font-size: 13px;
 background: #b28b33;
 border-radius: 5px;
}
#branches .h3 {
	padding: 2px 9px 3px;
	_padding-top: 5px;
	_padding-bottom: 2px;
}
#branches ul {
 *float: left;
	height: 0;
	overflow: hidden;
}
#branches:hover ul, #branches.hover ul {
	height: auto;
}
#branches ul li {
	_float: left;
	_clear: both;
}
#branches ul li a {
	display: block;
 *width: 4em;
	_height: 1%;
	padding: 2px 9px 3px;
	color: #fff;
	text-decoration: none;
}
#branches ul li a:hover {
	background: #d4a63d;
}
#lang {
	float: left;
	_display: inline;
	margin-left: 10px;
	padding: 3px 9px 2px;
	overflow: hidden;
	color: #fff;
	font-size: 13px;
	background: #b28b33;
	border-radius: 5px;
}
#lang ul li {
	float: left;
 _clear: expression($(this).filter(':first-child').css('margin-left', 0), style.clear = 'none', 0);
	_display: inline;
	margin-left: 10px;
	font-family: Arial, sans-serif;
}
#lang ul li:first-child {
	margin-left: 0;
}
#lang ul li a {
	color: #fff;
	font-family: Arial, sans-serif;
}



#lang2 {
	float: left;
	_display: inline;
	margin-left: 10px;
	padding: 3px 9px 2px;
	overflow: hidden;
	color: #fff;
	font-size: 13px;
	background: #b28b33;
	border-radius: 5px;
}
#lang2 ul li {
	float: left;
 _clear: expression($(this).filter(':first-child').css('margin-left', 0), style.clear = 'none', 0);
	_display: inline;
	margin-left: 10px;
	font-family: Arial, sans-serif;
}
#lang2 ul li:first-child {
	margin-left: 0;
}
#lang2 ul li a {
	color: #fff;
	font-family: Arial, sans-serif;
}


/*  6.5. social links
-------------------------------------------------------*/

#social {
	position: absolute;
	top: 7px;
	right: 29px;
	padding: 0 10px;
	background: #b28b33;
	border-radius: 5px;
}
#social ul {
	font-size: 0;
}
#social ul li {
	display: inline-block;
	vertical-align: middle;
	padding: 3px 0;
}
#social ul li {
 _clear: expression($(this).filter(':first-child').css('margin-left', 0), style.clear = 'none', 0);
 *display: inline;
	margin-left: 10px;
}
#social ul li:first-child {
	margin-left: 0;
}
#social ul li a {
	position: relative;
 *top: -1px;
 *clear: expression($(this).empty().prepend('<before></before>'), style.clear = 'none', 0);
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	font-size: 0;
	text-decoration: none;
}
#social ul li a:before, #social ul li a before {
	font-size: 14px;
	font-family: Fontello;
}
#social ul .facebook a:before, #social ul .facebook a before {
	content: "\f09a";
 *zoom: expression(this.runtimeStyle['zoom'] = 1, this.innerHTML = '&#xf09a;');
}
#social ul .twitter a:before, #social ul .twitter a before {
	content: "\f099";
 *zoom: expression(this.runtimeStyle['zoom'] = 1, this.innerHTML = '&#xf099;');
}
#social ul .gplus a:before, #social ul .gplus a before {
	content: "\f05a";
 *zoom: expression(this.runtimeStyle['zoom'] = 1, this.innerHTML = '&#xf05a;');
}
#social ul .linkedin a:before, #social ul .linkedin a before {
	content: "\f0e1";
 *zoom: expression(this.runtimeStyle['zoom'] = 1, this.innerHTML = '&#xf0e1;');
}
#social ul .rss a:before, #social ul .rss a before {
	content: "\f09e";
	position: relative;
	top: 1px;
 *zoom: expression(this.runtimeStyle['zoom'] = 1, this.innerHTML = '&#xf09e;');
}
/*  7. main content
-------------------------------------------------------*/

#main {
	position: relative;
 _position: expression($(this).find('> .ad:first-child').css('margin-bottom', 8), style.position = 'static', 0);
	margin: 0 auto;
	width: 1000px;
	zoom: 1;
}



#main .ad {
	text-align: center;
	margin:5px 0 10px 0;

}
#main > .ad:first-child {
	/*margin-bottom: 8px;*/
}
#main .ad-728x90 {
	clear: both;
 _clear: expression($(this).filter('.col-right + .ad-728x90').css('padding-top', 30), style.clear = 'both', 0);
	margin: 0 auto;
	width: 728px;
	height: 90px;
}
#main .col-right + .ad-728x90 {
	padding-top: 30px;
}
#main:after {
	content: "";
	clear: both;
	display: block;
}
/*  8. content info
-------------------------------------------------------*/

#contentinfo {
	margin: 30px auto 0;
	padding: 9px 0 13px;
	width: 1000px;
	line-height: 1.6;
	background: url(../images/bg_banner_h2_01.png) repeat-x;
	text-align: center;
}
/*  8.1. supplementary navigation
-------------------------------------------------------*/

#suppnav {

	padding: 0 14px;
}
#suppnav ul {
	font-size: 0;
}
#suppnav ul li {
 *clear: expression($(this).filter(':not(:first-child)').prepend('<before>|</before>'), style.clear = 'none', 0);
	display: inline-block;
	font-size: 14px;
}
#suppnav ul li {
 *display: inline;
}
#suppnav ul li:before, #suppnav ul li before {
	content: "|";
	margin: 0 9px;
	color: #fff;
}
#suppnav ul li:first-child:before {
	display: none;
}
#suppnav ul li a {
	color: #fffbd9;
}
#suppnav ul li.non-zh a {
	font-family: Arial, sans-serif;
}
/*  8.2. copyright
-------------------------------------------------------*/

#contentinfo p {
	margin-top: 22px;
	padding: 0 20px;
	font-size: 14px;
}

/*  9. responsive (1220px)
-------------------------------------------------------*/

@media (min-width: 1220px) {
/*  6. banner  */

#banner {
	width: 1200px;
}
#banner .banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 177px;
	animation: Move 30s infinite;
	-moz-animation: Move 30s infinite;
	-webkit-animation: Move 30s infinite;
}
 @keyframes Move {
 0% {
left:0%;
}
 50% {
left:0%;
}
 100% {
left:0%;
}
}
@-moz-keyframes Move {
 0% {
left:0%;
}
 50% {
left:0%;
}
 100% {
left:0%;
}
}
@-webkit-keyframes Move {
 0% {
left:0%;
}
 50% {
left:0%;
}
 100% {
left:0%;
}
}
/*  6.2. site navigation  */

#sitenav ul.l1 li.l1 a.l1 {
	padding-top: 2px \ ;
	padding-right: 19px;
	padding-left: 18px;
	height: 30px \ ;/*
	font-size: 20px;
	line-height: 37px;
	*/
}
#sitenav ul.l1 li.l1 ul {
	left: 10px;
}
#sitenav ul.l1 li.l1 ul li {
	margin-left: 9px;
}
#sitenav ul.l1 li.l1 ul li a {
	font-size: 16px;
}
}

@media (min-width: 1220px) {
/*  7. main content  */

#main {
	width: 1200px;
}
/*  8. content info  */

#contentinfo {
	width: 1200px;
	letter-spacing: 1px;
}
/*  8.1. supplementary navigation  */

#suppnav ul li:before {
	margin-right: 11px;
	margin-left: 11px;
}

#suppnav ul li:hover{ color:red}
}

/*home.css*/
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow .slick-hidden {
    display: none;
}

/*end slick.css*/
/*-----------------------------------------------------

    Title :  Secret China
    Usage :  Homepage
    Edited:  2017-03-04

-------------------------------------------------------

    1. column left
       1.1. headlines
       1.2. today
       1.3. news videos and supplementary videos
       1.4. categories
    2. column right
       2.1. popular topics
       2.2. common blocks
       2.3. tuidang
       2.4. columnists
    3. responsive (1220px)

-------------------------------------------------------*/



/*  1. column left
-------------------------------------------------------*/



#main .col-left {
	position: relative;
	float: left;
	width: 730px;
	overflow: hidden;
}
#main .col-left:after {
	content: "";
	clear: both;
	display: block;
}
/*  1.1. headlines
-------------------------------------------------------*/

#headlines {
	position: relative;
	float: left;
	width: 380px;
	height: 240px;
	_overflow: hidden;
	border:0px red solid
}

#headlines .h2 {
	margin-bottom: 5px;
	padding-left: 12px;
	height: 30px;
	overflow: hidden;
	color: #7c3806;
	font-weight:bold;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 2px;
	white-space: nowrap;
	/*background: #0e6049;*/
	background-image: url(../images/bg_headlines_h2.png);
}
#headlines ul {
	position: relative;
	height: 409px;
}
#headlines ul .slick-list .slick-track {
	_position: absolute;
	_top: 0;
	_left: 0;/*height: 285px;*/
}
#headlines ul .slick-list .slick-track .slick-slide {
	outline: none;
}
#headlines ul li {
	position: absolute;
	top: 0;
	left: 0;
 _clear: expression($(this).filter(':first-child:not(.slick-slide)').css('z-index', 1), style.clear = 'none', 0);
	width: 380px;
}
#headlines ul li:first-child {
	z-index: 1;
}
#headlines ul li a {
	display: block;
	outline: none;
}
#headlines ul li a img {
	display: block;
	width: 380px;
	height: 213px;
}
#headlines ul li a strong {
	display: block;
	margin: 10px 0 4px;
	font-weight: normal;
	font-size: 18px;
	white-space: nowrap;
}
#headlines ul.slick-dots {
	margin: 5px -20px 0 0;
	_margin-top: 300px;
	width: 400px;
	height: auto;
	font-size: 0;
}
/*#headlines ul.slick-dots li {*/
/*	position: static;*/
/*	float: left;*/
/*	_display: inline;*/
/*	margin: 5px 5px 0 0;*/
/*	padding-bottom: 0;*/
/*	width: 72px;*/
/*	height: 52px;*/
/*	cursor: pointer;*/
/*}*/
#headlines ul.slick-dots li {
	position: static;
	float: left;
	_display: inline;
	margin: 5px 5px 0 0;
	padding-bottom: 0;
	width: 59.2px;
	height: 52px;
	cursor: pointer;
}
#headlines ul.slick-dots li span {
	display: block;
	padding: 5px;
	border: 1px solid #ccc;
}
#headlines ul.slick-dots li.slick-active span {
	border-color: #5280dd;
}
/*#headlines ul.slick-dots li span img {*/
/*	display: block;*/
/*	width: 60px;*/
/*	height: 40px;*/
/*}*/
#headlines ul.slick-dots li span img {
	display: block;
	width: 47.2px;
	height: 32px;
}
#headlines ul.slick-dots li:hover span img {
	opacity: 0.8;
}
#headlines ul.slick-dots:after {
	content: "";
	clear: both;
	display: block;
}
/*  1.1. headlines 2-b_b2
-------------------------------------------------------*/
#content1 {
	border: 0px #ddd solid;
	overflow: auto;
	clear: both;
	margin:0 0 10px 0
}

#headlines_2bv2 {
	position: relative;
	float: left;
	width: 326px;
	margin: 0 10px 10px 0;
	border: 0px #ddd solid
}
#headlines_2bv2 .h2 {
	margin-bottom: 5px;
	padding-left: 12px;
	height: 30px;
	overflow: hidden;
		color: #7c3806;
	font-weight:bold;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 2px;
	white-space: nowrap;
	/*background: #0e6049;*/
	background-image: url(../images/bg_headlines_h2.png);
}
#headlines_2bv2 ul li {
	margin-top: 10px;
	font-weight: normal;
	font-size: 18px;
	width: 100%;
	overflow:hidden;
	white-space:nowrap
}
#headlines_2bv2 ul li a img {
	width: 100%;
	height: 183px;
}
#today_2bv2 {
	position: relative;
	float: left;
	width: 326px;
	border: 0px #ddd solid;
}
#today_2bv2 .h2 {
	margin-bottom: 5px;
	padding-left: 12px;
	height: 30px;
	overflow: hidden;
	color: #7c3806;
	font-weight:bold;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 2px;
	white-space: nowrap;
	/*background: #0e6049;*/
	background-image: url(../images/bg_headlines_h2.png);
}
#today_2bv2 ul {
	font-size: 16px;
	line-height: 1.5;
	overflow: hidden;
	white-space: nowrap;	width:98%
}
#today_2bv2 li {
	margin: 5px;

}
#content2 {
	border: 0px #ddd solid;
	margin:10px 0 10px 0;
	overflow: auto;
	width:102%
}
#items {
	float: left;
	width: 326px;
	margin: 0 12px 0px 0;
	overflow: hidden;
	border: 0px #ddd solid
}
#items .h1{

	width: 100%;
	padding:5px 0 0 0;
	overflow: hidden;
	border: 0px #ddd solid;
	white-space:nowrap;
	font-weight:bold
}
#items .more{float: right;
    _display: inline;
	margin:0 0 10px 0;

    color: #664433;
    font-size: 14px;
    border: 1px #664433 solid;
    border-radius: 5px;
    padding: 2px 10px;
    background-color: #fff;}
#items .textarea {
	width:40px;

	height:160px;
	float: left;
	/*
	background-color: #0e6049;
	color:#fffbd9;
	*/
	font-weight:bold;

	font-size:18px;
	text-align:center;
	padding:10px 10px;
	box-sizing:border-box;


	color: #fffbd9;
	background-color: #007c57;
	border: 1px #007c57 solid;
	/*
	color: #7c3806;
	background-image: url(../images/bg_headlines_h2.png);
	*/

}
#items .photo_2bv2 {
	width: 284px;
	height:160px;
	float: left;
	clear: right;
	overflow:hidden
}

#items li{ list-style:disc;
margin:5px 5px 5px 20px;
clear:both;
	/*white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
    word-break:break-all;
    */
	white-space: initial;
	height:25px;
	line-height:25px;
	overflow:hidden;
	word-bradk:break-all;

    }
/*  1.2. today
-------------------------------------------------------*/

#today {
	float: right;
	display: inline;
	width: 335px;
}
#today .h2 {
	margin-bottom: 12px;
	padding-left: 12px;
	height: 30px;
	overflow: hidden;
	color: #7c3806;
	font-weight:bold;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 2px;
	white-space: nowrap;
	/*background: #0e6049;*/
	background-image: url(../images/bg_headlines_h2.png);
}
#today ul {
	margin: 0 5px;
}
#today li {
	list-style-position: inside;

	/*
	overflow: hidden; white-space: nowrap;
	text-overflow: "...";	*/
	white-space: initial;
	height:25px;
	line-height:1.5;
	overflow:hidden;
	word-bradk:break-all;
}
#today ul li {
 _clear: expression($(this).filter(':first-child').css('margin-top', 0).nextAll(':nth-last-child(-n+2)').hide(), style.clear = 'none', 0);
	margin-top: 4px;
	/*white-space: nowrap;*/
	white-space: initial;
	height:25px;
	line-height:25px;
	overflow:hidden;
	word-bradk:break-all;

}
#today ul li:first-child + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li ~ li {
	display: none;
}
#today ul li:first-child {
	margin-top: 0;
}
#today ul li a {
	font-size: 16px;
}
/*  1.3. news videos and supplementary videos
-------------------------------------------------------*/

.slider {
	position: relative;
	clear: both;
 *clear: expression($(this).prepend('<before></before>'), style.clear = 'both', 0);
	padding-left: 39px;
	width: 691px;
	height: 185px;
	border-top: 10px solid #fff;
}
#newsvid {
 *position: expression($(this).append('<after></after>'), style.position = 'relative', 0);
}
#newsvid:after, #newsvid after {
	content: "";
	position: absolute;
	top: -11px;
	left: 0;
	width: 930px;
	height: 0px;
	overflow: hidden;
	background: #000;
}
#suppvid {
	border-top-width: 15px;
}
.slider:before, .slider before {
	content: "";
	position: absolute;
	top: 0;
	left: 34px;
	width: 100%;
	height: 115px;
	background: #eeeeee;
}
.slider .h2 {
	position: absolute;
	top: 0;
	left: 0;
	padding: 16px 0 10px 1px;
	box-sizing: border-box;
	width: 34px;
	height: 115px;
	overflow: hidden;
	color: #7c3806;
	font-weight:bold;
	font-size: 18px;
	line-height: 1.25;
	text-align: center;
	/*background: #0e6049;*/
	background-image: url(../images/bg_video_h22.jpg);
}
.slider ul {
	margin: 5px 0 0 -1px;
	width: 5000px;
	height: 195px;
	overflow: hidden;
}
.slider ul.slick-slider:before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	z-index: 100;
	width: 4px;
	height: 103px;
	background: #eeeeee;
}
.slider ul:after {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	z-index: 100;
	width: 4px;
	height: 103px;
	background: #eeeeee;
}
.slider ul.slick-slider {
	width: 688px;
	height: auto;
	overflow: visible;
}
.slider ul .slick-list {
	height: 195px;
}
.slider ul .slick-arrow {
	position: absolute;
	top: 39px;
	z-index: 100;
	width: 16px;
	height: 33px;
	font-size: 0;
	background: url(../images/sprite.png) no-repeat;
	border: 0px red solid;
}
.slider ul .slick-prev {
	left: 10px;
	background-position: 0 -118px;
}
.slider ul .slick-next {
	right: 10px;
	background-position: -26px -118px;
}
.slider ul li {
	position: relative;
	float: left;
	margin: 5px 0px 0 0;
	width: 168px;
}
.slider ul li a {
	display: block;
	width: 168px;
	outline: none;
}
.slider ul li a img {
	display: block;
	width: 168px;
	height: 94px;
}
.slider ul li a strong {
	position: absolute;
	top: 110px;
	left: 4px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.5;
	height:44px;
	font-weight: normal;
	margin: 0 0px 0px 10px;
}

.sliderstrong {
    position: absolute;
    top: 110px;
    left: 4px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.5;
    height:44px;
    font-weight: normal;
    margin: 0 0px 0px 10px;
    overflow: hidden;
    white-space: initial;
    word-break: break-all;
}

.sliderstrong a:hover  {
	text-decoration: underline;
}
.slider ul li a:hover strong {
	text-decoration: underline;
}
.slider ul {
 *position: relative;
 *margin: 5px 0 0 4px;
 *width: 5000px;
 *height: 195px;
 *overflow: hidden;
}
.slider ul li {
	_display: inline;
 *margin-right: 6px;
 *margin-left: 0;
}
.slider ul.js {
 *width: 682px;
}
.slider ul.js .wrapper {
 *position: relative;
 *width: 5000px;
 *height: 72px;
}
.slider ul.js .prev, .slider ul.js .next {
 *position: absolute;
 *top: 39px;
 *width: 16px;
 *height: 33px;
 *cursor: pointer;
 *background: url(../images/sprite.png) no-repeat;
	_behavior: url(2017/js/PIE.htc);
	-pie-png-fix: true;
}
.slider ul.js .prev {
 *left: 7px;
 *background-position:     0 -118px;
}
.slider ul.js .next {
 *right: 7px;
 *background-position: -26px -118px;
}
/*  1.4. categories
-------------------------------------------------------*/

#categ {
	position: relative;
 *clear: expression($(this).prepend('<span class="dvdr"></span>'), style.clear = 'none', 0);
	margin-top: 0px;
	overflow: hidden;
	font-size: 0;
	text-align: justify;
	text-justify: distribute-all-lines;
	border-top:0px solid #eeeeee;
	zoom: 1;

}
#categ div.categ{

border:1px #ecbb4e solid;
/*
border:1px #eae9e5 solid;
*/

overflow:auto
}

#categ .categ > div:first-child > div:first-child a img {
	width: 50px;
	}

.categ img {
	float: left;
	height: 142px;border: 0px
}
#categ .categ .featured a img {
	_float: left;
	margin-right: -2px;
	margin-bottom: 11px;
	width: 248px;
	height: 142px;
	border: 0px red solid;

}
#categ:before, #categ .dvdr {
	content: "";
	position: absolute;
	top: 19px;
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 100%;
	_height: 50000px;
	/* background: #ffffff; */
}
#categ .categ, #categ .ad-300x250 {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin: 19px 0 0 0px;
	width: 298px;
	text-align: left;
	text-justify: none;
	border: 0px red solid;
	padding: 0 0px 0 0;
	/*
	box-sizing: border-box
	*/
}
#categ .categ .more {
	float: right;
	_display: inline;
	margin: 10px;
	color: #664433;
	font-size: 14px;
	border: 1px #664433 solid;
	border-radius: 5px;
	padding: 2px 10px;
	background-color: #fff
}
#categ .categ, #categ .ad-300x250 {
 *display: inline;
}
#categ .ad-300x250 + .ad-300x250 + .ad-300x250 {
	display: none;
}
#categ .ad-300x250 {
 _clear: expression($(this).filter('.ad-300x250 + .ad-300x250 + .ad-300x250').remove(), style.clear = 'none', 0);
	height: 250px;
}
#categ .categ .h3 {
	float: left;
	width: 60px;
	height: 180px;
	float: left;
	background-color: red
}
#categ .categ .h3 a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-indent: -5000px;
	float: left/*background: url(../images/sprite.png) no-repeat 0 -161px;*/
}
#categ .categ .h3 a:hover {
	opacity: 0.75;
}
#categ .categ .featured a {
	color: #333;
}

#categ .categ .featured a strong {
	display: block;
	overflow: hidden;
	cursor: pointer;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.5;
    height: 25px;
	white-space: initial;
	padding: 0 1px 0 0px;
	clear: both;
	margin:0 5px 0 4px
}
#categ .categ ul {
	margin-top: 10px;
	overflow: hidden;
	padding: 0 0px 0 0px
}
#categ .categ ul li {
	position: relative;
 _position: expression($(this).filter(':first-child').css('margin-top', 0), style.position = 'relative', 0);
 *clear: expression($(this).prepend('<before></before>'), style.clear = 'none', 0);
	margin-top: 4px;
	padding-left: 10px;
	_height: 1%;
	/*white-space: nowrap;*/
	height:25px;
	line-height:25px;
	overflow:hidden;
}
#categ .categ ul li:first-child {
	margin-top: 0;
}
#categ .categ ul li:before, #categ .categ ul li before {
	content: "";
	position: absolute;
	top: 50%;
	left: 6px;
	margin-top: -1px;
 *margin-top: 0;
	width: 3px;
	height: 3px;
	overflow: hidden;
	background: #664433;
}
#categ .categ ul li a {
	font-size: 16px;
	overflow: hidden;
	white-space: initial;
	word-break:break-all;
	/*text-overflow: ellipsis;
	margin:0 5px 0 0;*/
	display: block;
	text-align: justify;
	text-overflow: "";
}
#categ:after {
	content: "";
	display: inline-block;
	width: 100%;
}

@media (max-width: 1219px) {

#categ .categ, #categ .ad-300x250 {
	width: 347px;
}

#categ .categ > div:first-child > div:first-child a img {
	width: 58px;
	height: 165px;
	}
#img2{
	width: 58px;
	height: 165px;

}
#categ .categ .featured a img {
	width: 289px;
	height: 165px;
}

}


/*  2. column right
-------------------------------------------------------*/

#main .col-right {
	float: right;
	width: 238px;
	overflow: hidden;
}
#main .col-right .ad {
 _clear: expression($(this).next('.common').css('margin-top', 20), style.clear = 'none', 0);
	margin: 20px auto 0;
}
#main .col-right .ad + .common {
	margin-top: 20px;
}
#main .col-right .ad-160x600 {
	width: 160px;
	height: 600px;
}
/*  2.1. popular topics
-------------------------------------------------------*/

#poptop {
	padding-bottom: 10px;
	margin-bottom: 10px;
	background: #fff;
	border: 1px #ddd solid;
	overflow: auto
}
#poptop .h3 {
	margin-bottom: 12px;
	padding-left: 12px;
	height: 30px;
	overflow: hidden;
	color: #7c3806;
	font-weight:bold;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 2px;
	white-space: nowrap;
	background-image: url(../images/bg_headlines_h2.png);
}
#poptop ul {
	margin: 0 10px 0 17px;
}
#poptop ul li {
 _clear: expression($(this).filter(':first-child').css('margin-top', 0), style.clear = 'none', 0);
	margin: 5px 0 0px -5px;
	list-style: square;
	/*white-space:nowrap;*/
	overflow: hidden;
}
#poptop ul li:first-child {
	margin: 1px 0 5px -5px;
	/*font-weight: bold;*/
	list-style: none;
	white-space: nowrap;
	overflow: hidden;
	width: 100%
}
#poptop ul li a {
	color: #333;
	font-size: 15px;
	line-height: 1.5;
}
/*#poptop ul.l1 {
	position: relative;
	margin: 0 27px 0 17px;
	_width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#poptop ul.l1 li.l1 {
 _clear: expression($(this).filter(':first-child').css('margin-top', 0), style.clear = 'none', 0);
	margin-top: 7px;
}
#poptop ul.l1 li.l1:first-child {
	margin-top: 0;
}
#poptop ul.l1 li.l1 a.l1 {
	color: #333;
	font-size: 16px;
	font-weight: bold;
}
#poptop ul.l1 li.l1 ul {
	margin: 5px 0 15px 0;
}
#poptop ul.l1 li.l1 ul li {
	position: relative;
 _position: expression($(this).filter(':first-child').css('margin-top', 0), style.position = 'relative', 0);
 *clear: expression($(this).prepend('<before></before>'), style.clear = 'none', 0);
	margin-top: 4px;
	padding-left: 18px;
	_height: 1%;
	white-space: nowrap;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#poptop ul.l1 li.l1 ul li:first-child {
	margin-top: 0px;
}
#poptop ul.l1 li.l1 ul li:before, #poptop ul.l1 li.l1 ul li before {
	content: "";
	position: absolute;
	top: 50%;
	left: 6px;
	margin-top: -1px;
 *margin-top: 0;
	width: 3px;
	height: 3px;
	overflow: hidden;
	background: #664433;
}
#poptop ul.l1 li.l1 ul li a {
	color: #333;
	font-size: 16px;
}*/
#poptop .more {
	float: right;
	_display: inline;
	margin: 1px 10px 0 0;
	color: #664433;
	font-size: 14px;
	border: 1px #664433 solid;
	border-radius: 5px;
	padding: 2px 10px;
	background-color: #fff
}
/*  2.2. common blocks
-------------------------------------------------------*/

.col-right .common {
	padding-bottom: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	background: #fff;
	border: 1px #ddd solid;
	_zoom: 1;
}
.col-right .common .h3 {
	margin-bottom: 12px;
	padding-left: 12px;
	height: 30px;
	overflow: hidden;
	color: #7c3806;
	font-weight:bold;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 2px;
	white-space: nowrap;
	background-image: url(../images/bg_headlines_h2.png);
}
.col-right .common ul {
	margin: 5px 5px 5px 10px;
	overflow: hidden;
}
.col-right .common ul li {
 _clear: expression($(this).filter(':first-child').css('margin-top', 0), style.clear = 'none', 0);
	margin: 10px 0 0 0;
}
.col-right .common ul li:first-child {
	margin-top: 0;
}
.col-right .common ul li a {
	font-size: 15px;
	line-height: 1.5;/*white-space: nowrap;*/



}
.col-right .common .more {
	float: right;
	_display: inline;
	margin: 10px 10px 0 0;
	color: #664433;
	font-size: 14px;
	/*
	border: 1px #664433 solid;
	*/
	border: 1px #664433 solid;

	border-radius: 5px;
	padding: 2px 10px;
	background-color: #fff
}
/*  2.3. tuidang
-------------------------------------------------------*/

#tuidang {
	margin-top: 15px;
}
/*  2.4. columnists
-------------------------------------------------------*/

#columnists {
	margin-top: 10px;
	padding-bottom: 10px;
	overflow: hidden;
	background: #fff;
	_zoom: 1;
	border: 1px solid #ddd
}
#columnists .h3 {
	margin-bottom: 10px;
	padding-left: 12px;
	height: 30px;
	overflow: hidden;
	font-size: 18px;
	line-height: 30px;
	background-image: url(../images/bg_headlines_h2.png);
	letter-spacing: 2px;
	white-space: nowrap;
	color: #7c3806;
	font-weight:bold;
}
#columnists ul {
	margin-left: 17px;
	font-size: 0;
}
#columnists ul li {
 _clear: expression($(this).filter(':nth-child(4)').css('width', '90%'), style.clear = 'none', 0);
	display: inline-block;
	width: 33%;
	font-size: 15px;
	line-height: 1.6;
}
#columnists ul li:first-child + li + li + li {
/*	width: 90%;
*/
}
#columnists ul li {
 *display: inline;
	line-height: 1.6
}
#columnists ul li a {
	color: #333;
	letter-spacing: 1px;
}
#columnists .more {
	float: right;
	_display: inline;
	margin: 10px 10px 0 0;
	color: #664433;
	font-size: 14px;
	border: 1px #664433 solid;
	border-radius: 5px;
	padding: 2px 10px;
	background-color: #fff
}

/*  3. responsive (1220px)
-------------------------------------------------------*/

@media (min-width: 1220px) {
#headlines_2bv2 {
	position: relative;
	float: left;
	width: 425px;
}
#headlines_2bv2 ul li a img {
	width: 425px;
	height: 239px;
	border:0px red solid
}
#today_2bv2 {
	width: 425px;
}
#items {

	width: 424px;
	margin: 0 10px 0px 0;

}

#items .textarea {
	width:40px;

	height:216px;


}
#items .photo_2bv2 {
	width: 384px;
	height:216px;

}
/*  1. column left  */

#main .col-left {
	width: 930px;
}
/*  1.1. headlines  */

#headlines {
	width: 430px;
}
#headlines ul .slick-list .slick-track {
}
#headlines ul li {
	width: 430px;
}
#headlines ul li a img {
	width: 430px;
	height: 241px;
}
#headlines ul.slick-dots {
	width: 435px;
}

/*#headlines ul.slick-dots li {*/
/*	width: 82px;*/
/*	height: 59px;*/
/*}*/
#headlines ul.slick-dots li {
	width: 67.5px;
	height: 58px;
}
/*#headlines ul.slick-dots li span img {*/
/*	width: 70px;*/
/*	height: 39.3px;*/
/*}*/
#headlines ul.slick-dots li span img {
	width: 55.5px;
	height: 35px;
}
/*  1.2. today  */

#today {
	width: 485px;
}
#today ul li:first-child + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li ~ li {
	display: block;
}
/*  1.3. news videos and supplementary videos  */

.slider {
	width: 971px;
}
.slider ul {
	margin-left: 0px;
}
.slider ul.slick-slider {
	width: 887px;
	height: auto;
	overflow: visible;
}
/*  1.4. categories  */

#categ:before, #categ .dvdr {
	left: 307px;
	margin-left: 0;
	width: 314px;
	background: none;
	/* del 202302
	 border: solid #fff; */
	border-width: 0 1px;
}
#categ .ad-300x250 + .ad-300x250 + .ad-300x250 {
	display: inline-block;
}
}


 .video-thumbnail {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 0px;
}
.video-thumbnail:before {
  position: absolute;
  top: 90%;
  left: 85%;
  transform: translate(-90%, -85%);
  -webkit-transform: translate(-90%, -85%);
  content: "\f01d";
  font-family: FontAwesome;
  font-size: 40px;
  color: #fff;
  opacity: .8;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.video-thumbnail:hover:before {
  color: #eee;
}



/*new 20181220*/

/*new 20200731 for kzguser ads/login/nti bg*/
#ad2018 {
	overflow: auto;
	background-color: #eeeeee
}
#ad2018 ul {
	margin: 0 0 0 30px;
	padding: 10px 0 5px 0;
	box-sizing: border-box
}
#ad2018 li {
	float: left;
	margin: 0 15px 0 0;
	width: 160px
}
#ad2018 span {
	display: inline-block;
	height: 50px;
	overflow: hidden
}
#ad2018 span.text {
}
#ad2018 span.price {
	color: #FF0000
}

@media (max-width: 1220px) {
#ad2018 {
	overflow: auto;
	border: 0px solid red;
	height: 280px;
	overflow: hidden
}
}
/*new 20181220*/


/*new 20200731 user*/

 .user_name_ribbon {
  position: relative;
  background-image: url(/kzgd/ad/crown_ribbon_200x235.png);
  background-position: center center;
  width:200px;
  height:235px;  
  display: inline-block;  	
    text-align: center;
     margin-bottom: 10px;
}

.user_nameold {
  position: relative; 
  margin-left: 0px;
 // margin-top: 70px;
    text-align: center;
     height: 255px; 
  line-height: 255px;
  color: #967600;
  font-weight: bold;
  text-align: center;  
  font-size: 28px;;
  z-index: 20;
}

.user_name{
  position: relative; 
  margin-left: 0px;
 // margin-top: 70px;
    text-align: center;
//     width:238px;
     height: 255px; 
      max-height: 255px; 
 // line-height: 255px;
 //  text-align: center;
  //  padding:  20px 0;
 // margin : 110px auto 0 auto;
  color: #967600;
  font-weight: bold;
  text-align: center;  
  font-size: 25px;;
  z-index: 20;  
  //display: inline-block; 
}

.user_name .h2 {
  clor: #c99e00;
}

.user_login {
  position: relative;
  width:238px;
  height: 63px;
  background: url(/kzgd/ad/WLoginButton_Simple-238.png) 0 0 no-repeat;
  display: inline-block;  	
}

.user_logintxt {
  position: relative;
  width:300px;
  height: 80px;
  background: url(/kzgd/ad/LoginButton_Simple.png) 0 0 no-repeat;
  display: inline-block;  	
}
.notification-box {
  position: relative;
  float: right;
  right: 5px;
  top: 10px;
  z-index: 99;
  width: 50px;
  height: 50px;
  text-align: center;
}

.digest_notification{
	position: relative;
	top: 10px;
	right: 10px;
	display: none;	
	width: 65%;
	margin: 0 auto;	
	height: 50px;
	z-index: 99;
	text-align: center;
	padding: 5px;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	opacity: 0.8;
	background: #613b01;	
	border: 2px solid #F93
}

.notification-box:hover + .digest_notification { 
	display: block; 
}

.notification-bell {
  -webkit-animation: bell 1s 1s both infinite;
          animation: bell 1s 1s both infinite;
}
.notification-bell * {
  display: block;
  margin: 0 auto;
  background-color: #FFF;
  box-shadow: 0px 0px 15px #4f3000;
  
}
.bell-top {
  width: 6px;
  height: 6px;
  border-radius: 3px 3px 0 0;
}
.bell-middle {
  width: 25px;
  height: 25px;
  margin-top: -1px;
  border-radius: 12.5px 12.5px 0 0;
  border: 0px solid #0b5c00;  
}
.bell-bottom {
  position: relative;
  z-index: 0;
  width: 32px;
  height: 2px;  
}
.bell-bottom::before,
.bell-bottom::after {
  content: '';
  position: absolute;
  top: -4px;
}
.bell-bottom::before {
  left: 1px;
  border-bottom: 4px solid #fff;
  border-right: 0 solid transparent;
  border-left: 4px solid transparent;
}
.bell-bottom::after {
  right: 1px;
  border-bottom: 4px solid #fff;
  border-right: 4px solid transparent;
  border-left: 0 solid transparent;
}
.bell-rad {
  width: 8px;
  height: 4px;
  margin-top: 2px;
  border-radius: 0 0 4px 4px;
  -webkit-animation: rad 1s 2s both infinite;
          animation: rad 1s 2s both infinite;
}
.notification-count {
  position: absolute;
  z-index: 1;
  top: -6px;
  right: -6px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  border-radius: 50%;
  background-color: red;
  color: #fff;
  -webkit-animation: zoom 4s 4s both infinite;
          animation: zoom 4s 1s both infinite;
}

@-webkit-keyframes bell {
  0% { -webkit-transform: rotate(0); transform: rotate(0); }
  10% { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
  20% { -webkit-transform: rotate(0); transform: rotate(0); }
  80% { -webkit-transform: rotate(0); transform: rotate(0); }
  90% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
  100% { -webkit-transform: rotate(0); transform: rotate(0); }
}
@keyframes bell {
  0% { -webkit-transform: rotate(0); transform: rotate(0); }
  10% { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
  20% { -webkit-transform: rotate(0); transform: rotate(0); }
  80% { -webkit-transform: rotate(0); transform: rotate(0); }
  90% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
  100% { -webkit-transform: rotate(0); transform: rotate(0); }
}
@-webkit-keyframes rad {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  10% { -webkit-transform: translateX(6px); transform: translateX(6px); }
  20% { -webkit-transform: translateX(0); transform: translateX(0); }
  80% { -webkit-transform: translateX(0); transform: translateX(0); }
  90% { -webkit-transform: translateX(-6px); transform: translateX(-6px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes rad {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  10% { -webkit-transform: translateX(6px); transform: translateX(6px); }
  20% { -webkit-transform: translateX(0); transform: translateX(0); }
  80% { -webkit-transform: translateX(0); transform: translateX(0); }
  90% { -webkit-transform: translateX(-6px); transform: translateX(-6px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes zoom {
  0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
  10% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  50% { opacity: 1; }
  51% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zoom {
  0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
  10% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  50% { opacity: 1; }
  51% { opacity: 0; }
  100% { opacity: 0; }
}