@charset "UTF-8";

/*
------------------------------------------------------------
TOP PAGE CSS file
First Version:	2009.05.01


last Version:  20XX.XX.XX
------------------------------------------------------------
*/

/*
	TOP PAGE
	01 : TOP Flash
	02 : Service Info
	03 : GadgetGallery
	04 : Portfolio
	05 : Press
*/


/* 01 : TOP Flash
==========================================================*/
#topFlash {
	margin-bottom:12px;
}

/* 02 : Service Info
==========================================================*/
#serviceInfo {
	width:900px;
	padding-bottom:7px;
	position:relative;
	top:0;left:0;
}

#serviceInfo h3 {
	width:140px;
	height:80px;
	position:absolute;
}

#serviceInfo h3.service05 { top:0;left:0; }
#serviceInfo h3.service02 { top:0;left:152px; }
#serviceInfo h3.service03 { top:0;left:304px; }
#serviceInfo h3.service04 { top:0;left:456px; }
#serviceInfo h3.service01 { top:0;left:608px; }
#serviceInfo h3.service06 { top:0;left:760px; }

#serviceInfo h3 a {
	display:block;
	width:140px;
	height:80px;
	text-indent:-9999px;
}

#serviceInfo h3.service01 a { background: url(../images/top/top_service01.jpg) no-repeat 0 0; }
#serviceInfo h3.service02 a { background: url(../images/2010/top_service_social.jpg) no-repeat 0 0; }
#serviceInfo h3.service03 a { background: url(../images/top/top_service03.jpg) no-repeat 0 0; }
#serviceInfo h3.service04 a { background: url(../images/top/top_service04.jpg) no-repeat 0 0; }
#serviceInfo h3.service05 a { background: url(../images/2010/top_service_smartphone.jpg) no-repeat 0 0; }
#serviceInfo h3.service06 a { background: url(../images/top/top_service06.jpg) no-repeat 0 0; }

.trigger {
	margin:0 12px 0 0;
	position:absolute;
	top:81px;
	cursor:pointer;
}
.op_service05 { left:109px; }
.op_service02 { left:261px; }
.op_service03 { left:413px; }
.op_service04 { left:565px; }
.op_service01 { left:717px; }
.op_service06 { left:869px; }


.service_container01,.service_container02,.service_container03,.service_container04,
.service_container05,.service_container06 {
	width:900px;
	height:120px;
	background:#f0f0f0;
	background: url(../images/glay_dotted_x.gif) repeat-x 0 0;
	position:relative;
	top:95px;
	left:0;
}
.service_container01:after,.service_container02:after,.service_container03:after,.service_container04:after,
.service_container05:after,.service_container06:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.service_container01,.service_container02,.service_container03,.service_container04,
.service_container05,.service_container06 {
	display: inline-block; }

/* exclude MacIE5 \*/
* html .service_container01,* html .service_container02,* html .service_container03,* html .service_container04,
* html .service_container05,* html .service_container06 {
	height: 1%; }
.service_container01,.service_container02,.service_container03,.service_container04,
.service_container05,.service_container06 {
	display:block; }
/* end MacIE5 */

.containerDivLeft {
	float:left;
	width:318px;
	margin:15px auto;
	text-align:center;
}

.containerDivRight {
	float:left;
	width:582px;
	height:120px;
	margin:4px 0 0 0;
}

.containerDivRight p {
	display:block;
	height:100px;
	padding:0 0 0 17px;
}

.containerDivRight p a {
	display:block;
	width:71px;
	height:16px;
	margin:12px 0 0 485px;
}

.containerClose_1,.containerClose_2,.containerClose_3,.containerClose_4,.containerClose_5,.containerClose_6 {
	cursor:pointer;
}

.containerCloseMargin {
	margin-left:565px;
}

#serviceDotted {
	margin:-2px 0 17px 0;
	background: url(../images/glay_dotted_x.gif) repeat-x 0 0;
}
*html #serviceDotted { margin:0 0 17px 0; /* IE 6.0*/}
#serviceDotted , x:-moz-any-link { margin:0 0 17px 0; /* Fx 1.0*/}
#serviceDotted , x:-moz-read-only { margin:0 0 17px 0; /* Fx 1.5, 2.0*/}
#serviceDotted , x:-moz-broken { margin:0 0 17px 0; /* Fx 3.0*/}

#ContentsWrapper {
	margin:0;
	position:relative;
	top:95px;
	left:0;
}

#GlobalFooter {
	position:relative;
	top:95px;
	left:0;
}


/* 03 : GadgetGallery
==========================================================*/
.GGLight {
	float:left;
	width:297px;
	margin:0 auto;
	text-align:center;
}

.GGLight .mobileImg {
	margin-top:3px;
}

.GGRight {
	float:left;
	width:373px;
}

.GGRight p {
	padding:7px 0 0 0;
	text-align:right;
}

.GGRight p.linkInduce {
	padding:0 0 0 0;
	text-align:left;
}


/* 04 : Portfolio
==========================================================*/
.naviPortfolio {
	width:660px;
	margin:-3px 0 0 0;
	padding:0 0 12px 11px;
	background:url(../images/glay_dotted_x.gif) repeat-x left bottom;
}
* html .naviPortfolio { width:650px; }

.naviPortfolio:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.naviPortfolio { display: inline-block; }

/* exclude MacIE5 \*/
* html .disPortfolio{ height: 1%; }
.disPortfolio { display:block; }
/* end MacIE5 */

.naviPortfolio li {
	float:left;
	color:#606060;
	font-size:10px;
}

.naviPortfolio li span { font-weight:bold; }
.naviPortfolio li span a { font-weight:bold; }


.topPortfolio {
	width:670px;
	margin:0 0 0 0;
	background:url(../images/glay_dotted_y.gif) repeat-y 340px center;
}

.topPortfolio:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.topPortfolio { display: inline-block; }

/* exclude MacIE5 \*/
* html .topPortfolio{ height: 1%; }
.topPortfolio { display:block; }
/* end MacIE5 */

.topPortfolio dl {
	float:left;
	padding:10px 10px 0 10px;
	width:320px;
	height:116px;
	background:transparent url(../images/glay_dotted_x.gif) repeat-x left bottom;
}

.topPortfolio dl.odd {
	padding:10px 0 0 10px;
	width:320px;
}

.topPortfolio dt a {
	font-weight:bold;
	line-height:1.1em;
}

.topPortfolio dd {
	display:block;
	width:320px;
	margin-top:4px;
	font-size:10px;
	line-height:1.4em;
}

.topPortfolio dd ul {
	float:left;
	width:185px;
	margin:2px 0 8px 0;
	padding:0 0 0 0;
	text-align:left;
	line-height:1.0em;
}
.topPortfolio dd ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.topPortfolio dd ul { display: inline-block; }

/* exclude MacIE5 \*/
* html .topPortfolio dd ul{ height: 1%; }
.topPortfolio dd ul{ display:block; }
/* end MacIE5 */

.topPortfolio dd ul li {
	float:left;
	display:block;
	margin:2px 4px 0 0;
	width:13px;
	height:13px;
	text-indent:-9999px;
}
.topPortfolio dd ul li.details {
	margin:-1px 0 0 14px;
	height:17px;
	text-indent:-9999px;
}
* html .topPortfolio dd ul li.details { margin:0 0 0 6px; }

.topPortfolio dd ul li.gadget { background:url(../images/portfolio/icon_gadget_on.gif) no-repeat 0 0; }
.topPortfolio dd ul li.mobile { background:url(../images/portfolio/icon_mobile_on.gif) no-repeat 0 0; }
.topPortfolio dd ul li.bp { background:url(../images/portfolio/icon_bp_on.gif) no-repeat 0 0; }
.topPortfolio dd ul li.web { background:url(../images/portfolio/icon_web_on.gif) no-repeat 0 0; }
.topPortfolio dd ul li.silver { background:url(../images/portfolio/icon_silver_on.gif) no-repeat 0 0; }
.topPortfolio dd ul li.mobile_app { background:url(../images/portfolio/icon_mobile_app_on.gif) no-repeat 0 0; }

.topPortfolio dd ul li.gadget_off { background:url(../images/portfolio/icon_gadget_off.gif) no-repeat 0 0; }
.topPortfolio dd ul li.mobile_off { background:url(../images/portfolio/icon_mobile_off.gif) no-repeat 0 0; }
.topPortfolio dd ul li.bp_off { background:url(../images/portfolio/icon_bp_off.gif) no-repeat 0 0; }
.topPortfolio dd ul li.web_off { background:url(../images/portfolio/icon_web_off.gif) no-repeat 0 0; }
.topPortfolio dd ul li.silver_off { background:url(../images/portfolio/icon_silver_off.gif) no-repeat 0 0; }
.topPortfolio dd ul li.mobile_app_off { background:url(../images/portfolio/icon_mobile_app_off.gif) no-repeat 0 0; }

.topPortfolio dd p {
	padding:0 4px 0 0;
	text-align:left;line-height:1.4em;
}

.topPortfolio dd img {
	float:left;
	margin:0 6px 0 0;
}

.disPortfolio {
	margin:0 0 30px 0;
	padding:10px 0 12px 11px;
	background:#ffffff url(../images/glay_dotted_x.gif) repeat-x left bottom;
}
.disPortfolio:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.disPortfolio { display: inline-block; }

/* exclude MacIE5 \*/
* html .disPortfolio{ height: 1%; }
.disPortfolio { display:block; }
/* end MacIE5 */

.disPortfolio li {
	float:left;
	padding-right:10px;
	color:#606060;
	font-size:10px;
}
.disPortfolio li img {
	margin:-1px 3px 0 0;
	vertical-align:middle;
}


/* 05 : Press
==========================================================*/
#topPressLeft {
	float:left;
	width:328px;
}

#topPressRight {
	float:left;
	width:328px;
	margin-left:14px;
}

#topPressLeft h2,#topPressRight h2 {
	margin-bottom:7px;
}

.topPressUl {
	width:328px;
}

.topPressUl li {
	padding:8px 0 8px 10px;
	background: url(../images/glay_dotted_x.gif) repeat-x left bottom;
}

.topPressMore {
	float:right;
	margin-top:6px;
	text-align:right;
}