@charset "UTF-8";
/*
----------
header.css
----------
*/

/**/
header:after,
.logo:after,
.googlesearch:after,
.globalnav:after
{
content:"";
height:0;
display:block;
clear:both;
}
header,
.googlesearch,
.logo,
.globalnav
{
_zoom:1;
}

/**/

header { width: 100%;text-align:center;border-bottom: 4px solid #3eb3ed;}
header .inner{ padding-top:12px}




/*
logo
*/

.logo { display:block; margin:0; float:left}


/*
langnav
*/
.langnav {
	float:right;
	margin-bottom:8px
}

.langnav li{
	
	margin-left:4px;
	float:left;
	}
	.langnav li a{text-decoration:none;padding:4px 12px}
.langnav li a:link,
.langnav li a:visited{background-color:#3eb3ed;color:#fff;}
	.langnav li a:hover,
	.langnav li a.here{background-color:#eee;color:#3eb3ed; 
	}
	




/*
googlesearch
*/
.googlesearch{
		float:right;
		padding:12px 0}




/*
toggle
*/
.toggle{ 
 display: none;
}



/*
globalnav
*/
.globalnav{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  display:block;
  clear:both;
  
}

.globalnav li{
  display: block;
  float: left;
  width: 12.5%;
  margin: 0 0;
  padding: 0;}
  
.globalnav li a{
  display: block;
  padding: 24px 0 12px;
  background: #f4f4f4;
  border-bottom:4px solid #eee;
  color: #222;
  text-align: center;
  text-decoration: none;
}

.globalnav li a:hover{border-bottom:6px solid #007AFC;}
.globalnav li a:hover#home {border-bottom:6px solid #007AFC;}
 .globalnav li a:hover#activity{border-bottom:6px solid  #C00;}
 .globalnav li a:hover#blog{border-bottom:6px solid #007AFC;}
.globalnav li a:hover#life {border-bottom:6px solid #007AFC;}
.globalnav li a:hover#volunteer {border-bottom:6px solid #007AFC;}
 .globalnav li a:hover#event{border-bottom:6px solid #007AFC;}
 .globalnav li a:hover#dantai{border-bottom:6px solid #007AFC;}
 .globalnav li a:hover#exchange{border-bottom:6px solid #F06;}









@media only screen and (max-width: 960px) {
.logo,
.googlesearch{padding:0}

.logo img{ width:100%}



  /*.globalnav{
    display: none;
  }*/
.globalnav li{
    width: 25%;
  }
.globalnav li a{color: #3eb3ed;
   background:#eee;
   padding:8px 0;
   }
   


@media only screen and (max-width: 767px) {

.logo img{ width:100%;}
.googlesearch,
.langnav
{ display:none; }

.logo{ top:10px; text-align:center}
 
  .toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #3eb3ed;
	clear:both
  } .toggle a{
    display: block;
    position: relative;
    padding: 8px 0;
    border-bottom: 1px solid #3eb3ed;
    color: #fff;
    text-align: center;
    text-decoration: none;
  } .toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
 .toggle a:before,
 .toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #3eb3ed;
  } .toggle a:before{
    margin-top: -6px;
  } .toggle a:after{
    margin-top: 2px;
  }



.globalnav{
    display: none;
  }
.globalnav li{
    width: 100%;
  }
  
  .langnav li a{padding:4px

}
}