body{font-family: Arial, Helvetica, sans-serif; line-height:135%;  font-size:16px; }

h1,h2,h3,h4{ line-height: 120%;}
.wrap {margin: 0 10px;}
p{margin:10px 0;}
a{  transition: 100ms; color: #0000FF;}
a:hover{ text-decoration: underline;}
input, textarea, select {margin: 5px 0; padding:4px; font-size: 100%; }
big,.big{ font-size: large;}
.small{font-size:75%;}
.center{text-align:center;}
.r{float:right;}
.l{float:left;}
.clearfix{ clear:both;}
.red {color:#FF0000;}
.warning{ margin-top: 20px; padding:10px;  border: solid 1px #4F73FF;  display: inline-block; }

.d{border-top: solid 2px #ddd; margin-top:35px; padding-bottom:35px;}
.nobr{white-space:nowrap;}




header{ background-color: #4787E9; overflow: hidden;}
#logo{text-align: center;}
#logo img{ height: 100px; width: auto; margin:20px 0 10px 50px; }
#page_title{color:#FFFFFF; font-size:30px; text-align: center; margin-bottom:20px; letter-spacing:1px;font-weight:normal;}


h2{ font-size: 25px; margin: 25px 0 10px 0; text-align: center;}

a.grey_link{display:block; text-align: center;  color: #1E90FF9; text-decoration: none;}
a.grey_link:hover{ text-decoration: underline;}

a.grey_link img{height:30px; width:auto; margin:10px 0 0; }

#inf h3{font-size: 25px;}

.inf_l img,.inf_r img{display:block; float:left; height:30px; width:auto; margin:10px 10px 0;}

#inf h3, #inf p{ margin: 0 20px 0 80px;}

.inf_l, .inf_r { clear: both; }


.button{ margin: 0 20px 0 0; padding: 7px 15px; font-size:1.2em; background-color:#4787E9; color: #fff; border: none; border-radius: 5px;}



footer{ margin-top: 40px; color:#fff; background-color: #4787E9; overflow: hidden; text-align: center; padding: 15px; line-height:50px; }
#baner{ display: inline-block; }
#baner img {height:30px; width: auto;   vertical-align: middle;}

#inf h3{line-height: 110%; margin-bottom:10px;}
.gray{color: #999;}
#recv{ line-height: 150%;}

#soc{margin:10px 0; color:#555; text-align:center;}
#soc span{display:block; text-align:center;}
#soc img{margin:7px; width:36px; border-radius:18px; vertical-align:middle; border: solid 1px #111;}
#soc img:hover{border-color:#111; opacity: 0.7;}


#copyright { display: block; line-height: 130%; margin: 20px 0;}
#soc span{display: block;}
.laguage{ display: inline-block; width:40px; text-align: center; float: right; padding: 5px; margin: 5px; background-color: #649BED; color: #FFFFFF; text-decoration: none; border: solid 1px #eee; border-radius: 3px;}
.laguage:hover{ background-color: #3B80E8;  text-decoration: none;}


@media screen and (min-width: 560px) {


.inf_l img,.inf_r img{display:block; float:left; height:60px; width:auto; margin:10px 30px 0 0;}
.inf_r img{display:block; float:right; height:60px; width:auto; margin:10px 0;}
a.grey_link img{height:60px; width:auto; margin:10px 0 0; }
#receiver{ margin:0px auto ; border: solid 2px #eee; padding:10px 20px 20px; max-width: 320px;}
#recv{ margin:0px auto ; border: solid 2px #eee; padding: 20px; max-width: 600px;}
.inf_r h3, .inf_r p { text-align: right;}
#inf h3, #inf p{margin-right:140px; margin-left:140px;}
#baner {float: right;}
#copyright {float: left; display: inline-block; line-height:50px; margin: 0;}
#soc span{display:inline-block;display: inline-block;}
}

@media screen and (min-width: 980px) {
.wrap {margin: 0 auto; width:960px;}

}