h1{text-indent: 100%; white-space: nowrap; overflow: hidden;}
.exam_box{ width: 100%;  background-color: #b3253d;background-image: url(/images/event/2018/trend_test/pattern.png); font-size:22px; padding-top:40px; padding-bottom:40px;}
.exam_containter{ display: block; max-width:1200px; background-color: #f9ece4; margin: 0 auto; box-shadow: 0px 0px 15px 5px #961e32;padding-bottom:50px; box-sizing: border-box;position: relative;}
.exam_main_visual{ display: block; width: 100%; height:0; padding-top: 53.5%;  background-image: url(/images/event/2018/trend_test/exam_visual.png); position: relative; top: -40px;background-size: contain; }
.exam_rules{ display: block; max-width: 1000px; padding:60px 30px;margin:0 auto;line-height: 2em; font-weight: 500; margin-top:-80px;overflow: hidden;}
.exam_rules h2{font-size: 1.2em; color: #b3253d; font-weight: 700; margin-top: 20px;}
.exam_rules ul{ margin-left:40px;}
.exam_rules ul li{ list-style-type: decimal; list-style-position: outside;}
.exam_rules ul li span{ display: block; font-size:.8em;}
.exam_rules p{margin-left: 15px;}
ul.price  , ul.voucher{margin-left: 0;}
.price li , .voucher li{ list-style-type: none; display: inline-block; width: 50%; float: left;margin-top: 15px;}
.voucher li{width:calc(90%/3); float: left;text-align: center; margin-left: calc(20px*3/2);}
.price a{display: block; color: #333;}
.price a:hover{ color: #b3253d;}
.price img{display: inline-block; width: 200px; height:200px; float:left;margin-top: 15px;}
.price h3{ display: inline-block; width: 250px; font-size: .8em; line-height: 1.6em; font-weight: 600;margin-top: 20px;}
.price p{ display: inline-block; width: 250px; font-size: .7em; line-height: 1.6em; margin-left: 0;font-weight: 400;}
.voucher h3{font-weight: 600;margin-left: 20px;}
.voucher h3 i{ color: #b3253d; }
.sponser{ display: block; width: 100%;  background-color: #333; color: #fff; height: 70px; line-height:1.2em; text-align: center; position: absolute; padding-top: 10px; box-sizing: border-box;}
.sponser span{ font-size: 12px; display: block; color: #999;}

.question_area{ display: block; max-width: 1000px; padding:60px 30px; box-sizing:border-box; margin:0 auto; background-color:#333; text-align: center; color: #fff;line-height: 2.2em;}
.question_area h2{font-size:2em; color:#c5ae7d;font-weight: 500; max-width: 600px; margin: 0 auto;}
.question_area span{ color: #b3253d;display: block;font-size: 1.6em;margin-bottom: 30px;font-weight: 500;}
.question_area strong{ display: block; color:#c5ae7d;font-size:1.6em; margin-bottom:10px;font-weight: 500;}
.question_area p{display: block;width: 60%; margin: 0 auto; margin-top:20px; line-height:1.6em; padding-bottom: 30px; border-bottom: 1px solid #505050;}
.question_img{ display: block; max-width: 60%; margin: 0 auto;height: 0; padding-bottom:40%; overflow: hidden; margin-top:30px;}
.question_img img{width: 100%}
.send { display: inline-block; width: 25%; height: 50px; line-height: 50px; color: #fff;  margin:30px 20px; padding: 0 15px; }
.no{ background-color:#5f5f5f; }
.no:hover{background-color:#454545;}
.fb_color{background-color:#4267b2;}
.fb_color:hover{background-color:#33518d;}
.yes , .back{ background-color:#c5ae7d; }
.yes:hover , .back:hover{background-color:#93815b;}
.start{ display: block; width: 25%; line-height: 50px; height: 50px; text-align: center;background-color: #b3253d; color: #fff; margin: 0 auto; margin-bottom: 50px; }
.start:hover{background-color: #801c2d; }
.start:hover{background-color: #801c2d; }
.question_area i{ display: block;}
.question_area i a{ color:#c5ae7d; text-decoration: underline; }


@media screen and (min-width: 320px) and (max-width: 640px) {
.exam_main_visual{ padding-top: 76%;  background-image: url(/images/event/2018/trend_test/exam_640.png); position: relative; top:0px;background-size: contain; background-repeat: no-repeat;}
.question_img{  max-width: 90%;  padding-bottom:60%; margin-bottom: 20px;}
.voucher li{width:50%; float: left; margin:0;text-align: left;margin-top: 20px;}
.price li {margin-top: 20px;}
.question_area h2{font-size:1.6em;}    
.question_area strong{font-size:1.4em; margin-bottom:0px;}    
.question_area span{ margin-bottom: 10px;}
.start{width: 60%;}
}

@media screen and (min-width: 320px) and (max-width:480px) {
.exam_rules{ margin-top: -50px}
.exam_rules ul li{ line-height: 1.6em;margin-top:20px;}
.voucher li , .price li{width:100%; margin-top:20px; margin: 0 auto;text-align: center;}
.price img{margin: 0 auto;float: none;margin-top:15px;}
.question_area p{width: 90%;margin-bottom: 20px;}
.send {  width: 80%;  margin:10px; }
.no , .yes{  width:25%;  }
.sponser{ height: 90px;}    
}

/* ¤À¨É¤¸¥ó begin */
.fb_share { position:absolute; right:0 ;height:20px; z-index:50; margin-top: -35px;}
.fb_base {margin-top: 5px;}
div#fb_like {margin-top: 2px;}
@media screen and (max-width:660px) {
    .fb_share { right: 15px; margin-top: -35px; }
}
/* ¤À¨É¤¸¥ó end */