@media screen and (max-width:900px) {
    /* À£´Ï½º ¼³¹®Á¶»ç ½ºÅ¸ÀÏ */
    .q_intro,
    .q_agree .tit,
    .q_agree .chk {font-size:1.25em;}
    .q_agree .chk input[type="checkbox"] {width:1.25em; height:1.25em;}

    .q_grp .q2 .a {flex-basis:33.3333%;}

    /* ¼ö¸é¼ºÇâ°Ë»ç ½ºÅ¸ÀÏ */
    .q_step2 .h {font-size:2em;}
    .q_intro2,
    .q_agree2 .tit,
    .q_agree2 .chk {font-size:1.25em;}
    .q_agree2 .chk input[type="checkbox"] {width:1.25em; height:1.25em;}
    .q_step2 .btns button {font-size:1.5em;}
    .q_step2 .btns .prev:before,
    .q_step2 .btns .next:before {width:20px; background-size:20px 15px;}

    .q_grp2 .q2 .a {display:block; float:none; min-width:auto; margin-right:0; white-space:normal;}
    .q_grp2 .q2 .a input {width:1em; height:1em;}
    /* °Ë»ç ÆäÀÌÁö ½ºÅ¸ÀÏ ³¡ */

    .ox_chart {display:block;}
    .ox_chart .item {width:auto;}
}

@media screen and (max-width:500px) {
    /* À£´Ï½º ¼³¹®Á¶»ç ½ºÅ¸ÀÏ */
    .q_step .h {font-size:1.375em;}
    .q_intro,
    .q_agree .tit,
    .q_agree .chk {font-size:1.125em;}
    .q_agree .chk input[type="checkbox"] {width:1.125em; height:1.125em;}
    .q_step .btns button, .q_grp .btns button, .q_result .btns button {border-radius:5px; font-size:1.125em;}

    .q_grp .progress .bar,
    .q_grp .progress .val {height:10px; border-radius:5px;}
    .q_grp .progress .val:after {width:20px; height:20px; margin:-5px 0;}
    .q_grp .q .tit {font-size:1em;}
    .q_grp .q .a input,
    .q_grp .q2 .a input {width:1em; height:1em;}
    .q_grp .q:first-child .a label, .q_grp .progress+.q .a label {font-size:0.75em;}
    .q_grp .q .n5 .a:nth-child(odd) label,
    .q_grp .q .n7 .a:nth-child(odd) label {left:-25%; width:150%;}
    .q_grp .q .n5 .a:nth-child(even) label,
    .q_grp .q .n7 .a:nth-child(even) label {color:transparent;}
    .q_grp .q2 .tit {padding:5%; font-size:1em;}
    .q_grp .q2 .lst {flex-direction:column; padding:5%;}

    .q_result .h {font-size:1.375em;}
    .q_result .h2 {font-size:1.125em;}
    .q_result .thank_you p:nth-child(1) {font-size:2em;}
    .q_result .thank_you p:nth-child(2) {font-size:1.125em;}
    .q_result .note p:nth-child(1) {font-size:1.25em;}
    .q_result>p {font-size:1em;}

    /* ¼ö¸é¼ºÇâ°Ë»ç ½ºÅ¸ÀÏ */
    .q_step2 .h {font-size:1.375em;}
    .q_intro2,
    .q_agree2 .tit,
    .q_agree2 .chk {font-size:1.125em;}
    .q_agree2 .chk input[type="checkbox"] {width:1.125em; height:1.125em;}
    .q_step2 .btns button {font-size:1.25em;}

    .q_result2 .score {font-size:1.125em;}
    .q_result2 .mail_to input[type="text"],
    .q_result2 .mail_to button {width:90%; max-width:300px; margin:5px 0;}
    .q_result2 .share_to button {width:50px; height:80px; font-size:11px; letter-spacing:-0.6px;}
    .q_result2 .share_to button:before {width:50px; height:50px; background-size:50px auto;}
    .q_result2 .share_to .twitter:before {background-position:0 -50px;}
    .q_result2 .share_to .band:before {background-position:0 -100px;}
    .q_result2 .share_to .kakaotalk:before {background-position:0 -150px;}
    .q_result2 .share_to .email:before {background-position:0 -200px;}

    .q_grp2 .progress .bar,
    .q_grp2 .progress .val {height:10px; border-radius:5px;}
    .q_grp2 .progress .val:after {width:20px; height:20px; margin:-5px 0;}
    .q_grp2 .q2 .tit {padding:5%; font-size:1em;}
    .q_grp2 .q2 .lst {padding:5%;}
    /* °Ë»ç ÆäÀÌÁö ½ºÅ¸ÀÏ ³¡ */

    .rs_graph {font-size:0.625em; letter-spacing:-1px;}
    .rs_graph li .fr {letter-spacing:0;}
    .rs_graph li .my {margin:0 -5px; border-right-width:5px; border-left-width:5px;}
}