/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2021. 5. 18, 오후 2:03:50
    Author     : 국민영
*/

@font-face{
    font-family: NotoSansCJKkr;
    src: url(/font/NotoSansCJKkr-Regular.otf);
}

body{
    font-family: NotoSansCJKkr;
    width: 100%;
}
        
/* loading page */
.login_wrap{
    width: 100%;
}
body.loading{
    background-color: #6600ff; 
    color: #fff;
    text-align: center;
}
.loading_page{ 
    width: 100%;
    height: 100%;
    position: relative;
    font-weight: bold;
}
.loading_container{
    /*margin-top: 50%;*/
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 50%);
    letter-spacing: -3px;
    font-size: 32px;
    font-weight: bold;
}
.loading_txt{
    display: block;
    height: 3px;
    font-size: 38px;
    font-weight: 500;
    font-weight: bold;
}
.copyright{
    position: fixed;
    bottom: 0;
    padding-bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    width: 100%;
}
.login_top{
    width: 100%;
}
.welcome_txt_logo{
    text-align: center;
    text-decoration: none;
    color: #222;
    position: relative;
    left: 50%;
    top: 42px;
    transform: translateX(-50%);
    display: inline-block;
    font-size: 42px;
    font-weight: bold;
    letter-spacing: -2px;
}

/* login page */
#login{
    width: 100%;
    margin: auto;
}

#login .login_wrap{
    width: 100%;
    font-size: 33px;
    margin: auto;
}
.login_wrap .login_top{
    width: 100%;
}
.login_wrap .login_top img{
    float: left;
    width: 60px;
    position: absolute;
    top: 40px;
    left: 20px;
    padding-right: 40px;
}
.login_wrap .login_top>p{
    height: 100px;
    line-height: 75px;
    text-indent: 1em;
    border-bottom: 1px solid #707070;
    padding-left: 60px;
}

.login_container{
    width: 92%;
    margin: auto;
}

.login_container .login_con_logo{
    width: 100%;
    margin-top: 320px;
    text-align: center;
    margin-bottom: 180px;
}
.login_container .login_con_logo>span{
    display: block;
    color: #6600FF;
    font-size: 40px;
}
.login_container .login_con_logo .title{
    font-size: 68px;
    font-weight: bold;
    letter-spacing: -2px;
}

.login_con_form{
    width: 100%;
}
.login_con_form>form{
    width: 100%;
}
.login_con_form input{
    width: 100%;
    padding: 34px 0;
    margin-bottom: 30px;
    font-size: 34px;
    text-indent: 1em;
    border-radius: 2px;
    border: 1px solid #DAD8D8;
}

.login_con_form .login_con_form_btn{
    border: none;
    background-color: #6600FF;
    color: #fff;
    font-weight: bold;
    font-size: 38px;
}

.login_con_href.txt{
    width: 100%;
}
.findPw_txt{
    width: 90%;
    margin: auto;
    padding: 10px;
    color: #444;
    font-size: 36px;
}

.login_con_href{
    width: 72%;
    margin-top: 180px;
    margin: auto;
}
.login_con_href>a{
    display: inline-block;
    width: 32%;
    text-align: center;
    text-decoration: none;
    color: #707070;
    margin: auto;
    font-size: 28px;
}

/* popup */
#id01 .w3-modal-content{
    width: 80%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    padding-top: 60px;
    padding-bottom: 40px;
}
.w3-container{
    padding: 50px;
}
.w3-container h2{
    font-size: 46px;
    font-weight: bold;
    text-align: center;
}
.w3-container p{
    text-align: center;
    padding: 50px 10px;
}
.w3-container a{
    display: block;
    text-decoration: none;
    width: 90%;
    margin: 20px auto;
    background-color: #6600FF;
    padding: 30px;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

.check.terms{
    margin-bottom: 20px;
}
.check.terms #agree_check01,#agree_check02{
    width:40px; float: left; padding: 10px; position: relative; top: 14px;
}
.check.terms label{
    width:80%;
}
.check.terms label>span{
    color: #999;
}
.check.terms.second{
    margin-bottom: 40px;
}

.check.terms .policy{
    line-height: 30px;
    padding-top: 20px;
}
.join{width:300px;padding:80px 0 30px;text-align:center;margin:0 auto;}
.join>form>span{color:#006cff;font-size:1.8em;font-weight:500;display:inline-block;margin-bottom:30px;letter-spacing:-3px;font-family: 'Noto Sans KR', sans-serif;}
.join .join_box{height:auto;text-align:left;margin-bottom:10px;}
.join .join_box span{font-size:0.75em;color:#ff0000;}
.join h2{font-size:1.8em;margin:20px 0;}
.join input{padding:15px 10px;margin-top:5px;width:100%;}
.error_msg{display:inline-block;width:100%;font-size:30px;color:#ff0000;text-align:left;padding-bottom: 30px;text-indent:1em;}

.top_bar{width:100%;text-align:center;position:relative;background:#fbfbfb;border-bottom:1px solid #eee;position:fixed;}
.top_bar img{width:23px;opacity:0.5;position:absolute;left:10px;top:15px;}
.top_bar span{display:inline-block;padding:15px;font-weight:300;}

.terms:after{display:block;content:'';clear:both;}
.terms label{width:150px;float:left;}
.policy{float:right;font-size:0.8em;text-decoration: underline;color:#777;cursor:pointer;}
.pol_con{width:96%;height:200px;overflow-y: scroll;border:1px solid #eee;padding:10px;font-size:0.9em;background:#fbfbfb;margin:10px 2%;}
.pol_con h4, .pol_con h2, .pol_con h5{font-size:0.9em;font-weight:bold;}
.pol_con h2{font-size:1em;}

.join .check{position:relative;margin:5px 0;}
.join .check input[type="checkbox"] {display: none;}
.join .check input[type="checkbox"] + label{display: inline-block;width: 18px;height: 18px;background: #ffffff;cursor: pointer;border: 1px solid #c3c3c3;}
.join .check input[type="checkbox"] + label span {position: absolute;left: 25px;display: block;top: 0;font-size: 0.85em;font-weight:normal;color:#999;}
.join .check input[type="checkbox"]:checked + label {background: url(/images/icons/check.png) #006cff no-repeat center/cover;border: 1px solid #006cff;}

.pop_wrap{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:500;display:none;background:rgba(0,0,0,0.8);overflow-y:auto;}
.pop_wrap > div{display:table;width:100%;height:100%;table-layout:fixed}
.pop_wrap > div > div{display:table-cell;width:100%;vertical-align:middle}
.player .pop_data{position:relative;margin:0 auto;padding:30px;width:1000px;height:700px;background:#fff;box-sizing:border-box;text-align:left;}
.pop_data>p{font-size:20px;color:#e60023;margin-top:5px;}
.player .btn_pop_close{display:inline-block;background:#eee;padding:5px 10px;border-radius:5px;font-size:0.9em;margin-top:20px;}