@charset "UTF-8";
/*基本*/
body {padding:0; margin:0; font-size:15px; color:#444; font-family:微軟正黑體, 蘋果儷中黑, 新細明體, Arial, Helvetica, sans-serif;  background:url(../images/bg.jpg) left top;}
h1,h2,h3,h4,h5,ul,ol,li {padding:0; margin:0;}
a { text-decoration:none; color:#444;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover, a:active, a:focus { text-decoration: none;}
ul, ol, dl, dt, dd, li{ padding: 0;margin: 0;}
ul, ol { list-style:none;}
img { border:0;}
iframe {width: 0; height: 0; margin: 0; padding: 0;}

.clear { clear:both;}
.red {color:#f44;}


/*動畫*/
@keyframes ani1 {
	from { transform: rotate(0deg);   opacity: 0.2; }
	50%  { transform: rotate(180deg); opacity: 1.0; }
	to   { transform: rotate(360deg); opacity: 0.2; }
}
@keyframes ani2 {
	from {  opacity: 1.0; background-position:5px 6px; }
	50%  {  opacity: 0.9; background-position:5px 4px; background-color:#c7deed;}
	to   {  opacity: 1.0; background-position:5px 6px;}
}
@keyframes ani2_2 {
	from {  opacity: 1.0; background-position:2px 2px; }
	50%  {  opacity: 0.9; background-position:2px 0px; background-color:#c7deed;}
	to   {  opacity: 1.0; background-position:2px 2px;}
}
@keyframes ani3 {
	from {  opacity: 1.0; border:1px solid #444; }
	50%  {  opacity: 0.8; border:1px solid #f00; }
	to   {  opacity: 1.0; border:1px solid #444; }
}

@keyframes msg_avatar {
	from {  opacity: 1.0; background-position:4px 4px;}
	25%  {  opacity: 0.8; background-position:4px 2px;}
	50%  {  opacity: 0.8; background-position:4px 4px;}
	75%  {  opacity: 0.8; background-position:4px 6px;}
	to   {  opacity: 1.0; background-position:4px 4px;}
}
@keyframes msg_name {
	from {  opacity: 1.0;}
	50%  {  opacity: 0.6;}
	to   {  opacity: 1.0;}
}
@keyframes striptrue {
	from {  opacity: 1.0; }
	50%  {  opacity: 0.6; }
	to   {  opacity: 1.0;}
}


.btn {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 4px 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 13px;
   text-decoration: none;
   vertical-align: middle;
   }
.btn:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.btn:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }


.win { 
z-index: 50;
overflow: hidden;
position: absolute;
width: 200px; height: 150px; 
min-width:120px;
border: 1px solid #aaa;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-radius: 10px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color:#f0f9ff;
}

.win .win_title { height:25px;font-size:19px; padding:5px 10px; border-bottom: 1px solid #aaa; cursor: move; }
.win .win_title h4 {text-overflow:ellipsis; display: inline-block;  white-space:nowrap;  overflow: hidden;}

.win .win_title_btn { margin:3px 0 0 10px; float:right; width:20px; height:20px; display: inline-block; background-position:center center; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.win .btn_win_close { background-image:url(../images/icon_close_x20.png);}
.win .btn_win_close:hover { background-image:url(../images/icon_close_x20_hover.png); background-color:#f44;}
.win .btn_win_resize { background-image:url(../images/icon_resize_x20.png);}
.win .btn_win_resize:hover { background-image:url(../images/icon_resize_x20_hover.png); background-color:#aaa;}
.win .btn_win_reload { background-image:url(../images/icon_reload_x20.png);}
.win .btn_win_reload:hover { background-image:url(../images/icon_reload_x20_hover.png); background-color:#aaa;}

.win .ajaxloader{animation: ani1 1s linear infinite;}
.win .ajaxloader:hover{ background-color: #39f;}
.win .btn_win_hide { background-image:url(../images/icon_hide_x20.png);}
.win .btn_win_hide:hover { background-image:url(../images/icon_hide_x20_hover.png); background-color:#aaa;}

.win .win_content { padding:5px 10px;  }

ul li a {display:block;border-bottom: 1px #444 dotted;}

#win_menu { /*width: 160px; height: 375px;*/}
.content_menu1 ul li a {line-height: 32px;font-size:17px;padding-left:30px;background:url(../images/icon_sword_x20.png) 5px 6px no-repeat;}
.content_menu1 ul li a:hover{ animation: ani2 1s linear infinite;background-image:url(../images/icon_sword_x20_hover.png); background-color:#b6d8ef;color:#fff;}
.content_menu1 ul li a:hover span{	animation: ani2 1s linear infinite; }
.content_menu1 .menu_number { padding:1px 3px; font-size:11px; color:#fff; background-color:#f44; vertical-align: top;}
#win_system { /*width: 150px; height: 300px;*/}
#win_actor_status { /*width: 660px; height: 700px;*/}
#win_actor_item { /*width: 300px; height: 600px;*/}
#win_main { /*width: 1024px; height: 768px;*/}
#win_msg_list { /*width:300px; height:375px;*/ }
#win_msg_list .win_content {overflow:auto; height:340px;}
#win_msg_list ul li { clear:both;}
#win_msg_list ul li a {line-height: 32px;font-size:17px;}
#win_msg_list ul li a:hover{ animation: ani2_2 1s linear infinite;background-color:#b6d8ef;color:#fff;}
#win_msg_list ul li a:hover .msg_lsit_avatar{	animation: ani2_2 0.2s linear 1;}

#win_msg_list .msg_lsit_avatar {  background-position: 2px 2px; background-repeat:no-repeat; padding:4px; width:45px; height:50px; float:left;}
#win_msg_list .msg_lsit_msg { width: 206px; float:left; overflow : hidden; text-overflow : ellipsis; white-space : nowrap;  line-height:40px;padding-right:4px;}
#win_msg_list .msg_lsit_time{ width: 206px; float:left; text-align:right; font-size:11px; color:#999; line-height:11px; padding-right:4px;}

.win.wc { display:none;}
.win.wh { width: 160px; height: 35px; position: initial; float:left;}
.win.fc { animation: ani3 1s linear infinite;}

.login_form { width:300px; margin:0 auto; padding-top:150px;}

.content_form {}
.content_form label { font-size: 17px; line-height:31px; padding: 2px 0; vertical-align: middle; }
.content_form input { font-size: 17px; line-height:31px; padding: 0 5px; width:286px;}
.content_form .line { margin:10px 0; }

#msg { 
	z-index: 999999;
	overflow: hidden;
	position: absolute;
	width: 800px; height: 250px; 
	display:none;
}
#msg.mo {display:block;}
#msg .msg_avatar_area { float:left; width: 196px; height:250px; overflow:hidden;}
#msg .msg_avatar{ background-repeat: no-repeat; background-position:4px 4px;padding:8px; width:180px; height:200px;animation: msg_avatar 2s linear infinite;}
#msg .msg_name{font-size:17px; letter-spacing:1px; padding:4px; text-align:center;font-weight: bold;animation: msg_name 2s linear infinite;}
#msg .msg_talk{ 
	float:left; width:510px; height:200px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding:20px 30px;
	font-size:17px;
	 letter-spacing: 1px;
	background: #fff;
	border: 4px solid #c2e1f5;
	position: relative; 
	margin-left: 20px;
	vertical-align: top;
	line-height: 29px;
}
#msg .msg_talk .msg_talk_loud { font-size:27px;}
.arror_left:after, .arror_left:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#msg .msg_talk_next { position:absolute;right:10px;bottom:10px;}
.arror_left:after {
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #fff;
	border-width: 20px;
	margin-top: -20px;
}
.arror_left:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: #c2e1f5;
	border-width: 26px;
	margin-top: -26px;
}

.arror_top:after, .arror_top:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arror_top:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #fff;
	border-width: 20px;
	margin-left: -20px;
}
.arror_top:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #c2e1f5;
	border-width: 26px;
	margin-left: -26px;
}


#bg {
	position:fixed; width:100%; height:100%; z-index:999998;opacity: 0.2;display:none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
	background: #b5bdc8; /* Old browsers */
	background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#bg.bo{display:block;}




/*actor_status*/
#win_actor_status .actor_base { float:left; padding-right:10px;}
#win_actor_status .actor_base ul li {padding:0 5px; }
#win_actor_status .actor_base ul li span { line-height:25px; display:inline-block; }
#win_actor_status .actor_base .actor_avatar { width:180px; height:200px; padding:8px; float:left; background-position: 4px 4px; background-repeat:no-repeat; animation: msg_avatar 2s linear infinite;}
#win_actor_status .actor_base .actor_allname {  font-size: 21px; font-weight:bold; text-align: center;}
#win_actor_status .actor_base .actor_line {  font-size: 19px;  text-align: center; border-top:1px solid #5daabe; margin: 8px 0; clear:both;}
#win_actor_status .actor_base .actor_notline {  font-size: 19px;  text-align: center; margin: 8px 0; clear:both;}
#win_actor_status .actor_base .actor_attr { font-size:19px;  text-align:right;}
#win_actor_status .actor_base .actor_attr2 { font-size:17px; }
#win_actor_status .actor_base .actor_attrv1 {  font-size: 17px; text-align: right;}
#win_actor_status .actor_base .actor_attrv2 {  font-size: 15px;}
#win_actor_status .actor_base .actor_point {  width:408px; display: inline-block; }
#win_actor_status .actor_base .actor_point div{ width:204px; display: inline-block; float: left;}
#win_actor_status .actor_base .stripbg { overflow:hidden; width:408px; margin:0 5px; background-color: black; height: 6px;	padding: 1px; border: 1px solid #3d8fce;}
#win_actor_status .actor_base .stripbg .striptrue{	height: 5px; animation: striptrue 2s linear infinite;  }

.orange_gradient{
background: #ffc578; /* Old browsers */
background: -moz-linear-gradient(left, #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffc578 0%,#fb9d23 100%); /* IE10+ */
background: linear-gradient(to right, #ffc578 0%,#fb9d23 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=1 ); /* IE6-9 */
}
.blue_gradient{
	background: #7abcff; /* Old browsers */
	background: -moz-linear-gradient(left, #7abcff 0%, #4096ee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7abcff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #7abcff 0%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #7abcff 0%,#4096ee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #7abcff 0%,#4096ee 100%); /* IE10+ */
	background: linear-gradient(to right, #7abcff 0%,#4096ee 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=1 ); /* IE6-9 */
}
.blue2_gradient { 
	background: #5daabe; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #5daabe 0%, #75ccff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#5daabe), color-stop(100%,#75ccff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #5daabe 0%,#75ccff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #5daabe 0%,#75ccff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #5daabe 0%,#75ccff 100%); /* IE10+ */
	background: linear-gradient(135deg, #5daabe 0%,#75ccff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5daabe', endColorstr='#75ccff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
.blue_text { color:#7abcff;}
.blue2_text { color:#4096ee;}
.green_gradient {
background: #89db83; /* Old browsers */
background: -moz-linear-gradient(left, #89db83 0%, #00dd07 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#89db83), color-stop(100%,#00dd07)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #89db83 0%,#00dd07 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #89db83 0%,#00dd07 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #89db83 0%,#00dd07 100%); /* IE10+ */
background: linear-gradient(to right, #89db83 0%,#00dd07 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89db83', endColorstr='#00dd07',GradientType=1 ); /* IE6-9 */
}
.green_text { color:#89db83;}
.red_gradient{
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(left, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff3019 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(to right, #ff3019 0%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=1 ); /* IE6-9 */
}
.red_text { color:#ff3019;}
.yellow_gradient{
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(to bottom, #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}		
.yellow_text { color:#fefcea;}

/* 動作區 */

/* 隱藏區 */
#hide_area { position:fixed; bottom:0; left:0; z-index:999999;}
#hide_area .win .win_title h4 { width:75px;}


.rad10 {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.rad5 {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.rad3 {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.bro1s { border:1px solid #444;}
.bro1d { border:1px dotted #444;}


.t_bg {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
background: rgb(235,241,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
}

/*RWD*/
@media (max-width: 319px) {	/*xxs*/
  #win_main {width: 317px; height: 768px;}
}
@media (min-width: 320px) and (max-width: 479px) {	/*xs*/
  #win_main {width: 318px; height: 768px;}
}
@media (min-width: 480px) and (max-width: 767px) {	/*ss*/
  #win_main {width: 478px; height: 768px;}
}
@media (min-width: 768px) and (max-width: 991px) {	/*ms*/
  #win_main {width: 766px; height: 768px;}
}
@media (min-width: 992px) and (max-width: 1199px) { /*ls*/
  #win_main {width: 766px; height: 768px;}
}
@media (min-width: 1200px) {	/*lls*/
  #win_main {width: 1022px; height: 768px;}
}