@charset 'utf-8';

.vaio-adobe {
	padding-bottom: 90px;
	min-width: 960px;
}
.vaio-adobe img {
	vertical-align: top;
}

/* MAIN */
.main {
	float: none;
	margin: 0;
	width: 100%;
	background: #000 url(../images/main_visual.jpg) 50% 0 no-repeat;
	color: #fff;
}
.main .inner {
	position: relative;
	margin: 0 auto;
	width: 960px; height: 316px;
}
.main h2 {
	position: absolute;
	top: 64px; left: 30px;
}
.main p {
	position: absolute;
	top: 208px; left: 30px;
}

/* NEWS */
.news:after {
	content: "."; display: block; clear: both; visibility: hidden; height: 0;
}
.news {
	margin: 0 auto;
	padding: 110px 0 80px 0;
	width: 960px;
	zoom: 1;
}
.news .list {
	float: left;
	padding-bottom: 20px;
	width: 600px;
	border-bottom: 2px solid #ccc;
}
.news .list h3 {
	height: 38px;
	border-bottom: 2px solid #ccc;
}
.news .list .frame {
	overflow: auto;
	margin-top: 20px;
	width: 590px; height: 168px;
	font-size: 14px;
	line-height: 20px;
}
.news .list .frame dl {
	position: relative;
	width: 570px;
	padding-bottom: 16px;
}
.news .list .frame dl dt {
	position: absolute;
	top: 0; left: 0;
}
.news .list .frame dl dd {
	position: relative;
	padding-left: 100px;
}
.news .banner {
	float: right;
	width: 300px;
}

/* PLANS */
.plans {
	padding: 72px 0;
	background: #f2f3f8;
	color: #4c5167;
}
.plans .inner:after {
	content: "."; display: block; clear: both; visibility: hidden; height: 0;
}
.plans .inner {
	margin: 0 auto;
	width: 960px;
	zoom: 1;
}
.plans h3, .plans p, .plans a {
	display: block;
	margin: 0 auto;
	width: 100%; 
}
.plans ul:after {
	content: "."; display: block; clear: both; visibility: hidden; height: 0;
}
.plans ul {
	margin: 0 auto;
	zoom: 1;
}
.plans .personal,
.plans .business {
	padding: 22px;
	border: 1px solid #4d5269;
	background: #fff;
	width: 475px;
	box-sizing: border-box;
	float: left;
}
.plans .personal {
}
.plans .personal h3,
.plans .business h3{
font-size: 18px;
font-weight: bold;
}
.plans .personal p,
.plans .business p {
	margin-bottom: 20px;
	height: 4em;
}

.plans .business {
	float: right;
}
.plans .business h3 {
}
.complete {
	border-top:1px solid #4c5167;
	padding: 10px 0 0 0 ;
	position: relative;
}
.complete a{
	content: "";
	display: block;
	background-color: rgba(255,255,255,0);
	z-index: 2;
	width:429px;
	height: 33px;
	position: absolute;
	top:0;
	left: 0;
}
.plans a:hover {
	background-color: rgba(255,255,255,0.6);
}
.icon-arrow-right{
	position: absolute;
	top:12px;
	right: 0;
	height: 18px;
}
/* INFO */
.info {
	overflow: hidden;
	margin: 0 auto;
	padding-top: 80px;
	width: 960px;
}
.info ul:after {
	content: "."; display: block; clear: both; visibility: hidden; height: 0;
}
.info ul {
	width: 990px;
	zoom: 1;
}
.info ul li {
	float: left;
	width: 330px;
}
.info ul li a {
	overflow: hidden;
	display: block;
	padding-top: 180px;
	width: 300px; height: 0;
	background-image: url(../images/link_info.png);
	background-repeat: no-repeat;
}
.info ul li a.tutorial { background-position: 0px 0px; }
.info ul li a.tutorial:hover { background-position: 0px -180px; }
.info ul li a.blog { background-position: -300px 0px; }
.info ul li a.blog:hover { background-position: -300px -180px; }
.info ul li a.support { background-position: -600px 0px; }
.info ul li a.support:hover { background-position: -600px -180px; }


/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */
.jspContainer {
	overflow: hidden;
	position: relative;
}
.jspPane {
	position: absolute;
}
.jspVerticalBar {
	position: absolute;
	top: 0; right: 0;
	width: 10px; height: 100%;
}
.jspCap {
	display: none;
}
.jspTrack {
	position: relative;
	background: #fff url(../images/jsp_track.png) 50% 0 repeat-y;
}
.jspDrag {
	background: #ccc;
	position: relative;
	top: 0; left: 0;
	cursor: pointer;
}