/*
?v=1
*/
.container > article .lnb {
    float: left; width: 300px; margin: 10px 0 0 0; display: none;
}

.lnb .flexible-parent {
	border: 1px solid var(--color-line); padding: 10px;
}


/* log-in */
.flexible-parent .user-group:after {
	content: ''; display: block; clear: both;
}
.flexible-parent .user-group .user-img {
	float: left; width: 73px; height: 73px; margin: 0 5px 0 0;
	border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden;
	background-color: var(--color-line);
}
.flexible-parent .user-group .user-img img { width: 100%; height: 100%; }
.flexible-parent .user-group .user-info {
	float: left; width: calc(100% - 100px); margin: 0 0 10px 0; padding: 10px; position: relative;
	background-color: var(--color-bg);
}
.flexible-parent .user-group .user-info > span { display: inline-block; }

.flexible-parent .user-group .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-info .logout-btn:hover {
	background-color: var(--point-main);
}

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

.flexible-parent .user-group .user-group-point:after {
	content: ''; display: block; clear: both;
}
.flexible-parent .user-group .user-group-point > div {
	float: left; width: 50%;
	font-size: 12px; text-align: center;
}

.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 0;
}
.flexible-parent .user-group .user-group-btn-group > a {
	display: block; float: left; width: calc(25% - 7px); position: relative;
	margin: 0 5px 0 0; padding: 10px 0;
	text-align: center; font-size: 13px;
	border: 1px solid var(--color-nav-line);
}
.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:nth-of-type(4) {
	width: calc(25% - 2px); margin: 0;
}
.flexible-parent .user-group .user-group-btn-group > a .badge {
	display: none; width: 14px; height: 14px;
	position: absolute; top: 2px; 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);
	}
}

/* log-out */
.flexible-parent .login-group:after {
	content: ''; display: block; clear: both;
}
.flexible-parent .login-group .input-group {
	float: left; width: calc(100% - 90px); 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; left: 0;
	border-right: 1px solid var(--color-line);
	padding: 14px 9px; color: var(--color-txt);
	display: none; /* leeteam1 */
}
.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: 14px; /*padding: 0.375rem 0.75rem 0.375rem 40px; width: calc(100% - 52px);*//*leeteam1*/
	background-color: transparent; color: #f9f9f9;
}
.flexible-parent .login-group .sign-basic-btn {
	float: left; width: 80px; height: 93px;
	background-color: var(--point-main); color: #fff;

    -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 {
	background-color: var(--point-main);
}

.flexible-parent .user-joinfind-group:after {
	content: ''; display: block; clear: both;
}
.flexible-parent .user-joinfind-group {
	background-color: var(--color-bg); border: 1px solid var(--color-line);
	margin: 10px 0 0 0; padding: 0 10px;
}
.flexible-parent .user-joinfind-group > a {
	display: block; float: left; padding: 10px 0;
	font-size: 14px; text-align: center; color: #fff;
}
.flexible-parent .user-joinfind-group > .user-join {
	
}
.flexible-parent .user-joinfind-group > .user-join:after {
	content: ' | '; color: #5e5e5e; margin: 0 13px 0 10px;
}

.lnb .socialcontact:after {
	content: ''; display: block; clear: both;
}
.lnb .socialcontact {
	display: block; margin: 10px 0 0; padding: 10px;
	border: 1px solid var(--color-txt);
}
.lnb .socialcontact .social-icon {
	float: left; width: 42px; padding: 0 0 0 10px;
}
.lnb .socialcontact .social-icon i { font-size: 42px; color: #fff; position: relative; top: 4px; }

.lnb .socialcontact.kakao		{ background: linear-gradient(to top, #f1d900, #f7e439); }
.lnb .socialcontact.telegram	{ background: linear-gradient(to top, #2d6694, #4ca4dc); }
.lnb .socialcontact.skype		{ background: linear-gradient(to top, #0f61d1, #5fd6f4); }
.lnb .socialcontact.wechat		{ background: linear-gradient(to top, #1d9f05, #56c209); }

.lnb .socialcontact.kakao .social-icon i { color: #3a1c1c; }
.lnb .socialcontact.kakao .social-info h2 { color: #fff; }
.lnb .socialcontact.kakao .social-info h3 { color: #3a1c1c; }

.lnb .socialcontact .social-info {
	float: left; width: calc(100% - 52px);
}
.lnb .socialcontact .social-info h2 {
	font-size: 20px; font-weight: 600; text-align: center; color: #ffe400;
}
.lnb .socialcontact .social-info h3 {
	font-size: 16px; font-weight: 600; text-align: center;
}

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


.lnb-board { margin: 10px 0 0 0; border: 1px solid var(--color-line); display: none; }
.lnb-board > h2 {
	color: var(--point-main); font-size: 15px; font-weight: 600 !important;
	padding: 10px; border-bottom: 1px solid var(--color-line);
}
.lnb-board .lnb-board-content {
	padding: 10px;
	/*border-left:	1px solid var(--color-line);
	border-right:	1px solid var(--color-line);
	border-bottom:	1px solid var(--color-line);*/
}
.lnb-board .lnb-board-content ul li {
}
.lnb-board .lnb-board-content ul li a {
	display: block; padding: 2px 0; font-size: 14px;
	/*white-space: nowrap; overflow: hidden; text-overflow: ellipsis;*/
}
.lnb-board .lnb-board-content ul li a:hover .info {
	color: var(--color-yellow);
}
.lnb-board .lnb-board-content ul li a img {
	position: relative; top: 4px;
	width: 15px; height: 15px; margin: 0 10px 0 0;
}

.lnb-board .lnb-board-content ul li a span {
	display: inline-block; position: relative;
	font-size: 13px; font-weight: 600 !important;
}
.lnb-board .lnb-board-content ul li a .icon {
	width: 15px; height: 15px; top: -5px;
	background-color: var(--point-main);
	font-size: 10px; text-align: center; line-height: 15px;
	border-radius: 2px;
}
.lnb-board .lnb-board-content ul li a .info {
	width: calc(100% - 54px);
	
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lnb-board .lnb-board-content ul li a .review {
	width: 30px; top: -5px;
	font-size: 10px; color: var(--point-main);
	text-align: right;
}


#chat-screen {
    position: fixed; top: 253px; right: 10px; z-index: 10;
    width: 248px; height: 443px; overflow: hidden;
}
#chat-screen .sishoodteam {
	/*background-color: transparent;
    background-image: url(/resource/images/common/button_sishoodteam.png?v=1);
    background-repeat: no-repeat;
    cursor: pointer; border: none; outline: none;
    width: 248px; height: 106px;*/
}


@media screen and (max-width: 1000px) {
	#chat-screen { display: none; }
}


.chat-container {
	margin: 19px 0 0 0; padding: 20px; position: static;
	/*border: 1px solid var(--color-line);*/

    background-image: url(/resource/images/common/bg_chat.png?v=1);
    background-repeat: no-repeat;
    background-size: cover;
    width: calc(100% - 40px); height: 274px;
}
.lnb-content .chat-container { background-color: #003a9a; }
.chat-container:after,
.chat-container .chat-content:after,
.chat-container .chat-content li:after {
	content: ''; display: block; clear: both;
}

.chat-container > h2 {
	position: relative;  margin: 0 0 10px; cursor: default;
	font-size: 15px; font-weight: 500; color: #fff;
}
.chat-container > h2:after {
	content: ''; display: block; width: 24px; height: 21px;
	position: absolute; top: 0; right: 0;
    background-image: url(/resource/images/icons/icon-realchat.png?v=1);
    background-repeat: no-repeat;
    background-size: cover;
}

.chat-container .chat-content {
	/*padding: 5px;*/ background-color: var(--color-line);
	height: 170px; overflow: auto; border: none;

	background-color: #001c4b;
	margin: 0 0 10px;
}

.chat-container .chat-content::-webkit-scrollbar { width: .4em; }
.chat-container .chat-content::-webkit-scrollbar-track { background: transparent; }
.chat-container .chat-content::-webkit-scrollbar-thumb { opacity: 0; background: #c1c1c1; border-radius: .5em; }
.chat-container .chat-content::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
/*.chat-container .chat-content li {
	margin: 10px 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-bottom: 8px;
}

.chat-container .chat-content li.chatposition-left .msg {
	box-shadow: 5px 5px 10px rgba(0, 0, 0, .25); font-size: 11px; color: #333;
	background-color: #fff; padding: 5px 10px; margin-right: 5px; border-radius: 5px;
	display: inline-block; width: calc(100% - 20px);
}
.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: 11px; color: #333;
	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:focus { border: none !important; }
.chat-container .chat-content + .form-control {
	font-size: 13px; padding: 5px 10px;

	width: calc(100% - 20px);
	background-color: #001c4b; color: #999;
	border: none; border-radius: 0;
}

.chat-container .chat-content li:first-child { margin: 20px 20px 0px; }
.chat-container .chat-content li {
	margin: 15px 20px;
}
.chat-container .chat-content li.chatposition-left .chatusertxt .chatusernickname {
	margin: 0 0 7px;
}
.chat-container .chat-content li.chatposition-left .chatusertxt .chatusernickname > span {
	display: inline-block; padding: 5px 10px 3px;
	font-size: 12px;
	background-color: #3a5585; color: #fff;
	border-radius: 10px;
}
.chat-container .chat-content li.chatposition-left .msg {
	display: block;
	font-size: 12px; line-height: 1.6em; color: #fff;
	/*box-shadow: 5px 5px 10px rgba(0, 0, 0, .25);  color: #333;
	background-color: #fff; padding: 5px 10px; margin-right: 5px; border-radius: 5px;
	display: inline-block; width: calc(100% - 20px);*/
}

.banner ul li {
	height: 80px; margin: 0 0 10px 0;
}
.banner ul li a img {
	width: 100%; height: 100%;
}

.ranking {
	margin: 10px 0 0 0;
	/*border-left:	1px solid var(--color-line);
	border-right:	1px solid var(--color-line);
	border-bottom:	1px solid var(--color-line);*/
	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: #222; color: #f9f9f9; text-align: center;
	border-bottom: 1px solid var(--color-line);
}
#ranking-tab li a.active {
	background-color: #111; color: #f9f9f9;
	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: var(--point-main);
	font-family: 'Verdana';
}



.quote { margin: 10px 0 0 0; }
.quote > h2 {
	background-color: var(--color-line); 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 var(--color-line);
}
.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;
    }
}