@CHARSET "UTF-8";


.banner-wrapper {position: relative; float:left; clear:both; width:100%; margin-top:36px;height:362px;
								border-radius:4px; border: 1px solid rgba(0,168,255,0.2);
								  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,170,255,0.6);
								  -moz-box-shadow: 0px 0px 5px 0px rgba(0,170,255,0.6);
								  box-shadow: 0px 0px 5px 0px rgba(0,170,255,0.6);}
	.banner-wrapper > div {position:absolute; width:100%; height:100%; background-position: 50% 50%; background-repeat:no-repeat;border-radius:4px; cursor:pointer;}
	.fadeIn {visibility: visible; opacity:1; transition: visibility 0s, opacity 1s; position:absolute; width:100%; height:100%; background-position: 50% 50%; background-repeat:no-repeat;border-radius:4px;}
	.fadeOut {visibility: hidden; opacity:0; transition: visibility 0s, opacity 1s; position:absolute; width:100%; height:100%; background-position: 50% 50%; background-repeat:no-repeat;border-radius:4px;}
	.bannerController {position:absolute; height:27px; bottom:10px; right:10px;}
		.bannerController > div {cursor:pointer;}
		.bannerControllerItemSelected {float:left; width:45px; height:27px; background-image:url("/img2/main/indi_on.png");}
		.bannerControllerItem {float:left; width:45px; height:27px; background-image:url("/img2/main/indi_off.png");}
		.bannerControllerItemSelected:hover, .bannerControllerItem:hover {background-image:url("/img2/main/indi_on.png"); }
		.bannerControllerPlay {float:left; width:15px; height:27px; background-image:url("/img2/main/indi_play.png"); background-repeat:no-repeat; background-position:center;}
		.bannerControllerPause {float:left; width:15px; height:27px; background-image:url("/img2/main/indi_pause.png"); background-repeat:no-repeat; background-position:center;}

.sideBar {position: relative;/* float:right*/; clear:none; width: 251px; margin-right:1.875%; padding-top:0;}
	.sideBarItem {position: relative; clear:both; margin-bottom:36px;width:251px}
		.steamWrapper {margin-top:60px;}
			.steamWrapper > img {margin-bottom:15px;}
			.steamLabel {position: relative; clear:both; color:#fff; font-family:quattrocento; font-weight:bold; font-size:24px; line-height: 36px;}

.content {position: relative; float:right; width: 100%; max-width:737px; min-height:717px;}
	.newsList {width:100%; height:717px; }
		.newsTitle {margin:24px;}
			.newsTitle > span {display:inline-block; font-weight:bold; font-size:19px; margin-right: 36px;}
			.newsTitle > a {color:#1a8fff; font-family:arial; font-size:14px;}
		.newsListItem {clear:both; width:100%; height:140px;overflow: hidden; color:#fff; padding:8px 24px;box-sizing:border-box; margin-bottom:9px;}
			.newsListThumbnail {float:left; width:184px; height:133px; overflow:hidden;}
			.newsListThumbnail:hover { -moz-box-shadow:0px 0px 5px rgba( 0, 168, 255, 0.75); -webkit-box-shadow:0px 0px 5px rgba( 0, 168, 255, 0.75); box-shadow: 0px 0px 5px rgba( 0, 168, 255, 0.75);}
				.newsListThumbnailV {width:auto; height:100%;}
				.newsListThumbnailH {width:100%; height:auto;}
			.newsListItemContentWrapper {display:inline-block; width:100%; float:right; margin-right:-207px;}
			.newsListItemContentWrapperNoThumb {display:inline-block; width:100%;}
				.newsListItemContent {margin-right:258px;}
				.newsListItemContentNoThumb {margin-right:48px;}
					.newsListTitle {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;font-size:15px;}
					.newsListTitle:hover {text-decoration: underline;}
						.newsListTitle > a {color:#fff; font-size:18px; font-weight:bold;}
					.newsListDate {display:inline-block; width:83px; color:#c8e1f6; font-family:arial; font-weight:normal; font-size:11px; vertical-align:top; margin-top:8px; }
					.newsListContentSummary {position:relative; height:65px; margin-right:0px; margin-bottom:9px; color:#c8e1f6; font-family:arial; font-size:14px;overflow:hidden; text-overflow:ellipsis;}
					.newsListContentSummaryNoThumb {position:relative; height:65px; margin-right:0px; margin-bottom:9px; color:#c8e1f6; font-family:arial; font-size:14px;overflow:hidden; text-overflow:ellipsis;}
					/*	.newsListContentSummary > p {text-overflow:ellipsis}
						.newsListContentSummaryNoThumb > p {margin-top:9px;}*/
					.newsListReadMore {position:relative; color:#ffB400; font-family:arial; font-weight:bold; font-size:14px;}
						.newsListReadMore > span {font-family:arial; color:#fff;}
		.newsContentBar {clear:both; height:1px; background-image:url("/img2/common/line.jpg"); background-size: 100% 100%; margin: 0px 24px;}

	.snsWrapper {width:100%; height:74px; margin-top:36px; text-align:center; display: table; table-layout: fixed;}
		#snsAnkerPadding {height:100%; display: table-cell; padding-right:2px;}
		#snsAnker {height:100%; display: table-cell;}
		.snsItem {
					position: relative; float:left; width:100%; height:100;
					overflow:hidden;
					width:100%; height:100%;
					background: #1886ec; /* Old browsers */
					background: -moz-linear-gradient(top, rgba(24,134,236, 0.4) 0%, rgba(13,74,131, 0.4) 100%); /* FF3.6-15 */
					background: -webkit-linear-gradient(top, rgba(24,134,236, 0.4) 0%, rgba(13,74,131, 0.4) 100%); /* Chrome10-25,Safari5.1-6 */
					background: linear-gradient(to bottom, rgba(24,134,236, 0.4) 0%, rgba(13,74,131, 0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1886ec', endColorstr='#0d4a83',GradientType=0 ); /* IE6-9 */
				}
		.snsItem:hover {
			width:100%; height:100%;
			background: #0d4a83; /* Old browsers */
			background: -moz-linear-gradient(top, rgba(13,74,131, 0.4) 0%, rgba(24,134,236, 0.4) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, rgba(13,74,131, 0.4) 0%, rgba(24,134,236, 0.4) 100%); /* Chrome10-25,Safari5.1-6 */http://alpha2.treeofsavior.com/img2/common/tree_left.png
			background: linear-gradient(to bottom, rgba(13,74,131, 0.4) 0%, rgba(24,134,236, 0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d4a83', endColorstr='#1886ec',GradientType=1 ); /* IE6-9 */

		}
				
		.snsImg {margin-top:22px;}


.hide {opacity:0;}


@media screen and (max-width:1023px) {
	.banner-wrapper {margin-top:19px;background-size:cover;background-position:center;height:310px}
		.banner-wrapper > div {background-size: 100% auto;}
	.content-wrapper {margin-top:19px;width:100%}
		.content {float:left; width:100%; margin:215px auto 0 auto; max-width:1023px;}

	.snsWrapper {margin-top:19px;}


		.sideBar {position:absolute;width:100%; margin:0; text-align:center;left:50%; margin-left:-49.5%;}
			.sideBarItem {width:31.6%; height:195px; clear:none; display:inline-block; margin-right:1.867282502443793%; margin-bottom:0px;}
			.sideBarItem:nth-of-type(3) {width:31.5%; height:195px; clear:none; display:inline-block; margin-right:0px;}
				.sideBarItemBox {margin:16px 10%;}
					.steamWrapper {margin-top:20px;text-align:center;}

						.steamWrapper > img {;text-align:center}
						.steamLabel {clear:both;display:block}
}

@media screen and (max-width:775px) {
	.banner-wrapper {margin-top:-38px; background-size:cover; background-position:center; height:250px}
	
	.smallnavi-wrapper {position:relative; float:left; clear:both; margin-top:11px;}
	.content-wrapper {margin-top:11px;}
		.content {position:relative; float:left; clear:both; margin-top:0; /*min-width:340px;*/}
			.newsList {height:100%;}
				.newsListItem {width:auto;  height:auto; padding:8px 18px;}
					.newsListThumbnail {float:none; width:100%; height:100%; margin-bottom:5px;}
						.newsListThumbnail > img {width:100%; height:auto;}
					.newsListItemContentWrapper {display:block; width:100%; float:right; margin-right:0;}
						.newsListItemContent {margin-right:0px;}
						.newsListItemContentNoThumb {margin-right:0px;}
							.newsListTitle {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
							.newsListTitle:hover {text-decoration: underline;}
								.newsListTitle > a {color:#fff; font-size:20px; font-weight:bold;}
							.newsListDate {display:inline-block; width:83px; color:#c8e1f6; font-family:arial; font-weight:normal; font-size:11px; vertical-align:top; margin-top:8px; }
			.newsContentBar {margin: 18px 18px;}

		.sideBar {position:relative; float:left; clear:both; margin-top:-343px; margin-left:0; left:0;}
	    .sideBarItem {display:none;}
	    .sideBarItem:nth-of-type(3) {float:right; margin-top:0; width:100%; height:255px; clear:none;}
	      .sideBarItemBox {height:227px; text-align:center;}
	        .sideBarTitle {display:none;}
	        .sideBarYoutube {width:100%; height:100%;}
	        .snsWrapper {float:right; margin-top:277px; width:100%; height:74px; display:table;}
	        	.snsImg {margin-top:0;}
}


@media screen and (max-width:530px) {

.banner-wrapper {height:160px}

}
@media screen and (max-width:380px) {

.banner-wrapper {height:140px}

}