/* All Device */
/* 모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. */

.webinar-join .login-form-area h1 {
    width: 100%;
    font-size: 2em;
    padding: 0;
    margin-bottom: 20px
}

.webinar-join .login-form-area {
    max-width: 560px;
    padding: 8% 0 0;
    margin: auto;
}

.webinar-join .join-text {
    margin-bottom: 35px;
}

.webinar-join .form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 560px;
    margin: 0 auto 100px;
    padding: 8%;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.webinar-join .form input {
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 12px;
    box-sizing: border-box;
    font-size: 14px;
}

.webinar-join .login-agree {
    padding: 10px 0 16px 0;
}

.webinar-join .login-agree::after {clear: both; content: ""; display: block}

.webinar-join .login-agree input[type="checkbox"] {
    margin-top: 3px;
    width: 5%;
    height: auto;
    float: left;
}

.webinar-join .login-agree label {
    float: right;
    width: 94%;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: left
}

.webinar-join .form button {
    text-transform: uppercase;
    outline: 0;
    background: #0080c0;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}

.webinar-join .form button:hover,
.webinar-join .form button:active,
.webinar-join .form button:focus {
    background: #005782;
}

.webinar-join .form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
}

.webinar-join .form .message-tipa {
    margin: 15px 0 0;
    color: #454545;
    font-size: 12px;
}

.webinar-join .form .message a {
    color: #0080c0;
    text-decoration: none;
}

body {
    background: #f0f0f0;
}


/* Mobile Device */
/* 768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다. */

@media all and (max-width:414px) {

    .webinar-join .login-form-area {
        max-width: 92%;
        padding: 8% 0 0;
        margin: 20% auto 0 auto;
    }
}

@media all and (max-width:360px) {

    .webinar-join .join-text {
        letter-spacing: -0.5px;
    }
}


/* Tablet & Desktop Device */
@media all and (min-width:768px) {}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
    /*사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.*/
}

/* Desktop Device */
@media all and (min-width:1025px) {
    /* 사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다. */
    .webinar-join .login-agree label {font-size: 13px;}
}