﻿#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;
    }
#distancePic p{
    padding:10px 0 0;
    font-size:20px;
    margin:0;
}
div#testQABox{display:none;}
.boxs{display:none;}
.boxs.show{display:block;}
.boxs .testPhoto{
    display:block;
}
    .boxs .testPhoto img,
    .boxs .answerPhoto img{
        max-width:100%;
        max-height:100%;        
    }

/*-----------------------------------------------------------
    Media Device Size
-----------------------------------------------------------*/
/* 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:595px){
    #mainBox h1.title{
        text-align:left;
        font-size:25px;
        padding-left:20px;
        padding-right:58px;
    }
    /*h1.title a#soundBtn{
        right:52px;
    }*/
    /*#mainBox h1.title a#goHome{
        line-height:40px;
    }
        #mainBox h1.title a#goHome img{
            height:100%;
        }*/
}
/* i5 - landscape */
@media screen and (max-width:568px){
}
/* i8 Plus 414*/
@media screen and (max-width:480px){
    #mainBox h1.title{
        /*text-align:left;
        font-size:25px;
        padding-left:20px;
        padding-right:58px;*/
    }
        #mainBox h1.title span.paragraph{
            /*display:block;*/
        }
    #mainBox h1.title a#goHome{
        /*line-height:70px;*/
    }
}
@media screen and (max-width:455px){
    #mainBox h1.title{
        font-size:24px;
        padding-left:10px;
    }
}
@media screen and (max-width:428px){
    #mainBox h1.title{
        font-size:23px;
        padding-left:5px;
    }
    /*h1.title a#soundBtn{
        right:51px;
    }*/
}
@media screen and (max-width:392px){
    #mainBox h1.title{
        font-size:22px;
        padding-left:2px;
    }
    /*h1.title a#soundBtn{
        right:50px;
    }*/
}
/* i8 */
@media screen and (max-width:375px){
    #mainBox h1.title{
        padding-left:20px;
    }
        #mainBox h1.title span.paragraph{
            display:block;
        }
        /*#mainBox h1.title a#goHome{
            line-height:64px;
        }
            #mainBox h1.title a#goHome img{
                height:auto;
            }*/
}
@media screen and (max-width:368px){
    /*h1.title a#soundBtn{
        right:58px;
    }*/
    /*#mainBox h1.title a#goHome{
        line-height:66px;
    }
        #mainBox h1.title a#goHome img{
            height:auto;
        }*/
}
/* S5 */
@media screen and (max-width:360px){
    /*#mainBox h1.title{
        font-size:24px;
        padding-left:5px;
    }
        #mainBox h1.title a#goHome{
            line-height:42px;
        }
        #mainBox h1.title img{
            height:100%;
            width:auto;
        }*/
}
/* i5 */
@media screen and (max-width:320px){    
    /*#mainBox h1.title{
        font-size:22px;
        padding-left:2px;
    }
        #mainBox h1.title a#goHome{
            line-height:40px;
        }*/
}
@media screen and (max-width:296px){
    #mainBox h1.title{
        padding-left:3px;
        padding-right:114px;
    }
}