html {
    overflow: auto;
    height: 100%;
    font-family: "CI", sans-serif;
    color:#333333;
}
body {

    position: relative;
    height: 100%;
    min-width: 1200px;
    margin: 0;
}


.text {line-height : 140% ;}


header{
background: #333333;
padding: 0px; 
height: 146px;
width: 100;
}

.header2{
padding: 0px; 
height: 105px;
width: 100;
border-bottom:solid #FFFFFF 1px;
}


.ttl{
  top:  50;
  left: 25%;
  position: absolute;
}

.ttm{
  top:  0;
  left: 18%;
  position: absolute;
}

.ttm2{
  top:  0;
  left: 18%;
  position: absolute;
  transition: all .3s;
}


.header2:hover > .ttm2{
opacity: 0.0;
}


.header3{
padding: 0; 
height: 40px;
width: 100%;
background: #444444;
border-bottom: 1px solid #444444;
z-index:9;
}
.header3.fixed {
	position: fixed;
	left: 0;
	top: 0;
}


.header4{
padding: 0; 
height: 100%;
width: 60%;
margin: auto;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
display:table;
table-layout:fixed;

}


.hbox{
display:table-cell;
}

.hbox + .hbox {
    border-left: 1px solid #FFFFFF;
}

.hbox2{
line-height: 40px;
text-align:center;
color: #FFFFFF;
font-size: 20px;
overflow:hidden;
transition: all .4s;
}


.hbox2:hover{
	color: #111111;
	background-color: #BBBBBB;
}

.hbox2a,.hbox2b,.hbox2c,.hbox2d{
}









