@charset "UTF-8";

/*----------------------------------------------------
------------------------------------------------------*/
@media screen and (max-width: 812px) {
    
    .container { max-width: 100%; padding: 0; }
    .s1 { padding: 20px 20px 0 20px; }
    .code-area { width: 70%; }
    .captcha { width: 55%; }

}


/*----------------------------------------------------
------------------------------------------------------*/
@media screen and (max-width: 480px) {
    
    .pside { width: 50px; right: 15px; bottom: 50px; }
    .pside li {	font-size: 1.8em;	padding: 6px 0; }
    
    .s1 { padding: 15px 10px 0 10px; }
    .s3 { padding: 20px 5%; }
    .s1 h2 { font-size: 2.2em; margin: 0 0 10px 0; }
    .s3 h2 { font-size: 2em; margin: 0 0 10px 0; }    
    
    .code-area { width: 90%; }
    .code-area p { font-size: 1.3em; }
    .code-area p span { font-size: 0.6em; }
    .code { margin: 0 0 30px 0; }
    .captcha { width: 55%; margin: 0 0 30px 0; }
    .captcha-pic { margin: 0 0 0 10px; }
    
    .btn-send a, .btn-send-ok { width: 80%; height: 50px; font-size: 2em; line-height: 50px; }
    .btn-link a { width: 60%; height: 40px;	font-size: 1.2em; line-height: 40px; }
    
    .rule { padding: 30px 5%; }
    .rule h2 { font-size: 2em; }    
    
    /*copyright*/
    .copyright { font-size: 0.7em; padding: 10px 5px; }
        
    .pop { width: 300px; padding: 30px 20px 20px 20px; margin-top: 50px; margin-left: -150px; }
    .pop h2 { font-size: 1.5em; }
    .pop-btn a { width: 100%; font-size: 1.3em; padding: 10px; margin: 30px auto 0 auto; }
    .close { top: -60px; right: 0px; width: 60px; height: 60px; }
    
    .pop { width: 300px; padding: 30px 20px 20px 20px; margin-top: 30px; margin-left: -150px; }
    .pop h2 { font-size: 1.5em; }
    .pop h3 { font-size: 1.5em; }
    .pop-btn a { width: 100%; font-size: 1.5em; padding: 10px;  margin: 30px auto 0 auto; }
    .close { top: -60px; right: 0px; width: 60px; height: 60px; }

}


/*----------------------------------------------------
------------------------------------------------------*/
@media screen and (max-width: 414px) {
    
    .s1 h2 { font-size: 1.9em; }    
    .rule h2 { font-size: 1.7em; }
    
}


/*----------------------------------------------------
------------------------------------------------------*/
@media screen and (max-width: 375px) {
    
    .s1 h2 { font-size: 1.7em; }    
    .rule { padding: 20px 5%; }
    .rule h2 { font-size: 1.5em; }
    
}


/*----------------------------------------------------
------------------------------------------------------*/
@media screen and (max-width: 320px) {
    
    .s1 h2 { font-size: 1.5em; }
    
     /*copyright*/
    .copyright { font-size: 0.5em; padding: 10px 5px; }

}