@import url("reset.css");

body{ background:#eeeeee; position: relative;}

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

/*top BEGIN*/
#top{
	width: 100%; 
	height: 540px; 
	background:url(../images/visual_bg.jpg) center center no-repeat; 
	margin: auto;position: relative;
	border-bottom: 5px solid #5c4f46;
}
.logo_block{
	width: 100%;
	height: 64px; 
	margin: 0 auto auto 0;
	padding: 0;
	position: absolute;
	z-index: 100;
	background: url(../images/logo_block_bg.png) repeat-x;
}
.cuckoo_logo {width: 263px;height: 32px; display: block;position: absolute;top: 14px;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: 1000px;height: 540px; margin: auto;padding: 0; position:relative;}
.kim{position: absolute;bottom: 0px;left: 44px;}
.kim_name{position: absolute;top: 100px;left: 265px;}
.slogan01{position: absolute;top: 101px;right: 99px;}
.slogan02{position: absolute;top: 169px;right: 118px;}
.light{position: absolute;top: 47px;right: -6px;}
.pot_01{position: absolute;bottom: 0px;right: 349px;}
.pot_02{position: absolute;bottom: 0px;right: 71px;}
.model01{position: absolute;bottom: 13px;right: 299px;}
.model02{position: absolute;bottom: 13px;right: 22px;}
.brown_line{width: 100%;height: 2px;margin-top: 3px;background: #5c4f46;}
/*top END*/

/*menu BEGIN*/
.menu{width: 960px;height: 40px;padding:0 20px 0 20px;margin: 30px auto 0 auto;}
.menu a{float: left;}
.menu a:hover{background-position: bottom;}
.m01{width: 168px;height: 40px;background: url(../images/menu01.png) no-repeat;}
.m02{width: 237px;height: 40px;background: url(../images/menu02.png) no-repeat;}
.m03{width: 226px;height: 40px;background: url(../images/menu03.png) no-repeat;}
.m04{width: 277px;height: 40px;background: url(../images/menu04.png) no-repeat;}
.m02, .m03, .m04{margin-left: 17px;}
/*menu END*/

/*report_block BEGIN*/
.report_block{width: 960px;height: 340px;margin: 30px auto 0 auto;position: relative;}
.report_block a{
	width: 100%;
	height: 100%;
	position: relative; 
	display: block;
}
.report_01{
	width: 528px;
	height: 340px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/report_01.png) no-repeat;
}
.report_01_h{
	width: 495px;
	height: 230px;
	position: absolute;
	top: 0;
	left: 0;
	/*background: url(../images/report_01_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_01_h{ opacity:1; filter: alpha(opacity=100);}
.report_02{
	width: 528px;
	height: 340px;
	position: absolute;
	top: 0;
	right: 0;
	background: url(../images/report_02.png) no-repeat;
}
.report_02_h{
	width: 495px;
	height: 230px;
	position: absolute;
	bottom: 0;
	right: 0;
	background: url(../images/report_02_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_02:hover .report_02_h{ opacity:1; filter: alpha(opacity=100);}
/*report_block END*/


/*article BEGIN*/
#article{
	width: 100%;
	height: auto;
	margin: 30px auto 0 auto;
	overflow: hidden;
	padding: 0 0 10px 0;
	background:url(../images/article_bg.jpg) top center no-repeat ;
}
.article_block_title{width: 569px;height: 45px;margin: 30px auto 0 auto;}
.w_line_a{
	width: 960px;
	height: 6px;
	margin: 20px auto 0 auto;
	background: #fff;
	-moz-box-shadow: 0px 0px 2px #483e37;
	-webkit-box-shadow: 0px 0px 2px #483e37;
	box-shadow: 0px 0px 2px #483e37;
}
.w_line_b{
	width: 960px;
	height: 2px;
	margin: 10px auto 0 auto;
	background: #fff;
	-moz-box-shadow: 0px 0px 2px #483e37;
	-webkit-box-shadow: 0px 0px 2px #483e37;
	box-shadow: 0px 0px 2px #483e37;
}
.article_block{
	width: 960px;
	height: auto; 
	overflow: hidden;
	margin: 10px auto 0 auto;
	-moz-box-shadow: 0px 0px 2px #483e37;
	-webkit-box-shadow: 0px 0px 2px #483e37;
	box-shadow: 0px 0px 2px #483e37;
}

.article_block ul li{overflow: hidden;position: relative;float: left;border: solid 1px #fff;}
.article_a{width: 478px;height: 248px;background: url(../images/article_img01.jpg) no-repeat;}
.article_b{width: 478px;height: 248px;background: url(../images/article_img02.jpg) no-repeat;}
.article_c{width: 478px;height: 248px;background: url(../images/article_img03.jpg) no-repeat;}
.article_d{width: 478px;height: 248px;background: url(../images/article_img04.jpg) no-repeat;}
.article_m_h{
	width: 100%;
	height: 100%;
	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_m_h{ opacity:1; filter: alpha(opacity=100);}

.gotop{
	display: block;
	width:54px;
	height:54px;
	margin: 10px auto 0 auto;
	background:url(../images/goTop.png) no-repeat ;
}
.gotop:hover{background-position: bottom;}
/*article END*/

/*FOOTER BEGIN*/
#footer{height: 22px;width: 100%;background: url(../images/footer_bg.png) repeat-x;padding: 10px 0 0 0;}
.copyright {width: 1000px;height: 16px;margin: auto;overflow: hidden;font-family: "微軟正黑體"; font-size: 14px; color: #5c4f46;text-align: center;}
/*FOOTER END*/
#jSplash { 
    margin: auto;
    width: 264px;
    height: 32px;
    background: url(../images/cuckoo_logo.png) no-repeat;
    }