/**
* CMS Cascading Style Sheets
* File Name : login.css
* Description : 로그인 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Date : 2023.05.15
*/

body { background-color: #f2f4f7;}
#wrap { position: relative; height: 100vh;}
#wrap::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; display: block; background: #235ee7 url("/images/cms/bg_login.jpg") no-repeat center / cover;}
#main { 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 {backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 10px 10px 10px rgba(0,0,0,0.1); width: 700px; background-color:rgba(255, 255, 255, 0.95); border-radius: 30px; text-align: center; padding:40px 60px; position: relative;}
.login .p_desc1 { font-family: 'Montserrat','GmarketSansBold'; font-weight: 900; color: #061237; font-size: 22px;}
#contents h1 { font-family: 'Montserrat','GmarketSansBold'; color: #235ee7; font-size: 36px; font-weight: 800; margin-bottom: 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; gap: 20px; margin-bottom: 20px; background-color: #fff;}
.login ul > li > i { font-size: 24px; color: #cdd3dd;}
.login ul > li > input { border: 0; width: 100%; height: 100%; color: #061237; font-size: 20px; font-weight: 800;}
.login ul > li > input::placeholder { color: #cdd3dd; font-size: 18px; font-weight: 500;}
.login ul > li > input:focus { outline: 0;}
.login ul > li:hover { border:1px solid #061237; box-shadow:0 10px 20px rgba(0,0,0,0.05);}
.login ul > li:hover i { color: #061237;}
.login .btn_login { width: 100%; height: 60px; border:none; background-color: #061237; border-radius: 5px; color: #fff; font-size: 20px;font-weight: 800; cursor: pointer; transition: all .3s ease;}
.login .btn_login:hover { background-color: #235ee7; 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 { display: flex; align-items: center; gap: 10px;}
.login .check_box > p a { color: #96a0b5; text-decoration: underline !important;}
.login .check_box > p a:hover { color: #061237; }
.login .check_box > p input[type="checkbox"] { -webkit-appearance: none; position: relative; width: 21px; height: 21px; cursor: pointer; outline: none !important; border: 1px solid #ddd; border-radius: 3px; background: #fff;}
.login .check_box > p input[type="checkbox"]::before { content: "\EB7B"; font-family: "remixicon"; font-size: 16px; position: absolute; top: 50%; left: 50%; overflow: hidden; transform: scale(0) translate(-50%, -50%); line-height: 1;}
.login .check_box > p input[type="checkbox"]:checked { background-color: #235ee7; border: 1px solid #235ee7; color: #fff;}
.login .check_box > p input[type="checkbox"]:checked::before { border-radius: 3px; transform: scale(1) translate(-50%, -50%)}

.login .check_box > p label { color: #96a0b5; cursor: pointer;}

#footer {display: flex; justify-content: center;}
#footer p { margin-top: 30px; color: #96a0b5; font-family: 'Roboto', sans-serif;}
#footer p > span { margin-top: 30px; color: #fff;}