/****LOGO****/
.container h1 img{
    display:block;
    height:60px;
    margin-top:-13px;
    float:left;
}

/****WIN10LOGO****/
img.windows-logo{
    margin-top:5px;
}

/********updatebox********/

#upgrade-section .table-cell.leftbox {
        
        padding: 0px !important;
        margin:0px !important;
    }

/********win7+8 > win10********/

.updatebox1{
    width:88%;
    height:;
    display:block;
    float:left;
    /*background-color: #FFCC17;*/
    background-image: url(../img/yellow.jpg);
    background-position: 25% -25%;
    overflow: hidden;
    margin:0;
    padding:3% 5%;
    
    margin:2% 1% 1% 1%;
    border:4px solid #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:#FFFFFF !important;
    -moz-box-shadow:0px 0px 16px -3px rgba(20%,20%,40%,0.5);
    -webkit-box-shadow:0px 0px 16px -3px rgba(20%,20%,40%,0.5);
    box-shadow:0px 0px 16px -3px rgba(20%,20%,40%,0.5);
}

.updatebox1:hover{
    border:4px solid #FC9400;
    background-color: #FC9400;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;

    }


.updatebox1 h4{
    font-size: 25px;
    
    font-weight: bold;

}


.updatebox1 img.img1{
    width:20%;
    height:20%;
    transition: transform .5s ease-in-out;
    float:left;
    margin-right:8%;
    margin-left:2%;

}

.updatebox1:hover img.img1{
    transform:scale(1.15);
}





/********win10 clean********/

.updatebox3{
    width:88%;
    height:;
    display:block;
    float:left;
    /*background-color: #FFCC17;*/
    background-image: url(../img/blue.jpg);
    background-position: 25% -25%;
    overflow: hidden;
    margin:0;
    padding:3% 5%;
    
    margin:1%;
    border:4px solid #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:#FFFFFF !important;
    -moz-box-shadow:0px 0px 16px -3px rgba(20%,20%,40%,0.5);
    -webkit-box-shadow:0px 0px 16px -3px rgba(20%,20%,40%,0.5);
    box-shadow:0px 0px 16px -3px rgba(20%,20%,40%,0.5);
    
}


.updatebox3:hover{
    border:4px solid #06599b;
    background-color: #FC9400;
    

    }

.updatebox3 img.img3{
    width:20%;
    height:20%;
    -webkit-transition: -webkit-transform .5s ;
    -ms-transition: -ms-transform .5s;
    transition: transform .5s;
    float:left;
    margin-right:8%;
    margin-left:2%;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

.updatebox3:hover img.img3{
    transform:scaleX(-1);
}

.updatebox3 h4{
    font-size: 25px;
    margin-top:2%;
    font-weight: bold;

}






/********faq pink********/

.updatebox4{
    width:88%;
    height:;
    display:block;
    float:left;
    /*background-color: #FFCC17;*/
    background-image: url(../img/pink.jpg);
    background-position: 25% -25%;
    overflow: hidden;
    margin:0;
    padding:3% 5%;
    
    margin:1% 1% 2% 1%;
    border:4px solid #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:#FFFFFF !important;
    -moz-box-shadow:0px 0px 16px -3px rgba(20%,20%,40%,0.5);
    -webkit-box-shadow:0px 0px 16px -3px rgba(20%,20%,40%,0.5);
    box-shadow:0px 0px 16px -3px rgba(20%,20%,40%,0.5);
    
}


.updatebox4:hover{
    border:4px solid #940692;
    background-color: #FC9400;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;

    }

.updatebox4 img.img4{
    width:20%;
    height:20%;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    -ms-transition: -ms-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    float:left;
    margin-right:8%;
    margin-left:2%;

}

.updatebox4:hover img.img4{
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}

.updatebox4 h4{
    font-size: 25px;
    margin-top:2%;
    font-weight: bold;

}





/********dlframe********/
.dlframe{
    width:100%;
    display:block;
    background-color: #0078d7;
    color:#FFFFFF;
    clear:both;
    font-family: 'Segoe Pro Light', 'Segoe UI Light', 'Segoe Light', Segoe, Arial, sans-serif;
    
}
.dlframe h3{
    font-size:50px;
    font-family: 'Lato', sans-serif;
    color:yellow;
    
}

.dashed {
    border-top:1px dashed #ffffff;
    margin:20px 0;
}

.dlbox{
    width:1200px; 
    display:block;
    padding:25px 0;
    margin:0 auto;
    background-color: #0078d7;


}

.dlframe p.sub01{
    font-size:20px;
    margin-top:-15px;
    
}

.dlframe p.sub02{
    font-size:25px;
    margin-bottom: -30px;
    text-decoration: underline;
    color: white;
    font-weight: 600;       
}  
.dlframe p.sub03{
    color: yellow;
    font-weight: 600;      
}

.dlbg{
    width:100%; 
    display:block;
    margin:0 auto;
    background-color: #FFFFFF;
    color:#666;
}

.dlbg table{
    width:100%; 
    
}
.dlbg table tr{
    background-color: #FFFFFF;
}
.dlbg table tr:nth-child(2n+1){
    background-color: #F5F5F5;  
}

.dlbg table tr:hover, .tr01:hover,.tr02:hover{
    background-color: #e1fcfa;
}

.dlbg table td{
    text-align:center;
    height:50px;
    border-right:1px solid #eaeaea;
    width:32%;
}
.dlbg table td:last-child{
    border-right:none;
}

.tr01{
    background-color: #FFFFFF;
    transition:.3s background-color;
}

.tr02{
    transition:.3s background-color;
}

.td-title1 {
    background-color: #00bcf2;
    color: #FFF;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #FFF;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size:20px;
}
.td-title2 {
    background-color: #00bcf2;
    color: #FFF;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size:20px;
}
.td-text1 {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #EAEAEA;
    color:#666666;
    width:32%;
}
.td-text2 {
    height:50px;
}
.td-text3 {
    
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #EAEAEA;
    height:50px;
    color:#666666;
    width:32%;
}
.td-text4 {
    
}



.title1 {
    font-size: 20px;
    line-height: 25px;
    color: #00bcf2;
    padding-top:15px;
}
tr td a {
    color: #666666;
    font-size:18px;
    position: relative;
    text-decoration: none;
    
}
tr td a:hover {
    color: #00bcf2;
    left: 1px;
    position: relative;
    top: 1px;
    text-decoration: underline;
}

a.dllink{
    width:100px;
    height:24px;
    display:inline-block;
    /*background-color: #00bcf2;*/
    background-image: url(../img/color.png);
    background-position: 0 -25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    padding:5px 0px;
    color:yellow;
    font-size:18px;
    text-decoration: none !important;
    font-weight:bold;
    transition:.5s background-color;
    -moz-box-shadow:0px 0px 12px -2px rgba(20%,20%,40%,0.5);
    -webkit-box-shadow:0px 0px 12px -2px rgba(20%,20%,40%,0.5);
    box-shadow:0px 0px 12px -2px rgba(20%,20%,40%,0.5);
    border:2px solid #FFFFFF;
    
}

a.dllink:hover{
    /*background-color: #0078d7;*/
    background-image: url(../img/color.png);
    background-position: 0 -140px;
    font-size:18px;
    color:#ffffff;
    
}




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


}

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



#upgrade-section .table-cell.grey-background{
    padding:0 !important;
    padding-left:45px !important;
    padding-right:45px !important;
}


/********dlframe********/
.dlframe{
    width:100%;
    display:block;
    background-color: #0078d7;
    color:#FFFFFF;
    clear:both;
    
}
.dlframe h3{
    font-size:50px;
    
}

.dashed {
    border-top:1px dashed #ffffff;
    margin:20px 0;
}

.dlbox{
    width:95%; 
    display:block;
    padding:2.5%;
    margin:0 auto;
    background-color: #0078d7;
    

}
}


@media screen and (max-width: 800px) {
/****LOGO****/
#upgrade-section .table-cell img{

    width:15%;
}

.container h1 img{
    display:none;
}
/****LOGO:手機板****/
img.contoso-mobile {
    display:block;
    height:40px !important;
    margin-top:7px !important;
    
}
/****WIN10LOGO:手機板****/
img.windows-logo{
    position:static !important;
    float:left !important;
}


/***********SHADOW****************/
#top-shadow{
    height:55px;
}





/********win7+8 > win10********/

.updatebox1{
    width:87%;
    height:;
    display:block;
    float:left;
    /*background-color: #FFCC17;*/
    background-image: url(../img/yellow.jpg);
    background-position: 25% -25%;
    overflow: hidden;
    margin:0;
    padding:3% 5%;
    
    margin:1% 1% 0% 1%;
    border:4px solid #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:#FFFFFF !important;
    font-size:20px;
    text-align:left;
    
}

.updatebox1:hover{
    border:4px solid #FC9400;
    background-color: #FC9400;
    

    }


.updatebox1 h4{
    font-size: 33px;
    margin-top:-20px;
    font-weight: bold;

}


.updatebox1 img.img1{
    width:1%;
    height:1%;
    transition: transform .5s ease-in-out;
    float:left;
    margin-right:8%;
    margin-left:2%;

}

.updatebox1:hover img.img1{
    transform:scale(1.15);
}





/********win10 clean********/

.updatebox3{
    width:87%;
    height:;
    display:block;
    float:left;
    /*background-color: #FFCC17;*/
    background-image: url(../img/blue.jpg);
    background-position: 25% -25%;
    overflow: hidden;
    margin:0;
    padding:3% 5%;
    
    margin:1%;
    border:4px solid #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:#FFFFFF !important;
    
}


.updatebox3:hover{
    border:4px solid #06599b;
    background-color: #FC9400;
    

    }

.updatebox3 img.img3{
    width:20%;
    height:20%;
    -webkit-transition: -webkit-transform .5s ;
    -ms-transition: -ms-transform .5s;
    transition: transform .5s;
    float:left;
    margin-right:8%;
    margin-left:2%;

}

.updatebox3:hover img.img3{
    transform:scaleX(-1);
}

.updatebox3 h4{
    font-size: 33px;
    margin-top:0%;
    text-align:left;
    font-weight: bold;

}






/********faq pink********/

.updatebox4{
    width:87%;
    height:;
    display:block;
    float:left;
    /*background-color: #FFCC17;*/
    background-image: url(../img/pink.jpg);
    background-position: 25% -25%;
    overflow: hidden;
    margin:0;
    padding:3% 5%;
    
    margin:0% 1% 2% 1%;
    border:4px solid #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:#FFFFFF !important;
    text-align:left;
}


.updatebox4:hover{
    border:4px solid #940692;
    background-color: #FC9400;
    

    }

.updatebox4 img.img4{
    width:20%;
    height:20%;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    -ms-transition: -ms-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    float:left;
    margin-right:8%;
    margin-left:2%;

}

.updatebox4:hover img.img4{
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}

.updatebox4 h4{
    font-size: 33px;
    margin-top:0%;
    font-weight: bold;

}




/********dlframe********/

.dlframe{
    text-align: center;
    
    
}

.dlframe h3{
    text-align: center;
    margin-bottom:15px;
    font-size:38px;
    margin-top:15px;
}

.dlframe .dlbg{
    margin-bottom:10px;
    
}


.dlframe p.sub01{
    font-size:20px;
    margin-top:-15px;

    
}

.dlframe p.sub02{
    font-size:25px;
    margin-bottom: -30px;
    text-decoration: underline;
    
}

.dlframe p.sub03{
    line-height:1.5;
}

.dlframe p.sub03 {
    margin-bottom:10px;
}

}


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

.updatebox1{
    width:95%;
    display:block;
    margin:0;
    padding:15px 0;
    margin:2%;
    font-size:16px;
}

.updatebox3,.updatebox4{
    width:95%;
    display:block;
    margin:0;
    padding:15px 0;
    margin:2%;
    margin-top:0%;
    
}


img.img1,img.img2,img.img3,img.img4{
    width:15% !important;
    height:15% !important;
    font-size:18px;
    margin-right: 5% !important;
    margin-left:5% !important;
    
}


.updatebox1 h4{
    font-size:27px;
    margin-top:-2.5%;
}

.updatebox3 h4, .updatebox4 h4{
    font-size:27px;
    margin-top:.5%;
}




}

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


.updatebox1,.updatebox2,.updatebox3,.updatebox4{
    width:94%;
    height:98%;
    display:block;
    margin:2%;
    padding:30px 0;
    text-align: center;
    background-position: 0 0;
}

img.img1,img.img2,img.img3,img.img4{
    width:30% !important;
    font-size:18px;
    margin-left:35% !important;

}

.updatebox1 h4,.updatebox3 h4,.updatebox4 h4{
    clear:left;
    width:94%;
    height:98%;
    display:block;
    margin:2%;
    padding:30px 0 0 0;
    text-align: center;
    background-position: 0 0;
}





}



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

.updatebox1,.updatebox2,.updatebox3,.updatebox4{
    width:94%;
    height:98%;
    display:block;
    margin:2%;
    padding:30px 0;
    text-align: center;
    background-position: 0 0;
}

img.img1,img.img2,img.img3,img.img4{
    width:40% !important;
    font-size:18px;
    margin-left:30% !important;

}

.updatebox1 h4,.updatebox3 h4,.updatebox4 h4{
    clear:left;
    width:94%;
    height:98%;
    display:block;
    margin:2%;
    padding:30px 0 0 0;
    text-align: center;
    background-position: 0 0;
}


a.dllink{
    width:50%;
    
    
}

.dlframe{
    text-align: center;
    
    
}

.dlframe h3{
    text-align: center;
    margin-bottom:15px;
    
    margin-top:15px;
}

.dlframe .dlbg{
    margin-bottom:10px;
    
}


.dlframe p.sub01{
    font-size:20px;
    margin-top:-15px;

    
}

.dlframe p.sub02{
    font-size:25px;
    margin-bottom: -30px;
    text-decoration: underline;
    
}

.dlframe p.sub03{
    line-height:1.5;
}

.dlframe p.sub03 {
    margin-bottom:10px;
}
}
/*
@media screen and (max-width: 330px) {

.updatebox1,.updatebox2,.updatebox3,.updatebox4{
    width:95%;
    height:95%;
    display:block;
    margin:0;
    padding:2.5% 0;
    margin-left:1%;
    margin-top:2%;
    text-align: center ;
}

img.img1,img.img2,img.img3,img.img4{
    width:140px !important;
    font-size:18px;
    float:left;
    margin-top:15px;

}

a.btn01,a.btn02,a.btn03,a.btn04{
    display:block;
    float:left;
    width:200px ;
    font-size:19px;
    padding:20px;
    margin-left:9%;
}


}
*/