@charset "utf-8";

/* layout CSS Document */
#wrap{position:relative; min-width:350px;width:100%;height:100%;right:0;z-index:300;overflow: hidden; background: #fff;}

.loading {position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);z-index: 500;display: none;} 
.loading_bg{background: rgb(255 255 255 / 70%);width: 100%;height: 100%;position: fixed;top:0;left: 0;display: none;z-index: 499;}

/* ---- 헤더 ---- */
#header{position:absolute; top:0; width:100%; height:70px; z-index:300; overflow: hidden; min-width:350px; border-bottom: 1px solid #ddd;}
.header_menu div{cursor: pointer;}
#header .logo{position: absolute;top: 6px;left: 50px; z-index: 20; width: 190px; height: auto; cursor: pointer;}
#header .logo img{width: 100%; height: auto;}
#header .beta{color: #00AEEF; position: absolute;top: 20px;left: 247px;}  
#header .header_btn{width: 125px; height: 38px; line-height: 38px; background: #0C4DA2; border-radius: 20px; color: #fff; text-align: center; font-weight: 500;} 
#header .login, #header .logout{position: absolute;top: 18px; right: 190px; background: #0C4DA2;}
#header .join, #header .mypage{position: absolute;top: 18px; right: 50px; background: #555;}
#header .logout, #header .mypage{display: none;}

    @media (max-width: 920px) {
        #header .logo{left: 30px;}
        #header .beta{left: 225px;}  
        #header .login, #header .logout{right: 170px;}
        #header .join, #header .mypage{right: 30px;}
    }

    @media (max-width: 720px) {
        #header{height:68px;}
        #header .logo{left: 20px; width: 170px; margin-bottom: 10px;}
        #header .beta{left: 195px; top:17px;}
        #header .header_btn{width: 110px; height: 34px; line-height: 34px; border-radius: 17px;}   
        #header .login, #header .logout{right: 140px;}
        #header .join, #header .mypage{right: 20px;}
    }
    @media (max-width: 550px) {
        #header{height:63px;}
        #header .logo{width: 140px; top:10px}
        #header .beta{left: 165px; top:16px; font-size: 12px;}
        #header .header_btn{width: 80px; height: 25px; line-height: 24px; border-radius: 13px; font-size: 12px; top:20px}   
        #header .login, #header .logout{right: 110px;}
    }
    @media (max-width: 420px) {
        #header .logo{width: 110px; top:15px;}
        #header .beta{left: 135px; top:20px;}
        #header .header_btn{width: 70px;} 
        #header .login, #header .logout{right: 100px;}
    }


/* ---- 푸터 ---- */
#footer{width:100%; overflow: hidden; min-width:350px; background:#1E3046; color: #eee; font-weight: 300; padding: 50px 0 70px; line-height: 1.8;}
#footer .flogo, #footer .finfo{float: left;}
#footer .flogo{width: 160px; height: auto; margin-right: 70px;}
#footer .flogo img{width: 100%; height: auto;}
.fcontact{border-bottom: 1px solid rgba(200,200,200, .5); padding-bottom: 20px;}
.fcontact ul{overflow: hidden; line-height: 2;}
.fcontact li{ float: left; font-size: 18px; font-weight: 500;}
.fcontact li.fcall::after{content: '|'; margin: 0 15px; font-weight: 200; font-size: 15px;}
.fcontact li span{font-weight: 300; color: #00AEEF;}
.ftxt{ padding-top: 20px; font-size: 14px;}
.copyright{margin-top: 20px;}
.flink{float: right;}
.familySite{width: 220px; height: 40px; border-radius: 5px; padding-left: 10px; background:rgba(255,255,255, .1) url('../../_ZRS/images/common/icon_select.png') no-repeat calc(100% - 5px) 50% / 10px auto; color: #fff; margin-bottom: 20px; border: 0; cursor: pointer; }
.familySite option{background: #1E3046;}
.flink p{font-size: 16px; text-align: right; line-height: 2; font-weight: 500; cursor: pointer;}

    @media (max-width: 1200px) {
        .familySite{width: 150px;}
    }
    @media (max-width: 1050px) {
        #footer .flogo{width: 140px; margin-bottom: 10px;}
        #footer .flogo, #footer .finfo{float: none;}
        .copyright{margin-bottom: 20px;}
        .familySite{width: 200px;}
        .flink{float: none;}
        .flink p{text-align: left;}
    }
    @media (max-width: 550px) {
        #footer .flogo{width: 120px;}
        .fcontact li{font-size: 16px;}
        .fcontact li.fcall::after{font-size: 13px;}
        .fcontact p{font-size: 14px;}
        .ftxt{font-size: 12px;}
        .flink p{font-size: 14px;}
        .familySite{display: none;}
    }