@charset "utf-8";

@import url(common/base.css);
@import url(common/global.css);
@import url(common/layout_front.css);

/* gate */
.gate											{*zoom: 1; margin-bottom: -100px; padding: 90px 0 0 0; height: 620px; background: url(../images/gate/bg_container.jpg) left top no-repeat ;}
.gate p.description								{position:absolute;bottom:134px; font-size: 11px; color: #b9b9b9;}
.gate img										{display: block;}
.gate:after										{content: ""; display: block; clear: both; width: 0; height: 0; visibility: hidden;}
.gate nav > h1									{display: block; margin: 0; padding: 0; width: 0; height: 0; font-size: 0; line-height: 0; visibility: hidden;}
.gate nav ul									{margin: 0; padding: 0;}
.gate nav ul li									{list-style: none;}
.gate nav ul li a								{display: block;}
.gate nav ul li a img							{display: block;}
.gate nav ul li.note2							{position: absolute; top: 230px; right: 345px;}
.gate nav ul li.note101							{position: absolute; top: 130px; right: 0; padding-bottom: 230px; background: url(../images/gate/bg_note101.jpg) left bottom no-repeat;}
.gate nav ul li.note							{position: absolute; top: 450px; right: 0;}

/* intro */
.main											{position: relative; top: -60px; margin-bottom: -280px; padding: 0; height: 800px;}
.main p.description								{position:absolute; bottom: 250px; font-size: 11px; color: #b9b9b9;}
.main_footer									{position:absolute;}
.main .link										{position: absolute; right: 0; bottom: 170px; z-index:1000;}
.main .link h1									{display: block; margin: 0; padding: 0; width: 0; height: 0; font-size: 0; line-height: 0; visibility: hidden;}
.main .link ul									{zoom: 1;}
.main .link ul:after							{content: ""; display: block; clear: both; width: 0; height: 0; visibility: hidden;}
.main .link ul li								{float: left; margin-left: 25px; list-style: none;}
.main .link ul li a								{display: block;}
.main .link ul li a img							{display: block;}

/* story */
.story											{*zoom: 1;}
.story img										{display: block;}
.story > h1										{display: block; margin: 0; padding: 0; width: 0; height: 0; font-size: 0; line-height: 0; visibility: hidden;}
.story:after									{content: ""; display: block; clear: both; width: 0; height: 0; visibility: hidden;}
.story > .intro									{padding: 12px 0 40px 0;border-bottom: 1px solid #e6e6e6;}
.story > .intro > p								{font: normal 30px Segoe UI, arial, sals-serif; font-style: italic; color: #444444;}
.story > .intro > p + p							{margin-top: 20px;}
.story > section								{float: left; position: relative; padding-top: 40px;}
.story > section img							{position: absolute; bottom: 0; left: 0;}
.story > section.story_01						{padding-right: 20px; width: 455px; min-height: 470px;}
.story > section.story_02						{width: 475px; min-height: 470px;}
.story > section.story_03						{padding-right: 20px; width: 455px; min-height: 520px;}
.story > section.story_04						{width: 475px; min-height: 520px;}
.story > section > h1							{margin-bottom:10px; min-height: 35px; font: bold 24px Segoe UI, arial, sals-serif; font-style: italic; color: #1459f0;}
.story > section > p							{font-size:14px;line-height:18px; font-size:14px;}
.story > section > p + p						{margin-top: 20px;}
.story .story_02 p + p							{margin-top:10px;}

/* benefits */
.benefits > section p							{font-size:14px;line-height:18px;}
.benefits > .intro								{height: 344px; padding: 0; background: url(../images/benefits/bg_intro.jpg) right bottom no-repeat;}
.benefits > .intro > p							{padding-top: 20px; width: 200px; white-space: nowrap; display: block; font: normal 30px Segoe UI, arial, sals-serif; font-style: italic; color: #444444;}
.benefits .em.weighty							{font-size: 14px;}
.benefits > section								{position: relative; padding-top: 35px; border-top: 1px solid #e6e6e6;}
.benefits > section > h1						{margin-bottom:10px;font: bold 24px Segoe UI, arial, sals-serif; font-style: italic; color: #1459f0;}
.benefits section .sub_tit						{line-height:20px;margin-bottom:6px;}
.benefits > section > img						{display: block;  margin: 0 auto;}
.benefits > section > section > img				{display: block;  margin: 0 auto;}
.benefits > section + section					{margin-top: 20px;}
.benefits > section > section > h1				{margin-bottom: 5px; font: bold 18px Segoe UI, arial, sals-serif; font-style: italic; color: #1459f0;}
.benefits .ui-tabs section						{position: relative; overflow: hidden;}
.benefits .ui-tabs section p					{height: 50px; color:#555555;}
.benefits .ui-tabs section h1					{display: block; margin: 0; padding: 0; width: 0; height: 0; font-size: 0; line-height: 0; visibility: hidden;}
.benefits .ui-tabs .tabs.medium					{margin: 20px 0;}
.benefits .ui-tabs section > img				{display: block; margin: 0 auto;}
.benefits .ui-tabs section .prev				{display: block; position: absolute; bottom: 180px; left: 20px; background-color: transparent; cursor: pointer;}
.benefits .ui-tabs section .next				{display: block; position: absolute; bottom: 180px; right: 20px; background-color: transparent; cursor: pointer;}
.benefits .ui-tabs section a img				{display: block;}
.benefits .ui-tabs section .prev2				{display: block; position: absolute; bottom: 180px; left: 20px; background-color: transparent; cursor: pointer;}
.benefits .ui-tabs section .next2				{display: block; position: absolute; bottom: 180px; right: 20px; background-color: transparent; cursor: pointer;}
.benefits .ui-tabs section a img				{display: block;}
.benefits .ui-tabs .ui-tabs-panel 				{display: block;}
.benefits .ui-tabs .ui-tabs-panel.ui-tabs-hide	{display: none !important;}

/* spec */
.spec											{*zoom: 1;}
.spec:after										{content: ""; display: block; clear: both; width: 0; height: 0; visibility: hidden;}
.spec > .wrap									{float: left; margin-top: 20px; width: 310px; min-height: 100px;}
.spec > .wrap + .wrap							{margin-left: 20px; padding-left: 19px; width: 280px; border-left: 1px solid #e6e6e6;}
.spec > .wrap > section > h1					{position: relative; margin-bottom: 6px; font: bold 1em Segoe UI, arial, sals-serif; font-style: italic; color: #000000;}
.spec > .wrap > section + section				{margin-top: 20px;}
.spec > .wrap > section img						{display: block; margin-top: 10px}
.spec > .wrap > section .list.small				{position: relative;}
.spec > .wrap > section.os img,
.spec > .wrap > section.s-pen img				{margin-top: -40px;}
.spec p.em.slightly								{float: left; width: 100%; margin-top: 0px; font-size: .75em; text-align: right;}

/* images */
.images > h1									{position: absolute; left: 0; top: 0;}
.images .visual									{width: 100%; border-bottom: 1px solid #e6e6e6;}
.images .visual img								{display: block; margin : 0 auto;}
.images > section								{margin-top: 40px;}
.images > section > h1							{margin-bottom: 12px; font: bold 18px Segoe UI, arial, sals-serif; font-style: italic; color: #1459f0;}
.images .image-list								{position: relative;}
.images .image-list .wrap						{position: relative; width: 739px; overflow: hidden; margin: 0 auto;}
.images .image-list .wrap ul					{width: 2000em; position: relative;}
.images .image-list .wrap ul li a				{float: left; position: relative;}
.images .image-list .wrap ul li a span			{display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2);}
.images .image-list .wrap ul li.active a span	{background: none;}
.images .image-list > .direction				{position: static;}
.images .image-list > .direction button			{position: absolute; top: 80px; margin-top: -35px; display: block; background-color: transparent; cursor: pointer;}
.images .image-list > .direction button.prev	{left: 20px;}
.images .image-list > .direction button.next	{right: 20px;}
.images .image-list > .direction button img		{display: block;}

/* videos */
.videos > section								{padding-left: 48px;}
.videos .vod									{margin: 0 auto; width: 854px;}
.videos .vod img								{display: block;}
.videos .share-vod								{position: relative; margin-top: 20px; *zoom: 1; border-bottom: 1px solid #e6e6e6; *zoom: 1;}
.videos .share-vod:after						{content: ""; display: block; clear: both; width: 0; height: 0; visibility: hidden;}
.videos .share-vod h1							{position: absolute; right: 205px; top: 12px;}
.videos .share-vod h1 img						{display: block;}
.videos .share-vod ul							{float: right; position: relative; top: 1px; margin: 0; padding: 0 48px 0 0; background: url(../images/videos/bg_share_vide.png) right bottom no-repeat; *zoom: 1;}
.videos .share-vod ul:after						{content: ""; display: block; clear: both; width: 0; height: 0; visibility: hidden;}
.videos .share-vod ul li						{float: left; list-style: none; margin-left: 8px;}
.videos .share-vod ul li a						{display: block; *float: left;}
.videos .share-vod ul li a img					{display: block;}
.videos .video-list								{display: none;}