@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:#70b059;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;}
.loginWrap .utilArea .left input[type="checkbox"]{display: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:''}
.loginWrap .utilArea .left input[type="checkbox"]: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:4rem;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);}





.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:#999;}
.joinWrap .stepBox ul li.active p{color:#333;}
.joinWrap .stepBox ul li p span{font-size:1.6rem;display:block;color:#999;}
.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 input[type="checkbox"]{display: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;}


.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;}
}