/*
?v=3
*/
.container > article .lnb {
    float: left; width: 370px; margin: 10px 0 0 0;
}

.lnb .flexible-parent {
	position: relative;
	/*padding: 10px;*/ margin: 0 0 10px;
	border: 1px solid #d1d1d1;
	background-color: #fff;
}


/* log-in */
.flexible-parent .user-group:after,
.flexible-parent .user-group .user-group-head:after {
	content: ''; display: block; clear: both;
}
.flexible-parent .user-group { position: relative; }
.flexible-parent .user-group .user-since {
	position: absolute; top: 15px; right: 15px;
	font-family: tahoma; font-size: 9px; color: #999;
}
.flexible-parent .user-group .user-group-head:before {
	content: ''; display: block; clear: both; height: 30px;
}
.flexible-parent .user-group .user-group-head {
	/*margin: 20px 0 0;*/ /*position: relative; top: 20px;*/
}
.flexible-parent .user-group .user-group-head .user-img {
	float: left; width: 75px; height: 75px; margin: 0 5px 0 10px;
	/*border: 1px solid #d1d1d1;*/ border-radius: 3px; overflow: hidden;
	/*background-color: #eee;*/
}
.flexible-parent .user-group .user-group-head .user-img img { width: 100%; height: 100%; }
.flexible-parent .user-group .user-group-head .user-img img.circle { border-radius: 50%; }
.flexible-parent .user-group .user-group-head .user-info {
	float: left; width: calc(100% - 110px); /*margin: 0 0 10px;*/ padding: 10px; position: relative;
	/*background-color: var(--color-bg);*/
}
.flexible-parent .user-group .user-group-head .user-info .user-nickname { font-size: 15px; }
.flexible-parent .user-group .user-group-head .user-info > span { display: inline-block; }

.flexible-parent .user-group .user-group-head .user-info .logout-btn {
	position: absolute; top: 12px; right: 10px;
	padding: 4px 10px;
	background-color: #1d3338; color: #fff;
	border-radius: 10px;
	font-size: 12px;
}
.flexible-parent .user-group .user-group-head .user-info .logout-btn:hover {
	background-color: var(--point-main);
}

.flexible-parent .user-group .user-group-head .user-info .gage-group {
	height: 16px; margin: 9px 0 0 0;
}
.flexible-parent .user-group .user-group-head .user-info .gage-group span {
	display: block; /*float: left;*/
}
/*.flexible-parent .user-group .user-group-head .user-info .gage-group span:nth-of-type(1) {
	position: relative; top: -3px; width: 30px;
	font-size: 12px;
}
.flexible-parent .user-group .user-group-head .user-info .gage-group span:nth-of-type(2) {
	width: calc(100% - 30px); height: 10px; background-color: #333;
	border-radius: 8px;
}*/
.flexible-parent .user-group .user-group-head .user-info .gage-group .exp-gage {
	position: relative; overflow: hidden;

	display: block; width: 100%; height: 10px;
	background-color: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
}
.flexible-parent .user-group .user-group-head .user-info .gage-group .exp-gage .exp-value {
	position: absolute; top: 0; left: 0; display: block; height: 8px;
	background-color: #91c653;
	border: 1px solid #7fac49;
	border-radius: 8px;
}
.flexible-parent .user-group .user-group-head .user-info .gage-group .exp-gage-info-group:after { content: ''; display: block; clear: both; }
.flexible-parent .user-group .user-group-head .user-info .gage-group .exp-gage-info-group {
	margin: 6px 0 0;
}
.flexible-parent .user-group .user-group-head .user-info .gage-group .exp-gage-info-group > div {
	font-family: tahoma; font-size: 10px; color: #777;
}
.flexible-parent .user-group .user-group-head .user-info .gage-group .exp-gage-info-group .exp-gage-level {
	float: left;
}
.flexible-parent .user-group .user-group-head .user-info .gage-group .exp-gage-info-group .exp-gage-info {
	float: right;
}


.flexible-parent .user-group .user-group-point:after {
	content: ''; display: block; clear: both;
}
.flexible-parent .user-group .user-group-point {
	clear: both; padding: 15px 10px;
	background-color: var(--color-bg);
	border-top: 1px solid #d1d1d1;
}
.flexible-parent .user-group .user-group-point > a {
	/*float: left; width: 50%;
	font-size: 12px; text-align: center;*/
	float: left; margin: 0 10px 0 0;
	font-family: tahoma; font-size: 12px; font-weight: bold;
}
.flexible-parent .user-group .user-group-point > a > i {
	position: relative; top: 4px;
	display: inline-block; width: 18px; height: 18px;
	background-image: url(/resource/images/common/onepick-sprites.png?v=3);
	background-repeat: no-repeat;
}
.flexible-parent .user-group .user-group-point .icon-userpoint i { background-position: -18px -309px; }
.flexible-parent .user-group .user-group-point .icon-cashpoint i { background-position: -36px -309px; }

.flexible-parent .user-group .user-group-btn-group:after {
	content: ''; display: block; clear: both;
}
.flexible-parent .user-group .user-group-btn-group {
	/*margin: 10px 0 0;*/
}
.flexible-parent .user-group .user-group-btn-group > a {
	display: block; float: left; position: relative;
	/*width: calc(25% - 7px); margin: 0 5px 0 0;*/ padding: 20px 0;
	width: calc(25% - 1px);
	text-align: center; font-size: 13px;
	border-top: 1px solid #d1d1d1;
	border-right: 1px solid #d1d1d1;
}
.flexible-parent .user-group .user-group-btn-group > a:hover { color: #e62626; }
.flexible-parent .user-group .user-group-btn-group > a i {
	display: block; margin: 0 0 5px;
	text-align: center; font-size: 20px;
}
.flexible-parent .user-group .user-group-btn-group > a:last-child {
	/*width: calc(25% - 2px); margin: 0;*/
	width: 25%;
	border-right: none;
}
.flexible-parent .user-group .user-group-btn-group > a .badge {
	display: none; width: 14px; height: 14px;
	position: absolute; top: 4px; left: 50%;
	-webkit-transform:	translate(-50%, 0);
	-moz-transform:		translate(-50%, 0);
	-ms-transform:		translate(-50%, 0);
	-o-transform:		translate(-50%, 0);
	transform:			translate(-50%, 0);
	text-align: center; line-height: 14px;
	/*background-color: #dc3545; color: #fff;*/
	border-radius: .25rem;
	font-size: .6rem;
}
.flexible-parent .user-group .user-group-btn-group > a .newmsg {
	background-color: #dc3545; color: #fff;
}
.flexible-parent .user-group .user-group-btn-group > a .newmsg.active {
	--hover: #dc3545;

	-webkit-animation:	pulse 1s;
	animation:			pulse 1s;

	-webkit-animation-iteration-count:	infinite;
	animation-iteration-count:			infinite;

	box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}
@-webkit-keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 var(--hover);
	}
}
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 var(--hover);
	}
}

.flexible-parent .attendance-banner {
	position: absolute; top: 0; left: 0;
	width: 370px; height: 220px;
}
.flexible-parent .attendance-banner > a { display: block; position: absolute; }
.flexible-parent .attendance-banner .attendance-btn {
	top: 0; left: 0;
	width: inherit; height: inherit;
	background-image: url('/resource/images/common/attendance.png?v=3');
	background-repeat: no-repeat;
}
.flexible-parent .attendance-banner .attendance-close-btn {
	top: 20px; right: 20px;
	width: 15px; height: 15px;
	background-image: url('/resource/images/common/onepick-sprites.png?v=3');
	background-repeat: no-repeat;
	background-position: -329px -631px;
}

/* log-out */
.flexible-parent .login-group:after {
	content: ''; display: block; clear: both;
}
.flexible-parent .login-group {
	margin: 15px;
}
.flexible-parent .login-group .input-group {
	float: left; width: calc(100% - 128px); margin: 0 10px 0 0;
}
.flexible-parent .login-group .input-group .input-txt {
	position: relative;
}
.flexible-parent .login-group .input-group .input-txt i {
	position: absolute; top: 0; right: 0;
	border-left: 1px solid #ced4da;
	padding: 14px 9px; color: #acacac;
}
.flexible-parent .login-group .input-group .input-txt:nth-of-type(1) {
	margin: 0 0 5px 0;
}
.flexible-parent .login-group .input-group .input-txt input.form-control {
	height: 30px; font-size: 13px;
}
.flexible-parent .login-group .sign-basic-btn {
    float: left; width: 118px; height: 93px; padding: 0 10px;
    border: 1px solid #d1d1d1;
    background-color: #fbfbfb;
	font-family: tahoma; font-size: 11px;
    color: #999; text-align: center;

    /*-webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    transition:         all .2s ease-in-out;*/
}
.flexible-parent .login-group .sign-basic-btn:hover {
	color: #444;
    border: 1px solid #b5b5b5;
}

.flexible-parent .user-joinfind-group:after {
	content: ''; display: block; clear: both;
}
.flexible-parent .user-joinfind-group {
	background-color: #f5f5f5; border-top: 1px solid #d1d1d1;
	margin: 10px 0 0 0; padding: 0 10px;
}
.flexible-parent .user-joinfind-group > a {
	display: block; float: left; width: calc(33.3333% - 1px); margin: 10px 0;
	font-size: 13px; text-align: center; color: #999; letter-spacing: -1px;
	border-left: 1px solid #e1e1e1;
}
.flexible-parent .user-joinfind-group > a:hover { color: #e62626; }
.flexible-parent .user-joinfind-group > a:first-child { width: 33.3333%; border-left: none; }
.flexible-parent .user-joinfind-group > a > .joinfind-icon {
	position: relative; top: 3px;
	display: inline-block; width: 16px; height: 16px;
	background-image: url(/resource/images/common/onepick-sprites.png?v=3);
	background-repeat: no-repeat;
}
.flexible-parent .user-joinfind-group > a:nth-of-type(1) > .joinfind-icon { background-position: -16px -143px; }
.flexible-parent .user-joinfind-group > a:nth-of-type(2) > .joinfind-icon { background-position: -32px -143px; }
.flexible-parent .user-joinfind-group > a:nth-of-type(3) > .joinfind-icon { background-position: -48px -143px; }

.flexible-parent .user-joinfind-group > a:nth-of-type(1):hover > .joinfind-icon { background-position: -16px -159px; }
.flexible-parent .user-joinfind-group > a:nth-of-type(2):hover > .joinfind-icon { background-position: -32px -159px; }
.flexible-parent .user-joinfind-group > a:nth-of-type(3):hover > .joinfind-icon { background-position: -48px -159px; }


.flexible-parent .user-joinfind-group > .user-join {
	
}
.flexible-parent .user-joinfind-group > .user-join:after {
	/*content: ' | '; color: #5e5e5e; margin: 0 13px 0 10px;*/
}

.gamepick {
	margin: 0 0 10px;
	border: 1px solid #d1d1d1;
	background-color: #fff;
}
.gamepick .gamepick-board .gamepick-board-head {
	padding: 22px 0 23px;
	text-align: center; color: #888;
}

.gamepick .gamepick-board .livebtns-wrap {
	border-top: 1px solid #e5e5e5;
	background-color: #f5f5f5;
	text-align: center;
}
.gamepick .gamepick-board .livebtns-wrap:after { content: ''; display: block; clear: both; }
.gamepick .gamepick-board .livebtns-wrap { padding: 10px 5px; }
.gamepick .gamepick-board .livebtns-wrap a {
	display: inline-block; position: relative;
	width: 40px; height: 40px; margin: 3px; cursor: pointer;
	color: #999; font-size: 14px;
	line-height: 40px; text-align: center;
	background-color: #fff;
	border: 1px solid #d1d1d1;
	border-radius: 50%;
}

.gamepick .gamepick-board .betting-btn {
	height: 62px; width: 100%;
	font-size: 14px; font-weight: bold; line-height: 62px;
	text-align: center; letter-spacing: -1px;
	color: #fff;
	border: 1px solid #999;
	background-color: #bbb;
}
.division {
	clear: both; display: block; height: 10px;
	border-top: 1px solid #e5e5e5; margin: 10px 0 0;
}
.gamepick .gamepick-board .betting-btn.active {
	background-color: #a152db;
	border: 1px solid #8540b8;
}

.lnb-banner { margin: 0; }
.lnb-banner > a { display: block; }
.lnb-banner > a img { width: 100%; }


.hot-issue { margin: 10px 0 0 0; }
.hot-issue > h2 {
	background-color: #000; color: #fff;
	padding: 10px;
}
.hot-issue .hot-issue-content {
	padding: 10px;
	border-left:	1px solid var(--color-line);
	border-right:	1px solid var(--color-line);
	border-bottom:	1px solid var(--color-line);
}
.hot-issue .hot-issue-content ul li {
}
.hot-issue .hot-issue-content ul li a {
	display: block; padding: 2px 0; font-size: 14px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hot-issue .hot-issue-content ul li a:hover {
	color: #000;
}
.hot-issue .hot-issue-content ul li a img {
	position: relative; top: 4px;
	width: 15px; height: 15px; margin: 0 10px 0 0;
}
.hot-issue .hot-issue-content ul li a span { display: inline-block; position: relative; }
.hot-issue .hot-issue-content ul li a .issue-title {
	width: calc(100% - 65px); top: 3px; font-size: 14px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hot-issue .hot-issue-content ul li a .issue-reviewnum {
	width: 30px; top: 0px;
	font-size: 12px; color: var(--point-main);
	text-align: right;
}

.lnb-content .gamepick { margin: 10px 0; }
.chat-container {
	margin: 10px 0; position: static;
	border: 1px solid #d1d1d1;
	background-color: #fff;
}
.chat-container:after,
.chat-container .chat-content:after,
.chat-container .chat-content li:after {
	content: ''; display: block; clear: both;
}

.chat-container .chat-content {
	padding: 5px; /*background-color: #bacee0;*/
	height: 490px; overflow: auto;
}
.chat-container .chat-content::-webkit-scrollbar { width: .4em; }
.chat-container .chat-content::-webkit-scrollbar-track { background-color: #f8f8f8; }
.chat-container .chat-content::-webkit-scrollbar-thumb { opacity: 0; background-color: #adadad; /*border-radius: .5em;*/ }
.chat-container .chat-content::-webkit-scrollbar-thumb:hover { /*background-color: #a8a8a8;*/ }
.chat-container .chat-content li {
	margin: 5px;
}
.chat-container .chat-content li.chatposition-left {
	float: left; clear: both;
}
.chat-container .chat-content li.chatposition-left .chatuserimg {
	float: left; margin-right: 5px; position: relative; top: 3px;
	width: 25px; height: 25px;
	border-radius: 5px; overflow: hidden;
}
.chat-container .chat-content li.chatposition-left .chatuserimg img {
	width: 100%; height: 100%;
}
.chat-container .chat-content li.chatposition-left .chatusertxt {
	float: left;
}
.chat-container .chat-content li.chatposition-left .chatusertxt .chatusernickname {
	font-size: 13px; margin: 0 10px 0 5px;
}


.chat-container .chat-content li.chatposition-left .msg {
	/*box-shadow: 5px 5px 10px rgba(0, 0, 0, .25); background-color: #fff;
	margin-right: 5px; padding: 5px 10px; border-radius: 5px;*/
	font-size: 13px; line-height: 1.7em;
}
.chat-container .chat-content li.chatposition-left .time {
	position: relative; top: 5px; font-size: 11px;
}
.chat-container .chat-content li.chatposition-right {
	float: right; clear: both;
}
.chat-container .chat-content li.chatposition-right .msg {
	box-shadow: 5px 5px 10px rgba(0, 0, 0, .25); font-size: 13px;
	background-color: #ffeb33; padding: 5px 10px; margin-left: 5px; border-radius: 5px;
}
.chat-container .chat-content li.chatposition-right .time {
	position: relative; top: 5px; font-size: 11px;
}
.chat-container .chat-content + .form-control {
	font-size: 14px; padding: 5px 10px; width: calc(100% - 20px);
	border: none; border-top: 1px solid #e5e5e5;
	border-radius: 0;
}
.chat-container .chat-content + .chat-div {
	display: block; width: calc(100% - 1.5rem); height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem;
    font-size: 12.5px !important; font-weight: 400; line-height: 41px; color: #ccc; letter-spacing: -1px;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: inset 0 0 0 transparent;
    outline: none;
}

.ranking {
	margin: 10px 0 0 0;
	border: 1px solid var(--color-line);
}
#ranking-tab:after {
	content: ''; display: block; clear: both;
}
#ranking-tab {
	/*border-bottom:	1px solid var(--color-line);
	border-top:		1px solid var(--color-line);*/
}
#ranking-tab li {
	float: left; width: calc(50% - 1px);
	border-right: 1px solid var(--color-line);
}
#ranking-tab li:last-child {
	border-right: 0;
}
#ranking-tab li a {
	display: block; padding: 10px 0;
	background-color: #eee; color: #333; text-align: center;
	border-bottom: 1px solid var(--color-line);
}
#ranking-tab li a.active {
	background-color: #fff; color: #000;
	border-bottom: none;
}
.ranking > section {
	padding: 10px;
}
.ranking > section > ul li:after {
	content: ''; display: block; clear: both;
}
.ranking > section > ul li {
	margin: 2px 0;
}
.ranking > section > ul li > div {
	float: left;
}
.ranking > section > ul li > .ranking-number {
	width: 22px; height: 22px; margin: 0 5px 0 0;
	background-color: #888; color: #fff;
	font-size: 12px; text-align: center; line-height: 22px;
	border-radius: 3px;
}
.ranking > section > ul li > .ranking-user-level {
	margin: 0 5px 0 0; top: 2px;
}
.ranking > section > ul li > .ranking-nickname {
	position: relative; top: 4px; font-size: 14px;
}
.ranking > section > ul li > .ranking-point {
	float: right; position: relative; top: 3px; 
	font-size: 11px; color: #1a682c;
	font-family: 'Verdana';
}



.quote { margin: 10px 0 0 0; }
.quote > h2 {
	background-color: #000; color: #fff;
	padding: 10px;
}
.quote .quote-content {
	padding: 10px;
	border-left:	1px solid var(--color-line);
	border-right:	1px solid var(--color-line);
	border-bottom:	1px solid var(--color-line);
}
.quote .quote-content table {
	width: 100%; border-collapse: collapse;
}
.quote .quote-content table tr td {
	padding: 5px; border-bottom: 1px solid #eee;
}
.quote .quote-content table tr td:nth-of-type(1) { text-align: left; }
.quote .quote-content table tr td:nth-of-type(2) { text-align: center; }
.quote .quote-content table tr td:nth-of-type(3) { text-align: right; }
/*.quote .quote-content table tr td:first-child {
	text-align: left;
}
.quote .quote-content table tr:first-child td:first-child {
	text-align: center;
}*/
.quote .quote-content table tr td .quote-nation-img {
	display: inline-block; width: 25px; margin: 0 5px 0 0;
}
/*.quote .quote-content ul li a {
	display: block; padding: 2px 0;
}
.quote .quote-content ul li a:hover {
	color: #000;
}
.quote .quote-content ul li a img {
	position: relative; top: 4px;
	width: 15px; height: 15px; margin: 0 10px 0 0;
}*/
.quote .quote-content > a {
	display: block; padding: 10px; margin: 10px 0 0 0;
	background-color: #2d3f53; color: #fff;
	text-align: center;
}
.quote .quote-content > a:hover {
	background-color: #4d6b8c;
}

@media screen and (max-width: 1000px) {
    .container > article .lnb {
        display: none;
    }
    .flexible-parent {
    	border: none;
    	border-bottom: 1px solid #eee; /*padding: 10px;*/
    }
    .flexible-parent .attendance-banner {
    	display: none;
    }
}