﻿#mainBox {
    margin: 0 auto;
    text-align: center;
}
#mainBox h1.title{
    margin:0 0 10px 0;
    padding:10px 0;
    font-size:28px;
    color:#fff;
    background-color:#019cdf;
    position:relative;
}
    /*#mainBox h1.title a#goHome{
        display:block;
        position:absolute; top:0; bottom:0; right:0;
        color:#fff;
        font-size:18px;
        background-color:#4ecaff;
        padding:0 10px;
        line-height:54px;
        z-index:2;
    }*/
    #mainBox h1.title a#goHome:hover{
        opacity:.85;
    }
#mainBox h1.title2 {
    margin-bottom: 15px;
}
#distancePic p{
    padding:10px 0 0;
    font-size:20px;
    margin:0;
}
div#testQABox{display:none;}
.boxs {
    display: none;
}
    .boxs.show {
        display: block;
    }
    .boxs .testPhoto .my_picChanges{
        display:inline-block;
        margin:0 auto;
        position:relative;
    }
    .boxs .testPhoto .changePics {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
    }
    .boxs .testPhoto .my_picChanges div#my_picChanges002{
        position:absolute; left:auto; top:0;
    }
    .boxs .testPhoto .my_picChanges,
    .boxs .testPhoto img,
    .boxs .answerPhoto img {
        max-width:100%;
        max-height:100%;
    }

/*-----------------------------------------------------------
    Media Device Size
-----------------------------------------------------------*/
@media screen and (max-width:810px){
    #mainBox h1.title{
        text-align:left;
        padding-left:20px;
    }
}
/* i6 Plus - landscape */
@media screen and (max-width:736px){
    #mainBox h1.title{
        padding:5px 0;
    }
        /*#mainBox h1.title a#goHome{
            padding:0 5px;
            line-height:45px;
        }*/
}
/* i8 - landscape */
@media screen and (max-width:667px){
    #mainBox h1.title{
        font-size:27px;
    }
}/* S5 - landscape */
@media screen and (max-width:640px){
    #mainBox h1.title{
        padding-left:10px;
    }
}
@media screen and (max-width:625px){
    #mainBox h1.title{
        padding-left:5px;
        font-size:26px;
    }
}
@media screen and (max-width:608px){    
    #mainBox h1.title{
        font-size:25px;
        padding-left:20px;
        padding-right:58px;
    }
        #mainBox h1.title span.paragraph{
            display:block;
        }
    /*#mainBox h1.title a#goHome{
        line-height:70px;
    }*/
}
/* i5 - landscape */
@media screen and (max-width:568px){
}
/* i8 Plus 414*/
@media screen and (max-width:414px){
    #mainBox h1.title span.paragraph{
        font-size:20px;
    }
}
@media screen and (max-width:408px){
    #mainBox h1.title span.paragraph{
        font-size:22px;
    }
}
@media screen and (max-width:396px){
    #mainBox h1.title span.paragraph{
        font-size:20px;
    }
}
/* i8 */
@media screen and (max-width:375px){
    #mainBox h1.title{
        padding-left:10px;
    }
}
/* S5 */
@media screen and (max-width:360px){
    #mainBox h1.title{
        font-size:24px;
        padding-left:5px;
    }
}
@media screen and (max-width:335px){
    #mainBox h1.title{
        font-size:23px;
    }
}
/* i5 */
@media screen and (max-width:320px){    
    #mainBox h1.title{
        font-size:22px;
        padding-left:2px;
    }
}