@charset "utf-8";
/*
 index
______________________*/

body { background:#f2f2f2;}

#pageHeading {background:none; height:150px; margin-bottom:0;}
#pageHeading:before {background-image:url(/images/h1.png); width:92px; height:53px; margin:-27px 0 0 -46px;}

main section.content {padding:0 44px; margin-bottom:-10px;}

main .item {width:25%; float:left; margin-bottom:40px; padding:0 5px 0;}
main .item a{-webkit-backface-visibility:hidden; backface-visibility:hidden; display:inline-block; background:#fff; -webkit-transform:translateZ(0) scale(1.0, 1.0);}
main .item .brandImage {overflow:hidden; background-size:0; background-position:-9999px -9999px; font-size:0; background-repeat:no-repeat;}
main .item .brandImage img{width:100%; height:auto;}
main .item p.link {background:#222; text-align:center; color:#fff; font-size:11px; font-size:1.1rem; line-height:33px; height:35px; border-top:1px solid #222;}
main .item a:hover .brandImage img {/*filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; -webkit-transition:opacity 0.3s ease; -moz-transition:opacity 0.3s ease; -ms-transition:opacity 0.3s ease; -o-transition:opacity 0.3s ease; transition:opacity 0.3s ease;*/}
main .item a:hover p.link {background:#fff; color:#222; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; border-color:#f2f2f2;}

main .item p.link span {display:inline-block; line-height:33px;}

main .item.disabled  span{display:block;}
main .item.disabled p.link {background:#c8c8c8; border-color:#c8c8c8; color:#222; font-size:12px; font-size:1.2rem;}



@media screen and (max-width:780px){
#pageHeading {height:auto;}
}
@media screen and (min-width:581px) and (max-width:780px){
main section.content {padding:0 9px;}
main .item {width:33.33%; float:left; margin-bottom:10px; padding:0 5px;}
main .item:nth-child(4){clear:both;}
main .item p.link {font-size:10px; font-size:1rem;}
}
@media screen and (max-width:580px){
main section.content {padding:0 10px; margin-bottom:0;}
main .item {width:100%; float:none; margin-bottom:1px; padding:0;}
main .item a{padding:10px; text-decoration:none; position:relative; -webkit-transform:none; -webkit-backface-visibility:visible; backface-visibility:visible; display:block;}
main .item a:before{content:''; background:url(/common/images/sprite.png) -125px -50px no-repeat; background-size:500px auto; position:absolute; right:10px; top:50%; width:8px; height:12px; margin:-6px 0 0 0;}
main .item .brandImage {overflow:hidden; background-size:auto 75px; background-position:0 0; height:75px;}
main .item .brandImage img{display:none;}

main .item.disabled {display:none;}
main .item.disabled span{padding:10px; text-decoration:none; position:relative; -webkit-transform:none; -webkit-backface-visibility:visible; backface-visibility:visible; display:block; background:#fff;}
main .item p.link {background:none; text-align:left; line-height:inherit; height:inherit; color:#222; font-size:11px; font-size:1.1rem; line-height:18px; text-decoration:none; position:absolute; left:100px; top:60px; border:none;}
main .item p.link span{display:none;}
main .item a:hover {background:#fff;}
main .item a:hover p.link {background:none; color:#999; text-decoration:underline;}

}