@charset "utf-8";

/*====================================================================

top-en.css

====================================================================*/
#wrapper{
	
	
}



/*--------------------------------------------------------------------
01.head
--------------------------------------------------------------------*/




/*--------------------------------------------------------------------
02.contents
--------------------------------------------------------------------*/

#main {
	padding:0;
	margin-right:14px;
   	width: 636px;
   	height: 100%;
   	float:left;	
	
}


#sidebar {
	margin:0;
	padding:0;
   	width: 300px;
   	height: 100%;
   	float:left;	
	
}



/* ----- Common Content Blocks -----*/


/* ---- Main Blocks ----*/

.main-block {
	display:block;
   width: 636px;
	margin: 0 0 10px 0;
	padding: 0;
	background: url(../img/top/main-block-bg.gif) repeat-y left;
	border-bottom: solid 1px #e4e7eb;
}

.main-block-head {
	
	background: #fff url(../img/top/main-block-title.gif) no-repeat;
	height: 36px; 
	padding-top:0;
	font-size: 11px;
}
	
.main-block-head h3 {
	
	padding:4px 13px 0 18px;
	font-weight:900;
	float:left;
	color:#2b4bb1;
	width:auto;
	
}

	
.main-block-head h4 {
	
	padding:0;
	padding-top:10px;
	float:left;
	width:auto;
	
}
	
.main-block-head a {

	display: block;
	float: right;
	padding: 10px 15px 10px 20px;
	background:url(../img/top/main-spritemap.png) no-repeat -605px 10px;
	width:auto;
}

.main-block-head a:hover {

	background:url(../img/top/main-spritemap.png) no-repeat -605px -26px;
}


.main-block-content { 
	
	margin: 0px;
	padding-left:5px;
	padding-top:5px;
	background: url(../img/top/main-block-bg-top.gif) no-repeat top;
	width:auto;
	
}


/* -- Main > Sub Blocks --*/


.sub-block {
	
	float:left;
	margin:0;
	padding:0;
	width:auto;
	
}

.sub-block-content {
	float:left;
	padding:10px 6.5px 12px 14px;
	width:282px;
}

.sub-block h2 {
	margin: 10px 0;
	
}


/* ---- Sidebar Blocks ----*/

.sidebar-block {

	margin: 0 0 5px 0;	
	width:300px;
}

.sidebar-block-head h3 {
	height:26px;
	display:block;
	padding:8.5px 0 0 36px;
	font-size:12px;
	color:#646464;	
	}

.sidebar-block a:hover {
   display:block;
   background: #fff;
   opacity:0.3;
   filter: alpha(opacity=30);
}

/* ----- Specific Content Blocks -----*/

#guidebtn{
   width: 300px;
   background: url(../img/top/guide_btn_border.gif) repeat-x left top;
   margin-bottom: 5px;
   overflow: hidden;
}
#guidebtn ul,
#guidebtn ul li,
#guidebtn ul li a{
   display: block;
   width: 300px;
}
#guidebtn ul{
   padding-bottom: 6px;
   background: url(../img/top/guide_btn_border.gif) repeat-x left bottom;
}
#guidebtn ul:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}
#guidebtn ul li,
#guidebtn ul li a{
   height: 60px;
}
#guidebtn ul li{
   margin-top: 6px;
}

#guidebtn ul li a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
}
#guidebtn ul li a:hover{
   background: #fff;
   opacity:0.2;
   filter: alpha(opacity=20);
}
#guidebtn ul li#gb1{
   background: url(../img/top/guide_btn_bg.gif) no-repeat left -6px;
}
#guidebtn ul li#gb2{
   background: url(../img/top/guide_btn_add.gif) no-repeat left top;
}

/* ---- Specific Main Blocks ----*/

/* --- 1.Flash ---*/

#flash{
	
    width: 635px;
   	text-align: left;
  	margin:0;
   	padding:0;
   	
}

#flash div{
	
	background:url(../img/top/top-flash-bg.jpg) no-repeat left top;
   	width: 635px;
   	height: 300px;
   
}


/* --- 2.News ---*/	

#news { 
	position: relative;
	height:auto;		
}
		
#news a {
	
	text-decoration:none;	
}

/* -- News Btn --*/
#news_btn,
#news_btn a{
   width: 81px;
   height: 16px;
}
#news_btn{
   position: absolute;
   left: 545px;
   top: 10px;
   background: url(../img/top/news_btn.gif) no-repeat;
}
#news_btn a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
}
#news_btn a:hover{
   background: #fff;
   opacity:0.2;
   filter: alpha(opacity=20);
}


/* -- News List --*/

dl.news {
	margin-top:10px;
	padding-bottom:10px;
	
	}

dt.news-header {
	
	float:left;
	display:inline;
	color:#7c7c7c;
	padding:5px 35px 5px 20px;
	width:auto;
	
	}

dd.news-content {
	
	padding:5px 20px;
	border-bottom:0.5px solid  #ececec;
	
	
	}
	


/* --- 3.Shopping ---*/	
	
#shopping { 
}
#shopping:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}
		
#shopping div.main-block-head{
   height: 36px;
}
#shopping div.main-block-content{
   margin-top: 0;
   padding: 0;
}


/* -- Shopping List --*/

ul.shopping {
	margin-top:15px;
	width:auto;
	text-align: left;
	}

li.shopping-entry{
	
	margin: 0px;
	width: 123px;
	float:left;
	text-align: center;
   padding-bottom: 15px;
	}
	

li.shopping-entry a:hover img{
	
	border: 1px solid #b6d2ee;
		
	}

li.shopping-entry img{

	}
	
li.shopping-entry span img{
	
	border: none;
		
	}


li.shopping-entry strong{
	margin:5px 0;
	display:block;
	font-size:12px;
	font-weight: normal;
	line-height: 115%;
		
	}
li.shopping-entry span{
   display: block;
   line-height: 1.1;
   font-size: 10px;
   color: #777;
}
li#info{
   display: block;
   float: left;
   text-align: center;
   padding: 35px 18px 0;
}

#shopping-mbtiself{
   clear: left;
}


/* --- 4. Information ---*/
	
#information {  
	width:100%;
	overflow:hidden;
	padding:0px 0;
	background: url(../img/top/information_bg.gif) repeat-y top;
	font-size:11px;
   border-top: solid 1px #e3e3e3;
   border-bottom: solid 1px #e3e3e3;
	}
#infobg1{
   padding-top: 9px;
   background: url(../img/top/information_bg2.gif) no-repeat top;
}
#infobg2{
   zoom: 1;
   padding-bottom: 9px;
   background: url(../img/top/information_bg3.gif) no-repeat bottom;
}
#infobg2:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}

.sub-block{
   
}

/* -- JPP Information --*/


#jpp-information-container {
	
	height:100%;
	margin: auto 10px;	
	width:302px
}

#jpp-information {
	
	float:left;
	width:auto;
	
}

#jpp-information h2 {
	height:58px;
	background:url(../img/top/info_title1.gif) no-repeat left;
	text-indent: -9999px;
}

/* -- mbti Information --*/

#mbti-information-container {
	
	height:100%;
	float:left;	
	width:302px
	
}

#mbti-information {
	
	float:left;
	width:auto;
}


#mbti-information h2{
	height:58px;
	background:url(../img/top/info_title2.gif) no-repeat left;
	text-indent: -9999px;
}


/* ---- Side Content Blocks ----*/


/* --- 1. Banner ---*/

#sidebar-1 {
 
 	padding:0;
 	height:100px;
 	background:url(../img/top/login_01.gif) no-repeat;	
	
}
	
/* --- 2. Banner ---*/

#sidebar-2 {
 
 	padding:0;
 	height:100px;
 	background:url(../img/top/login_02.gif) no-repeat;
	
}

#sidebar-3 {
 	padding:0;
 	height:40px;
 	background:url(../img/top/side_btn.gif) no-repeat;
	
}

/* --- 3. Contents Menu ---*/

#sidemenu {
	
	background:#eff4f8 url(../img/top/side-spritemap.jpg) no-repeat 0px -266px;
	height:180px;
	
}
	
#sidemenu-content {
	padding-top:8px;
	
}
	

li.sidemenu-entry {
	margin-left:6px;
	height: 54px;
	width: 288px;
	
}

li.sidemenu-entry a {
	
	height: 54px;
	width: 284px;
	
}



/* ---- 4. Links ----*/
	
#links{
	width: 300px;
	background: url(../img/top/link_bg.gif) repeat-y left top;
	border-bottom: solid 1px #dbe3e9;
	padding-bottom: 7px;
}
#links h3{
   height: 35px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../img/top/link_title.gif) no-repeat;
}
#links ul{
   display: block;
   width: 284px;
   margin: 7px 0 0 8px;
   padding: 0;
}
#links ul li{
   display: block;
   margin: 1px;
   padding: 0;
}
#links ul li img{
   display: block;
   margin: 0;
}
#links ul li span{
   display: block;
   color: #053b38;
   font-size: 12px;
   text-indent: 4px;
   padding-bottom: 5px;
}

	
#links-content {
	padding-top:5px;

}
	

li.links-entry {
	margin-left:6px;
	height: 54px;
	width: 288px;
	
}

li.links-entry a {
	
	height: 54px;
	width: 284px;
	
}
	
#links-mbti{
	background:#eff4f8 url(../img/top/side-spritemap.jpg) no-repeat -6px -41px;			
}

#links-apt{
	background:#eff4f8 url(../img/top/side-spritemap.jpg) no-repeat -6px -96px;				
}

#links-pds{
	background:#eff4f8 url(../img/top/side-spritemap.jpg) no-repeat -6px -150px;		
}

#links-cpp{
	background:#eff4f8 url(../img/top/side-spritemap.jpg) no-repeat -6px -204px;			
}



/* ---- 5. Copyright Information ----*/

#copyright {
	
padding: 6px 6px 6px 6px;
margin:0;
	
}

#copyright p{
	
	margin:5px 0;
	color:#2b5286;
	font-size:9px;
	line-height: 115%;
		
	}