@import url("reset.css");

body{ background:#00142f; position: relative; background: url(../images/bg.jpg);}

#wrapper{width: 100%;height: 100%; overflow: hidden; /position: relative;}

/*top BEGIN*/
#top{
	width: 100%; 
	height: 540px; 
	margin: auto;position: relative;
}
.logo_block{
	width: 100%;
	height: 60px; 
	margin: 0 auto auto 0;
	padding: 0;
	position: absolute;
	z-index: 100;
	background: #155592;
}
.schick_logo {width: 171px;height: 30px; display: block;position: absolute;top: 15px;left: 20px;}
.mobile01_logo {display: block;position: absolute; top: 14px;right: 20px;}
.fb{
	width:33px;
	height:33px;
	position:absolute;
	top:14px;
	right:188px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background:url(../images/share_fb.png) no-repeat top left
	}
.fb:hover{background:url(../images/share_fb.png) no-repeat bottom left}

.slogan_block{width: 1200px;height: 540px; margin: auto;padding: 0; position:relative;}
.slogan_a{position: absolute;top: 161px;right: 420px;}
.pro_name{position: absolute;top: 242px;right: 406px;}
.feature{position: absolute;top: 296px;right: 392px;}
.slogan_b{position: absolute;top: 342px;right: 425px;}
.robot{position: absolute;top: 90px;left: 30px;}
.product{position: absolute;top: 95px;right: 171px;}
/*top END*/

/*menu BEGIN*/
.menu{
	width: 960px;
	height: 53px;
	padding: 0;
	position: absolute;
	bottom: 0;
	right: 120px;
	background: url(../images/menu_bg.png)no-repeat center center;
}
.menu a{display: block; position: absolute;width: 151px;height: 53px;}
.menu a:hover{bottom: 2px;}
/*.menu a:hover{background-position: bottom;}*/
.m01{background: url(../images/menu_01.png) no-repeat;left: 224px;}
.m02{background: url(../images/menu_02.png) no-repeat;left: 404px;}
.m03{background: url(../images/menu_03.png) no-repeat;left: 583px;}
/*menu END*/

/*report BEGIN*/
#report{
	width: 100%;
	height: auto;
	margin: 40px auto 0 auto;
	overflow: hidden;
	padding: 0;
}
.report_title{width: 476px;height: 40px;margin: auto;}
.report_block{width: 980px;height: 314px;margin: 30px auto 0 auto;position: relative;}
.report_01{width: 479px;height: 314px;position: absolute;top: 0;left: 0;}
.report_02{width: 479px;height: 314px;position: absolute;top: 0;right: 0;}
.report_01 a{
	display: block;
	width: 400px;
	height: 260px;
	background: #ffe240;
	position: absolute;
	top: 29px;
	left: 40px;
	text-decoration: none;
}
.report_02 a{
	display: block;
	width: 400px;
	height: 260px;
	background: #ffe240;
	position: absolute;
	top: 29px;
	left: 40px;
	text-decoration: none;
}
.report_text{
	width: 400px;
	height: auto;
	margin-top: 6px;
	font-family: 微軟正黑體;
    font-size: 20px;
    color: #000;
    line-height: 24px;
    text-align: center;
}
.report_bg{
	width: 479px;
	height: 314px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/re_bg.png) no-repeat;
	opacity:1;
	filter: alpha(opacity=1);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
}
.report_bg_h{
	width: 479px;
	height: 314px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/re_bg_h.png) no-repeat;
	opacity:0;
	filter: alpha(opacity=0);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.report_01:hover .report_bg{ opacity:0; filter: alpha(opacity=0);}
.report_01:hover .report_bg_h{ opacity:1; filter: alpha(opacity=100);}
.report_02:hover .report_bg{ opacity:0; filter: alpha(opacity=0);}
.report_02:hover .report_bg_h{ opacity:1; filter: alpha(opacity=100);}
/*report_block END*/


/*article BEGIN*/
#article{
	width: 1200px;
	height: 800px;
	margin: 40px auto 0 auto;
	overflow: hidden;
	padding: 0 0 10px 0;
	position: relative;
}
.article_block_title{width: 542px;height: 40px;margin: auto;}
.article_block{
	width: 960px;
	height: auto; 
	overflow: hidden;
	margin: 30px auto 0 auto;
}

.article_block ul li{
	width: 314px;
	height: 339px;
	overflow: hidden;
	position: relative;
	float: left;
	margin: auto 3px 10px 3px;
}
.article_block ul li a{
	display: block;
	width: 260px;
	height: 280px;
	background: #ffe240;
	position: absolute;
	top: 29px;
	left: 27px;
	text-decoration: none;
}
.article_text{
	width: 240px;
	height: auto;
	margin: 6px auto auto auto;
	font-family: 微軟正黑體;
    font-size: 15px;
    color: #000;
    line-height: 18px;
}
.article_bg{
	width: 314px;
	height: 339px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/article_bg.png) no-repeat;
	opacity:1;
	filter: alpha(opacity=1);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
}
.article_bg_h{
	width: 314px;
	height: 339px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/article_bg_h.png) no-repeat;
	opacity:0;
	filter: alpha(opacity=0);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.article_block ul li:hover .article_bg{ opacity:0; filter: alpha(opacity=0);}
.article_block ul li:hover .article_bg_h{ opacity:1; filter: alpha(opacity=100);}

/*article END*/
.gotop{
	display: block;
	width:50px;
	height:50px;
	position: fixed;
	bottom: 50px;
	right: 20px;
	z-index: 150;
	background:url(../images/goTop.png) no-repeat ;
}
.gotop:hover{background-position: bottom;}
#jSplash { 
    margin: auto;
    width: 171px;
    height: 30px;
    background: url(../images/schick_logo.png) no-repeat;
    }