@charset "utf-8";

/*--------------------
*common
--------------------*/

#contents li,
#contents a{
	display:block;
}

.btnm,
.btns > div{
	overflow:hidden;
	position:relative;
}
.btnm img,
.btns > div > img{
	position:absolute;
}
.btnm:hover img,
.btns:hover > div > img{
	bottom:0;
}

/*--------------------
*structure
--------------------*/

#contents,
#background > img{
	min-height:588px;
}

#contents > *{
	position:absolute;
	top:80px;
	bottom:0;
	width:100%;
	margin:auto;
}

#contents > .top{
	top:0;
}
#contents > .top,
#contents > .guidance,
#contents > .experience,
#contents > .driving,
#contents > .movie,
#contents > .select{
	height:400px;
}
#contents > .movie{
	height:460px;
}

#contents > .palette3,
#contents > .palette6,
#contents > .finish3,
#contents > .finish6{
	top:0;
	margin:0;
	background-color:#000;
}
#contents > .palette3 > .box,
#contents > .palette6 > .box,
#contents > .finish3 > .box,
#contents > .finish6 > .box{
	position:absolute;
	top:160px;
	bottom:0;
	width:100%;
	height:568px;
	margin:auto;
}

/*--------------------
#contents > .top,
#contents > .guidance,
#contents > .experience,
#contents > .driving
--------------------*/

#contents > .top h3,
#contents > .guidance h3,
#contents > .experience h3,
#contents > .driving h3{
	width:700px;
	margin:20px auto 40px;
}

#contents > .top ul,
#contents > .experience ul{
	width:540px;
	margin:auto;
}
#contents > .guidance ul,
#contents > .driving ul{
	width:810px;
	margin:auto;
	font-size:0;
}

#contents > .top li+li{
	margin-top:10px;
}
#contents > .experience li+li{
	margin-top:20px;
}
#contents > .guidance li,
#contents > .driving li{
	display:inline-block;
}
#contents > .guidance li+li,
#contents > .driving li+li{
	margin-left:30px;
}
#contents > .guidance li a > img,
#contents > .driving li a > img{
	width:248px;
	border:1px solid #666;
}

#contents > .top .btnm{
	height:75px;
}
#contents > .guidance .btns > div,
#contents > .driving .btns > div{
	height:16px;
	margin-top:8px;
}
#contents > .experience .btnm{
	height:50px;
}

/*--------------------
#contents > .movie
--------------------*/

#contents > .movie > h4.ttl{
	position:absolute;
	top:20px;
}
#contents > .movie > h3.ttl{
	z-index:1;
	width:600px;
	margin:0 auto;
}

#contents > .movie #playbox{
	z-index:1;
	position:absolute;
	top:64px;
	left:0;
	right:0;
	width:600px;
	height:336px;
	margin:auto;
	border:solid 1px #666;
}
#contents > .movie #player{
	position: absolute;
	width: 100% !important;
	height: 100% !important;
}

#contents > .movie > .cap{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	width:600px;
	margin:auto;
	font-size:12px;
	line-height:20px;
	color:#fff;
}
#contents > .movie > .btnm{
	position:absolute;
	width:160px;
	height:50px;
}
#contents > .movie > .lnk1{
	bottom:60px;
	left:60px;
}
#contents > .movie > .lnk2{
	bottom:0;
	left:60px;
}
#contents > .movie > .lnk3{
	bottom:60px;
	right:60px;
}
#contents > .movie > .lnk4{
	bottom:0;
	right:60px;
}

/*--------------------
#contents > .select
--------------------*/

#contents > .select > h4.ttl{
	position:absolute;
	top:0;
}
#contents > .select > h3.ttl{
	z-index:1;
	width:714px;
	margin:20px auto 0;
}
#contents > .select > .cap{
	width:712px;
	height:38px;
	margin:20px auto 0;
	font-size:13px;
	line-height:38px;
	text-align:center;
	color:#fff;
	background:url("../IMG/bg_blk.png") repeat;
	border:1px solid #666;
}

#contents > .select > ul{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	width:714px;
	margin:auto;
}
#contents > .select .thm{
	position:absolute;
	bottom:60px;
}
#contents > .select .thm > img{
	width:318px;
	border:1px solid #666;
}
#contents > .select .thm.rt{
	right:0;
}
#contents > .select .btnm{
	position:absolute;
	bottom:0;
	width:320px;
	height:50px;
}
#contents > .select .btnm.rt{
	right:0;
}

/*--------------------
#contents > .palette3,
#contents > .palette6,
#contents > .finish3,
#contents > .finish6
--------------------*/

#contents > .palette3 > .box > *,
#contents > .palette6 > .box > *,
#contents > .finish3 > .box > *,
#contents > .finish6 > .box > *{
	position:absolute;
}

#contents > .palette3 .plt,
#contents > .palette6 .plt,
#contents > .finish3 .plt,
#contents > .finish6 .plt{
	left:0;
	right:0;
	width:1100px;
	margin:auto;
	background:url("../IMG/bg_plt.jpg") no-repeat top left;
}
#contents > .palette3 .plt ul,
#contents > .palette6 .plt ul,
#contents > .finish3 .plt ul,
#contents > .finish6 .plt ul{
	z-index:1;
	position:absolute;
	top:148px;
	left:0;
	right:0;
	width:570px;
	height:268px;
	margin:auto;
}
#contents > .palette3 .meter,
#contents > .palette6 .meter,
#contents > .finish3 .meter,
#contents > .finish6 .meter{
	position:absolute;
}
#contents > .palette3 .meter.l,
#contents > .finish3 .meter.l{
	width:378px;
	height:268px;
}
#contents > .palette3 .meter.s,
#contents > .palette6 .meter.s,
#contents > .finish3 .meter.s,
#contents > .finish6 .meter.s{
	width:188px;
	height:130px;
}
#contents > .palette3 .meter img,
#contents > .palette6 .meter img,
#contents > .finish3 .meter img,
#contents > .finish6 .meter img{
	z-index:-1 \9; /*IE fix*/
	position:absolute \9; /*IE fix*/
	width:100%;
}
#contents > .palette3 .meter:after,
#contents > .palette6 .meter:after{
	content:"";
	position:absolute;
	display:block;
	top:0;
	width:100%;
	height:100%;
}
#contents > .palette3 .meter.l:after{
	background:url("../IMG/icn_plt_mkl-pc.png") no-repeat top left;
}
#contents > .palette3 .meter.s:after,
#contents > .palette6 .meter.s:after{
	background:url("../IMG/icn_plt_mks-pc.png") no-repeat top left;
}
#contents > .palette3 .meter:hover:after,
#contents > .palette6 .meter:hover:after{
	content:" "; /*IE fix*/
}
#contents > .palette3 .m2,
#contents > .finish3 .m2{
	right:0;
}
#contents > .palette3 .m3,
#contents > .finish3 .m3{
	bottom:0;
	right:0;
}
#contents > .palette6 .m2,
#contents > .palette6 .m5,
#contents > .finish6 .m2,
#contents > .finish6 .m5{
	left:191px;
}
#contents > .palette6 .m3,
#contents > .palette6 .m6,
#contents > .finish6 .m3,
#contents > .finish6 .m6{
	right:0;
}
#contents > .palette6 .m4,
#contents > .palette6 .m5,
#contents > .palette6 .m6,
#contents > .finish6 .m4,
#contents > .finish6 .m5,
#contents > .finish6 .m6{
	bottom:0;
}

#contents > .palette3 h3.ttl,
#contents > .palette6 h3.ttl{
	top:28px;
	left:0;
	right:0;
	width:500px;
	margin:auto;
}
#contents > .palette3 h4.ttl,
#contents > .palette6 h4.ttl,
#contents > .finish3 h3.ttl,
#contents > .finish6 h3.ttl{
	top:80px;
}
#contents > .palette3 .hdl,
#contents > .palette6 .hdl{
	top:60px;
	left:0;
	right:0;
	width:1100px;
	margin:auto;
	font-size:13px;
	line-height:13px;
	text-align:center;
	color:#fff;
}
#contents > .palette3 .cap,
#contents > .palette6 .cap,
#contents > .finish3 .cap,
#contents > .finish6 .cap{
	bottom:50px;
	left:0;
	right:0;
	width:558px;
	padding:10px 20px;
	margin:auto;
	font-size:12px;
	line-height:18px;
	color:#fff;
	border:1px solid #666;
	background-color:#000;
}

#contents > .palette3 .btnm,
#contents > .palette6 .btnm{
	right:60px;
	width:160px;
	height:40px;
}
#contents > .palette3 .btnm.lnk1,
#contents > .palette6 .btnm.lnk1{
	left:60px;
	bottom:50px;
	height:50px;
}
#contents > .palette3 .btnm.slt,
#contents > .palette6 .btnm.slt{
	bottom:105px;
}
#contents > .palette3 .btnm.go,
#contents > .palette6 .btnm.go{
	bottom:50px;
}

#contents > .finish3 .btnm,
#contents > .finish6 .btnm{
	right:60px;
	width:160px;
	height:50px;
}
#contents > .finish3 .lnk1,
#contents > .finish6 .lnk1{
	bottom:110px;
}
#contents > .finish3 .lnk2,
#contents > .finish6 .lnk2{
	bottom:50px;
}

/*--------------------
#modal
--------------------*/

#modal > .btn{
	position:absolute;
	top:24px;
	right:24px;
}

#modal > .select{
	width:940px;
	margin:40px auto;
	text-align:center;
}
#modal > .select > *{
	display:inline-block;
	font-size:14px;
	vertical-align:middle;
}
#modal > .select p{
	margin-left:20px;
	color:#fff;
}
#modal > .select li{
	display:none;
}
#modal > .select li.active{
	display:block;
}
#modal > .select img{
	width:100px;
}

#modal > .meters{
	position:absolute;
	overflow-y:auto;
	top:130px;
	bottom:0;
	left:0;
	right:0;
}
#modal > .meters ul{
	width:980px;
	margin:0 auto 40px;
	font-size:0;
	line-height:0;
}
#modal .meter{
	display:inline-block;
	position:relative;
	width:300px;
	height:112px;
	margin:0 0 -1px 20px;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
}
#modal .meter > *{
	display:inline-block;
	vertical-align:top;
}
#modal .meter img{
	width:120px;
	height:85px;
	margin:12px 12px 0 8px;
	border:1px solid #666;
}
#modal .meter dl{
	margin-top:12px;
	font-weight:bold;
	color:#fff;
}
#modal .meter dt{
	font-size:12px;
	line-height:1.5em;
}
#modal .meter dd{
	margin-top:6px;
	font-size:16px;
	line-height:1.5em;
}
#modal .meter.active img{
	border-color:#c71444;
}
#modal .meter.active dl{
	color:#c71444;
}
#modal .meter.disable > *{
	opacity:0.3;
	filter:alpha(opacity=30)\9;
	-ms-filter:"alpha(opacity=30)"\9;
}

/*--------------------
#tablet (tablet hover fix)
--------------------*/

#tablet .btnm:hover img,
#tablet .btns:hover > div > img{
	bottom:auto;
}