@charset "UTF-8";
html.is-tb-html,
body.is-tb {
	height: 100vh;
	background-color: #000 !important; 
	font-family: "メイリオ",Meiryo,Osaka,"小塚ゴシック Pro H",KozGoPr6N-Heavy,KozGoPro-Heavy,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;
}
.servicemapproc .custom-select{width:170px}
b{
	color: #888;
}
.dropdown-menu{
	z-index: 99999999;
}
@media screen and (orientation: portrait) {
	html.is-tb-html,
	body.is-tb {
		height: 60vh; 
	} 
}

@media screen and (orientation: landscape) {
	html.is-tb-html {
		height: 100%; 
	}
	body.is-tb {
		background-color: red;
		height: 100%; 
	} 
}

html, body, #tpl-contents, .tpl-inner-wrap, .main {
	height: 100%; 
}
@media only screen and (max-width: 750px) {

	html, body, #tpl-contents, .tpl-inner-wrap, .main {
		height: auto;
	} 
}

body, #tpl-contents > .tpl-inner-wrap {
	background: #000; 
}

@media only screen and (max-width: 750px) {
	#gnav {
		z-index: 998; 
	} 
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
	height: 35px; 
}

.mCSB_container {
	height: 100%; 
}

.language{
	display: block;
	font-size: 36px;
}

/* #tpl-header
----------------------------------------------------------- */
#tpl-header {
	position: fixed;
	z-index: 1500; 
}
@media only screen and (max-width: 750px) {
	#tpl-header {
		position: static;
	} 
}
#tpl-header .tpl-inner-wrap {
	position: static;
}

/* #tpl-contents
----------------------------------------------------------- */
#tpl-contents {
	height: 100%;
	padding-top:0px; 
}
@media only screen and (max-width: 750px) {
	#tpl-contents {
		padding-top: 0px;
	} 
}

/* #scroll-wrap
----------------------------------------------------------- */
#scroll-wrap {
	overflow: auto;
	min-height: 100%; 
}
#scroll-wrap a {
	text-decoration: none;
	color: #fff; 
}
#scroll-wrap #scroll-contents {
	display: -webkit-flex;
	/* Safari */
	display: flex;
	-webkit-flex-direction: row;
	/* Safari */
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	/* Safari */
	flex-wrap: nowrap;
	width: 3000px;
	min-height: 100%;
	height: 100%;
	background-color: #000;
	/*** heading ***/
	/*** photo ***/
	/*** ending ***/ 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents {
		display: block;
		width: 100%;
		height: auto;
		min-height: 0; 
	} 
}
#scroll-wrap #scroll-contents .item {
	position: relative;
	min-height: 600px; 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .item {
		position: static;
		min-height: 0;
		height: auto; 
	} 
}
@media screen and (orientation: portrait) {
	#scroll-wrap #scroll-contents .item {
	}
	body.is-tb #scroll-wrap #scroll-contents .item {
		min-height: 0;
		max-height: 60vh;
	} 

}
@media screen and (orientation: landscape) {
	#scroll-wrap #scroll-contents .item {
	}
	body.is-tb #scroll-wrap #scroll-contents .item {
		min-height: 0;
		height: 100%; 
	} 
}

#scroll-wrap #scroll-contents #heading {
	width: 580px;
	background:#000 url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/scroll_heading.jpg") no-repeat;
}

@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #heading {
		width: 100%;
		height:300px;
		text-align: center;
		background:#000 url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/heading.jpg") center  no-repeat;
		background-size: 100%;
	} 
}

#scroll-wrap #scroll-contents #heading #kuritama {
	position: absolute;
	top: 45%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-left: 50px; 
}

@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #heading #kuritama {
		position: absolute;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		top: 200px;
	} 

}
#scroll-wrap #scroll-contents #heading #kuritama img {
	width: 350px;
	height: auto; 
}

@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #heading #kuritama img {
		width:60%;
		height: auto;
		bottom: 0; 
	} 
}
#scroll-wrap #scroll-contents #heading #iip b{
	font-size: 15px;
	color: #666;
}

#scroll-wrap #scroll-contents #heading #iip {
	position: absolute;
	color: #fff;
	font-size: 18px;
	bottom: 50px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-left: 50px;
	font-family: "メイリオ",Meiryo,Osaka,"小塚ゴシック Pro H",KozGoPr6N-Heavy,KozGoPro-Heavy,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif !important; 
}

@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #heading #iip {
		display: none;
		position: absolute;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		bottom: 150px;
	} 

}

#scroll-wrap #scroll-contents #heading #scroll {
	position: fixed;
	right:2px;
	bottom: 55%;
	width: 60px;
	font-weight: 100;
	font-size: 60px;
	z-index: 99;
}

#scroll-wrap #scroll-contents #heading #scroll a{
	color: red;
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #heading #scroll {
		display: none; 
	} 
}

#scroll-wrap #scroll-contents .photo {
	box-sizing: content-box;
	display: block;
	width: 400px;
	text-align: center;
	overflow: hidden;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	padding-left: 0px;
	padding-right: 0px;
	transform: translate3d(0, 0, 0);
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/loading.gif") center center no-repeat #1a1a1a;
	z-index: 10; 
}

@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo {
		width: 100%;
		transform: none;
		position: relative;
		height: 0;
		padding-bottom: 58.67%;
		-webkit-transition: all 0.8s;
		-moz-transition: all 0.8s;
		transition: all 0.8s; 
	} 
}
#scroll-wrap #scroll-contents .photo img {
	display: block;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transition: all 1s;
	position: absolute;
	top: 0px;
	-webkit-transform: translate(-50px, 0);
	transform: translate(-50px, 0);
	z-index: 100;
	height: auto;
	width: auto;
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
	filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

#scroll-wrap #scroll-contents .photo img:hover {
	display: block;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transition: all 1s;
	position: absolute;
	top: 0px;
	-webkit-transform: translate(-50px, 0);
	transform: translate(-50px, 0);
	z-index: 100;
	height: auto;
	width: auto;
	-webkit-filter: grayscale(0);
	filter: none;
}


@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo img {
		display: none; 
	} 
}
#scroll-wrap #scroll-contents .photo.is-show {
	padding-left: 40px;
	padding-right: 40px;
	margin-right: -40px;
	margin-left: -40px;
	z-index: 20;
	-webkit-transition: all 1.2s;
	-moz-transition: all 1.2s;
	transition: all 1.2s;
	-webkit-transform: perspective(0); 
}

@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo.is-show {
		padding: 0;
		margin: 0;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
#scroll-wrap #scroll-contents .photo.is-show img {
	z-index: 200;
	opacity: 1;
	-webkit-transform: translate(-50px, 0);
	transform: translate(-50px, 0); 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo.is-show img {
		display: none;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
#scroll-wrap #scroll-contents .photo.no-loading {
	background: #1a1a1a; 
}
#scroll-wrap #scroll-contents .photo .profile {
	position: absolute;
	font-family: "メイリオ",Meiryo,Osaka,"小塚ゴシック Pro H",KozGoPr6N-Heavy,KozGoPro-Heavy,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;
	right: 0;
	bottom: 20%;
	margin: 0 auto;
	width: 100%;
	max-width: 380px;
	z-index: 300;
	text-align: center;
	overflow: hidden; 

}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo .profile {
		position: absolute;
		width: 380px;
		top: 65%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: auto;
		bottom: auto; 
	} 
}
#scroll-wrap #scroll-contents .photo .profile .inner {
	display: inline-block;
	max-width: 320px; 
}

#scroll-wrap #scroll-contents .photo .profile:after {
	content: "";
	width: 100%;
	height: 53px;
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon_fire.png") center center no-repeat;
	position: absolute;
	left: 0px;
	bottom: 0;
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo .profile .inner {
		max-width: 100%; 
	} 
}
#scroll-wrap #scroll-contents .photo .profile .num,
#scroll-wrap #scroll-contents .photo .profile .info {
	display: table-cell;
	vertical-align: middle;
	letter-spacing: 0.08em; 
}
#scroll-wrap #scroll-contents .photo .profile .num {
	width: 78px;
	border-left: 1px solid #bbbbbb;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 200; 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo .profile .num {
		font-size: 20px;
		font-size: 2rem;
		width: 80px; 
	} 
}
#scroll-wrap #scroll-contents .photo .profile .info {
	text-align: center;
	margin-bottom: 30px;
}

#scroll-wrap #scroll-contents .photo .profile .info .occupation {
	font-size: 12px;
	font-size: 1.2rem;
	margin-bottom: 15px;
	font-weight: 200; 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo .profile .info .occupation {
		font-size: 11px;
		font-size: 1.1rem; 
	} 
}
#scroll-wrap #scroll-contents .photo .profile .info .names {
	font-size: 24px;
	font-size: 1.6rem;
	font-weight: 200; 
	margin-bottom: 20px;
	text-transform: uppercase;
}

@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo .profile .info .names {
		font-size: 15px;
	} 
}
#scroll-wrap #scroll-contents #ending {
	width: 420px;
	background:#000 url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/scroll_footer.jpg") right no-repeat;
	display: block;
	height: 100%;
	/*** scroll back ***/ 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #ending {
		width: 100%;
		display: block;
		background:#000;
		height: auto; 
	} 
}
#scroll-wrap #scroll-contents #ending #tpl-pagetop-box {
	display: none; 
}

@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #ending #tpl-pagetop-box {
		display: block; 
	} 
}
#scroll-wrap #scroll-contents #ending #tpl-footer {
	height: 100%;
	position: relative;
	overflow: hidden;
	min-width: 0px;
	display: table-cell;
	vertical-align: middle; 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #ending #tpl-footer {
		width: 100%;
		height: 50%;
		position: static;
		display: block; 
	} 
}
#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap {
	display: inline-block;
	min-width: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	height: auto;
	padding: 0;
	margin-left: 80px;
	width: auto; 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap {
		margin-left: 0;
		width: 100%;
		position: static;
		top: auto;
		left: auto;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		left: auto; 
	} 
}
#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link {
	float: none;
	padding-right: 0; 
}
#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul {
	float: none; 
}
#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li {
	float: none;
	margin-left: 0;
	position: static;
	margin-top: 30px; 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li {
		margin-top: 0; 
	} 
}
#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li a {
	display: inline-block;
	font-size: 14px;
	font-size: 1.4rem; 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li a {
		display: block;
		width: 100%; 
	} 
}
#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li:before {
	display: block;
	position: static;
	margin-bottom: 15px; 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li:before {
		display: none; 
	} 
}
#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li:first-child {
	margin-top: 0; 
}
#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li#mail, #scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li#facebook, #scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li#twitter {
	display: inline-block;
	margin-top: 100px;
	margin-bottom: 30px; 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li#mail, #scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li#facebook, #scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li#twitter {
		margin: 40px 20px 25px; 
	} 
}
#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li#facebook, #scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li#twitter {
	margin-left: 30px; 
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li#facebook, #scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .footer-link ul li#twitter {
		margin-left: 0;
		margin: 40px 20px 25px; 
	} 
}
#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap .tpl-others {
	padding-left: 0; 
}

#scroll-wrap #scroll-contents #ending #scroll-back {
	display: block;
	width:60px; 
	position: absolute;
	right: 0;
	bottom: 48%;
	z-index: 99;
	
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents #ending #scroll-back {
		display: none; 
	} 
}
#scroll-wrap #scroll-contents #ending #scroll-back a {
	display: block;
	font-size: 60px;
	overflow: hidden;
	letter-spacing: 0.16em;
	white-space: nowrap;
	color: red; 
}

/** firefox **/
@-moz-document url-prefix() {
	#scroll-wrap #scroll-contents #ending {
		display: block; 
	}
	#scroll-wrap #scroll-contents #ending #tpl-footer {
		display: block; 
	}
	#scroll-wrap #scroll-contents #ending #tpl-footer .tpl-inner-wrap {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		left: 80px;
		margin-left: 0; 
	} 
}

/* mac */
body.mac #scroll-wrap #scroll-contents #heading #scroll a {
	font-weight: 400; 
}

/* sp image
----------------------------------------------------------- */
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo#Sporty_design {
		background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_wtb_sp.jpg") center center no-repeat #000;
		background-size: cover;
		background-color:rgba(100,0,0,0.5); 
	}
	#scroll-wrap #scroll-contents .photo#Per_key_RGB_KB {
		background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_Per_key_RGB_KB_sp.jpg") center center no-repeat #000;
		background-size: cover; 
	}
	#scroll-wrap #scroll-contents .photo#Giant_speaker {
		background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_Giant_speaker_sp.jpg") center center no-repeat #000;
		background-size: cover; 
	}
	#scroll-wrap #scroll-contents .photo#ms_panel {
		background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_3ms_panel_sp.jpg") center center no-repeat #000;
		background-size: cover; 
	}
	#scroll-wrap #scroll-contents .photo#Cooler_boost_5 {
		background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_Cooler_boost_5_sp.jpg") center center no-repeat #000;
		background-size: cover; 
	}
	#scroll-wrap #scroll-contents .photo#USB_lighting {
		background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_USB_lighting_sp.jpg") center center no-repeat #000;
		background-size: cover; 
	}
	#scroll-wrap #scroll-contents .photo#WTBbox {
		background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_Sporty_design_sp.jpg") center center no-repeat #000;
		background-size: cover; 
	}
}

/*** active ***/
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo.active {
		background: #9f190c !important;
		padding-bottom: 30.67% !important; 
	} 

}

/* mCSB_scrollTools
----------------------------------------------------------- */
.mCSB_scrollTools {
	z-index: 500; 
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
	height: 35px;
	margin: 0;
	background-color: transparent; 
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
	width: 190px !important; 
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
	height: 35px;
	margin: 0;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background:url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/Racing_pattern.png");
	width: 190px; 
}

.mCustomScrollBox {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transition: all 1s; 
}
@media only screen and (max-width: 750px) {
	.mCustomScrollBox {
		height: auto !important; 
	} 
}
.mCustomScrollBox.hide {
	opacity: 0;
	-webkit-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	transform: translateY(-50px);
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transition: all 1s; 
}

/* modal window
----------------------------------------------------------- */
.mfp-bg {
	opacity: 0; 
}
@media only screen and (max-width: 750px) {
	.mfp-bg {
		z-index: 980; 
	} 
}

.mfp-wrap {
	overflow: hidden !important; 
}
@media only screen and (max-width: 750px) {
	.mfp-wrap {
		z-index: 990;
		position: fixed; 
	} 
}

.mfp-container {
	padding: 0;
	width: 100%;
	height: 100%; 
}

.mfp-content {
	/*padding-top: 100px;*/
	width: 100%;
	height: 100%;
	position: relative; 
}
@media only screen and (max-width: 750px) {
	.mfp-content {
		padding-top: 62px; 
	} 
}
.mfp-content .mfp-hide {
	display: block !important; 
}

.modal-contents {
	width: 100%;
	height: 100%;
	color: #fff;
	background: #000; 
}
@media only screen and (max-width: 750px) {
	.modal-contents {
		height: auto;
		display: none; 
	} 
}
@media only screen and (max-width: 750px) {
	.modal-contents .acd-kv img {
		width: 100%;
		height: auto; 
	} 
}
.modal-contents .text-wrap {
	display: inline-block;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 70px; 
	color: #fff;
	width: 30%;
}
@media only screen and (max-width: 750px) {
	.modal-contents .text-wrap {
		position: static;
		top: auto;
		left: auto;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		background-color: #000;
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 50px;
		padding-bottom: 50px; 
	} 
}
.modal-contents .text-wrap .heading {
	color: #fff;
	font-size: 24px;
	font-size: 2.1rem;
	font-weight: 300;
	position: relative;
	margin-bottom: 25px;
	text-transform:uppercase;
}
.modal-contents .text-wrap .heading:before {
	content: "";
	width: 100%;
	height: 52px;
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon_fire.png") center center no-repeat;
	position: absolute;
	left: 0px;
	top: 0; 
}
.modal-contents .text-wrap .text {
	line-height: 26px;
	font-size: 24px;
	font-weight: 200;
	letter-spacing: 0.08em;
	margin-bottom: 40px; 
}
@media only screen and (max-width: 750px) {
	.modal-contents .text-wrap .text {
		line-height: 26px;
		font-size: 15px;
		font-weight: 200;
		letter-spacing: 0.08em;
		margin-bottom: 40px; 
	} 
}

.modal-contents .text-wrap .data {
	smargin-bottom: 30px; 
}
@media only screen and (max-width: 750px) {
	.modal-contents .text-wrap .data {
		display: block;
		width: 50%;
		margin: 0 auto;
		position: relative; 
	} 
}
.modal-contents .text-wrap .data dl {
	display: table;
	width: 100%; 
}
.modal-contents .text-wrap .data dl dt, .modal-contents .text-wrap .data dl dd {
	display: table-cell; 
}
.modal-contents .text-wrap .data dl dt {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 200;
	position: relative;
}
.modal-contents .text-wrap .data dl dt:after {
	content: "";
	width: 20px;
	height: 1px;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 0; 
}

.modal-contents .text-wrap .data dl dd:after {
	content: "";
	width: 20px;
	height: 1px;
	background-color: #fff;
	position: absolute;
	top: 50%;
	right: 0; 
}

.modal-contents .text-wrap .link {
	width: 158px;
	height: 50px; 
}
@media only screen and (max-width: 750px) {
	.modal-contents .text-wrap .links {
		width: 76.8%;
		height: 56px;
		display: table;
		margin-left: auto;
		margin-right: auto; 
	} 

}
.modal-contents .text-wrap .link a {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	width: 158px;
	height: 50px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	display: table-cell;
	vertical-align: middle;
	border: 1px solid #aaaaaa;
	background-color: #fff;
	text-decoration: none;
	color: #1a1a1a;
	text-align: center;
	font-size: 12px;
	font-size: 1.2rem; 
}
@media only screen and (max-width: 750px) {
	.modal-contents .text-wrap .link a {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		height: 56px;
		-moz-border-radius: 28px;
		-webkit-border-radius: 28px;
		border-radius: 28px;
		display: table-cell;
		vertical-align: middle;
		border: 1px solid #aaaaaa;
		background-color: #fff;
		text-decoration: none;
		color: #000;
		text-align: center;
		font-size: 13px;
		font-size: 1.3rem;
		color: #000 !important; 
	}
	.modal-contents .text-wrap .link a:hover {
		opacity: 1 !important; 
	} 
}
.modal-contents .close a {
	display: block;
	width: 100%;
	height: 62px;
	line-height: 60px;
	text-align: center;
	background-color: red;
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: 200;
	color: #fff;
	letter-spacing: 0.08em;
	white-space: nowrap; 
}
.modal-contents .close a span:before {
	display: inline-block;
	content: "✕";
	margin-right: 7px; 
}
.modal-contents .counter {
	width: 101px;
	height: 49px;
	background-color: #727272;
	position: absolute;
	bottom: 51px;
	right: 101px;
	text-align: center;
	line-height: 47px;
	color: #fff;
	font-size: 12px;
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	white-space: nowrap; 
}
@media only screen and (max-width: 750px) {
	.modal-contents .counter {
		display: none; 
	} 
}

.mfp-close-btn-in .modal-contents button.mfp-close {
	top: auto;
	bottom: 0;
	right: 0;
	width: 100px;
	height: 100px;
	background-color: #1a1a1a;
	color: #fff;
	font-size: 28px;
	font-size: 2.8rem;
	opacity: 1;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
	text-align: center; 
}

@media only screen and (max-width: 750px) {	
	.mfp-close-btn-in .modal-contents button.mfp-close {
		display: none; 
	} 
}
.mfp-close-btn-in .modal-contents button.mfp-close:hover {
	opacity: 0.75; 
}
.mfp-close-btn-in .modal-contents button.mfp-close span {
	display: block;
	text-align: center;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1;
	letter-spacing: 0.12em;
	color: #fff; 
}

button.mfp-arrow {
	position: absolute;
	top: auto;
	bottom: 0;
	width: 50px;
	height: 50px; 
}
@media only screen and (max-width: 750px) {

	button.mfp-arrow {
		display: none; 
	} 
}
button.mfp-arrow:before, button.mfp-arrow:after {
	display: none; 
}
button.mfp-arrow.mfp-arrow-left {
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon_modal_prev.png") center center no-repeat #727272;
	left: auto;
	right: 152px; 
}
button.mfp-arrow.mfp-arrow-right {
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon_modal_next.png") center center no-repeat #727272;
	right: 101px; 
}

/* modal img set
----------------------------------------------------------- */
#modal-wrap1 {
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_Sporty_design.jpg") center center no-repeat;
	background-size: cover; 
}

#modal-wrap2 {
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_Per_key_RGB_KB.gif") center center no-repeat;
	background-size: cover; 
}

#modal-wrap3 {
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_Giant_speaker.gif") center center no-repeat;
	background-size: cover; 
}

#modal-wrap4 {
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_3ms_panel.jpg") center center no-repeat;
	background-size: cover; 
}

#modal-wrap5 {
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_Cooler_boost_5.gif") center center no-repeat;
	background-size: cover; 
}

#modal-wrap6 {
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/slide_USB_lighting.jpg") center center no-repeat;
	background-size: cover; 
}

#modal-wrap7 {
	background:#000 center center no-repeat;
	background-size: cover; 
}


/*

====== fade-up effect ======

*/
.fade-up {
	/* start state */
	/* animate in */
	/* animate out */ 
}
.fade-up .mfp-with-anim {
	opacity: 0; 
}
.fade-up .modal-contents {
	opacity: 0;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	transition: all 1.5s ease;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px); 
}
@media only screen and (max-width: 750px) {
	.fade-up .modal-contents {
		-webkit-transition: all .4s ease;
		-moz-transition: all .4s ease;
		transition: all .4s ease;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
.fade-up button.mfp-arrow {
	opacity: 0;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	transition: all 1.5s ease;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px); 
}
@media only screen and (max-width: 750px) {
	.fade-up button.mfp-arrow {
		-webkit-transition: all .4s ease;
		-moz-transition: all .4s ease;
		transition: all .4s ease;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
.fade-up.mfp-ready .modal-contents.mfp-elm-hide .heading,
.fade-up.mfp-ready .modal-contents.mfp-elm-hide .text,
.fade-up.mfp-ready .modal-contents.mfp-elm-hide .data,
.fade-up.mfp-ready .modal-contents.mfp-elm-hide .link {
	opacity: 0;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	transition: all 1.5s ease;
	-webkit-transform: translateY(20px);
	-ms-transform: translateY(20px);
	transform: translateY(20px); 
}
@media only screen and (max-width: 750px) {
	.fade-up.mfp-ready .modal-contents.mfp-elm-hide .heading,
	.fade-up.mfp-ready .modal-contents.mfp-elm-hide .text,
	.fade-up.mfp-ready .modal-contents.mfp-elm-hide .data,
	.fade-up.mfp-ready .modal-contents.mfp-elm-hide .link {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
.fade-up.mfp-ready .mfp-with-anim {
	opacity: 1; 
}
.fade-up.mfp-ready .modal-contents {
	opacity: 1;
	-webkit-transition: all 1.5s ease 0.8s;
	-moz-transition: all 1.5s ease 0.8s;
	transition: all 1.5s ease 0.8s;
	-webkit-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px); 
}
@media only screen and (max-width: 750px) {
	.fade-up.mfp-ready .modal-contents {
		-webkit-transition: all 1.5s ease .4s;
		-moz-transition: all 1.5s ease .4s;
		transition: all 1.5s ease .4s;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
.fade-up.mfp-ready button.mfp-arrow {
	opacity: 1;
	-webkit-transition: all 1.5s ease 0.8s;
	-moz-transition: all 1.5s ease 0.8s;
	transition: all 1.5s ease 0.8s;
	-webkit-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px); 
}
@media only screen and (max-width: 750px) {
	.fade-up.mfp-ready button.mfp-arrow {
		-webkit-transition: all 1.5s ease .4s;
		-moz-transition: all 1.5s ease .4s;
		transition: all 1.5s ease .4s;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
.fade-up.mfp-ready .heading {
	font-family: "メイリオ",Meiryo,Osaka,"小塚ゴシック Pro H",KozGoPr6N-Heavy,KozGoPro-Heavy,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;
	opacity: 1;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	transition: all 1.5s ease;
	-webkit-transform: translateY(0px);s
	-ms-transform: translateY(0px);
	transform: translateY(0px); 
}
@media only screen and (max-width: 750px) {
	.fade-up.mfp-ready .heading {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
.fade-up.mfp-ready .text {
	font-family: "メイリオ",Meiryo,Osaka,"小塚ゴシック Pro H",KozGoPr6N-Heavy,KozGoPro-Heavy,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;
	opacity: 1;
	-webkit-transition: all 1.5s ease .3s;
	-moz-transition: all 1.5s ease .3s;
	transition: all 1.5s ease .3s;
	-webkit-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px); 
}
.fade-up.mfp-ready .text b{
	font-family: "メイリオ",Meiryo,Osaka,"小塚ゴシック Pro H",KozGoPr6N-Heavy,KozGoPro-Heavy,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;
	color: #f00;
}
@media only screen and (max-width: 750px) {
	.fade-up.mfp-ready .text {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	} 
}
.fade-up.mfp-ready .data {
	opacity: 1;
	-webkit-transition: all 1.5s ease 0.6s;
	-moz-transition: all 1.5s ease 0.6s;
	transition: all 1.5s ease 0.6s;
	-webkit-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	width: 20%;
	margin: 0 auto; 
}
@media only screen and (max-width: 750px) {
	.fade-up.mfp-ready .data {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
.fade-up.mfp-ready .link {
	opacity: 1;
	-webkit-transition: all 1.5s ease 0.9s;
	-moz-transition: all 1.5s ease 0.9s;
	transition: all 1.5s ease 0.9s;
	-webkit-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px); 
}
@media only screen and (max-width: 750px) {
	.fade-up.mfp-ready .link {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
.fade-up.mfp-removing .mfp-with-anim {
	opacity: 0; 
}
.fade-up.mfp-removing .modal-contents {
	opacity: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px); 
}
@media only screen and (max-width: 750px) {
	.fade-up.mfp-removing .modal-contents {
		-webkit-transition: all .4s ease;
		-moz-transition: all .4s ease;
		transition: all .4s ease;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
.fade-up.mfp-removing button.mfp-arrow {
	opacity: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px); 
}
@media only screen and (max-width: 750px) {
	.fade-up.mfp-removing button.mfp-arrow {
		-webkit-transition: all .4s ease;
		-moz-transition: all .4s ease;
		transition: all .4s ease;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none; 
	} 
}
.fade-up.mfp-ready .modal-contents.mfp-change-ready {
	opacity: 0;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none; 
}


/**/
.Sporty_design {
	display: block;
	width: 80px;
	height: 80px;
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon/icon_Sporty_design.png");
	margin: 0 auto;
}
.Per_key_RGB_KB {
	display: block;
	width: 80px;
	height: 80px;
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon/icon_Per_key_RGB_KB.png");
	margin: 0 auto;
}
.Giant_speaker {
	display: block;
	width: 80px;
	height: 80px;
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon/icon_Giant_speaker.png");
	margin: 0 auto;
}

.ms_panel {
	display: block;
	width: 80px;
	height: 80px;
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon/icon_3ms_panel.png");
	margin: 0 auto;
}

.Cooler_boost_5 {
	display: block;
	width: 80px;
	height: 80px;
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon/icon_Cooler_boost_5.png");
	margin: 0 auto;
}

.USB_lighting {
	display: block;
	width: 80px;
	height: 80px;
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon/icon_USB_lighting.png");
	margin: 0 auto;
}

.wtb {
	display: block;
	width: 80px;
	height: 80px;
	background: url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/icon/icon_wtb.png");
	margin: 0 auto;
}

#WTB{
	height: 100%;
	overflow: auto;
}
#WTB h2{
	font-family: "メイリオ",Meiryo,Osaka,"小塚ゴシック Pro H",KozGoPr6N-Heavy,KozGoPro-Heavy,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;
	color: red;
	font-size: 24px;
	margin: 20px 0;
}
#nbbox{
	padding-top: 0%;
}
#intellogo{
	width: 150px;
	margin: 10px auto;
}

#nbbox img{
	width: 80%;
}
.footerbox{
	color: #c7c7c7;
	font-size: 15px;
	font-weight: 400;
	padding: 20px;
	font-family: "メイリオ",Meiryo,Osaka,"小塚ゴシック Pro H",KozGoPr6N-Heavy,KozGoPro-Heavy,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif !important; 
}
.footer-link #wtb {
	box-sizing: content-box;
	display: block;
	text-align: center;
	overflow: hidden;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	padding-left: 0px;
	padding-right: 0px;
	transform: translate3d(0, 0, 0);
	z-index: 10;
}




/******** language ********/
#popup {
	display: none;
	position: absolute;
	z-index: 1000;
	text-align: center;
	width: 99%;
	top:20%;
	left:0%;
	margin:0px;
	background:#6c1517;
	padding:10px 20px;
	-webkit-box-shadow:
	0 0 125px 0 rgba(0,0,0,1),
	0 0 10000px 500px rgba(0,0,0,.75);
	box-shadow:
	0 0 125px 0 rgba(0,0,0,1),
	0 0 10000px 500px rgba(0,0,0,.75);
	border-radius:5px;
}

#popup h2 {
	font-size:36px;
	color:#fff;
	text-align: center;
	text-transform:uppercase;
	margin: 0;
}
#popup h3 {
	font-size:18px;
	color:#f00;
	text-align: center;
	text-transform:uppercase;
	margin: 10px 0;
}
#popup a{
	font-size:16px;
	padding: 5px;
	text-transform:uppercase;
	-webkit-transition: .25s ease;
	transition: .25s ease;
	font-family: "メイリオ",Meiryo,Osaka,"小塚ゴシック Pro H",KozGoPr6N-Heavy,KozGoPro-Heavy,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;
}
#wrap{
	position: absolute;
	right: 30px;
	top: 10px;
	z-index: 999;
	text-transform:uppercase;
	color: #fff;
}
#wrap a:hover, #popup a:hover {
	color:#fff; 
}

#Close a{
	color: #fff;
}

.btn-block {
	color: #fff;
	background-color: #000;
	border-color: #383838;
}
.btn-block:hover {
	color: #fff;
	background-color:red;
	border-color: #383838;
}
/******** language ********/

#bodybox{
	position: relative;
	min-height: 2000px;
	height: 100%;
	overflow:hidden; 
}

#canvas{
	position: fixed;
}
.Sloganbox{
	position: fixed;
	top: 20%;
	right: 50px;
}

.Slogan{
	display: block;
	height: auto;
	animation: fadeinttitle 6s;
	animation-fill-mode: forwards;
	top:100px;
	z-index: 9999999;
	line-height: 24px;
	text-transform: none;
	color: #fff;
}
.Sloganb{
	position: fixed;
	left: 30%;
	bottom: 20px;
	z-index: 9999999;
}
.Slogan2{
	display: none;
	position: absolute;
	animation: fadeinttitle 10s;
	animation-fill-mode: forwards;
	z-index: 999;
	left: 25%;
	top: 650px;
}

.Slogan a{
	color: #f00;
}
.Slogan a:hover{
	color: #98161a;
	text-decoration: none;
}
.Slogan b{
	padding-left: 60px;
	font-family: "メイリオ",Meiryo,Osaka,"小塚ゴシック Pro H",KozGoPr6N-Heavy,KozGoPro-Heavy,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;
	display: block;
	font-size: 24px;
	font-weight: 300;
	margin-top: 20px;
}
@keyframes fadeinttitle {
	from {
		opacity:0;

	}
	to {
		opacity:1;
	}
}

/* Modal */
.modals {
	display: block;
	background: #000;
	width: 100%;
	height: 100%;
	z-index: 99999;
}

/*****  animation box ******/
@media only screen and (min-width : 749px) and (max-width : 1400px) {
	#nbbox {
		padding-top: 0%; 
	}
}
@media only screen and (max-width: 750px) {
	#scroll-wrap #scroll-contents .photo .profile:after {
		content: "";
		display: none;
		width: 100%;
		height: 53px;
		position: absolute;
		left: 0px;
		bottom: 0;
	}
	.modal-contents .counter {
		display: none;
		width: 101px;
		height: 49px;
		background-color: #727272;
		position: absolute;
		bottom: 51px;
		right: 101px;
		text-align: center;
		line-height: 47px;
		color: #fff;
		font-size: 12px;
		font-size: 1.2rem;
		letter-spacing: 0.1em;
		white-space: nowrap;
	}
	#nbbox{
		display: block;
		margin: 0 auto;
		padding-top: 0%;
		background:url("https://asset.msi.com/event/nb/2017/GE_Raider_series/img/scroll_footer.jpg") center no-repeat; 
		background-size: 100%;
	}
	#nbbox img{
		display: block;
		margin: 0 auto;
		padding-top: 0%;
	}
	#wrap{
		position: fixed;
		right: 10px;
		top: 10%;
		z-index: 999;
		text-transform:uppercase;
		color: #fff;
	}

	#popup {
		display: none;
		position: absolute;
		z-index: 1000;
		text-align: center;
		width: 100%;
		top: 20%;
		left: 0%;
		margin: 0px;
		background: #6c1517;
		padding: 10px 20px;
		-webkit-box-shadow: 0 0 125px 0 rgba(0,0,0,1), 0 0 10000px 500px rgba(0,0,0,.75);
		box-shadow: 0 0 125px 0 rgba(0,0,0,1), 0 0 10000px 500px rgba(0,0,0,.75);
		border-radius: 5px;
	}

	#bodybox{
		display: none;
	}


}