@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {

background: url(../images/PNG/bg.png);

margin: 0;

font-family: Tahoma;

font-size: 11px;

}

a.hk {

text-decoration: none;

color: #FFF;

}

a.custom {

text-decoration: none;

color: #595959;

}

a.custom:hover {

text-decoration: underline;

color: #595959;

}

ul {list-style-type: circle;}

#container_top {

background: url(../images/PNG/container_top.png);

width: 916px;

height: 3px;

top: 120px;

margin: 0 auto 0 auto;

position: relative;

}

#banner {

background: url(../images/header.png) 0px -2px;

width: 100%;

height: 150px;

position: absolute;

}

#logo {

background: url(../images/PNG/logo.png);

width: 137px;

height: 40px;

margin: 48px auto 0 auto;

position: relative;

}

#container_mid {

background: url(../images/PNG/container_mid.png);

width: 916px;

height: auto;

top: 120px;

margin: 0 auto 0 auto;

position: relative;

overflow: auto;

}



#container_bot {

background: url(../images/PNG/container_bot.png);

width: 916px;

height: 3px;

top: 120px;

margin: 0 auto 12px auto;

position: relative;

}



#navigation {

background: url(../images/PNG/navigation.png);

width: 894px;

height: 44px;

margin: 0 0 6px 3px;

font-weight: bold;

color: #fff;

padding: 3px 0 0 16px;

}



#left_info_box {

background: url(../images/PNG/left_info_box.png);

width: 415px;

height: 135px;

position: relative;

margin: 10px 0 10px 10px;

}



#avatar_area {

background: url(../images/PNG/avatar_recep.png);

width: 73px;

height: 130px;

position: absolute;

margin: 1px 0 0 1px;

padding: 3px 0 0 4px;

}



#usernamebox {

background: url(../images/PNG/usernamebox.png);

width: 170px;

height: 24px;

margin: 10px 0 0 78px;

position: absolute;

font-weight: bold;

color: #fff;

padding: 10px 0 0 10px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}



#mottobox {

background: url(../images/PNG/usernamebox.png);

width: 170px;

height: 24px;

margin: 51px 0 0 78px;

position: absolute;

font-weight: bold;

color: #fff;

padding: 10px 0 0 10px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}



#lastonbox {

background: url(../images/PNG/usernamebox.png);

width: 170px;

height: 24px;

margin: 92px 0 0 78px;

position: absolute;

font-weight: bold;

color: #fff;

padding: 10px 0 0 10px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}



#creditbox {

background: url(../images/PNG/creditbox.png);

width: 127px;

height: 25px;

position: relative;

float: right;

margin: 10px 8px 0 0;

color: #fff;

font-weight: bold;

padding: 9px 0 0 12px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}



#ducketbox {

background: url(../images/PNG/creditbox.png);

width: 127px;

height: 25px;

position: absolute;

margin: 51px 8px 0 268px;

color: #fff;

font-weight: bold;

padding: 9px 0 0 12px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}


#hkbox {

background: url(../images/PNG/creditbox.png);

width: 127px;

height: 25px;

position: absolute;

margin: 92px 8px 0 268px;

color: #fff;

font-weight: bold;

padding: 9px 0 0 12px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}



#right_box {

background: url(../images/PNG/right_box.png);

width: 445px;

height: 135px;

position: relative;

margin: 10px 0 0 0;

}



#right_image {

background: url(../images/PNG/me_background.png);

width: 443px;

height: 133px;

margin: 1px 0 0 1px;

position: absolute;

}


#enter_button {
background: #1b891b;
border: solid 4px #1a771a;
border-radius: 14px;
width: 159px;
font-size: 12px;
text-transform: uppercase;
height: 32px;
line-height: 16px;
text-align: center;
color: #fff;
font-weight: bold;
padding: 17px 0 0 0;
margin: 38px 0 0 140px;
position: absolute;
font-family: Roboto;
}


#enter_button:hover {

background: #138213;
border: solid 4px #1a771a;
border-radius: 14px;
width: 159px;
font-size: 11.75px;
text-transform: uppercase;
height: 32px;
line-height: 16px;
text-align: center;
color: #fff;
font-weight: bold;
padding: 17px 0 0 0;
margin: 38px 0 0 140px;
position: absolute;

}


#left_content_top {

background-color: #62a974;

width: 526px;

height: 26px;

margin: 14px 0 0 15px;

font-weight: bold;

color: #fff;

padding: 13px 0 0 12px;

}



#left_content_mid {

background: url(../images/PNG/left_content_mid.png);

width: 522px;

height: auto;

margin: 0 0 0 15px;

color: #595959;

padding: 6px 8px 6px 8px;

}



#left_content_bot {

background: url(../images/PNG/left_content_bot.png);

width: 538px;

height: 3px;

margin: 0 0 10px 15px;

}



#right_content_top {

background-color: #62a974;

width: 305px;

height: 26px;

margin: 14px 0 0 0;

font-weight: bold;

color: #fff;

padding: 13px 0 0 12px;

}



#right_content_mid {

background: url(../images/PNG/right_content_mid.png);

width: 301px;

height: auto;

padding: 6px 8px 6px 8px;

overflow: auto;color: #595959;

}



#right_content_bot {

background: url(../images/PNG/right_content_bot.png);

width: 317px;

height: 3px;

margin: 0 0 10px 0;

}



#main_content_top {

background: url(../images/PNG/main_content_top.png);

width: 874px;

height: 27px;

margin: 14px auto 0 auto;

padding: 12px 0 0 14px;

font-weight: bold;

color: #fff;

}



#main_content_mid {

background: url(../images/PNG/main_content_mid.png);

width: 888px;

height: auto;

margin: 0 auto 0 auto;

}



#main_content_bot {

background: url(../images/PNG/main_content_bot.png);

width: 888px;

height: 3px;

margin: 0 auto 10px auto;

}



.c-staff {

    height: 550px;

    width: 868px;

    background: url(../images/PNG/staff.png);

    border: 1px solid #b3b3b3;

    border-top: none;

    border-bottom: 2px solid #b3b3b3;

    padding: 9px;

    border-radius: 0 0 5px 5px;

    overflow: hidden;

}





















ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}



li {

    float: left;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}



li a, .dropbtn {

    display: inline-block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

z-index: 1;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}



li.dropdown {

    display: inline-block;

z-index: 1;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}



.dropdown-content {

    display: none;

    position: absolute;

    background-color: #dadada;

    min-width: 160px;

z-index: 1;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}



.dropdown-content a {

    color: white;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

    text-align: left;

background-color: #33507e;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

width: 124px;margin: 2px auto 2px auto;

}



.dropdown-content a:hover {

width: 124px;margin: 2px auto 2px auto;background-color: #2c446a; color: #fff;background-color: #2c446a; color: #fff;}



.dropdown:hover .dropdown-content {

    display: block;

background-color: #fcfcfc;}.sinfo .sinfotext {    position: absolute;    visibility: hidden;    width: 100px;    background-color: #233654;    color: #fff;    text-align: center;    border-radius: 6px;    padding: 5px 0;    margin-top: -35px;    margin-left: -67px;    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);}.sinfo:hover .sinfotext {    visibility: visible;}	

}.input-div{	border-top: 1px dashed #cccccc;	border-bottom: 1px dashed #cccccc;	padding: 10px 0;	margin-bottom: -1px;	text-align: left;}.input-div input[type="text"],.input-div input[type="radiodd"],.input-div input[type="password"],.input-div select  {	border: 1px solid #b3b3b3;	height: 28px;	line-height: 28px;	margin: 0;	width: 100%;	border-radius: 3px;	text-indent: 8px;		margin-bottom:10px;}.input-div label {	width: 100%;	float: left;	margin-bottom: 5px;}.active-div {	border-top: 1px dashed #cccccc;	border-bottom: 1px dashed #cccccc;	padding: 10px 0;	margin-bottom: -1px;	width: 100%;	float: left;	height: 70px;	position: relative;}.active-avatar {	width: 64px;	height: 70px;	margin: -10px 0 -10px -10px;	background-repeat: no-repeat;	float: left;	overflow: hidden;}.active-title {	float: left;	margin-left: 10px;	text-align: left;	margin-top: 13px;	height: 24px;	line-height: 24px;	font-weight: bold;	text-decoration: underline;}.active-motto {		margin-left: 60px; 		margin-top: 40px; 		float: right;	width: 514px;		text-align:left;}



.me-community {

	background: url(../images/GIF/stripepattern.gif);

	background-position: 0px;

	height: 240px;

	border-radius: 3px 3px 3px 3px;

	position: relative;

}



textarea {

    backgrround-color: #F1F1F1;

    border: 1px solid #b3b3b3;

    border-radius: 3px;

    padding: 5px;

    width: 97%;

    linde-height: 28px;

    text-indent: 8px;

    height: 60px;

    frront-family: verdana;

    fonrt-size: 10px;

    colror: #666666;

    margin-bottom: 10px;

}

.h-campaign {

	height: 60px;

	padding: 10px;

	width: 505px;

	float: left;

}



.h-campaign.even {

	background: #ececec;

}



.h-campaign.even:hover {

	background: #dceafa;

}



.h-campaign.odd:hover {

	background: #f1f8ff;

}

.h-campaign img {

	float: left;

	border: 0;

	outline: 0;

}



.h-campaign-text,.h-campaign-title {

	width: 320px;

	float: left;

	text-align: left;

	color: #000;
	
	margin-left: 20px;

}





.h-campaign-title {

	height: 18px;

	font-weight: bold;

}

.logo:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}