@charset "utf-8";

body { background:#e1e1e1 }
.container {  width:100%; padding:180px 0 30px; background:url('../images/login/bg_login.png') no-repeat scroll 50% 0;}
.container:before { content:""; clear:both; display:block; position:fixed; top:0; left:0; width:254px; height:302px; background:url('../images/login/bg_left.png') no-repeat 0 0}
.container:after { content:""; clear:both; display:block; position:fixed; bottom:0; right:0; width:112px; height:196px; background:url('../images/login/bg_right.png') no-repeat 0 0}
.loginWrap { position:relative; width:1200px; height:546px; margin:0 auto; border-radius:40px; box-shadow:0 0 15px rgba(0,0,0,.1); background:#fff}
.loginWrap:after { content:""; clear:both; display:block;}
.loginWrap h1 { position:absolute; top:-67px; left:40px;}
.noticeArea { position:relative; float:left; width:60%; height:100%; padding:85px 65px 65px 65px; border-radius:40px 0 0 40px; background:linear-gradient(135deg, #ba5d21, #ba3b21)}
.noticeArea h2 { margin-bottom:30px; color:#fff; font-size:40px; font-weight:bold; line-height:100%; letter-spacing:-1px}
.noticeArea li { padding-top:16px; border-bottom:1px solid #fff; }
.noticeArea li a { display:inline-block; color:#fff; font-size:18px; line-height:43px;}
.noticeArea li a:hover,
.noticeArea li a:focus { text-decoration:none;}
.noticeArea li .date { float:right; color:rgba(255,255,255,.7); font-size:16px; line-height:43px;}
.noticeArea .btnMore { position:absolute; top:93px; right:65px; padding-right:33px; color:#fff; font-size:17px; line-height:32px; background:url('../images/login/ico_more01.png') no-repeat 100% 50%}

.loginArea { float:left; width:40%; padding:85px 60px 65px 60px}
.loginArea h2 { margin-bottom:30px; color:#ba3b21; font-size:48px; text-align:center; line-height:100%}
.loginArea h2 span { display:block; color:#231f20; font-size:24px; line-height:100%}
.loginForm li { padding:10px 0 10px 32px; border-bottom:1px solid #d2d3d5}
.loginForm li + li { margin-top:5px; }
.loginForm li input { width:100%; border:0; padding:0 0 0 10px; height:44px; box-sizing:border-box; color:#666; font-size:18px;}
.loginForm .loginId { background:url('../images/login/ico_id.png') no-repeat 10px 50%}
.loginForm .loginPw { background:url('../images/login/ico_pw.png') no-repeat 10px 50%}
.loginForm .btnLogin { width:100%; height:56px; margin-top:30px; border:1px solid #ab3017; border-radius:30px; color:#fff; font-size:20px; text-align:center; background:#ba3b21}
.loginMenu { margin-top:33px; padding-top:20px; border-top:1px solid #f0d9d5}
.loginMenu a { display:inline-block; padding-right:30px; color:#b76655; font-size:16px; background:url('../images/login/ico_more02.png') no-repeat 100% 50%}
.loginMenu a + a { margin-left:30px; }

.footer { position:relative; width:1200px; margin:30px auto 0}
.footer .address,
.footer .copyright { padding-left:65px; color:#555; font-size:16px; line-height:24px;}
.footer .address span { display:inline-block}
.footer .address span + span { margin-left:15px}
.footer .btnAgree { position:absolute; top:0; right:60px; padding:0 15px; border:1px solid #aaa; border-radius: 3px; color:#555; font-size:16px; line-height:30px; background:#fff} 


@media screen and (max-width:1480px){
    .loginWrap,
    .footer { width:1000px}
}

@media screen and (max-width:1280px){
    .container:before, 
    .container:after { display:none}
	.loginWrap,
    .footer { width:900px}
    .loginWrap { height:458px;}
    .noticeArea { padding:60px 50px}
    .noticeArea h2 { margin-bottom:20px; font-size:36px;}
    .noticeArea li a { font-size:16px; line-height:38px}
    .noticeArea li .date { font-size:14px; line-height:38px;}
    .noticeArea .btnMore { top:83px; font-size:15px;}
    .loginArea { padding:60px 45px 50px 45px}
    .loginArea h2 { margin-bottom:25px; font-size:42px;}
    .loginArea h2 span { font-size:22px}
    .loginForm li { padding:8px 0 8px 32px }
    .loginForm li input { height:34px; font-size:16px;}
    .loginForm .btnLogin { height:44px; margin-top:25px; font-size:18px; }
    .loginMenu { margin-top:48px; padding-top:15px}
    .loginMenu a { font-size:14px}
    .footer .address,
    .footer .copyright  { padding-left:50px; font-size:14px;}
    .footer .btnAgree { right:45px; font-size:14px;}

}
	
@media screen and (max-width:1024px) { 
	.container { padding-top:20%}
    .loginWrap { width:90%; height:428px;}
    .noticeArea { width:50%; padding:50px 30px 40px 30px}
    .noticeArea h2 { font-size:30px}
    .noticeArea li { padding-top:12px}
    .noticeArea li a { display:block}
    .noticeArea li .date { display:none}
    .noticeArea .btnMore { top:57px; right:30px}
    .loginArea { width:50%; padding:50px 30px 40px 30px}
    .loginMenu { margin-top:38px}
    .footer { width:90%; margin:20px auto 0; text-align:center}
    .footer .address, .footer .copyright { padding-left:0; line-height:140%}
    .footer .btnAgree { position:relative; top:auto; right:auto; width:50%; margin:15px auto 0}
}

@media screen and (max-width:768px) {
    .container { height:auto}
    .loginWrap { height:auto}
    .loginWrap h1 { top:-50px; left:50%; margin-left:-81px; }
    .loginWrap h1 img { height:40px}
    .noticeArea { display:none}
    .loginArea { width:100%}
    .loginArea h2 { margin-bottom:15px; font-size:40px}
    .loginArea h2 span { font-size:20px}
    .loginForm li { padding:5px 0 5px 32px}
    .loginMenu a { letter-spacing:-1px}
    .footer { margin-bottom:20px}
}