body {
    margin:0;
}

.login-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #F6F7F9;
    padding: 100px 48px;
}

.login-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 83px;
    margin-bottom: 24px;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.login-logo-img {
	cursor: pointer;
	width: 190px;
}

.login-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    max-width: 1460px;
    width: 100%;
}

.login-tit {
    color: #4B4B4B;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 2.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.login-input {
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 24px !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    border-radius: 24px !important;
    border: 1px solid #D9DCDF !important;
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 2.4rem;
    box-sizing: border-box;
  	padding: 12px 24px;  
}
.login-input:focus {
    outline: none !important;
    border-bottom: 1px solid #C2C2C2;
}
.login-input::placeholder { 
    color:#75787B;
}
.login-input:focus::placeholder {
    color: transparent;
}

.login-input-box div {width: 100%;}
.login-input-box >input {
	height: 38px;
}
.login-auto-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 4.8rem;
}
.login-auto-btn {
    width: 20px;
    height: 20px;
    border: 1px solid #C2C2C2;
    margin-right: 1rem;
}
.login-auto-text {
    color: rgba(194, 194, 194, 0.85);
    font-size: 16px;
    font-weight: 500;
}

input[type=checkbox]{
	display:none;
}

input[type=checkbox] + label{
	cursor:pointer;
	color: #666;
	font-size: 16px;
	font-weight: 500;
}

input[type=checkbox] + label > span{
	vertical-align: middle;
	padding-left: 5px;
}

input[type=checkbox] + label:after{
	position: absolute;
}

input[type=checkbox] + label:before{
	content: " ";
	display: inline-block;
	width: 21px;
	height: 21px;
	line-height: 24px;
	margin: -2px 8px 0 0;
	text-align: center; 
	vertical-align: middle;
	border: 1px solid #C2C2C2;
	margin-right: 1rem;
	border-radius: 8px;
 }

input[type=checkbox]:checked + label:before{
	content:"\2714";
	color: #fff;
	background-color:#FF4A53;
	width: 24px;
	height: 24px;
	margin-right: 0.8rem;
	border-radius: 8px;
	border: 0px;
}

.login-btn {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: 12px 24px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 24px;
    background: #D9DCDF;
    margin-bottom: 1.5rem;
    color: #75787B;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    border: 0px;
    cursor: pointer;
}

.login-menu-tag {
	cursor: pointer;
}

.login-menu-tag:hover {
	text-decoration: underline;
}

.login-hr {
    width: 100%;
    border: none;
    border-top: 1px double rgba(75, 75, 75, 0.50);
    color: #333;
    overflow: visible;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
    height: 1px;
}

.login-hr:after {
    background: #fff;
    content: 'OR';
    padding: 0 6px;
    position: relative;
    color: rgba(75, 75, 75, 0.50);
    text-align: center;
    top: -12px;
}

.login-menu {
    color: #75787B;
    font-size: 15px;
    font-style: normal;
    line-height: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1.5;
}

.login-menu-margin {
    margin: 0 16px;
}

@media (max-width:1280px) {
	.login-container {
        width: 100%;
    }
}

@media (max-width:768px) {
    .login-logo {
        width: 132px;
        padding-bottom: auto;
        margin-left: 1rem;
    }

    .login-logo-img {
        width: 170px;
    }

    .login-tit-text {
        font-size: 28px;
    }
    .login-auto-box {
        margin-bottom: 3.5rem;
    }
    .login-btn {
        margin-bottom: 1.5rem;
        padding: 10px 10px;
    }
    .login-menu {
        font-size: 16px;
    }
    
    input[type=checkbox] + label{
		font-size: 14px;
	}

	.login-menu-tag {
		font-size: 14px;
	}
}

.login_wrap{
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
	border-radius: 20px;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    width: 100%;
    background-color: #FFFFFF;
}
.login_wrap h5{text-align:center; margin-bottom:50px;color: #4B4B4B;font-size: 32px;font-weight: 800;}
.login_wrap h5:after{display:none;}
.login_wrap .sns_login{padding-bottom:30px; border-bottom:1px dashed #caccd6;}
.login_wrap > div li{margin-bottom:15px;list-style-type: none;}
.login_wrap > div li a{display:block; padding:25px 20px 25px 90px; border-radius:5px; color:#fff; font-weight:400; font-size: 16px;text-decoration: none;}
.login_wrap .sns_login span {font-size:14px;word-break: keep-all;}
.login_wrap .sns_login li:first-child a{background:#00ce38 url(/static/homepage/images/sns_login01-88b8c7be72a910a04133beb630bda730.png) 35px center no-repeat;}
.login_wrap .sns_login li:nth-child(2) a{color:#3a2020; background:#fae101 url(/static/homepage/images/sns_login02-0bb6930500edce3819e3721ab98d8a2a.png) 35px center no-repeat;}
.login_wrap .sns_login li:last-child a{color:#fff; background:#3760a0 url(/static/homepage/images/sns_login03-c09c46ff85e49c46ff7fe2a05fce4088.png) 40px center no-repeat;}
.login_wrap .normal_login li{border:1px solid #caccd6; border-radius:5px; background:#f8f8f8; text-align:center;}
.login_wrap .normal_login li a{color:#333;}
.login_wrap .normal_login li > span{display:block; margin-bottom:15px;}

@media all and (min-width:768px) {
	.login_wrap{overflow:hidden;}
	.login_wrap > div{min-height:260px;}
	.login_wrap .sns_login{width:50%; padding-right:50px; padding-bottom:0;  border-bottom:0; border-right:1px dashed #caccd6;}
	.login_wrap.login_wrap_normal .normal_login{width:100% !important;}
}

@media all and (max-width:768px) {
	.login_wrap > div li a{padding:15px 20px 15px 90px; font-size: 14px;}
	.login_wrap{display: block; box-shadow: none;}
	.login_wrap h5{ margin-bottom:30px;font-size: 24px;}
}



.login-input-label {font-size: 17px; font-weight: 600; line-height: 1.5; color: #4D5053}
.login-btn-panel {background: transparent; border: 1px solid #FF4A53; color: #FF4A53;}
.login-input-box > div > img {width: 24px; height:24px; position: absolute; top: 67%; right: 16px; transform: translateY(-50%);}
.normal_login {padding: 64px 440px !important;}
.password-wrapper{position: relative;}
#header-app {display: none;}

@media ( max-width: 1440px ) {
	.normal_login {padding: 48px 24px !important; }
}

@media (max-width:768px) {
	.main-nav-logo-img {width: auto !important;}
	#header-app {display: block;}
	.login-logo {display: none;}
	.login-body{padding: 48px 24px; background-color: #FFFFFF;}
	.login-input-box > div > img {right: 15px;}
	#header-app.gnb-open .gnb-nav{top: 55px !important;}
}


.login-btn.active { background-color: #FF4A53; cursor: pointer; color: #FFFFFF; }
.login-btn.active:hover { background-color: #FF7C80; transition: 0.3s;}
.login-btn-panel:hover {background-color: #FF7C80; color: #FFFFFF; transition: 0.3s;}
@media (max-width: 768px) {.main-footer {display: none;}}