@charset "utf-8";

.loginWrap{margin-top:5rem;text-align:center;}
.loginWrap::after{content:'';display:block;clear:both;}
.loginWrap .info .tit{font-size:2.5rem;color:#383d53;font-family:'notokrMedium';line-height:1.8;}
.loginWrap .info>p{font-size:1.8rem;word-break:keep-all;}
.loginWrap>div.left{display:inline-block;float:left;overflow:hidden;border:1px solid #dedede;width:48%;margin-top:6rem;box-sizing:border-box;padding:4rem 6rem;height:52rem;}
.loginWrap>div.right{display:inline-block;float:right;overflow:hidden;border:1px solid #dedede;width:48%;margin-top:6rem;box-sizing:border-box;padding:4rem 6rem;height:52rem;}
.loginWrap.findId>div.left, .loginWrap.findId>div.right{height:42.6rem;}
.loginWrap .title{font-size:3rem;color:#383d53;font-family:'notokrMedium';margin-bottom:3rem;}
.loginWrap .title .info{font-size:1.8rem;color:#888;margin-top:1rem;font-family:'notokrRegular';}
.loginWrap .loginForm input{width:100%;height:50px;border:1px solid #e5e5e5;text-indent:15px;font-size:1.6rem;margin-bottom:2rem;box-sizing:border-box;}
.loginWrap .loginForm .btn a{display:block;font-size:1.8rem;color:#fff;background:#31820a;line-height:6rem;}
.loginWrap .loginForm .btn .join{background:#383d53;margin-top:4rem;}
.loginWrap .utilArea{margin-top:2rem;}
.loginWrap .utilArea::after{content:'';display:block;clear:both;}
.loginWrap .utilArea .left{float:left;position:relative;}
.loginWrap .utilArea .left input[type="checkbox"]{position:absolute;top:3px;left:0;opacity:0;-webkit-appearance:none;}
.loginWrap .utilArea .left label{font-size:1.6rem;line-height:30px;display:inline-block;position:relative;padding-left:30px;}
.loginWrap .utilArea .left label::before{display:inline-block;position:absolute;left:0;top:3px;width:21px;height:21px;border:1px solid #d9d9d9;background:#fff;content:'';box-sizing:border-box;}
.loginWrap .utilArea .left input[type="checkbox"]:checked + label::before{background:url('/infra/assets/images/common/checkbox.gif') no-repeat;border:none;}
.loginWrap .utilArea .left input[type="checkbox"]:focus + label:before{border:1px solid #4d4d4d;}
.loginWrap .utilArea .left input[type="checkbox"]:focus:checked + label:before{background:url('/infra/assets/images/common/checkbox.gif') no-repeat;border:none;}
.loginWrap .utilArea .link{float:right;}
.loginWrap .utilArea .link li{float:left;line-height:30px;}
.loginWrap .utilArea .link li::after{content:'';display:inline-block;width:1px;height:13px;margin:0 12px 0;background-color:#ddd;}
.loginWrap .utilArea .link li:last-child::after{display:none;}
.loginWrap .utilArea .link li a{font-size:1.6rem;color:#333;}
.loginWrap .right .snsForm li{display:inline-block;padding-left:3rem;}
.loginWrap .right .snsForm li:first-child{padding-left:0;}
.loginWrap .right .snsForm li span{display:block;font-size:1.6rem;margin-top:1rem;}
.loginWrap .right .noSocial{margin-top:2rem;padding-top:2rem;border-top:1px solid #dedede;text-align:left;word-break:keep-all;}
.loginWrap .right .noSocial .textRed{font-family:'notokrMedium';font-size:1.8rem;border-bottom:1px solid #e85e54;display:inline-block;margin-bottom:2rem;}
.loginWrap .right .noSocial .txt{color:#888;}
.loginWrap .right .noSocial .txt strong{color:#383d53;font-weight:normal;font-family:'notokrMedium';}
.loginWrap .right .noSocial .btn a{display:block;background:#383d53;padding:0 3rem;}
.loginWrap .right .noSocial .btn a::after{content:'';display:block;clear:both;}
.loginWrap .right .noSocial .btn a span{display:inline-block;line-height:6rem;}
.loginWrap .right .noSocial .btn a span.left{float:left;color:#fff;font-size:1.8rem;}
.loginWrap .right .noSocial .btn a span.right{float:right;color:rgba(255,255,255,0.7);font-size:1.6rem;position:relative;padding-right:1.5rem;}
.loginWrap .right .noSocial .btn a span.right::before{width:7px;height:7px;background-color:transparent;content:'';margin-top:-4px;border-top:1px solid #fff;border-right:1px solid #fff;position:absolute;top:50%;right:0;bottom:auto;left:auto;transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);}


.loginWrap .right .title{margin-bottom:1.5rem;}

.newLoginWrap>.loginBox>.loginForm .info {margin-bottom: 30px;font-size: 16px;margin-top: 5px;color: #999;}


.joinWrap .stepBox{margin:5rem auto 0;width:90rem;}
.joinWrap .stepBox ul{display:table;position:relative;width:100%;text-align:left;background:url('/infra/assets/images/common/bgStepBox.png') 0 38px repeat-x;}
.joinWrap .stepBox ul li{display:table-cell;}
.joinWrap .stepBox ul li p{font-size:1.8rem;width:8rem;text-align:center;line-height:1.4;color:#555;}
.joinWrap .stepBox ul li.active p{color:#333;}
.joinWrap .stepBox ul li p span{font-size:1.6rem;display:block;color:#555;}
.joinWrap .stepBox ul li.active p span{color:#333;}
.joinWrap .stepBox ul li::before{content: '';display:inline-block;position:relative;width:80px;height:80px;background-color:#eaeaea;border-radius:50%;}
.joinWrap .stepBox ul li.active::before{background-color:#70b059;}
.joinWrap .stepBox ul li.step4{width:80px;}
.joinWrap .stepBox ul li.step1::before{background-image:url('/infra/assets/images/common/iconJoin01.png');background-repeat:no-repeat;background-position:center;background-size:28px 32px;}
.joinWrap .stepBox ul li.step1.active::before{background-image:url('/infra/assets/images/common/iconJoin01On.png');}
.joinWrap .stepBox ul li.step2::before{background-image:url('/infra/assets/images/common/iconJoin02.png');background-repeat:no-repeat;background-position:center;background-size:32px 31px;}
.joinWrap .stepBox ul li.step2.active::before{background-image:url('/infra/assets/images/common/iconJoin02On.png');}
.joinWrap .stepBox ul li.step3::before{background-image:url('/infra/assets/images/common/iconJoin03.png');background-repeat:no-repeat;background-position:center;background-size:32px 30px;}
.joinWrap .stepBox ul li.step3.active::before{background-image:url('/infra/assets/images/common/iconJoin03On.png');}
.joinWrap .stepBox ul li.step4::before{background-image:url('/infra/assets/images/common/iconJoin04.png');background-repeat:no-repeat;background-position:center;background-size:30px 30px;}
.joinWrap .stepBox ul li.step4.active::before{background-image:url('/infra/assets/images/common/iconJoin04On.png');}

.joinWrap .termsBox{border:1px solid #e5e5e5;overflow-y:scroll;height:30rem;box-sizing:border-box;padding:2rem 4rem;}
.joinWrap.basicWarp .termsBox .sTitle{margin-top:2rem;}
.joinWrap.basicWarp .termsBox .sTitle:first-child{margin-top:0;}
.joinWrap .termsChk{padding:2rem 4rem;box-sizing:border-box;}
.joinWrap .termsChk::after{content:'';clear:both;display:block;}
.joinWrap .termsChk>p{float:left;}
.joinWrap .termsChk .inputWrap{float:right;}
.joinWrap .termsChk .inputWrap input{margin:0 .8rem 0 2rem;}
.joinWrap .termsBox .point{font-size:2.5rem;}
.joinWrap .bgGrayBox{position:relative;}
.joinWrap .bgGrayBox input[type="checkbox"]{/*display:none;*/position:absolute;top:3px;left:0;opacity:0;-webkit-appearance:none;}
.joinWrap .bgGrayBox label{display:inline-block;position:relative;padding-left:4rem;}
.joinWrap .bgGrayBox label::before{display:inline-block;position:absolute;left:0;top:3px;width:21px;height:21px;border:1px solid #d9d9d9;background:#fff;content:''}
.joinWrap .bgGrayBox input[type="checkbox"]:checked + label::before{background:url('/infra/assets/images/common/checkbox.gif') no-repeat;border:none;}
.joinWrap .bgGrayBox input[type="checkbox"]:focus + label:before{border:3px solid #4d4d4d;}/* 접근성 수정 20240603 */
.joinWrap .bgGrayBox input[type="checkbox"]:focus:checked + label:before{background:url('/infra/assets/images/common/checkbox.gif') no-repeat;border:3px solid #4d4d4d;}/* 접근성 수정 20240603 */


.certifyWrap{width:120rem;margin:0 auto 5rem;}
.certifyWrap::after{content:'';display:block;clear:both;}
.certifyWrap>div.left{display:inline-block;float:left;width:55.2rem;margin-top:6rem;box-sizing:border-box;}
.certifyWrap>div.right{display:inline-block;float:right;width:55.2rem;margin-top:6rem;box-sizing:border-box;}
.certifyWrap .tit{margin-bottom:2rem;height:22rem;box-sizing:border-box;display:table;width:100%;}
.certifyWrap .tit>span{display:table-cell;width:100%;color:#fff;font-weight:normal;vertical-align:middle;text-align:center;}
.certifyWrap .phone{background:#383d53 url('/infra/assets/images/common/iconPhoneOv.png') 19rem 50% no-repeat;}
.certifyWrap .tit.phone>span{padding-left:56px;}
.certifyWrap .ipin{background:#383d53 url('/infra/assets/images/common/iconIpinOv.png') 16rem 50% no-repeat;}
.certifyWrap .tit.ipin>span{padding-left:66px;}
.certifyWrap .bulLi{height:20.4rem;}
.basicWarp .certifyWrap .btnWrap{margin-top:5rem;}
.basicWarp .certifyWrap .btnWrap .btn{display:block;margin:0;}

.bgGrayBox.joinComplete{position:relative;padding:25.2rem 4rem 4rem;text-align:center;margin-top:5rem;}
.bgGrayBox.joinComplete p{text-align:center;font-size:2.2rem;margin-top:1rem;color:#383d53;line-height:1.6;}
.joinComplete .icon{position:absolute;width:192px;height:192px;background:#fff url('/infra/assets/images/common/iconJoinComplete.png') center no-repeat;background-size:68px 83px;border-radius:100%;left:50%;margin-left:-96px;top:4rem;}
.bgGrayBox.joinComplete .title{margin-top:0;}

@media screen and (max-width: 1400px){

}

@media screen and (max-width: 1200px){
.certifyWrap{width:100rem;}
.certifyWrap>div.left, .certifyWrap>div.right{width:45.2rem;}
.certifyWrap .phone{background-position-x:14rem;}
.certifyWrap .ipin{background-position-x:11rem;}
.certifyWrap .bulLi{height:24rem;}

.loginWrap>div.left, .loginWrap>div.right{padding:4rem;}
}

@media screen and (max-width: 1080px){
.certifyWrap{width:100%;}

.loginWrap .right .title{margin-bottom:2rem;}
.loginWrap .right .noSocial{margin-top:2rem;}
}

@media screen and (max-width: 1024px){
.loginWrap>div.left, .loginWrap>div.right{padding:3rem;}
}

@media screen and (max-width: 960px){
.joinWrap .stepBox{width:100%;}

.certifyWrap>div.left, .certifyWrap>div.right{width:40.2rem;}
.certifyWrap .phone{background-position-x:11.5rem;}
.certifyWrap .ipin{background-position-x:9.5rem;}

.loginWrap .title{font-size:2.5rem;}
}

@media screen and (max-width: 899px){
.certifyWrap>div.left, .certifyWrap>div.right{width:34.2rem;}
.certifyWrap .phone{background-position-x:8.5rem;}
.certifyWrap .ipin{background-position-x:6.5rem;}

.loginWrap .utilArea .left{float:none;text-align:left;}
.loginWrap .utilArea .link{float:none;display:inline-block;margin:2rem auto 0;}
.loginWrap .loginForm .btn .join{margin-top:2rem;}
}

@media screen and (max-width: 768px){
.loginWrap>div.left, .loginWrap>div.right, .loginWrap.findId>div.left, .loginWrap.findId>div.right{float:none;width:100%;display:block;height:auto;}
}

@media screen and (max-width: 736px){
.loginWrap .info>p{font-size:2rem;line-height:1.6;}

.certifyWrap>div.left, .certifyWrap>div.right{width:32.2rem;}
.certifyWrap .phone{background-position-x:7.5rem;}
.certifyWrap .ipin{background-position-x:5.5rem;}

.loginWrap .info .tit{font-size:2.2rem;}
.loginWrap .info>p{font-size:1.8rem;}
}

@media screen and (max-width: 640px){
.joinWrap .termsBox, .joinWrap .termsChk{padding:2rem;}

.certifyWrap>div.left, .certifyWrap>div.right{width:28.2rem;}
.certifyWrap .phone{background-position-x:5.5rem;}
.certifyWrap .ipin{background-position-x:3.5rem;}
}

@media screen and (max-width: 639px){
.certifyWrap>div.left, .certifyWrap>div.right{float:none;width:100%;}
.certifyWrap .phone{background-position:50% 6rem;}
.certifyWrap .ipin{background-position:50% 7rem;}
.certifyWrap .bulLi{height:auto;}
.certifyWrap .tit.phone>span, .certifyWrap .tit.ipin>span{padding-left:0;padding-top:7rem;}
}

@media screen and (max-width: 480px){
.loginWrap, .joinWrap .stepBox, .certifyWrap>div.left, .certifyWrap>div.right, .basicWarp .certifyWrap .btnWrap, .loginWrap>div.left, .loginWrap>div.right{margin-top:3rem;}
.loginWrap .info>p{font-size:1.8rem;}

.joinWrap .stepBox ul{background-size:8px 3px;background-position-y:22px;}
.joinWrap .stepBox ul li::before{width:45px;height:45px;left:50%;margin-left:-22.5px;}
.joinWrap .stepBox ul li.step1::before{background-size:14px 16px;}
.joinWrap .stepBox ul li.step2::before{background-size:16px 15px;}
.joinWrap .stepBox ul li.step3::before{background-size:16px 15px;}
.joinWrap .stepBox ul li.step4::before{background-size:15px 15px;}
.joinWrap .stepBox ul li p{width:auto;font-size:1.6rem;}
.joinWrap .stepBox ul li p span{font-size:1.5rem;}

.joinWrap .termsChk>p, .joinWrap .termsChk .inputWrap{float:none;}
.joinWrap .termsChk .inputWrap input:first-child{margin-left:0;}

.certifyWrap .tit{height:18rem;}
.certifyWrap .phone{background-position-y:4rem;}
.certifyWrap .ipin{background-position-y:5rem;}

.bgGrayBox.joinComplete{padding:22.2rem 2rem 2rem;}
.bgGrayBox.joinComplete p{font-size:1.6rem;}
.joinComplete .icon{top:2rem;}

.loginWrap>div.left, .loginWrap>div.right{padding:2rem;}
.loginWrap .info .tit{font-size:2rem;line-height:1.6;}
.loginWrap .title{font-size:2.2rem}
.loginWrap .title .info{font-size:1.6rem;}
}

@media screen and (max-width: 320px){
.joinWrap .termsBox, .joinWrap .termsChk, .loginWrap>div.left, .loginWrap>div.right{padding:2rem 1rem;}
.loginWrap .right .noSocial .textRed{font-size:1.6rem;}
}

/* 로그인 회원가입 부분 색상 변경 추가 2023-10-26 */
.loginWrap .loginForm .btn a{background:#3d52bb;}
.joinWrap .stepBox ul li.active::before{background-color:#3d52bb;}
.basicWarp .btnWrap .btn{background:#3d52bb;}
.basicWarp .btnWrap .btn.btnGray{background:#888;}
.loginWrap>div.left.center{margin:6rem auto 0;float:none;}
/* //로그인 회원가입 부분 색상 변경 추가 2023-10-26 */


/* new login 2023-11-16 */
.newLoginWrap{display:flex;margin-top:5rem;}
.newLoginWrap *{box-sizing:border-box;}
.newLoginWrap .loginBox{width:50%;border-right:1px solid #d5d5d5;/*padding:21rem 5rem 0;*/padding:10rem 5rem 10rem;position:relative;}
/*.newLoginWrap .loginBox::before{position:absolute;content:'';top:0;left:5rem;background:#f5f6f7 url(/assets/images/newLayout/icoLogin.png) 50% no-repeat;background-size:87px 98px;width:calc(100% - 110px);height:200px;}*/
.newLoginWrap .loginForm input{width:100%;height:50px;border:1px solid #e5e5e5;text-indent:15px;font-size:1.6rem;/*margin-bottom:2rem;*/box-sizing:border-box;}
.newLoginWrap .loginForm .btn a{display:block;font-size:1.8rem;color:#fff;background:#3d52bb;line-height:6rem;text-align:center;}
.newLoginWrap .utilArea{margin:0 0 2.5rem; padding-top: 12px}
.newLoginWrap .utilArea::after{content:'';display:block;clear:both;}
.newLoginWrap .utilArea .left{float:left;position:relative;}
.newLoginWrap .utilArea .left input[type="checkbox"]{position:absolute;top:3px;left:0;opacity:0;-webkit-appearance:none;}
.newLoginWrap .utilArea .left label{font-size:1.6rem;line-height:30px;display:inline-block;position:relative;padding-left:30px;}
.newLoginWrap .utilArea .left label::before{display:inline-block;position:absolute;left:0;top:5px;width:21px;height:21px;border:1px solid #d9d9d9;background:#fff;content:'';box-sizing:border-box;}
.newLoginWrap .utilArea .left input[type="checkbox"]:checked + label::before{background:url('/infra/assets/images/common/checkbox.gif') no-repeat;border:none;}
.newLoginWrap .utilArea .left input[type="checkbox"]:focus + label:before{border:1px solid #4d4d4d;}
.newLoginWrap .utilArea .left input[type="checkbox"]:focus:checked + label:before{background:url('/infra/assets/images/common/checkbox.gif') no-repeat;border:none;}
.newLoginWrap .utilArea .link{float:right;}
.newLoginWrap .utilArea .link li{float:left;line-height:30px;}
.newLoginWrap .utilArea .link li::after{content:'';display:inline-block;width:1px;height:13px;margin:0 12px 0;background-color:#ddd;}
.newLoginWrap .utilArea .link li:last-child::after{display:none;}
.newLoginWrap .utilArea .link li a{font-size:1.6rem;color:#333;}

.newLoginWrap .joinBox{width:50%;/*padding:21rem 5rem 0;*/padding:10rem 5rem 10rem;position:relative;}
/*.newLoginWrap .joinBox::before{position:absolute;content:'';top:0;left:5rem;background:#f5f6f7 url(/assets/images/newLayout/icoJoin.png) 50% 58% no-repeat;background-size:108px 98px;width:calc(100% - 110px);height:200px;}*/
.newLoginWrap .joinBox .tit{font-size:2.5rem;color:#383d53;font-family:'notokrMedium';line-height:1;text-align:center;}
.newLoginWrap .joinBox p, .newLoginWrap .joinBox li{word-break:keep-all;font-size:1.6rem;}
.newLoginWrap .joinBox ul{margin-top:2.5rem;}
.newLoginWrap .joinBox li~li{margin-top:1rem;}
.newLoginWrap .joinBox .btn{margin-top:2rem;}
.newLoginWrap .joinBox .btn a{display:block;font-size:1.8rem;color:#fff;background:#383d53;line-height:6rem;text-align:center;}

@media screen and (max-width: 1400px){
  .newLoginWrap{margin-bottom:5rem;}
  .newLoginWrap .joinBox, .newLoginWrap .loginBox{padding-top:5rem;padding-bottom:5rem;}
  .newLoginWrap .loginBox{padding-left:0;}
  .newLoginWrap .joinBox{padding-right:0;}
  .newLoginWrap .loginBox::before{left:0;width:calc(100% - 5rem);}
  .newLoginWrap .joinBox::before{width:calc(100% - 5rem);}
  .newLoginWrap .joinBox .tit{line-height:1.2;}
}

@media screen and (max-width: 1024px){
  .newLoginWrap .loginBox{padding-right:3rem;}
  .newLoginWrap .joinBox{padding-left:3rem;}
  .newLoginWrap .loginBox::before{width:calc(100% - 3rem);}
  .newLoginWrap .joinBox::before{left:3rem;width:calc(100% - 3rem);}
  .newLoginWrap .joinBox .tit{font-size:2.2rem;}
}

@media screen and (max-width: 736px){
  .newLoginWrap{flex-wrap:wrap;}
  .newLoginWrap .loginBox, .newLoginWrap .joinBox{width:100%;padding-top:0;padding-bottom:0;}
  .newLoginWrap .loginBox{padding-right:0;border-right:0;}
  .newLoginWrap .joinBox{padding-left:0;margin-top:3rem;}
  .newLoginWrap .loginBox::before{width:100%;}
  .newLoginWrap .joinBox::before{left:0;width:100%;}
}

@media screen and (max-width: 480px){
  .newLoginWrap{margin-bottom:3rem;}
  .newLoginWrap .joinBox .tit{font-size:2rem;}
}
/* //new login  2023-11-16 */


/*20250630 뉴스레터 추가 */
.newLoginWrap .btn a.newsletter{display:block;font-size:1.8rem;color: #d6007f;background: #fff;line-height:6rem;text-align:center;border: 1px solid #d6007f;}

/*20250718 웹접근성 수정 - 회원가입 단계별 step 일때 밑줄*/
.joinWrap .stepBox ul li.active p{color:#333;text-decoration: underline;text-underline-offset: 3px;font-weight:bold}
/*20250718 웹접근성 수정 - 회원가입 단계별 step 일때 밑줄*/