@charset "UTF-8";
body{font-family:'SpoqaHanSans'; letter-spacing:-0.025em; word-spacing:-0.05em;}
.login_wrap{position:relative;width:1200px;margin:0 auto;}
@media all and (max-width:1200px) {
    .login_wrap{position:relative;width:auto; margin:0 20px;}
}

.login_header{position:relative; background:#145ba1 url(/site/login/images/login_visual.jpg) no-repeat center top; background-size:cover; text-align:center; color:#fff}
.login_header .login_wrap{height:479px; padding-top:41px;}
.login_header .gnb{position:absolute; top:41px; left:0;}
.login_header .gnb_link{padding:8px 28px 10px 26px; border:1px solid #4279af; border-radius:30px; color:#fff; text-decoration:none; letter-spacing:-0.01em;}
.login_header .gnb_link:after{display:inline-block; width:7px; height:11px; margin-left:18px; margin-bottom:2px; background:url("/site/login/images/login_sprite.png")left top no-repeat; background-size:342.85% 1709.09%; vertical-align:middle;}
.login_header .gnb_link:hover{border-color:transparent; background-color:#0d457d;}
.login_header .gnb_link:active, .login_header .gnb_link:visited{color:#fff}
.login_header .logo{display:inline-block; position:relative; padding-top:12px; padding-bottom:14px; padding-left:134px; font-size:38px; line-height:42px; font-weight:600}
.login_header .logo:before{display:block; position:absolute; top:0; left:0; width:108px; height:68px; background:url(/site/login/images/logo.svg)left top no-repeat;background-size:contain;}
.login_header .text{margin-top:49px; font-size:17px; line-height:26px; letter-spacing:-0.035em; word-break:keep-all;}
.login_header .text strong{display:block; margin-bottom:25px; font-size:22px;}
@media all and (max-width:1200px) {
    .login_header .login_wrap{height:384px; padding-top:33px;}
    .login_header .gnb{top:33px;}
    .login_header .gnb_link{padding:7px 22px 8px 21px; font-size:15px;}
    .login_header .gnb_link:after{margin-left:14px;}
    .login_header .logo{padding-top:15px; padding-bottom:16px; padding-left:103px; font-size:30px; line-height:24px;}
    .login_header .logo:before{width:86px; height:54px;}
    .login_header .text{margin-top:40px; font-size:15px; line-height:23px;}
    .login_header .text strong{margin-bottom:20px; font-size:18px;}
}
@media all and (max-width:640px) {
    .login_header .login_wrap{height:auto; padding-top:90px; padding-bottom:100px;}
    .login_header .gnb{top:20px;}
    .login_header .gnb_link{padding:7px 16px 7px 17px; font-size:14px;}
    .login_header .gnb_link:after{width:5.6px; height:8.8px; margin-left:10px;}
    .login_header .logo{padding-top:12px; padding-bottom:10px; padding-left:80px; font-size:22px;}
    .login_header .logo:before{width:70px; height:44px;}
    .login_header .text{margin-top:25px; font-size:14px; line-height:22px;}
    .login_header .text br{display:none;}
    .login_header .text strong{margin-bottom:12px; font-size:17px;}
}

.login h2{color:#000; font-size:24px; line-height:1.3em; font-weight:600;}
.login_list{margin-top:-158px; font-size:0; line-height:0; text-align:center;}
.login_item{display:inline-block; position:relative; width:calc(33% - 10px); height:340px; margin-left:20px; padding:45px 20px 35px; border-radius:30px; background-color:#fff; box-shadow: 5px 9px 21px 0 rgba(85, 108, 144, 0.12); text-align:center; vertical-align:top; box-sizing:border-box;}
.login_item:first-child{margin-left:0;}
.login_item .text{margin-top:16px; margin-bottom:24px; color:#464646; font-size:15px; line-height:23px;}
.login_item .btn{position:relative; width:220px; height:50px; margin:5px; padding-top:11px; padding-bottom:10px; border-width:3px; border-color:transparent; border-style:solid; font-size:16px; line-height:22px; text-decoration:none; box-sizing:border-box; vertical-align:middle;}
.login_item .btn:hover{background:#fff;}
.login_item.phone .btn{background-color:#11327c; color:#fff;}
.login_item.phone .btn:hover{border-color:#11327c; background-color:#fff; color:#1c2674;}
.login_item.sns .btn{padding-left:57px; text-align:left;}
.login_item .btn.naver{background-color:#129b3c; color:#fff;}
.login_item .btn.kakao{background-color:#f8da33;}
.login_item .btn.naver:hover{border-color:#129b3c; background-color:#fff; color:#129b3c;}
.login_item .btn.kakao:hover{border-color:#f8da33; background-color:#fff; color:#1a1919}
.login_item .btn.naver:before,.login_item .btn.kakao:before{display:inline-block; position:absolute; background-image: url("/site/login/images/login_sprite.png"); background-repeat:no-repeat;}
.login_item .btn.naver:before{top:16px; left:18px; width:16px; height:14px; background-position:left 12.06%; background-size:150% 1342.85%;}
.login_item .btn.kakao:before{top:12px; left:15px; width:24px; height:23px; background-position:left 41.81%; background-size:100% 817.39%;}
.login_item .btn.naver:hover:before{background-position:left 25.86%; background-size:150% 1342.85%;}
.login_item .login_input{width:220px; height:50px; margin:5px; border:1px solid #c8c8c8; background-color:#f8f9fb; padding-left:20px; padding-right:20px;}
.login_item .login_btn{background-color:#0b3d6e; padding-left:40px; color:#fff; text-align:left;}
.login_item .login_btn:before{display:inline-block; position:absolute; top:13px; left:11px; width:23px; height:21px; background-image: url("/site/login/images/login_sprite.png"); background-position:left 61.07%; background-size:104.34% 895.23%; background-repeat:no-repeat;}
.login_item .login_btn:hover{border-color:#0b3d6e; color:#0b3d6e;}
.login_item .login_btn:hover:before{background-position:left 79.64%; background-size:104.34% 895.23%;}
.contents_box .point{position:relative; margin-top:61px; padding:33px 75px 35px; border:1px solid #84b3e2; border-radius:30px; box-shadow: 0 0 20px 0 rgba(177, 210, 243, 0.3); font-size:15px; line-height:24px; word-break:keep-all;}
.contents_box .point:before{display:inline-block; position:absolute; top:36px; left:43px; width:22px; height:24px; background: url("/site/login/images/login_sprite.png")left bottom no-repeat; background-size:109.09% 783.33%;}
.contents_box .point strong{display:block;}
@media all and (max-width:1200px) {
    .login h2{font-size:20px;}
    .login_list{margin-top:-126px; margin-left:auto; margin-right:auto;}
    .login_item{width:calc((100% - 20px)/2); height:auto;}
    .login_item.ipin{margin-left: 20px}
    .login_item.onepass{width: 100%; height:auto;margin-top:20px;margin-left:0;}
    .login_item .text{margin-top:13px; margin-bottom:19px; font-size:14px; line-height:19px;}
    .login_item .btn,.login_item .login_input{font-size:15px;}
    .contents_box .point{margin-top:49px; padding:26px 28px 28px 60px; font-size:14px; line-height:20px;}
    .contents_box .point:before{top:26px; left:29px;}
}
@media all and (max-width:640px) {
    .login_list{margin-top:-80px;}
    .login_item{display:block; width:auto; height:auto; margin-top:20px; padding-top:30px; padding-bottom:30px}
    .login_item:not(:first-child){margin-left:0;}
    .login h2{font-size:18px; line-height:22px;}
    .login_item .text{margin-top:10px; margin-bottom:10px;}
    .login_item .btn,.login_item .login_input{width:160px; height:45px; padding-top:9px; font-size:14px;}
    .login_item.sns .btn{padding-left:43px;}
    .login_item .btn.kakao:before{left:13px; width:19.2px; height:18.4px;}
    .login_item .btn.naver:before{top:15px; left:17px; width:12.8px; height:11.2px;}
    .login_item .login_btn{width:200px; padding-left:43px}
    .login_item .login_btn:before{top:12px; left:13px; width:18.4px; height:16.8px;}
    .contents_box .point{margin-top:30px; padding:20px 20px 20px 45px;}
    .contents_box .point:before{top:22px; left:19px; width:17.6px; height:19.2px;}
}

.footer{margin-top:30px; margin-bottom:30px;}