@font-face {
    font-family: 'DINPro-Regular';
    src: url("https://event.msi.com/msifonts/fonts/DINPro-Regular.otf") format("opentype");
    src: url("https://event.msi.com/msifonts/fonts/DINPro-Regular.eot?#iefix") format("embedded-opentype"), url("https://event.msi.com/msifonts/fonts/DINPro-Regular.woff") format("woff"), url("https://event.msi.com/msifonts/fonts/DINPro-Regular.ttf") format(" truetype"), url("https://event.msi.com/msifonts/fonts/DINPro-Regular.svg") format("svg");
}


/* CSS -- reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: "DINPro-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif, 'cwTeXHei', 'Microsoft JhengHei';
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    color: #FFF;
}


/*color*/

.red {
    color: #FF0000;
}

.gary {
    color: #898989;
}

.white {
    color: #FFF;
}

.darkgray {
    color: #282828;
}

.pbt {
    padding-bottom: 5%;
}

.lightblue {
    color: rgba(0, 222, 255, 1.00);
}

.yellow {
    color: #fed100;
}



/*AMDMSI*/

#msiAmd {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0px auto ;
    font-family: "DINPro-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    background-color: #000;
    
}

.contWrap {
    display: block;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto; text-align: center;
}


/*text setting*/

#msiAmd h2 {
    font-size: 48px;
    line-height: 50px;
    text-transform: uppercase;  
    font-weight: 800;
    font-family: 'DINPro-Bold', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

#msiAmd h3 {
    font-size: 35px;
    color: #FFF;
    line-height: 32px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'DINPro-Bold', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

#msiAmd p {
    font-size: 18px;font-weight: normal;
    line-height: 1.5;font-family: "DINPro-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    
    color: #FFF;
}

#msiAmd .tsection {
    display: block;
    width: 100%;
    margin: 20px 0;
}


/*KV*/
#eventKv {width: 100%; position: relative;}



/*kvTxt*/

 #kvTxt {width: 100%; display: block; padding: 5%; background: url("https://storage-asset.msi.com/event/2020/nb/alpha15_redePromo/images/text-bg.jpg")no-repeat top  center; background-size: cover;}
#kvTxt .gift{font-size: 28px;line-height: 28px; color: #FFF;}


/*note*/
 #msiAmd .noteT {font-size: 18px; line-height: 1.5;  color: #6b6b6b;}
  #msiAmd .noteT a {  color: #6d6d6d; text-decoration: underline;}
   
#msiAmd .noteT a:hover {text-decoration: none; color: #FFF;}


/*banner02*/
.bannerAlpha {width: 100%; display: block; margin: 0 auto; padding: 0;position: relative;}
        .bannerAlpha  .bgImg {position: relative; width: 100%; z-index: 0; max-width: 1800px; margin: 0 auto;}
        
 .flexBox {display: flex; flex-direction: row; justify-content: space-between;
        }
 .flex_item {width: 48%; padding: 5% 1%;}


/*topBtn*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99999;
  font-size: 18px;
  border: none;
  outline: none;
  background-color:#a0a2a3;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}


/*Game Bundle*/

 #gameBundle {display: block;width: 100%;  background: url("https://storage-asset.msi.com/event/2020/nb/alpha15_redePromo/images/bg-texture.jpg")no-repeat top  center; background-size: cover; position: relative; z-index: 5;padding-top:10%; margin-top: 8%;}
.bundleBox {display: block; width: 100%; max-width: 1600px; margin: 0 auto; padding: 50px 20px;}
.choseT {font-size: 80px; line-height: 50px; color: #363636; font-weight: bold;}

.msiLaptop {width: 50%; display: block;  margin: 0 auto; position: absolute; left: 25%; top:-10%; z-index: 10;}

#gameBundle  .period {display: block; width: 100%; max-width: 1200px; text-align: right;margin: 0 auto; color: #FFF;}
.amdTxt {display: block;width:100%;max-width: 1200px; margin: 0 auto;  font-size: 38px; color: #FFF; text-align: center; position: relative;}
        .amdTxt::before { position: relative; content: "" ;  display: inline-block;width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #ff0000; margin-right: 10px; }
        .emphasize{font-size: 50px; font-weight: bold;}

.gameflex{
    display: table; width: 100%; max-width: 1200px; margin: 0 auto; border-spacing: 10px;
}
.game_item{
    border: #FFF 1px solid; background: #252525; display: table-cell; vertical-align: middle; text-align: center;}
.w40{
    width: 40%; 
}
.w60{
    width: 60%;
}
.gameinFlex{
    display: flex; justify-content: center; align-items: center;
    
}
 .game_item figcaption.amdGT {position: absolute; bottom:10px; width: 90%; left: 5%; font-size: 25px; color: #FFF; font-weight: bold;}
        .game_item figure {position: relative;}





/*Alpha15 Laptop*/


     .laptopFlex {display: flex;justify-content: center;width: 100%; max-width: 1600px; margin: 0 auto; align-items:center;flex-direction: row;}
        .flex_item{display: block; }
        
        .nbTitle {font-size: 31px; line-height: 35px; color: #9bbb2d; font-weight: bold;}
         .technBox {display: block; width: 100%; margin: 20px auto; border:1px solid #9bbb2d; padding: 5% 2%; position: relative;}
    
        .learnBtn {display: block; width: 100%; max-width: 320px ; text-align: center; position: absolute; right:2%; bottom: -10%;}
        .learnBtn a { font-size: 21px; line-height: 21px; font-weight: bold;width:  100%; display: block;border: 1px solid #9bbb2d; padding: 10px 20px; color: #9bbb2d; background-color:#000; transition:  all  ease-in .5s; text-decoration: none;}
        .learnBtn a:hover {color: #FFF; background-color:#9bbb2d; }



/*terms*/

 #terms {width: 100%; margin: 0 auto; background: url("https://storage-asset.msi.com/event/2020/nb/alpha15_redePromo/images/bg-texture.jpg")no-repeat top center; background-size: cover; padding: 5%;}
        .termBox {display: block; width: 100%; background-color: #fff;margin: 2% auto; padding: 5%; color: #000; text-align: left;}
        ul.termsList ,ul.dotlist {display: block; width: 100%; list-style: none;}
        ul.termsList li {list-style: upper-roman; text-align: left;}
        
        ul.dotlist li {list-style: disc;text-align: left;}
#terms a {text-decoration: underline; color: #387cf9;}
#terms a:hover {text-decoration: none; color: #000;}


/*how to Redeem*/

#msiAmd .modal-content { background-color: #000; color: #FFF;}
#msiAmd .modal-content p {color: #FFF;}
#msiAmd .modal-content h4{font-size: 25px; line-height: 25px; font-weight: bold;}
#msiAmd .closeBtn {background-color: #000; border: 1px solid #ccc;outline: none;}
#msiAmd .closeBtn:hover {color: #FF0000; background-color: #FFF;}
.stepT {color: #FF0000; font-size: 21px; font-weight: 500;}
#msiAmd .modal-footer {text-align: center;}
.modal-header .close {color: #FFF; display: block; border: #fff 1px solid; padding: 3px; border-radius: 5px;}
/*addBtn*/

            .btnFlx {display: flex; justify-content: center; width: 100%; margin: 0 auto; max-width: 1200px;}
            .btnItem_A {width: 50%;}
            .alpha15_btn { display: block; width: 100%; max-width: 300px; margin: 60px auto 0;}
            .alpha15_btn a {font-size: 21px;
    line-height: 21px;
    padding: 20px 10px;
    font-weight: bold; text-align: center;
    width: 100%;
    display: block;
    border: 1px solid #FF0000;
    color: #FFF;
    background-color: transparent;
    transition: all ease-in .5s;
    text-decoration: none;}
            .alpha15_btn a:hover {background-color: #FF0000;}
            .btnItem {width: 50%; margin: 0 auto;text-align: center;display: block;}
            .btnItem  div {display: inline-block;}
.modal-body a {color: #CCC; text-decoration: none;}
.modal-body a:hover {background-color: #FF0000;}
/*RedeemBtn*/

  .redeemBtn {display: block; width: 100%; max-width: 200px; margin: 60px auto 0; text-align: center;}
        .redeemBtn a { font-size: 21px; line-height: 21px; padding: 20px 10px; font-weight: bold;width:  100%; display: block;border: 1px solid #FF0000;  color: #FFF; background-color: #FF0000; transition:  all  ease-in .5s; text-decoration: none;}
        .redeemBtn a:hover {color: #FFF; background-color:transparent; }       
   
 /*chart*/
        #chart {width: 100%;  max-width: 1600px; padding: 0; margin: 0 auto;}
        .chartbox {display: block;width: 100%; position: relative; margin: 0 auto;}
.chartbox img {z-index: 0;}
        .chartbox .txBox {position: absolute; width: 80%; left: 10%; top:10%;text-align: center;z-index: 5;}
   

/*RWD*/

@media (max-width:1500px){
    
     .msiLaptop {position: relative; left:  auto; bottom:  auto; text-align: center; margin: 0 auto 20px; }
    
    
}

@media (max-width:960px){

#msiAmd h2 {font-size: 30px; line-height: 35px;}
  
   
   
.flexBox {flex-direction: column; justify-content: center;}
.flex_item {width: 95%; margin: 0 auto; padding: 2% 1%;}  
   
    .amdTxt {font-size: 21px; line-height: 30px; margin-bottom: 20px;}
    
    .btnItem a {font-size: 16px; line-height: 18px;}
    .learnBtn{position: relative; right: auto; bottom: auto; margin: 0 auto; text-align: center;}
    .laptopFlex{flex-direction: column; flex-wrap: wrap;}
    .gameflex {display: block; width: 95%; margin: 0 auto; }
    .game_item {display: block; margin: 20px auto;}
    .w40, .w60{width: 100%; }
    .btnFlx {flex-direction: column;}
    .btnItem_A {width: 80%; margin: 0 auto; text-align: center;}
    .btnItem {width: 80%; margin: 0 auto; text-align: center;}
    .redeemBtn {margin: 20px auto ;}
    .msiLaptop {width: 90%; margin: 0 auto;}
    .chartbox .txBox {
    position: relative;
    width: 90%; margin: 0 auto;
    left: auto;
    top: auto;
    text-align: center;
       }
    
    
    #gameBundle .period {text-align: center;}
    
    .game_item figcaption.amdGT {font-size: 21px; line-height: 25px; }
    .choseT {font-size: 21px; }
    
    }