@charset "utf-8";
@import url("/sites/guide/style/css/w_reset.css");


/* [S] 로그인 */
.jang-login-wrap{background: url(../images/bg-login.png) no-repeat center center / cover; padding: 10.8rem 0 10rem;}
.jang-login-wrap .jang-login-inner{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 154rem; padding: 0 2rem; margin: 0 auto;}
.jang-login-wrap .jang-login-left{width: 40%;}
.jang-login-header h1{font-size: 4rem; font-family: "sm"; color: #111111; display: inline-block; position: relative; margin: 1rem 0 0;}
.jang-login-header h1::after{content:""; display: block; position: absolute; right: -3.4rem; top: -1rem; width: 3.4rem; height: 2.4rem; background: url(../images/ic-login-deco.png) no-repeat center center / cover;}
.jang-login-header h1 span{color: #006fc6;}
.jang-login-header p{font-size: 1.8rem; color: #444444; font-family: "sl";}
.jang-login-box{margin-top: 7.4rem;}
.jang-login-box ._inputArea{margin-top: 1rem;}
.jang-login-box .jang-input{border: .2rem solid #eeeeee; border-radius: 1rem; display: block; width: 100%; color: #999999; font-family: "pl"; font-size: 1.8rem; padding: 2.25rem 5.8rem; position: relative;}
.jang-login-box .jang-input:focus{color: #111111; border: .2rem solid #111111;}
.jang-login-box .jang-input#userId{background: white url(../images/ic-id.png) no-repeat left 1.8rem center;}
.jang-login-box .jang-input#userId:focus{background: white url(../images/ic-id-active.png) no-repeat left 1.8rem center;}
.jang-login-box .jang-input#userPassword{background: white url(../images/ic-pw.png) no-repeat left 1.8rem center;}
.jang-login-box .jang-input#userPassword:focus{background: white url(../images/ic-pw-active.png) no-repeat left 1.8rem center;}
.jang-login-box ._loginSubmit{display: block; text-align: center; font-size: 2.2rem; color: #ffffff; width: 100%; background-color: #00508f; border-radius: 1rem; padding: 2.7rem 0; margin-top: 4rem;}
.jang-login-wrap .jang-login-right{width: 65rem; position: relative;}
.jang-login-wrap .jang-login-right::before{content:""; display: block; position: absolute; right: 4.5%; top: -4%; width: 6.4rem; height: 8.3rem; background: url(../images/ic-bg-deco.png) no-repeat center center / cover; z-index: 3;}
.jang-login-wrap .jang-login-right::after{content:""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-shadow: .5rem 0 2rem rgba(71,71,71,.15); transform: rotate(3deg); background-color: white; border-radius: 1rem;}
.jang-login-wrap .jang-login-right-image{border-radius: 1rem; overflow: hidden; position: relative; z-index: 2;}

@media screen and (max-width: 1200px) {
    .jang-login-header h1{font-size: 3.5rem;}
    .jang-login-header p{font-size: 1.6rem;}
    .jang-login-box{margin-top: 5rem;}
    .jang-login-wrap .jang-login-right{width: 50rem;}
    .jang-login-wrap .jang-login-right::before{top: -5%;}
    .jang-login-box .jang-input{padding: 2rem 5rem;}
    .jang-login-box ._loginSubmit{margin-top: 3rem; padding: 2rem 0; font-size: 2rem;}
}

@media screen and (max-width: 1000px) {
    .jang-login-wrap{padding: 5rem 0;}
    .jang-login-wrap .jang-login-inner{flex-direction: column-reverse;}
    .jang-login-wrap .jang-login-left{width: 100%; margin-top: 2rem;}
    .jang-login-wrap .jang-login-right{width: 35rem;}
    .jang-login-wrap .jang-login-right::before{width: 4.4rem; height: 5.9rem;}
}
/* [E] 로그인 */