@font-face {
    font-family: 'HyundaiSansKR';
    src: url('../fonts/HyundaiSansTextKRLight.eot');
    src: url('../fonts/HyundaiSansTextKRLight.eot?#iefix') format('embedded-opentype'),
                url('../fonts/HyundaiSansTextKRLight.woff2') format('woff2'),
                url('../fonts/HyundaiSansTextKRLight.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    }
    
    @font-face {
    font-family: 'HyundaiSansKR';
        src: url('../fonts/HyundaiSansTextKRRegular.eot');
        src: url('../fonts/HyundaiSansTextKRRegular.eot?#iefix') format('embedded-opentype'),
                url('../fonts/HyundaiSansTextKRRegular.woff2') format('woff2'),
                url('../fonts/HyundaiSansTextKRRegular.woff') format('woff');
        font-weight: 200;
        font-style: normal;
    }
    
    @font-face {
    font-family: 'HyundaiSansKR';
        src: url('../fonts/HyundaiSansTextKRRegular.eot');
        src: url('../fonts/HyundaiSansTextKRRegular.eot?#iefix') format('embedded-opentype'),
                url('../fonts/HyundaiSansTextKRRegular.woff2') format('woff2'),
                url('../fonts/HyundaiSansTextKRRegular.woff') format('woff');
        font-weight: 300;
        font-style: normal;
    }
    
    @font-face {
    font-family: 'HyundaiSansKR';
        src: url('../fonts/HyundaiSansTextKRRegular.eot');
        src: url('../fonts/HyundaiSansTextKRRegular.eot?#iefix') format('embedded-opentype'),
                url('../fonts/HyundaiSansTextKRRegular.woff2') format('woff2'),
                url('../fonts/HyundaiSansTextKRRegular.woff') format('woff');
        font-weight: 400;
        font-style: normal;
    }
    
    @font-face {
    font-family: 'HyundaiSansKR';
        src: url('../fonts/HyundaiSansTextKRMedium.eot');
        src: url('../fonts/HyundaiSansTextKRMedium.eot?#iefix') format('embedded-opentype'),
                url('../fonts/HyundaiSansTextKRMedium.woff2') format('woff2'),
                url('../fonts/HyundaiSansTextKRMedium.woff') format('woff');
        font-weight: 600;
        font-style: normal;
    }
    
    @font-face {
    font-family: 'HyundaiSansKR';
        src: url('../fonts/HyundaiSansTextKRBold.eot');
        src: url('../fonts/HyundaiSansTextKRBold.eot?#iefix') format('embedded-opentype'),
                url('../fonts/HyundaiSansTextKRBold.woff2') format('woff2'),
                url('../fonts/HyundaiSansTextKRBold.woff') format('woff');
        font-weight: 700;
        font-style: normal;
    }
    
    @font-face {
    font-family: 'HyundaiSansKR';
        src: url('../fonts/HyundaiSansHeadKRBold.eot');
        src: url('../fonts/HyundaiSansHeadKRBold.eot?#iefix') format('embedded-opentype'),
                url('../fonts/HyundaiSansHeadKRBold.woff2') format('woff2'),
                url('../fonts/HyundaiSansHeadKRBold.woff') format('woff');
        font-weight: 900;
        font-style: normal;
    }
    
    
    *, *::before, *::after {
        box-sizing: border-box;
    }
    
      
    body {
        font-family: 'HyundaiSansKR', sans-serif;
    }
    
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      letter-spacing: -0.02em;
      font-size: 12px;
    }
    
    body.bg {
        font-family: 'HyundaiSansKR', sans-serif;
        background: url(/images/bg.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        height: 100vh;
        max-height: 100%;
        background-attachment: fixed;
    }
    
    .L_bg {
        padding: 18vh 38vw 0;
    }
    
    .L_bg a {
        text-decoration:none;
    }
    
    
    
    
    
    
    .L_bg h2{
        color: #fff;
        font-size: 3.2rem;
        font-weight: bold;
        margin: 0;
        margin-bottom: -3px;
    }
    
    .L_bg h1{
        color: rgba(255,255,255,0.7);
        font-size: 2.1rem;
        font-weight: bold;
        margin: 0;
        margin-bottom: 10%;
    }
    
    .group {
        position:relative;
        margin-bottom:30px;
    }
    
    input {
        box-sizing: border-box;
        font-size:1.6rem;
        padding:16px 10px 6px 5px;
        width:100%;
        border:none;
        border-bottom:1px solid rgba(255, 255, 255, 0.3);
        background-color: transparent;
        color: #fff;
    }
    
    input:focus { 
        outline:none; 
    }
    
    /* LABEL ======================================= */
    label {
        color:#fff;
        font-size:18px;
        font-weight:normal;
        position:absolute;
        pointer-events:none;
        left:5px;
        top:10px;
        transition:0.2s ease all;
        -moz-transition:0.2s ease all;
        -webkit-transition:0.2s ease all;
    }
    
    /* active state */
    .group input:focus ~ label, input:valid ~ label {
        top:-10px;
        font-size:15px;
        font-weight: bold;
        color:#fff;
    }
    
    /* BOTTOM BARS ================================= */
    .bar { 
        position:relative; 
        display:block; 
        width:100%; 
    }
    
    .bar:before, .bar:after {
        content:'';
        height:2px;
        width:0;
        bottom:1px;
        position:absolute;
        background:#fff;
        transition:0.2s ease all;
        -moz-transition:0.2s ease all;
        -webkit-transition:0.2s ease all;
    }
    
    .bar:before {
        left:50%;
    }
    
    .bar:after {
        right:50%;
    }
    
    /* active state */
    input:focus ~ .bar:before, input:focus ~ .bar:after {
        width:50%;
    }
    
    /* HIGHLIGHTER ================================== */
    .highlight {
        position:absolute;
        height:60%;
        width:100px;
        top:25%;
        left:0;
        pointer-events:none;
        opacity:0.5;
    }
    
    /* active state */
    input:focus ~ .highlight {
        -webkit-animation:inputHighlighter 0.3s ease;
        -moz-animation:inputHighlighter 0.3s ease;
        animation:inputHighlighter 0.3s ease;
    }
    
    /* ANIMATIONS ================ */
    @-webkit-keyframes inputHighlighter {
        from { background:#fff; }
        to { width:0; background:transparent; }
    }
    
    @-moz-keyframes inputHighlighter {
        from { background:#fff; }
        to { width:0; background:transparent; }
    }
    
    @keyframes inputHighlighter {
        from { background:#fff; }
        to { width:0; background:transparent; }
    }
    
    button {
        width:100%;
        background-color: #002c5f;
        border: none;
        color:#fff;
        padding: 13px 0;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 1.4rem;
        font-weight: bold;
        cursor: pointer;
    }
    
    button:hover {
        background-color: #fff;
        color:#002c5f;
        font-weight: bold;
    }
    
    .d_text {
        display: inline-flex;
        width: 100%;
        margin: 0;
    }
    
    .d_text p {
        font-size: 0.8rem;
        color: #fff;
        margin: 0;
        margin-top: 3%;
        margin-right: 8%;
    }
    
    .d_text a {
        width: 100%;
        text-decoration:none;
        color: #fff;
    }
    
    .d_text a:hover {
        color:#00aad2;
    }
    
    .L_area {
        margin-top: 8%;
    }
    
    
    .L_area h3 {
        color: #a3a3a3;
        font-size: 2rem;
        font-weight: bold;
        margin: 0;
        padding: 2vh 0;
    }
    
    .L_area p {
        font-size: 1.25rem;
        color: #a3a3a3;
        margin: 0;
        line-height: 1.8;
        white-space: nowrap;
    }
    
    
    .footer_box {
        padding: 12px 22px;
        background-color: black;
        text-align: center;
        font-size: 0.625rem;
        color: #fff;
        font-weight: 200;
        letter-spacing: 0.03rem;
        bottom: 0px;
        right: 0;
        left: 0;
        position: fixed;
    }
    
    .footer_logo {
        width: 22px;
        position: relative;
        top: 2px;
        margin-right: 5px;
    }
    
    
    
    
    
    
    
    
    
    
     /* MODAL PASSWORD */
    
     .modal {
        background: rgba(63, 63, 63, 0.97);
    }
    
    .modal_box {
        display: none;
        position: fixed;
        z-index: 905;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
    }
    
    .modal_box .modal {
        border-radius: 5px;
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.25);
        margin: 15% auto;
        max-width: 450px;
        color: #fff;
    }
    
    .modal_header {
        padding: 12px 25px;
        display: block;
        background-color: #002C5F;
        color: white;
        font-size: 14px;
        font-weight: 300;
        border-radius: 5px 5px 0 0;
        position: relative;
        background: linear-gradient(to left, rgba(31, 31, 31, 0.9) 33%, rgba(0, 0, 0, 0.77));
        font-size: 1.3rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .modal_body {
        padding: 15px 18px 5px 18px;
    }
    
    .modal_footer {
        display: inline-block;
        width: 100%;
        padding: 18px 25px;
        text-align: right;
    }
    
    
    .modal_box_password {
        display: none;
        position: fixed;
        z-index: 900;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
        overflow: auto;
    }
    
    .modal_box_password .modal {
        max-width: 550px;
        border-radius: 5px;
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.25);
        margin: 7% auto;
    }
    
    .modal_close_password {
        padding: 6px 12px;
        color: #fff;
        float: right;
        font-size: 19px;
        font-weight: bold;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .modal_box_password .modal_body {
        padding: 30px 25px 5px 25px;
    }
    
    button.trans_btn {
        font-size: 1.25rem;
        padding: 5px 25px;
        cursor: pointer;
        letter-spacing: -0.03em;
        margin-left: 10px;
        border-radius: 4px;
        min-width: 95px;
        min-height: 30px;
        width: 24%;
        border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
        background-color: rgba(163, 163, 163, 0.18) !important;
        color: white !important;
        float: right;
    }
    
    
    .modal_box_password .input_content span {
        color: #fff;
        font-size: 1.25rem;
    }
    
    .modal_box_password .row {
        margin-bottom: 26px;
    }
    
    
    .modal_confirm .modal_header {
        background: linear-gradient(to left, rgba(31, 31, 31, 0.9) 33%, rgba(0, 0, 0, 0.77));
        font-size: 1.3rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 12px 18px;
    }
    
    .modal_confirm .modal_close {
        padding: 6px 12px;
        color: #fff;
        float: right;
        font-size: 19px;
        font-weight: bold;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .modal_confirm .modal_footer {
        text-align: right;
        padding: 15px 14px;
    }
    
    .modal_confirm .modal_body{
        font-size: 1.25rem;
    }
    
    
    
    
    
    
    
    
    @media only screen and (max-width: 600px),(max-height:430px)  {
      
        h2{
            font-size: 2.4rem !important;
        }
        .L_bg h1{
            font-size: 1.7rem !important;
            margin-bottom: 10px !important;
        }
       
        .L_area p{
            width: 100%;
            font-size: 13px !important;
            white-space: inherit;
        }
       
        label{
            font-size: 17px;
        }  
    }
    
    

    @media only screen and (max-width: 1450px),(max-height:430px) {
        .L_bg{
            padding: 16vh 32vw 0;
        }
    }
    
    
    @media only screen and (max-width: 1024px),(max-height:430px) {
        .L_bg{
            padding: 16vh 28vw 0;
        }
    }
    
    @media only screen and (max-width: 768px),(max-height:430px) {
        .L_bg{
            padding: 16vh 22vw 0;
        }
    }
    
    @media only screen and (max-width: 620px){
        .L_bg{
            padding: 14.5vh 5vw 0;
        }
        button{
            font-size: 1.2rem !important;
        }
    }