/*회원가입*/
/*로그인*/
.loginArea{width: 350px; display: block; margin: 30px auto; text-align: center;}
.loginArea h3{font-weight: bold; font-size: 38px !important; line-height: normal; margin-bottom: 10px; line-height: normal;}
.loginArea p{font-size: 20px; line-height: 1.6em;}
.loginArea .inputBox{margin: 15px auto;}
.loginArea .inputBox input{width: 100%; font-size: 20px; border-radius: 10px; margin-bottom: 5px; box-sizing: border-box; background-color: #fff !important; padding: 12px 12px 12px 60px;}
.loginArea .inputBox input.id{background: url(/bookFinder/images/alpasq/join/id.png)no-repeat left 20px center;}
.loginArea .inputBox input.pw{background: url(/bookFinder/images/alpasq/join/pw.png)no-repeat left 23px center;}
.loginArea .inputBox button{width: 100%; background: #0056AA; color: #fff; font-size: 20px; padding: 13px; box-sizing: border-box; border-radius: 10px; font-weight: bold;}
.loginArea ol{display: grid; grid-template-columns: repeat(3, 1fr);}
.loginArea ol> li{position: relative; }
.loginArea ol> li::after{content: ""; position: absolute; right: 0; top: 6px; width: 1px; height: 16px; background: #ddd;}
.loginArea ol> li:last-child::after{display: none;}

/*회원가입_대출자무_유형선택*/
.joinArea .textType ol{display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 20px; margin-top: 20px;}
.joinArea .textType ol li{box-sizing: border-box; border: 7px solid #f1f1f1; font-weight: bold; padding: 30px; text-align: left; box-sizing: border-box; background: #fff;}
.joinArea .textType ol li div{position: relative; padding: 10px 0 10px 180px;}
.joinArea .textType ol li div::before{content: "" ; position: absolute; left: 0; top: 0; width: 150px; height: 150px; background-color: #F9FBFD !important; border-radius: 50%; border: 1px solid #f9f9f9; box-shadow: 0px 0px 10px 8px rgba(221, 221, 221, 0.30) inset}
.joinArea .textType ol.type01 li:nth-child(1) div::before{background: url(/bookFinder/images/alpasq/join/adult.png)no-repeat; background-size: contain; background-position: center; background-size: 68px;}
.joinArea .textType ol.type01 li:nth-child(2) div::before{background: url(/bookFinder/images/alpasq/join/child.png)no-repeat; background-size: contain; background-position: center; background-size: 80px;}
.joinArea .textType ol li div p{font-size: 26px;}
.joinArea .textType ol li div span{font-weight: lighter; display: block; color: #555; margin: 10px auto 15px auto; line-height: 24px;}
.joinArea .textType ol li div a{padding: 10px 20px; box-sizing: border-box; border: 1px solid #ddd; width: 200px; background: #f9f9f9; font-weight: lighter; text-align: center; display: block;}

/*회원가입_대출자유무*/
.joinArea .textType ol.type02 li:nth-child(1) div::before{background: url(/bookFinder/images/alpasq/join/yes.png)no-repeat; background-size: contain; background-position: center; background-size: 80px;}
.joinArea .textType ol.type02 li:nth-child(2) div::before{background: url(/bookFinder/images/alpasq/join/no.png)no-repeat; background-size: contain; background-position: center; background-size: 80px;}

/*본인인증*/
.joinArea .textType ol.type03 li:nth-child(1) div::before{background: url(/bookFinder/images/alpasq/join/phone.png)no-repeat; background-position: center; background-size: 80px;}
.joinArea .textType ol.type03 li:nth-child(2) div::before{background: url(/bookFinder/images/alpasq/join/ipin.png)no-repeat; background-position: center; background-size: 80px;}

/*성공*/
.joinArea .textType .compArea{padding: 50px; box-sizing: border-box; text-align: center; background: url(/bookFinder/images/alpasq/login/compIcon.png)no-repeat center 50px; background-color: #f9f9f9 !important; border-radius: 20px;}
.joinArea .textType .compArea p{font-size: 26px; font-weight: bold; margin-bottom: 10px;}
.joinArea .textType .compArea dl{margin-top:10px; display: flex; justify-content: center;}
.joinArea .textType .compArea dl dd{background: #333; color: #fff; border: 1px solid #ddd; padding: 7px 30px; box-sizing: border-box;}
.joinArea .textType .compArea dl dt{border: 1px solid #ddd; background: #fff; padding: 7px 20px; box-sizing: border-box; width: 250px; text-align: left; color: #777;}

/*정보입력*/
.joinArea .textType .tableType02{margin-top: 20px;}
.joinArea .textType .tableType02 button, .joinArea .textType .tableType02 a.buttonA{background: #333; color: #fff; font-size: 15px; padding: 12px 20px; box-sizing: border-box; vertical-align: middle; display: inline-block;}
.joinArea .textType .tableType02 a.buttonA{padding: 5px 20px;}
.joinArea .textType .tableType02 .togglePw img{width: 24px; height: 24px; margin-left: -40px;}
.joinArea .textType .tableType02 .toggleText{padding: 10px 50px 10px 10px;}

.solruna {display: inline-block; margin-left: 10px;}

/*****테블릿가로*****/
@media all and (max-width:1530px) {  

 }
 

 /*****테블릿세로*****/
 @media all and (max-width:1220px) { 

   /*회원가입_대출자무_유형선택*/
   .joinArea .textType ol{display: block;}
   .joinArea .textType ol> li:first-child{margin-bottom: 20px;}

 }
 

 /*****모바일*****/
 @media all and (max-width:767px) { 

   /*로그인*/
   .loginArea{width: 100%; margin: 10px auto;}
   .loginArea h3{font-size: 24px;}
   .loginArea p{font-size: 15px; line-height: 20px;}
   .loginArea .inputBox input{font-size: 15px; padding: 12px 12px 12px 40px; margin-bottom: 2px;border-radius: 0;}
   .loginArea .inputBox input.id{background: url(/bookFinder/images/alpasq/join/id.png)no-repeat left 12px center;background-size: 20px;}
   .loginArea .inputBox input.pw{background: url(/bookFinder/images/alpasq/join/pw.png)no-repeat left 14px center;background-size: 16px;}
   .loginArea .inputBox button{font-size: 15px; border-radius: 0;}
   .loginArea ol{display: block; border-top: 1px dashed #ddd; padding-top: 15px;}
   .loginArea ol> li{font-size: 13px; background: #fff; border: 1px solid #ddd; margin-bottom: 2px;}
   .loginArea ol> li::after{display: none;}
   .loginArea ol> li a {display: block;}

   /*회원가입_대출자무_유형선택*/
   .joinArea .textType ol{display: block;}
   .joinArea .textType ol li{padding: 20px;}
   .joinArea .textType ol li:first-child{margin-bottom: 20px;}
   .joinArea .textType ol li div{padding: 110px 10px 10px 10px; text-align: center;}
   .joinArea .textType ol li div::before{left: 50%; margin-left: -50px; width: 100px; height: 100px;background-size: contain !important;}
   .joinArea .textType ol.type01 li:nth-child(1) div::before{background-size: 50px !important;}
  .joinArea .textType ol.type01 li:nth-child(2) div::before{background-size: 50px !important;}
   .joinArea .textType ol li div a{width: 100%; font-size: 15px; padding: 7px 10px; margin-top: 10px;}
   .joinArea .textType ol li div p{font-size: 20px;}
   .joinArea .textType ol li div span{font-size: 15px; margin: 0 auto;}

   /*회원가입_대출자유무*/
  .joinArea .textType ol.type02 li:nth-child(1) div::before{background-size: 50px !important;}
  .joinArea .textType ol.type02 li:nth-child(2) div::before{background-size: 50px !important;}

   /*본인인증*/
  .joinArea .textType ol.type03 li:nth-child(1) div::before{background-size: 50px !important;}
  .joinArea .textType ol.type03 li:nth-child(2) div::before{background-size: 50px !important;}

   /*성공*/
   .joinArea .textType .compArea{padding: 0;}
   .joinArea .textType .compArea p{font-size: 20px;}
   .joinArea .textType .compArea span{font-size: 15px; }
   .joinArea .textType .compArea dl{display: block; font-size: 15px;}
   .joinArea .textType .compArea dl dd{padding: 5px 10px; width: 100%; text-align: center;}
   .joinArea .textType .compArea dl dt{padding: 5px 10px; width: 100%; text-align: center;}

   /*정보입력*/
   .joinArea .textType .tableType02 button{font-size: 13px; padding: 12px; width: 100%; margin-top: 5px;}
   .joinArea .textType .tableType02 a.buttonA{font-size: 13px; padding: 5px 12px; width: 100%; display: block; text-align: center;}
   .joinArea .textType .ment{font-size: 11px !important; line-height: 20px;}
   .joinArea .textType .tableType02 table tbody tr td{position: relative;}
   .joinArea .textType .tableType02 .togglePw img{width: 24px; height: 24px; margin-left: 0; position: absolute; right: 15px; top: 20px;}
   .joinArea .textType .tableType02 .toggleText{padding: 10px 50px 10px 10px;} 
   
 }