/**
* CMS Cascading Style Sheets
* File Name : login.css
* Description : 로그인 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Date : 2022.05.31
* Update : 2022.05.31
*/
@font-face {font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal;}

body { background-color: #f2f2f2;}
#wrap { position: relative; height: 100%;}
#wrap::before { position: absolute; top: 0; left: 0; width: 100%; height: 70%; content: ""; display: block; background: #0086ff url(/project/design/com/login.png) no-repeat center top;}
#container { height: 100%; display:flex; flex-direction: column; justify-content: space-between;}
#contents { z-index: 1000; flex: 1; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 30px; padding-top: 200px;}
.login { width: 700px; background-color:rgba(255, 255, 255, 0.95); border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); text-align: center; box-sizing: border-box; padding:40px 60px; position: relative;}
.login .p_desc1 { font-family: 'GmarketSansBold'; font-weight: 900; color: #11142d; font-size: 36px;}
#contents h1 { color: #0086ff; font-size: 24px; font-weight: 800; margin-top: 10px;}
.login .p_desc2 { color: #939393; margin:0 0 30px 0;}

.login ul { display: flex; flex-direction: column;}
.login ul > li { display: flex; align-items: center; width: 100%; height: 60px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; transition: all .3s ease; padding-left: 20px; box-sizing: border-box; gap: 20px; margin-bottom: 20px;}
.login ul > li > i { font-size: 24px; color: #ddd;}
.login ul > li > input { border: 0; width: 100%; height: 100%; color: #11142d; font-size: 20px; font-family: 'Lato', sans-serif; font-weight: 900;}
.login ul > li > input::placeholder { color: #ddd; font-family:"Pretendard"; font-size: 18px; font-weight: 500;}
.login ul > li > input:focus { outline: 0;}
.login ul > li:hover { border:1px solid #11142d; box-shadow:0 10px 20px rgba(0,0,0,0.05);}
.login ul > li:hover i { color: #11142d;}
.login .btn_login { width: 100%; height: 60px; border:none; background-color: #11142d; border-radius: 5px; color: #fff; font-size: 20px;font-weight: 800; cursor: pointer; transition: all .3s ease;}
.login .btn_login:hover { background-color: #0086ff; box-shadow:0 10px 20px rgba(0,0,0,0.05);}
.login .check_box { display: flex; padding: 20px 10px 0 0; gap: 40px; align-items: center; justify-content:space-between;}
.login .check_box > p a { color: #666; text-decoration: underline !important;}
.login .check_box > p a:hover { color: #11142d; }
.login .check_box > p { display: flex; align-items: center; gap: 10px;}
.login .check_box > p input[type="checkbox"] { -webkit-appearance: none; position: relative; width: 22px; height: 22px; cursor: pointer; outline: none !important; border: 1px solid #e9e9e9; border-radius: 3px; background: #f7f7f7;}
.login .check_box > p label { color: #666; transform: translate(0, -1px);}
.login .check_box > p input[type="checkbox"]::before { content: "\2713"; position: absolute; top: 50%; left: 50%; overflow: hidden; transform: scale(0) translate(-50%, -50%); line-height: 1;}
.login .check_box > p input[type="checkbox"]:hover { border-color: rgba(170, 170, 170, 0.5);}
.login .check_box > p input[type="checkbox"]:checked { background-color: #0086ff; border-color: rgba(255, 255, 255, 0.3); color: #fff;}
.login .check_box > p input[type="checkbox"]:checked::before { border-radius: 3px; transform: scale(1) translate(-50%, -50%)}

#footer { justify-content: center;}
#footer .copyright {padding-right: 0;}