h3 {
text-align: center;
}
h1 {
text-align: center;
margin:20px 0 20px 0;
}

body{color:#444;} 

a{color:#3AC416;text-decoration:none}
a:hover{color:red}
a:visited{}



.fpct20{float:left;width:20%;margin:0px;padding:0px;}
.fpct25{float:left;width:25%;margin:0px;padding:0px;}
.fpct30{float:left;width:30%;margin:0px;padding:0px;}
.fpct40{float:left;width:40%;margin:0px;padding:0px;}
.fpct50{float:left;width:50%;margin:0px;padding:0px;}
.fpct60{float:left;width:60%;margin:0px;padding:0px;}
.fpct75{float:left;width:75%;margin:0px;padding:0px;}
.fpct100{float:left;width:100%;margin:0px;padding:0px;}


.fleft{float:left;}
.fright{float:right;}


.fontb{font-weight:bold;}
.fonti{font-style:italic;}
 /*text-decoration: underline line-through*/

.fontpct60{font-size:60%;} 
.fontpct100{font-size:100%;} 
.fontpct120{font-size:120%;} 
.fontpct150{font-size:150%;} 
.fontpct180{font-size:180%;} 
.fontpct200{font-size:200%;} 
.fontpct300{font-size:300%;}  
.fontpct400{font-size:400%;}  


.colorred{color:red}
.colorgreen{color:green;}
.coloryellow{color:yellow;}
.colorblack{color:#333;}
.colorwhite{color:white;}
.colorgray{color:#D4CBCB} /*gray*/
.colordev{color:#dc923f;}
.colordevnoonff{color:#006996;}
.color333{color:#333;}
.color666{color:#666;}
.color999{color:#999;}



.bgcltg{background-color:#B4E7A7;}
.bgcgray{background-color:#D4CBCB;} 
.bgcgray2{background-color:#eee;} 
.bgcdarkgray{background-color:#666;} 
.bgcblue{background-color:#B4E7A7;}
.bgc333{background-color:#333;}
.bgc666{background-color:#666;}
.bgcmainbox{background-color:#333;}

.bdgreen{border:1px solid green;}
.bdgray{border:1px solid gray;}
.bdbtm{border-bottom:1px solid gray;}
.bdbtmdotted{border-bottom:1px dotted green;}

.alignL{text-align:left}
.alignC{text-align:center}
.alignR{text-align:right}
.alignCWhole{margin:0 auto;}

.mg0px{margin:0px;}
.mg2px{margin:2px;}
.mg5px{margin:5px;}
.mg10px{margin:10px;}
.mg20px{margin:20px;}
.mgv2px{margin-top:2px;margin-bottom:2px;}
.mgv5px{margin-top:5px;margin-bottom:5px;}
.mgv10px{margin-top:10px;margin-bottom:10px;}
.mgv15px{margin-top:15px;margin-bottom:15px;}
.mgv20px{margin-top:20px;margin-bottom:20px;}
.mgv30px{margin-top:30px;margin-bottom:30px;}
.mgh5px{margin-left:5px;margin-right:5px;}
.mgh10px{margin-left:10px;margin-right:10px;}
.mgh15px{margin-left:15px;margin-right:15px;}
.mgh20px{margin-left:20px;margin-right:20px;}
.mgh30px{margin-left:30px;margin-right:30px;}

.pd0px{padding:0px;}
.pd5px{padding:5px;}
.pd10px{padding:10px;}
.pd20px{padding:20px;}
.pdv5px{padding-top:5px;padding-bottom:5px;}
.pdv10px{padding-top:10px;padding-bottom:10px;}
.pdv15px{padding-top:15px;padding-bottom:15px;}
.pdv20px{padding-top:20px;padding-bottom:20px;}
.pdv30px{padding-top:30px;padding-bottom:30px;}
.pdv40px{padding-top:40px;padding-bottom:40px;}
.pdh5px{padding-left:5px;padding-right:5px;}
.pdh10px{padding-left:10px;padding-right:10px;}
.pdh15px{padding-left:15px;padding-right:15px;}
.pdh20px{padding-left:20px;padding-right:20px;}
.pdh30px{padding-left:30px;padding-right:30px;}
.pdt30px{padding-top:30px;}
.pdt40px{padding-top:40px;}


.hid{display:none;}

.btn{width:78px;height:64px;}
.btn2{width:70px;height:40px;}


.pct80{width:80%;}
.pct60{width:60%;}
.pct55{width:55%;}
.pct20{width:20%;}
.pct10{width:10%;}
.pct5{width:5%;}
.pct0{display:none;}

.linodot{margin:0px;padding:0px;}
.linodot li { list-style-type:none;}
.lifloat {float:left;}
.lifloat li{float:left;margin-right:10px;padding:2px;border-bottom:1px gray dashed;}


input{margin:5px;padding:5px;}

select{margin:10px;padding:10px;}

img{border:0;margin:10px 0 10px 0}


p{float:left;margin:10px 0 10px 0;width:100%;}

option{font-size:1.2em;}

.cursr{cursor:pointer;}
.cursr:hover{}

.hoverbgc666:hover{background-color:#666;} 
.hoverbgcffc:hover{background-color:#ffc;} 
.hoverboder:hover{border:red dotted 1px;}


/*********************/
/***************************alvfont**************************/
@font-face {
    font-family: 'alvfont';
    src: url('alvfonticonpart.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'alvfont' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    
    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

	font-size:400%;
	display:block;
	margin:10px 0 10px 0;
}


.icon-back:before {
    content: "\e901";
}
.icon-home:before {
    content: "\e902";
}
.icon-search:before {
    content: "\e903";
}
.icon-contact:before {
    content: "\e904";
}
.icon-info:before {
    content: "\e905";
}
.icon-prj:before {
    content: "\e906";
}
.icon-work:before {
    content: "\e907";
}
.icon-more:before {
    content: "\e908";
}
.icon-annouce:before {
    content: "\e909";
}
.icon-interests:before {
    content: "\e90a";
}

.icon-e:before {
    content: "\e90b";
}

.icon-an:before {
    content: "\e90c";
}
.icon-thanks:before {
    content: "\e90d";
}

.icon-unknown:before {
    content: "\e910";
}
.icon-index:before {
    content: "\e915";
}



.tdborder {width:100%;border:1px dotted gray;}
.tdborder td{padding:0px;margin:0px;border:1px dashed gray;}




.groupbox
{
background:  #fff   no-repeat left top ;/*F1F5F8  img/one .png*/

margin:0px;
padding:0px;
float:left;
width:100%; 
text-align:center;
 
}
.groupbox:hover{
border:1px solid red;
}

/*480x800
720x1028 
*/
@media only screen and (min-width: 320px) and (max-width: 720px)
{
 
	.singlebox
	{
	 
	border-bottom:1px dotted green;
	margin-top:5px;
	margin-bottom:5px;
	padding:0px;
	float:left;
	width:100%; 
	text-align:center;
	 
	}
}
@media only screen and (min-width: 721px)
{
 
	.singlebox
	{
	 
	border:1px dotted green;
	margin-top:5px;
	margin-bottom:5px;
	padding:0px;
	float:left;
	width:100%;/*49%*/
	text-align:center;
	height:280px;
	 
	}

}

 

.singlebox:hover{
background-color:#ffc;
font-style:italic;
}
 
.singlebox .one 
{
	width:100%;
	margin:5px;
	text-align:center;
	font-size:1.5em;
	color:#666;
}
.singlebox .one img 
{
	height:100px;
}

.singlebox .two 
{
	width:100%;
	margin:5px;
	text-align:center;
	font-size:1.0em;
	color:#999;
}
.singlebox .three 
{
	width:100%;
	margin:5px;
	text-align:center;
	color:#999;
	font-size:1.2em;
}

.singlebox .content 
{
	float:left;
}
.singlebox .title
{
	font-size:1.5em;
	padding-left:5px;
	color: #666;
	text-decoration: none;
	font-weight:normal;
 
}
.singlebox   a:hover 
{
	color:red;
} 

.singlebox li 
{
	list-style:none;
}