@charset "utf-8";

/*
=========================================================================
main.php 메인페이지 css
=========================================================================
*/
#main{ width: 100%; height: auto; display: flex; }

/* 메인-비주얼 */
#main .main_visual{ width: 50%; }
#main .visual_bg{ width: 100%; height: 937px; position: relative; background: url(../img/main/main_visual_bg.png) no-repeat right / cover; }
#main .visual_element{ position: absolute; top: 50%; left: calc(50% - 50px); transform: translate(-50%, -50%); width: 70%; }
#main .visual_element img{ width: 100%; height: auto; }
#main .logo{ position: absolute; top: 30px; left: 30px; cursor: pointer; }
#main .logo::after{ content: 'BETA'; font-size: 0.5em; color: #d3f1d9; margin-left: 8px; display: inline-block; transform: translateY(-5px); font-weight: 500; }
#main .logo img{ width: 140px; height: auto; }
#main .mlogo{ display: none; position: absolute; top: 12px; left: 15px; cursor: pointer; }
#main .mlogo::after{ content: 'BETA'; font-size: 0.5em; color: #80DC8F; margin-left: 6px; display: inline-block; transform: translateY(-4px); font-weight: 500; }
#main .mlogo img{ width: 130px; height: auto; }
 
/* 메인-로그인 */
#main .login{ width: 50%; max-width: 400px; margin: 0 auto; box-sizing: border-box; position: relative; }
#main .login_box{ margin-top: 200px; }
#main .login_tit{ text-align: center; font-size: 2em; margin-bottom: 20px; }
#main .login_tit span{ color: var(--main-color); }
#main .input_login,#main .input_password{ margin-bottom: 20px; }
#main .input_login input,#main .input_password input{ width: 100%; height: 55px; padding: 10px 20px; border-radius: 10px; border: 1px solid #ccc; box-sizing: border-box; }
#main .saveid{ padding: 1px 3px; }
#main .main_btn{ width: 100%; height: 60px; line-height: 60px; border-radius: 10px; text-align: center; font-weight: 600; cursor: pointer; }
#main .login_btn{ margin-bottom: 15px; background: var(--main-color); color: #fff; }
#main .login_btn:hover{ background: #1b8056; }
#main .login_option{ overflow: hidden; padding-bottom: 30px; border-bottom: 1px solid #ccc; color: #555; display: flex; justify-content: space-between; font-size: 0.9em; }
#main .login_option .mainSearchBtn{ display: flex; }
#main .login_option .mainSearchBtn div{ cursor: pointer; }
#main .login_option .mainSearchBtn .search_id::after{ content: '|'; margin: 0 10px; font-size: 13px; }
#main .join_btn{ border: 1px solid #888; color: #555; margin-top: 30px; }
#main .join_btn:hover{ background: #f9f9f9; transition: all .3s; }
#main .mjoin_btn{ display: none; }
@media (max-width:1200px){
 
/* 메인-비주얼 */
 #main .visual_bg{ height: 600px; }
 
/* 메인-로그인 */
 #main .login{ max-width: 350px; }
 #main .login_box{ margin-top: 80px; }
 #main .input_login,#main .input_password{ margin-bottom: 15px; }
 #main .input_login input,#main .input_password input{ height: 50px; }
 #main .main_btn{ height: 55px; line-height: 55px; }
 #main .login_option{ padding-bottom: 20px; }
 #main .join_btn{ margin-top: 20px; }
}
@media (max-width:900px){
 #main{ flex-direction: column-reverse; }
 
/* 메인-비주얼 */
 #main .main_visual{ width: 100%; }
 #main .visual_bg{ width: 100%; height: 400px; background: url(../img/main/main_visual_bg_m.png) no-repeat top / cover; }
 #main .visual_element{ width: 400px; top: calc(50% - 20px); left: calc(50% - 20px); }
 
/* 메인-로그인 */
 #main .logo{ display: none; }
 #main .mlogo{ display: block; }
 #main .login_box{ margin-bottom: 20px; }
 #main .login{ margin-bottom: 25px; }
}
@media (max-width:720px){
 
/* 메인-비주얼 */
 #main .visual_bg{ height: 340px; }
 #main .visual_element{ width: 340px; }
 
/* 메인-로그인 */
 #main .login{ width: 80%; }
 #main .login_box{ margin-top: 80px; top: 10px; left: 10px; }
 #main .input_login,#main .input_password{ margin-bottom: 12px; }
 #main .main_btn{ height: 50px; line-height: 50px; }
 #main .saveid{ padding: 0 2px; }
 #main .join_btn{ display: none; }
 #main .mjoin_btn{ display: block; }
}