.main_wrapper{display: block; width:100%;}
.box{display: block; margin: 0 auto;width:100%; overflow: hidden;  background-color:#3527b0; font-size: 20px; color:#333;line-height: 2em;}
.visual{display: block; background-image: url(/images/event/2017/designer_test/exam_01.gif);height: 368px; background-repeat: no-repeat;background-color:#3527b0;background-position: center top;background-size:contain;}
h1{text-indent: 100%;	white-space: nowrap;	overflow: hidden;}
.exam_content{ display: block; max-width: 1100px; margin: 0 auto; padding:40px 20px; box-sizing: border-box; border:10px solid #000;text-align: center;background-color: #f3f3f3;margin-bottom:50px;  }
.exam_content i{ display: block;font-size:1.7em;margin-top: 10px; font-weight:500;}
.exam_content em{display: block; color: #eb7140;font-style:italic;font-weight: 600;  }
.exam_content a{ display:inline-block;  margin-top:30px;border:2px solid #20b37d; color: #20b37d;font-weight:600; margin-left:20px;width:200px;line-height:2.5em;font-size: 18px; margin-bottom: 30px;}
.exam_content a:hover{ background-color: #20b37d; color: #fff;}


.scrollProgress{  width: 40%;  height:20px;  background:#f3f3f3;  z-index: 1; margin: 0 auto; margin-top: 10px; margin-bottom:20px; padding: 2px;border: 2px solid #eb7140;}
.bar {   height: 100%; width:10%; background:#eb7140; z-index:2; }

.select_group{display: block; text-align: center; margin-top:20px; }
.control {  display: inline-block;  position: relative;  padding-left: 30px;  margin-bottom: 15px;  cursor: pointer;  font-size: 1em;  margin: 10px 30px;}
.control input {  position: absolute;  z-index:-1;  opacity: 0;}
.control__indicator { position: absolute;  top: 2px;  left: 0;  height:25px;  width: 25px;  background:#5a5a5a;     border-radius: 15px;}
.control:hover input ~ .control__indicator,.control input:focus ~ .control__indicator {  background: #333;}
.control input:checked ~ .control__indicator {  background: #20b37d;}
.control:hover input:not([disabled]):checked ~ .control__indicator,.control input:checked:focus ~ .control__indicator {  background: #20b37d;}
.control input:disabled ~ .control__indicator {  background: #e6e6e6;  opacity: 0.6;  pointer-events: none;}
.control__indicator:after {  content: '';  position: absolute;  display: none;}
.control input:checked ~ .control__indicator:after {  display: block;}
.control--checkbox .control__indicator:after {  left: 8px;  top: 2px;  width: 7px;  height: 15px;  border: solid #fff;  border-width: 0 2px 2px 0;  transform: rotate(45deg);}
.control--checkbox input:disabled ~ .control__indicator:after {  border-color: #7b7b7b;}


.score{ display: block; width: 30%; float: left;}
.score i{ display: block; width: 180px; height: 180px; border-radius: 50%; margin: 0 auto;background-color: #4a4a4a; color: #eb7140;font-size:2.8em;padding-top: 50px; box-sizing: border-box;}
.score p{font-size: 20px;font-weight: 600;margin-top: 20px;color: #4a4a4a; }
.score i span{ display: block;font-size:20px;line-height:3em;font-weight: 600;}
.analysis{ display: inline-block; width: 60%;text-align: left;}
.analysis em , .analysis h2{ font-size:1.4em;font-weight:600;}
.analysis h2 span{color: #eb7140;line-height: 2em; }
.analysis h3{ font-size:.8em; }
.analysis ul li{ font-size: 16px; list-style-type: decimal; list-style-position:outside; margin-left: 20px;line-height: 1.8em; margin-bottom: 10px;}
a.retry{ color: #333; border-color: #333;}
a.fb{ background-color: #3b5998; color: #fff;border-color: #3b5998;}
a.line{ background-color: #00b900; color: #fff;border-color: #00b900;}
a.retry:hover{ background-color: #333; color: #fff;}
a.fb:hover{ background-color: #1c3a7e; color: #fff;border-color: #1c3a7e;}
a.line:hover{ background-color: #009b00; color: #fff;border-color: #009b00;}

@media (max-width: 1024px) {
     .visual{height:308px; }
    
}


@media (max-width: 768px) {
     .visual{height:230px;background-size:cover; }
    
}

@media (max-width: 660px) {
    .visual {
        background-image: url(/images/event/2017/designer_test/640x300.gif);
        height: 300px;
        background-size: cover;
    }

    .analysis {
        display: inline-block;
        width: 60%;
        text-align: left;
        margin-left: 10%;
    }

    .exam_content a {
        width: 80%;
        line-height: 2.5em;
        margin-left: 0;
    }
}

    @media (max-width: 480px) {
        .visual {
            height: 218px;
        }

        .score {
            float: none;
            width: 100%;
        }

        .analysis {
            width: 100%;
            margin-left: 0;
            margin-top: 20px;
        }

            .analysis em, .analysis h2 {
                text-align: center;
            }
    }

    @media (max-width:414px) {
        .visual {
            height: 190px;
        }
    }

    @media (max-width:375px) {
        .visual {
            height: 162px;
        }
    }

    @media (max-width: 320px) {
        .visual {
            height: 142px;
        }
    }

.red {
    color: #f00;
}
.fb_share {
    position: absolute;
    right: calc(((100vw - 1000px) / 2));
    margin-top: 0px;
}
    
.line_base {
    float: left;
    line-height: 1;
}

@media screen and (max-width:1200px) {
.fb_share {right: 0px;}
}
@media screen and (max-width:768px) {
    .fb_share {right: 5%;margin-top: calc(14vh);}
}
@media screen and (max-width:660px) {
    .fb_share {right: 5%;margin-top: calc(25vh);}
}
@media screen and (max-width:480px) {
    .fb_share {right: 10%;margin-top: 40%;}
}
@media screen and (max-width:375px) {
    .fb_share {right: 6%;margin-top: 38%;}
}
@media screen and (max-width:360px) {
    .fb_share {right: 4%;margin-top: 38%;}
}
@media screen and (max-width:320px) {
    .fb_share {right: -5px;margin-top: 37%;}
}