@import url('reset.css');
@import url('fonts.css');
@import url('common.css');

body{background:#000; color:#fff; font-size:95%; font-family: 'DINPro-Light';}
.container{width:100%; max-width:1110px; text-align:left; margin:5em auto 8em;}
.title{border-bottom:#f00 5px solid; text-align:center; font-family: 'DINPro-Medium'; font-weight:bolder; font-size:1.85em; padding-bottom:0.5em; margin-bottom:1em;}
.vimgs{display:none;}

/*header*/
.header{background:url(https://asset.msi.com/event/mb/2016/dsb1/images/vimg-bg.jpg) top right no-repeat; background-size:cover; border-bottom:#ff0000 5px solid; position:relative; width:100%;}
.header .vimg{margin-left:30%; position:relative; padding:3% 5% 1%; text-align:right;}
.header .slogan{width:40%; position:absolute; z-index:10;  top:10%; left:3%;}
.header .slogan .logo{padding-bottom:0.5em;}
.header .slogan h1{ font-size:3.5em; padding-bottom:0.2em; font-family: 'DINPro-Medium', Arial, Helvetica, 'Microsoft JhengHei', sans-serif !important; font-weight:bolder; text-shadow:#000 0 0 10px;}
.header .slogan h2{font-size:2em; color: #fff100; padding-bottom:0.5em; font-family: 'DINPro-Regular'; width:65%; line-height:1.1em; font-weight:bold; }
.header .slogan h3{font-size:1.4em; line-height:1.3em; width:65%; font-weight:bold;}
.header .slogan ul{list-style:none; color: #fff100; font-size:0.95em; padding-top:3em; width:50%;}
.header .slogan ul li{padding-bottom:0.5em;}
.header .slogan ul li a{color:#f00; text-decoration:underline;}
.header .slogan ul li a:hover{color:#fff; text-decoration:none;}

/*section1*/
.section1 .tb > .td:nth-child(1){width:33%;}
.section1 .tb > .td:nth-child(2){width:33%; padding-left:3%; padding-right:1%;}
.section1 .tb > .td:nth-child(3){width:30%;}
.section1 .tb ul{margin-left:1.5em;}
.section1 .tb ul li{list-style:disc; padding-bottom:0.8em;}
.section1 .tb ul li span{color:#f00; font-size:1.3em;}
.section1 .tb ul li ul li{list-style:circle; padding-top:0.4em; padding-bottom:0; line-height:1.4em;}

/*section2*/
.section2 .td{width:50%; padding-bottom:30px;}
.section2 .td:nth-child(1){padding-right:22px;}
.section2 .td:nth-child(2){padding-left:22px;}
.section2 .td h2{padding:7px 100px 5px 15px; margin:0 0 0 0; background:url(https://asset.msi.com/event/mb/2016/dsb1/images/ff-title.png) top right no-repeat; font-size:1.2em; float:left;}
.section2 figure{background:#ba0008; border:5px solid #9a0000; clear:both; width:100%; transition:0.5s all ease 0.1s;}
.section2 figure:after{clear:both; display:block; visibility:hidden; height:0; content:"";}
.section2 figure .img{width:40%; float:left;}
.section2 figure figcaption{width:calc(60% - 30px); padding:15px; float:right; line-height:1.3em;}
.section2 figure:hover{box-shadow:#f00 0 0 20px; cursor:pointer;}
.section2 ul{margin-left:1.5em;}
.section2 .tb ul li{list-style:disc; padding-bottom:0.3em;}

/*section3*/
.section3{padding-bottom:4em;}
.section3 .container{margin-bottom:4em;}
.section3 h2{text-align:center; font-family: 'DINPro-Light'; font-size:2em;}
.section3 .td{position:relative; width:calc(100% / 3); font-size:0.9em;}
.section3 .txt{line-height:1.2em; top:44%;}
.section3 .td:nth-child(1){padding-right:20px;}
.section3 .td:nth-child(2){padding:0 10px;}
.section3 .td:nth-child(3){padding-left:20px;}
.section3 .td:nth-child(1) .txt{position:absolute; z-index:10; left:56%; right:20px;}
.section3 .td:nth-child(2) .txt{position:absolute; z-index:10; left:58%; right:10px;}
.section3 .td:nth-child(3) .txt{position:absolute; z-index:10; left:58%;}
.section3 img{position:relative; width:100%;}
.section3 ul{margin-left:1.5em; padding-top:15px;}
.section3 li{list-style:disc; color:#f00; padding-bottom:5px;}
.section3 li a{color:#f00; display:block;}
.section3 li a:hover{color: #fff;}

/*section4*/
.section4 ul{margin:2.5em 4em 0em;}
.section4 ul li{list-style:disc; padding-bottom:0.8em;}
.section4 a{color:#f00; text-decoration:underline;}
.section4 a:hover{color: #fff; text-decoration:none;}
.section4 p{padding:0.5em 1.5em;}
.section4 p img{vertical-align:middle;}

/*footer*/
footer{text-align:center; padding-bottom:5em;}


/**********************resize******************************/

@media screen and (max-width:1680px){
	/*header*/
	.header .slogan{width:50%;  top:8%;}
	.header .slogan ul{padding-top:2.5em;}
}

@media screen and (max-width:1366px){	
	/*header*/
	.header .vimg{padding:5% 0%; margin-right:2%;}
	.header .slogan{width:55%;}
	.header .slogan h1{ font-size:2.5em;}
	.header .slogan h2{font-size:1.6em;}
	.header .slogan h3{font-size:1.3em;}
}

@media screen and (max-width:1024px){
	.container{width:90%;}
	
	/*header*/
	.header{background:none;}
	.header .vimg, .header .logo{display:none;}
	.header .vimgs{display:block;}
	.header .slogan{width:90%; position:relative; z-index:10;  top:0%; left:0%; padding:5%; text-align:center;}
	.header .slogan h1, .header .slogan h2, .header .slogan h3, .header .slogan ul{width:100%;}
	
	/*section2 / .section3*/
	.section2 .td, .section3 .td{width:100%; display:table; margin-bottom:30px;}
	
}

@media screen and (max-width:640px){	
 .container{margin:3em auto 3em;}
 .section1 .td{width:100% !important; padding:0; display:table;}
 .section3{padding-bottom:0em;}
}