@charset "utf-8";

/* Common */
html, body {height:100%; font-family:Arial,Verdana,Sans-serif; font-size:12px; color:#666; margin:0; padding:0;}
div,p,a,dl,dt,dd,ul,ol,li,form,fieldset,select,textarea,input,button,blockquote,th,td,caption{font-family:Arial,Verdana,Sans-serif,Sans-serif; font-size:12px; color:#666; margin:0; padding:0;}

li{list-style:none;}

h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-family:Arial,Verdana,Sans-serif; font-size:12px; color:#666;}

table{border-collapse:collapse; border-spacing:0;}
caption{display:none;}

img {border:0; vertical-align:top;}

label {cursor:pointer;}

/* //Common */

/* Login */
/* 
#wrapper_login{position:absolute; left:0; top:50%; width:100%; height:504px; background:url('/images/main/bg_login.gif') 0 0 repeat-x; margin-top:-252px;}
#wrapper_book{position:absolute; left:0; top:50%; width:100%; height:504px; margin-top:-252px;}
#wrap{position:relative; width:1024px;  height:504px; margin:0 auto;}
#wrap h1{position:absolute; top:29px; left:0; height:75px;}
#wrap .login_bn{position:absolute; top:349px; left:0; overflow:hidden;}
#wrap .login_bn li{float:left; width:auto; margin-right:16px;}
#wrap .login_box{position:absolute; top:1px; left:604px; width:420px; height:379px; border:0; border-left:1px solid #aaa;}
#wrap .login_box p{margin-bottom:2px;}
#wrap .login_box label{display:none;}
#wrap .login_box input.login_id{width:420px; height:94px; border:0; background:url('/images/main/login_input_id.gif') 25px 30px no-repeat #fff; line-height:94px;}
#wrap .login_box input.login_pw{width:420px; height:94px; border:0; background:url('/images/main/login_input_pw.gif') 25px 30px no-repeat #fff; line-height:94px;}
#wrap .login_box input.input_focus{width:395px; height:94px; border:0; background:#666; font-family:verdana; font-size:30px; color:#fff; line-height:94px; padding-left:25px;}
#wrap .login_box .login_btn{margin-left:25px;}
#wrap .login_box .login_btn p{padding:26px 0;}
#wrap .sketchbook{width:604px; height:379px; padding-top:1px;}
#wrap .book_talk{position:absolute; top:1px; right:0; width:420px;}
#wrap .book_talk .talk_box{width:395px; height:379px; margin-left:25px; overflow:hidden; overflow-y:auto;}
#wrap .book_talk .talk_box ul li{margin-top:28px; vertical-align:top;}
#wrap .book_talk .talk_box ul li p{font-family:'Malgun Gothic', 'dotum'; font-size:15px; color:#202020; line-height:18px; word-break:break-all;}
#wrap .book_talk .talk_box ul li p.mem{font-size:12px; color:#888; margin-top:3px;}
#wrap .book_talk .talk_box ul li p.mem span{height:12px; font-family:'verdana'; padding-left:7px; padding-right:10px; vertical-align:-1px;}
#wrap .book_talk .talk_box ul li p.mem img{vertical-align:middle;}

#wrap .book_talk .talk_write{border:0; margin-top:1px;}
#wrap .book_talk textarea{border:0; background:#eee; width:365px; height:86px; padding:5px;}
#wrap .book_talk .btn_write{}
#wrap .book_talk .btn_enter{margin:14px 0 0 25px;}
#wrap .book_talk .btn_enter a{margin-right:15px;}

.id_save{position:absolute; top:394px; right:297px;}
.id_save input, .id_save img{vertical-align:middle;}
.id_save label{padding-left:8px;}
 */
 #wrapper_login {position:absolute;top:calc(50% - 40px);left:50%;transform:translate(-50%, -50%); width:800px;height:445px;
-webkit-box-shadow: 3px 20px 50px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 3px 20px 50px 1px rgba(0,0,0,0.3);
box-shadow: 3px 20px 50px 1px rgba(0,0,0,0.3);
}

#wrap h1{position:absolute; top:37px; left:52px;}
#wrap .login_bn{position:absolute; top:30px; right:52px;overflow:hidden;width: 44px;}
#wrap .login_bn li{/* float:left; width:auto; */}
#wrap .login_bn li img{width: 100%;}

#wrap .login_box{position:absolute;top:144px;left:52px;width:696px;height:188px;border:none;}

#wrap .login_box p + p {margin-top:45px;}
#wrap .login_box label {position:relative;display:block;}
/* #wrap .login_box label span {position:absolute;top:0px;left:0px;opacity:0;} */


#wrap .login_box input[type=text], #wrap .login_box input[type=password] {width:100%;height:72px;padding-top:12px;border:none;border-bottom:1px solid #c2c2c2;box-sizing:border-box;font-size:22px;font-weight:bold;}
#wrap .login_box input + span {position:absolute;top:30px;left:0px;color:#c2c2c2;font-size:22px;font-weight:bold;transition:top .2s, font-size .2s;}
#wrap .login_box input.input_focus + span {top:0px;font-size:15px;}


#wrap .login_box .login_btn {position:absolute;bottom:-156px;right:0px;}
#wrap .login_box .login_btn a {display:block;width:207px;height:80px;text-indent:-9999px;background:url(/images/main/login/login_btn.gif) 0 0 no-repeat;}
#wrap .login_box .login_btn a:hover, #wrap .login_box .login_btn a:active, #wrap .login_box .login_btn a:focus {background:url(/images/main/login/login_btn_on.gif) 0 0 no-repeat;} 

.id_save{position:absolute; top:406px;left:52px;}
.id_save input[type=checkbox] {position:absolute;top:0px;left:0px;opacity:0;}
.id_save label {display:block;width:97px;height:17px;background:url(/images/main/login/id_save_off.gif) 0 0 no-repeat;text-indent:-9999px;overflow:hidden;}
.id_save input[type=checkbox]:checked + label {background:url(/images/main/login/id_save_on.gif) 0 0 no-repeat;}