﻿@charset "utf-8";
/*-----------------------------------------------------------------------------
 [TABLE OF CONTENTS]
    +common
        -anchor
        -form
        -clear,clearfix
        -pager
        -downbar
    +header
        -logo
        -topbar
        -nav
    +wrapper-content
        +content-main
	        -content
		        -banner
		        -box
	        -sidebar
    +footer
        -copyright
-----------------------------------------------------------------------------*/
/* +common
*----------------------------------------------------------------------------*/
html,
body {
    min-width: 100%;
    color: #666;
    font: 12px/20px Arial, Helvetica, sans-serif;
    behavior: url(css/csshover.htc);
    background: url(../images/bg-body.gif) repeat-x;
}
abbr,
acronym {
    cursor: help;
}
input,
select,
textarea,
button {
	color: #2F0209;
	font: normal 12px Arial, Helvetica, sans-serif;
}
/**
*
* -anchor
*
**/
/* 去除連結虛線框 */
a,
a:focus {
    blr:expression(this.onFocus=this.blur());
    -moz-outline-style: none; 
}
a:link,
a:visited {
    color: #5f798f;
    text-decoration:none;
}
a:hover,
a:active {
    color: #ea008a;
}
/**
*
* -form
*
**/

input
select,
textarea,
button {
    font: 12px/20px Arial;
}
label {
    cursor: pointer;
    font: 12px/20px Arial;
    height: 18px;
}
input[type="reset"],
input[type="submit"],
input[type="image"],
input[type="button"] {
    letter-spacing: 0.15mm;
    cursor: pointer;
}
select,
textarea,
input[type="text"],
input[type="password"],
input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    height: 18px;
    font: 12px/20px Arial;
    border: 1px double #e3e3e3;
    background: #fff;
}
/**
*
* -clear,clearfix
*
**/
.clear {
    clear: both;
}
.clearfix {
    display: inline-block;
}
.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    content: ".";
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
.hidden {
	display: none;
}
/**
*
* -pager
*
**/
.pager {
    float: left;
    width: 100%;
    height: 24px;
    margin: 10px 0;
    font: 12px/22px Arial;
    text-align: center;
    clear: both;
}
.pager ol {
    float:left;
    position:relative;
    left:50%;
    text-align:center;
}
.pager ol li {
    float: left;
    position: relative;
    right: 50%;
    margin: 0 4px 0 0;
    background: none;
    text-align: center;
    color: #666;
}
.pager ol li span {
    color: #32abc9;
}
.pager ol li a {
    float: left;
    display: block;
    height: 22px;
    padding: 0 6px;
    color: #666;
    border: 1px solid #e6e6e6;
}
.pager ol li a:hover {
    border: 1px solid #999;
    text-decoration: none;
}
.pager ol li.active {
    display: block;
    height: 22px;
    padding: 0 6px;
    color: #dd3e77;
    background: #e6e6e6;
    border: 1px solid #e6e6e6;
    font: bold 12px/22px Arial;
}
.pager ol li.disabled {
    display: block;
    height: 22px;
    padding: 0 6px;
    border: 1px solid #eee;
    color: #ddd;
}

/**
*
* -downbar
*
**/
.downbar {
    float: left;
    width: 100%;
    height: 20px;
    margin: 10px 0;
    text-align: center;
    clear: both;
}
.downbar ol {
    margin: 0 25px 0 0;
}
.downbar ol li {
    float: right;
    margin: 0 5px 0 0;
}
.downbar ol li.back a {
    display: block;
    width: 30px;
    height: 11px;
    text-indent: -100000px;
    background: url(../images/bg-btn.gif) no-repeat 0 -400px; 
}
.downbar ol li.top a {
    display: block;
    width: 35px;
    height: 11px;
    text-indent: -100000px;
    background: url(../images/bg-btn.gif) no-repeat 0 -600px;  
}
/* +header
*----------------------------------------------------------------------------*/
/**
*
* -logo
*
**/
#header .logo {
	position: absolute;
	top: 10px;
	left: 40px;
    width: 170px;
    height: 48px;
}
/**
*
* -topbar
*
**/
#header .topbar {
    display: none; /* 20110829尚未開放英文版 */
    position: absolute;
    top: 25px;
    right: 40px;
}
#header .topbar ul li {
    display: inline;
    padding: 0 5px 0 0;
    margin: 0 5px 0 0;
    background: url(../images/line-topbar.gif) no-repeat right;
}
#header .topbar ul li.last {
    padding: 0;
    margin: 0;
    background: none;
}
/**
*
* -nav
*
**/
#header .nav {
    position: absolute;
    bottom: 0;
    left: 12px;
    width: 936px;
    height: 48px;
}
/* +content
*----------------------------------------------------------------------------*/
/* +content-main
*----------------------------------------------------------------------------*/
/**
 *
 * -banner
 *
 **/
#content-main .content #banner {
	position: relative;
	width: 860px;
	height: 300px;
	overflow: hidden;
}
.bannernav {
	position: absolute;
	left: 0;
	bottom: 0;
    width: 500px;
	z-index: 100;
}
.bannernav li {
    display: table-cell; 
    *display: inline;
    zoom: 1;
	vertical-align: bottom;
}
.bannernav a {
	display: block;
	width: 96px;
	height: 56px;
	border: 1px #fff solid;
}
.bannernav a img {
	width: 96px;
	height: 56px;
	filter:alpha(opacity=60);opacity:0.6;zoom:1;
}
.bannernav a:hover img {
	filter:alpha(opacity=100);opacity:1;zoom:1;
}
.bannernav li.activeSlide a {
    width: 120px;
	height: 70px;	
}
.bannernav li.activeSlide a img {
    width: 120px;
	height: 70px;
	filter:alpha(opacity=100);opacity:1;zoom:1;
}
.bannernav a:focus {
    outline-style: none;
    outline-width: medium;
    outline-color: invert;
}
.pics {
	width: 860px;
	height: 300px;
}
/**
 *
 * -box
 *
 **/
#content-main .content .box {
    position: relative;
    width: 650px;
    min-height: 300px;
	_height:expression(this.scrollHeight < 300 ? "300px" : "auto");
}
#content-main .content .box h2 {
    float: none;
    height: 24px;
    margin: 0 0 5px 0;
    text-indent: -1000000px;
}
#content-main .content .box h2.about-introduce {
    background: url(../images/title.gif) no-repeat 0 -72px;
}
#content-main .content .box h2.about-philosophy {
    background: url(../images/title.gif) no-repeat 0 -96px;
}
#content-main .content .box h2.about-advantage {
    background: url(../images/title.gif) no-repeat 0 -120px;
}
#content-main .content .box h2.service-nomecha {
    background: url(../images/title.gif) no-repeat 0 -144px;
}
#content-main .content .box h2.service-gogobox {
    background: url(../images/title.gif) no-repeat 0 -168px;
}
#content-main .content .box h2.service-mesge {
    background: url(../images/title.gif) no-repeat 0 -192px;
}
#content-main .content .box h2.service-gogoschool {
    background: url(../images/title.gif) no-repeat 0 -216px;
}
#content-main .content .box h2.service-pinkygame {
    background: url(../images/title.gif) no-repeat 0 -240px;
}
#content-main .content .box h2.news-2011 {
    background: url(../images/title.gif) no-repeat 0 -264px;
}
#content-main .content .box h2.news-2010 {
    background: url(../images/title.gif) no-repeat 0 -288px;
}
#content-main .content .box h2.news-2009 {
    background: url(../images/title.gif) no-repeat 0 -312px;
}
#content-main .content .box h2.news-2008 {
    background: url(../images/title.gif) no-repeat 0 -336px;
}
#content-main .content .box h2.news-2007 {
    background: url(../images/title.gif) no-repeat 0 -360px;
}
#content-main .content .box h2.news-2006 {
    background: url(../images/title.gif) no-repeat 0 -384px;
}
#content-main .content .box h2.recruit-careers {
    background: url(../images/title.gif) no-repeat 0 -408px;
}
#content-main .content .box h2.recruit-office {
    background: url(../images/title.gif) no-repeat 0 -432px;
}
/**
 *
 * -com 
 *
 **/
#content-main .content .box .com {
	padding: 0 25px;
}
/**
 *
 * -sidebar 
 *
 **/
#content-main .sidebar {
    float: left;
    width: 180px;
    margin: 0 10px 0 0;
    _display: inline;
}
#content-main .sidebar h2 {
    width: 180px;
    height: 58px;
    text-indent: -100000px;
    border-bottom: 4px solid #f48cb1;
}
#content-main .sidebar h2.about {
    background: url(../images/title-max.gif) no-repeat 0 0;
}
#content-main .sidebar h2.service {
    background: url(../images/title-max.gif) no-repeat 0 -58px;
}
#content-main .sidebar h2.news {
    background: url(../images/title-max.gif) no-repeat 0 -116px;
}
#content-main .sidebar h2.recruit {
    background: url(../images/title-max.gif) no-repeat 0 -174px;
}
#content-main .sidebar ul{
    padding: 10px 0 0 0;
}
#content-main .sidebar ul li {
    margin: 0 0 2px 0;
    _display: inline;
}
#content-main .sidebar ul li a {
    display: block;
    color: #5f798f;
	padding: 5px 10px;
	border: 1px solid #fff;
	_margin: 0 0 2px 0;
}
#content-main .sidebar ul li a:hover {
    color: #f48cb1;
    background: url(../images/icon.gif) no-repeat right 8px;
    border: 1px solid #ffd9e7;
}
#content-main .sidebar ul li.active a {
    color: #f48cb1;
    background: #eee url(../images/icon.gif) no-repeat right 8px;
    border: 1px solid #f48cb1;
}
/* +footer
*----------------------------------------------------------------------------*/
/**
 *
 * -copyright
 *
 **/
#footer .copyright {
    text-align: center;
    font: 10px/20px Arial;
}

