/* layout */
* {font-family: 'Noto Sans KR', sans-serif;}
body{width: 100%;font-size: 62.5%;}
a{color: #fff;text-decoration: none;}

#wrap{width: 100%;height: 100%;}
#header{width: 100%;position: relative;}
#header .header-inner{max-width: 1000px;margin: 0 auto;padding: 0 20px;position: relative;}
#header .header-inner::after{content: '';display: block;clear: both;}
#container{width: 100%;}

/* header */
#header h1{float: left;background: url(../images/logo.png) no-repeat 0 0;background-size: 100%;width: 170px;height: 20px;margin-top: 30px;transition: all 0.3s 0s ease;}
#header h1 a{display: block;text-indent: -9999px;overflow: hidden;width: 170px;height: 20px}


/* container */
/* join 폼 */
#container .join{margin: 0 auto;margin-top: 100px;width: 100%;max-width: 280px;padding: 30px;background-color: #fff;border-radius: 10px;box-shadow: 0 15px 30px 0 rgba(0,0,0,0.3);margin-bottom: 30px;}
#container .join table{width: 280px;}
#container .join caption{text-align: center;font-size: 1.5rem;margin-bottom: 30px;color: #333;}

#container .join table tr{width: 280px;text-align: left;}
#container .join table tr th{width: 280px;float: left;font-size: 0.8rem;color: #333;text-indent: 10px;margin-bottom: 10px;box-sizing: border-box;text-align: left;}
#container .join table tr td{width: 280px;float: left;margin-bottom: 20px;}
#container .join table tr td input{width: 280px;height: 35px;border-radius: 30px;border: 1px solid #d1d1d1;box-sizing: border-box;text-indent: 10px;}
#container .join table tr td input::placeholder{color: #d1d1d1;text-indent: 10px;}
#container .join table tr td input:focus{outline: none;}

#container .join .joinBtn{margin: 50px 0 20px 0;}
#container .join .joinBtn button{cursor: pointer;display: inline-block;width: 280px;height: 50px;line-height: 50px;color: #fff;background-color: #50A7C2;border: 1px solid #50A7C2;border-radius: 30px;font-size: 1rem;text-align: center;box-sizing: border-box;transition: all 0.3s 0s ease-in-out;}
#container .join .joinBtn button:hover{color: #50A7C2;background-color: #fff;border: 1px solid #50A7C2;}
#container .join .joinBtn button:focus{outline: none;}
#container .join p{font-size: 0.8rem;}
#container .join p a{color: #333;padding-left: 5px;font-weight: 400;}
#container .join p:nth-of-type(2) a{color: #50A7C2;}

/* project delete 팝업 커스텀 */
.swal2-popup{border-radius: 10px !important;}

/* 이용약관 */
#container .join table tr .service_t{text-indent: 0px;color: #50A7C2;}
#container .join table .service_content{}
#container .join table .service_content .area_content{overflow-y: auto; overflow-x: hidden;width:95%;height: 120px;padding: 10px;line-height: 1.7;font-size: 0.7rem;color: #747474;
    border-top: 1px solid #d1d1d1;border-bottom: 1px solid #d1d1d1;background-color: #fbfafa;margin-bottom: 5px;}
#container .join table .service_content .agree_content{font-size: 0.8rem;color: #747474;}
#container .join table .service_content .agree_check{width: 20px;height: 15px;}

/* pc */
@media (min-width: 1024px) {
    /* layout */
    #wrap{font-size: 1.2rem;}

    /* header - 탑메뉴 */
    #header .topMenu{float: right;color: #fff;display: flex;box-sizing: border-box;margin-top: 25px;}
    #header .topMenu dd a{display: block;color: #333;font-size: 0.8rem;text-align: center;padding: 10px 20px;border: 1px solid #333;border-radius: 50px;font-weight: 600;transition: all 0.3s 0s ease;}
    #header .topMenu dd a:hover{opacity: 0.7;border: 1px solid #333;transform: translateY(5px);}
    #header .topMenu dd.last{margin-left: 20px;}
    #header .topMenu dd.self a{padding: 0 !important;background-color: transparent !important;border: none !important;width: 40px;}
    #header .topMenu dd.self img{width: 20px;vertical-align: middle;padding-top: 8px;}

    /* 모바일 메뉴 */
    .button_container{display: none;}
    .overlay{display: none;}
}

/* tablet */
@media (max-width: 1023px) {
    /* layout */
    #wrap{font-size: 1rem;}
    #header .header-inner{padding: 0 20px;}

    /* header - 탑메뉴 */
    #header .topMenu{display: none;}

    /* 모바일 메뉴 */
    .button_container{z-index: 42;position: fixed;right: 20px;top: 25px;width: 28px;height: 27px;cursor: pointer;transition: opacity .25s ease;}
    .button_container:hover{opacity: .7;}
    .button_container.active .top{transform: translateY(11px) translateX(0) rotate(45deg);background: #fff;}
    .button_container.active .middle{opacity: 0;background: #fff;}
    .button_container.active .bottom{transform: translateY(-11px) translateX(0) rotate(-45deg);background: #fff;}
    .button_container span{position: absolute;left: 0;top: 0;background: #111;width: 100%;height: 5px;border: none;cursor: pointer;transition: all .35s ease;}
    .button_container span:nth-of-type(2){top: 11px;}
    .button_container span:nth-of-type(3){top: 22px;}

    .overlay{opacity: 0;z-index: 41;position: fixed;left: 0;top: 0;width: 100%;height: 0%;background: #111;visibility: hidden;overflow: hidden;transition: opacity .35s, visibility .35s, height .35s;}
    .overlay.open{opacity: .9;height: 100%;visibility: visible;}
    .overlay.open li{animation: fadeInRight .5s ease forwards;animation-delay: .35s;}
    .overlay.open li:nth-of-type(2){animation-delay: .4s;}
    .overlay.open li:nth-of-type(3){animation-delay: .45s;}
    .overlay.open li:nth-of-type(4){animation-delay: .50s;}
    .overlay.open li:nth-of-type(5){animation-delay: .55s;}
    .overlay.open li:nth-of-type(6){animation-delay: .60s;}
    .overlay.open li:nth-of-type(7){animation-delay: .65s;}
    .overlay.open li:nth-of-type(8){animation-delay: .70s;}
    .overlay .overlay-menu{position: relative;top: 50%;transform: translateY(-50%);height: 70%;font-family: 'Noto Sans KR', sans-serif;font-weight: 400;font-size: 2rem;text-align: center;}
    .overlay .overlay-menu ul{display: inline-block;position: relative;height: 100%;margin: 0 auto;}
    .overlay .overlay-menu ul li{opacity: 0;display: block;position: relative;height: 25%;height: calc(100% / 4);min-height: 50px;}
    .overlay .overlay-menu ul li a{display: block;position: relative;color: #fff;text-decoration: none;overflow: hidden;}
    .overlay .overlay-menu ul li a:hover:after, .overlay .overlay-menu > ul li a:focus:after, .overlay .overlay-menu > ul li a:after{width: 100%;}
    .overlay .overlay-menu ul li a:after{content: '';position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 0%;height: 3px;background: #fff;transition: .35s;}
    @keyframes fadeInRight{
        0%{
            opacity: 0;
            left: 20%;
        }
        100%{
            opacity: 1;
            left: 0;
        }
    }

}