@font-face {
	font-family:'NotoSansCJKsc-Black';
	src:url('https://asset.msi.com/event/mb/2018/jp-black/font/NotoSansCJKsc-Black.otf');
}
@font-face {
	font-family:'NotoSansCJKsc-Medium';
	src:url('https://asset.msi.com/event/mb/2018/jp-black/font/NotoSansCJKsc-Medium.otf');
}
@font-face {
	font-family:'NotoSansCJKsc-Bold';
	src:url('https://asset.msi.com/event/mb/2018/jp-black/font/NotoSansCJKsc-Bold.otf');
}

#GM {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
	color:#fff;
}

#GM .box1{
	background:url(file:///D|/Graphics%20card/New%20Comment%20-%20Zula%20Bundle/images/bg.jpg) no-repeat bottom fixed;
	padding:5% 0px;
	}
#GM .whitebox{
	background:#FFFFFF;
	color:#000000;
	font-weight:bold;
	padding:20px;
	font-size:1.3em;
	}
#GM .white-c{
	background:#FFFFFF;
	-webkit-clip-path: polygon(0 0, 0 25%, 100% 0);
	clip-path: polygon(0 0, 0 25%, 100% 0);
	width:100%;
	height:100px;
	}

#GM h1{
	color:#FF0004;
	font-size:2em;
	font-weight:bolder;
	font-family:'DINCond-Black';
	margin-bottom:3%;
	}
#GM p{ line-height:1.5em; font-size:1.2em;}
#GM samp{
	font-family:'DINCond-Black';
	font-size:2em;
	color:#636363;
	}
#GM .list-box li{
	display:block;
	padding:15px 25px;
	background:rgba(75,75,75,0.5);
	border:#666666 solid 1px;
	font-size:1.5em;
	line-height:1.5em;
	margin-top:2%;
	}

#GM .list-box li:hover{
	background:rgba(131,0,2,0.5);
	border:#FF0004 solid 1px;
	}

#GM .list-box li:hover samp{
	color:#FFFFFF;
	}
#GM .ul{
	text-indent:-10px;
	line-height:1.5em;
	}
#GM a{
	display:inline-block;
	padding:0px 10px;
	background:rgba(88,88,88,0.3);
	color:#F00;
	}
#GM a:hover{
	background:rgba(255,0,4,0.3);
	color:#FFFFFF;
	}

@media only screen and (max-width: 1366px) {
#GM .p-stly{
	background:#fff;
	color:#000000;
	display:inline;
	padding:10px;
	line-height:1.8em
	}
#GM .a5 h1 {
    margin: 3% 0px;
}

}	
@media only screen and (max-width: 1280px) {
	
}	
@media only screen and (max-width: 1024px) {
#GM .p-stly{
	background:#fff;
	color:#000000;
	display:inline;
	padding:10px;
	line-height:1.8em;
	font-size:1.3em;
	}
}

@media only screen and (max-width: 768px) {	


}

@media only screen and (max-width: 640px) {

}

@media only screen and (max-width: 480px) {

}

@media only screen and (max-width: 414px) {
#GM .p-stly{
	background:#fff;
	color:#000000;
	display:inline;
	padding:5px;
	line-height:1.8em;
	font-size:1.5em;
	}
#GM .a1 {
	padding-bottom:15%;
}
}
@media only screen and (max-width: 375px) {

}
/*--按鈕--*/
.ui-box {
  text-decoration: none;
  border: none;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  position: relative;
  vertical-align: baseline;
  padding: 10px;
}


.border-inOutSpread:before, .border-inOutSpread:after, .border-inOutSpread > .ui-border-element:before, .border-inOutSpread > .ui-border-element:after {
  content: '';
  position: absolute;
}

.border-inOutSpread:before {
  border-top: 2px solid #f00;
  left: 51%;
  right: 51%;
  top: 0px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:hover:before {
  left: 0%;
  right: 0%;
}

.border-inOutSpread:not(:hover):before {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:before, .border-inOutSpread:after, .border-inOutSpread > .ui-border-element:before, .border-inOutSpread > .ui-border-element:after {
  content: '';
  position: absolute;
}

.border-inOutSpread .ui-border-element:after {
  border-right: 2px solid #f00;
  top: 50%;
  bottom: 50%;
  right: 0px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:hover .ui-border-element:after {
  top: 0%;
  bottom: 0%;
}

.border-inOutSpread:not(:hover) .ui-border-element:after {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:before, .border-inOutSpread:after, .border-inOutSpread > .ui-border-element:before, .border-inOutSpread > .ui-border-element:after {
  content: '';
  position: absolute;
}

.border-inOutSpread:after {
  border-bottom: 2px solid #f00;
  left: 51%;
  right: 51%;
  bottom: 0px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:hover:after {
  left: 0%;
  right: 0%;
}

.border-inOutSpread:not(:hover):after {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:before, .border-inOutSpread:after, .border-inOutSpread > .ui-border-element:before, .border-inOutSpread > .ui-border-element:after {
  content: '';
  position: absolute;
}

.border-inOutSpread .ui-border-element:before {
  border-left: 2px solid #f00;
  top: 50%;
  bottom: 50%;
  left: 0px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.border-inOutSpread:hover .ui-border-element:before {
  top: 0%;
  bottom: 0%;
}

.border-inOutSpread:not(:hover) .ui-border-element:before {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}
