@media (max-width:1440px) { /* 맥북 */
    
}

@media (max-width:1024px) { /* 태블릿 */
    /* index */
    #main { height:auto; padding:100px 0; }
    #main ul { padding:40px; margin-top: 80px; width: 94%; }
    #main form { flex-direction: column; }
    #main form input[type="text"],
    #main form select { width: 300px; }
    #main form input[type="text"],
    #main form div { margin-bottom: 10px; }
    .custom-select:after { right:20px; }
    #main form input[type="submit"],
    #main form input[type="button"] { width: 300px; }
    .form-step { flex-direction: column;}

    /* emotion */
    #emo article div { width: 300px; }

    #emo article ul { width: 280px;  }
    #emo article ul li label { width: 28px; font-size:16px;  }
}

@media (max-width:768px) { /* 태블릿 */
    /* index */
    #main { padding:60px 0; }
    #main h2 { font-size:114px; margin-top: 40px; }
    #main p { font-size:16px; margin-top: -20px; }
    #main ul { padding:20px; font-size:16px; margin-top: 20px;  }
    #main ul li { word-break: keep-all; }
    #main form { margin-bottom: 0; }
    #main form input[type="text"],
    #main form div { margin-bottom: 10px; }
    .custom-select:after { right:20px; }
    #main form input[type="submit"], #main form input[type="button"] { width: 300px; margin-bottom:20px; }

    footer { height: 60px; font-size:14px; }
    
    /* common */
    .sv { height: 200px; }

    /* emotion */
    #emo article { flex-direction: column; padding:0; height: 100vh; justify-content: center; }
    #emo article div { width: 600px; text-align: center; margin:0 auto; }
    #emo article ul { flex-direction:column; width:40px; height:480px; margin:60px auto; }
    #emo article ul li label { width: 40px; font-size:18px;  }
    
    /* expression */
    #exp h2 { font-size:22px; }
    #exp article img { width: 500px; height: 380px; }
    #exp article ul { width: 500px; }
}

@media (max-width:480px) { /* 모바일 */
    /* index */
    header .wrap { font-size:20px; }
    #main { padding:30px 0; }
    #main h1 { top:14px; left:3%; }
    #main h1 img { height: 24px; }
    #main h2 { font-size:100px; margin-top: 40px; }
    #main p { font-size:14px; margin-top: -20px; }
    #main ul { padding:10px; font-size:14px; margin-top: 40px;  }
    #main form { margin-bottom: 40px; }
    #main form input[type="text"],
    #main form select,
    #main form input[type="submit"] { font-size:14px; }
    #main form input[type="text"],
    #main form div { margin-bottom: 14px; }
    
    footer.fl { font-size:13px; padding:0 3%; display: block; padding:20px 0; height:auto; }
    footer span { display: block; margin-top: 4px; margin-left: 0; }
    
    /* common */
    .sv h2 { font-size:32px; }

    /* emotion */
    #emo article div { width: 100%; font-size:14px; line-height:1.6; }
    #emo article ul { height:auto; margin:20px auto; }
    #emo article ul li label { font-size:14px; line-height:32px;   }
    #emo article:last-of-type { height:auto; }
    
    /* expression */
    #exp h2 { font-size:20px; word-break: keep-all; padding-left:3%; padding-right: 3%; } 
    #exp article img { width: 100%; height: 70vw; }
    #exp article ul { width: auto; }
    #exp article:last-of-type { height:auto; }
    
}