body{background:#f9fbfd;}
.loginBody{overflow: hidden;}

.loginArea{ height:100vh; box-sizing:border-box; }
.loginArea section { position: absolute; top:30px; left:50%; transform: translateX(-50%); width:100%; overflow:hidden; max-width:700px; padding :70px 15px 0px 15px; box-sizing:border-box;}
.loginArea section > a.loginHomeBtn{ position: absolute; top:0; left:15px; display:inline-block; padding-left:34px; background:url(/images/egovframework/scourt/login/home.png) left center no-repeat; line-height:28px; color:#325792;}
.loginArea h1{width:300px; margin:0 auto 25px auto;}
.loginBox {border:1px solid #ddd; max-width : 670px; box-sizing : border-box; margin:0 auto; padding:30px 15px 15px; background:#fff; text-align:center;}
.loginBox h2{margin-bottom:20px; font-size:30px;}
.login_wrap .loginBox div { max-width : 640px; box-sizing : border-box; margin : 8px auto; border : 1px solid #ddd; background:#fff; }
.login_wrap div:after{content: ''; display: block; clear: both; visibility: hidden;} 
.login_wrap div label { display : block; width : 45px; height : 45px;  padding :8px 0; box-sizing:border-box; text-align:center; float:left;}
.login_wrap div input { display : block; width :  calc(100% - 45px); height : 45px; line-height : 45px; background : none; border : none; box-sizing:border-box; font-size:15px;  float:left;}
.login_wrap form > a { display : block; width : 100%; max-width : 640px; margin : 15px auto 0; text-align:center; color : #fff; font-size : 20px; font-weight:bold; height : 50px; line-height:50px; }   
.loginFind{text-align:center; margin:15px auto 30px auto;} 
.loginFind li{display:inline-block; position:relative; margin-bottom:10px;} 
.loginFind li + li{padding-left:25px;} 
.loginFind li + li::before{content:''; position:absolute; top:0px; left:10px; width:1px; height:17px; border-radius:.5px; background-color:#ccc;} 
.snsLoginBox {max-width : 670px; box-sizing : border-box; margin:0 auto; padding-bottom:30px;}
.snsLoginBox a{margin-top:10px; font-size:18px; line-height:50px; height:50px; box-sizing:border-box; text-align:center;}
.snsLoginBox a.naverLogin{border:1px solid #06bd34; color:#06bd34; background:url(/images/egovframework/scourt/login/naver.png), #fff ;  background-position: 20px center, center;  background-repeat:no-repeat;}
.snsLoginBox a.kakaoLogin{border:1px solid #4e3432; color:#4e3432; background:url(/images/egovframework/scourt/login/kakao.png), #fff ;  background-position: 20px center, center;  background-repeat:no-repeat;}
.snsLoginBox a.naverLogin:hover{color:#fff; background:url(/images/egovframework/scourt/login/naverW.png), #06bd34 ;  background-position: 20px center, center;  background-repeat:no-repeat;}
.snsLoginBox a.kakaoLogin:hover{ background:url(/images/egovframework/scourt/login/kakao.png), #fae100 ;  background-position: 20px center, center;  background-repeat:no-repeat;}
.loginArea section > p.loginCopy, .joinArea section > p.loginCopy { border-top:1px solid  #ccc; padding:15px 0 25px 0; font-size:14px; line-height:17px; text-align:center;}
.loginComent{font-size:15px; line-height:20px; margin-bottom:15px; color:#555;}
/*로그인*/

.joinArea section { width:100%;  max-width:1000px; padding : 50px 15px 0px 15px; box-sizing:border-box; margin:0 auto; position:relative;}
.joinArea h1{width:200px; margin:0 auto 10px auto;}
.joinArea section > a.loginHomeBtn{ position: absolute; top:15px; left:15px; display:inline-block; padding-left:34px; background:url(/images/egovframework/scourt/login/home.png) left center no-repeat; line-height:28px; color:#325792;}
.joinBox{margin: 15px 0 25px 0; box-sizing:border-box; border-top:1px solid #ccc; padding-top:25px; }

.btnBox{text-align:center; margin:30px 0;}
.joinBasicBtn{display:inline-block; padding:10px; margin:3px; width:40%; box-sizing:border-box; border:1px solid #014099; max-width:300px;} 
.joinBasicBtn1{color:#fff; background:#014099;}
.joinBasicBtn2{color:#014099; background:#fff;}

.slideDownLlist li .slideDownBtn { padding:10px; box-sizing:border-box; background:url(/images/egovframework/scourt/board/subNavBg_s.png) #ddd 97% center no-repeat; }
.slideDownLlist li.active .slideDownBtn{ background:url(/images/egovframework/scourt/board/subNavBg_b.png) #ddd 97% center no-repeat;}
.slideDownLlist .slideData{display:none; padding:0 15px 15px; background:#fff; border:1px solid #ddd; box-sizing:border-box;}
.slideDownLlist .slideDataOpen{display:block;}


.jointable{margin:10px 0 5px 0; width:100%; border-collapse:collapse; border-spacing:0; table-layout:fixed; text-align:center;}
.jointable td { border : 1px solid #c3d0d4; padding :6px 3px 4px; vertical-align:middle; word-break: break-all;}
.jointable th { border : 1px solid #c3d0d4; padding :6px 3px 4px; vertical-align:middle; word-break: break-all;}
.joinComent{font-size:14px; line-height:17px;}
/*회원가입 기본폼*/
.joinBtn { display : block; width : 100%; max-width : 670px; margin : 0 auto 40px auto; text-align:center; color : #fff; font-size : 18px; font-weight:bold; height : 50px; line-height:50px; }  

.joinLibList:after{content: ''; display: block; clear: both; visibility: hidden;}    
.joinLibList{ box-sizing : border-box; margin:0 auto 40px auto; border-top:1px solid #333; border-right:1px solid #333; }
.joinLibList li{float:left; width:33.3%; border-left:1px solid #333; border-bottom:1px solid #333; box-sizing:border-box;}
.joinLibList li:last-of-type{width:33.4%;}
.joinLibList a{font-size:18px; line-height:25px; height:75px; box-sizing:border-box; text-align:center; color:#333; background-color:#fff; padding-top:25px;}
.joinLibList li:first-of-type a{ padding-top:13px;}
.joinLibList a:hover, .joinLibList li.active a{color:#fff; background-color:#333;}
/*회원가입 첫번째페이지*/
.joinInfo1_w{padding:15px; background:#fff; border:1px solid #eee;}
.joinInfo1 h3{padding-top:7px; font-size:18px; font-weight:bold; margin-bottom:10px; line-height:24px; position:relative;}
.joinInfo1 h3:before{position:absolute; content:''; width:20px; height:3px; top:0; left:0; background-color:#b50081;}
.joinInfo1 div.joinInfoBasicBox{margin:15px 0 0 3px;}
.joinInfo1 div.joinInfoBasicBox h4{font-size:17px; line-height:22px; margin-bottom:3px; font-weight:bold; color:#014099;}
.joinInfo1 div.joinInfoBasicBox > ul > li{padding-left:10px; font-size:15px; line-height:20px; margin-bottom:6px; position:relative;}
.joinInfo1 div.joinInfoBasicBox > ul > li:after{position:absolute; content:''; width:3px; height:3px; top:7px; left:2px; border-radius:5px; background-color:#014099; }
.joinInfo1 div.joinInfoBasicBox > ul > li:last-child{margin-bottom:0px;}
/*회원가입 텍스트*/
.joinStep{margin-bottom:30px;}
.joinStep ul:after{content: ''; display: block; clear: both; visibility: hidden;}    
.joinStep ul li{float:left; width:25%; padding:3px; box-sizing:border-box;}    
.joinStep ul li b{display:block; position:relative; padding:5px 0 5px 37px; box-sizing:border-box; line-height:26px; border:1px solid #e9e9e9; background:#fff;}    
.joinStep ul li span{position:absolute; top:5px; left:5px; width:25px; height:25px; line-height:26px; background:#ddd; border-radius:20px; text-align:center; display:block;} 
.joinStep ul li.active span{background:#014099; color:#fff;}    
/*회원가입 스텝*/
.joinAgreeBox{height:300px; overflow-y:scroll; font-size:15px; line-height:20px; margin-bottom:10px;}
.joinInfo1 label.allAgree{ font-size:15px; margin-left:5px; display:inline-block; width:calc(100% - 30px); vertical-align:top; line-height:18px;}
.joinInfo1 label.partAgree{margin:2px 10px 2px 5px; display:inline-block; }
/*회원가입 개인정보이용동의*/
.ipinInfo{padding:10px; background-color:#f6f6f6; box-sizing:border-box;}
.ipinInfo h5{margin-bottom:10px; font-weight:bold; font-size:16px;}
.verificationCo{padding-top:10px; border-top:1px solid #ddd; margin-top:10px; font-size:14px; line-height:18px;}

.verificationLBox {position: fixed; top: 0; right: 0; bottom: 0;  left: 0; background: rgba(0, 0, 0, 0.3); opacity:0; height:0; overflow:hidden; display:none;
-webkit-transition: opacity 100ms ease-in; -moz-transition: opacity 100ms ease-in; transition: opacity 100ms ease-in;
pointer-events: none;  z-index:9999;}
.verificationLBox:target { opacity:1; pointer-events: auto; height:auto; display: block;}
.verificationLBox > div.verificationLBox2 h4{line-height:80px; border-bottom:1px solid #ccc; text-align:center; font-size:23px; font-weight:bold; margin-bottom:30px;}

.verificationLBox > div.verificationLBox2{position: absolute; left:50%; margin-left:-140px; width: 280px; height:340px; top:50%; margin-top:-170px; background-color:#fff; box-sizing:border-box; padding:30px 10px 10px 10px;}
.verificationLBox > div.verificationLBox2 > a{position:absolute; top:0px; right:0px; z-index:999; }
.verificationLBox > div.verificationLBox2 div a{display:block; text-align:center; font-size:17px; margin:0 auto 20px auto; width:80%; line-height:50px;}
/*본인인증*/


.boardArea{border-top:2px solid #000; margin:15px 0; overflow-x:scroll; }
.board{width:100%; box-sizing:border-box; min-width:600px;}
.board thead tr{background:#eee;}
.board > thead > tr > *, .board > tbody > tr > *{border-bottom : 1px solid #ccc; padding :5px; line-height:24px; text-align:center; vertical-align:middle; }
.board thead tr th {white-space:nowrap; border-bottom:1px solid #666; font-size:17px;}
.board tbody tr td {font-size:16px;}
/*게시판 리스트*/ 
.paging{text-align:center; margin-bottom:20px;}
.paging > a {display: inline-block; width:20px; line-height: 22px; text-align: center; font-size:14px; }
.paging ol {display: inline-block; box-sizing: border-box; text-align: center; }
.paging ol li {display: inline-block;}
.paging ol li a {display: block; font-size: 14px; line-height: 21px; padding-top:1px; height:22px; width: 22px; border-radius:50px; box-sizing:border-box;}
.paging ol li a:hover, .paging ol li a.focus {color:#014099; border:1px solid #014099;} 
/*페이징*/  
.agreeBtn{display:inline-block; padding:10px 20px; color:#fff;}

/*.verificationLBox3{position: absolute; left:50%; margin-left:-260px; width: 520px; height:550px; top:50%; margin-top:-275px; background-color:#fff; box-sizing:border-box; padding:30px 10px 10px 10px; text-align:left;}*/
.verificationLBox3{position: absolute; left:50%; margin-left:-260px; width: 540px; height:580px; top:50%; margin-top:-280px; background-color:#fff; box-sizing:border-box; padding:30px 10px 10px 10px; text-align:left;}
.verificationLBox3 > a{position:absolute; top:0px; right:0px; z-index:999; }
.verificationLBox3 > div > p{line-height:60px; border-bottom:1px solid #ccc; text-align:center; font-size:23px; font-weight:bold; margin-bottom:10px;}
.verificationLBox3 .pa30{padding: 5px 20px;}
/*--------------저작권----------------*/


.boardform{width:100%; margin-bottom:40px; table-layout:fixed;}
.boardform tr:first-of-type { border-top:2px solid #999;}
.boardform tr {border-bottom:1px solid #e0e0e0;}
.boardform tr th, .boardform tr td{padding:10px; vertical-align:top; box-sizing:border-box; text-align:left; line-height:30px;}
.boardform tr th {background:#edf2f8;}
.boardform tr td {background:#fff;}
.boardform tr td select{height:30px; width:200px; padding-left:5px; box-sizing:border-box; border:1px solid #d2d6de; background:url('/images/egovframework/scourt/board/subNavBg_s.png') #fff no-repeat 95% center;}
.boardform tr td input{height:30px; box-sizing:border-box; width:100%; border:1px solid #d2d6de; padding-left:5px;}
.boardform td input[type='radio'], .boardform td input[type='checkbox'] {height:auto; width:auto; background-color:#fff; line-height:30px; vertical-align:middle; margin:0px 5px;}
.boardform tr td textarea{border:1px solid #d2d6de; padding:10px; box-sizing:border-box; display : block; width : 100%; height : 150px; }
.commentB{ font-size:13px; line-height:16px; color:#666; margin-top:4px; display:block;}
.boardform tr td input.shortText{width:250px; }
.boardform tr td input.shortText2{width:150px; }
.writeBtn{display: inline-block; padding:5px 10px; color: #fff; font-size:15px; line-height:20px; vertical-align: top; background-color: #014099; box-sizing:border-box;}
.joinInfo1 .boardform label{ font-size:17px; margin-left:0px; display:inline; width:auto; vertical-align:top; line-height:30px;}
/*가입정보*/
.joinDone{ padding:50px 0;}
/*가입완료*/

.searchBox {border:1px solid #ddd; max-width : 670px; box-sizing : border-box; margin:0 auto 30px auto; padding:30px 15px 15px; background:#fff; text-align:center;}
.searchBox h2{margin-bottom:20px; font-size:30px;}
.search_wrap .searchBox div { max-width : 640px; box-sizing : border-box; margin : 15px auto; }
.search_wrap .searchBox div:after{content: ''; display: block; clear: both; visibility: hidden;}
.search_wrap .searchBox span {display:inline-block; margin:3px 10px;}
.search_wrap div input { display : block; width : 100%; height : 40px; line-height : 40px; background:#fff; border : 1px solid #ddd; padding-left :10px; box-sizing:border-box; font-size:15px; }
.search_wrap div input.w40 { width : 40%; float:left;}
.search_wrap div input.w30 { width : calc(30% - 15px); margin-left:15px; float:left;}
.search_wrap a { display : block; width : 100%; max-width : 640px; margin : 15px auto 0; text-align:center; color : #fff; font-size : 20px; font-weight:bold; height : 50px; line-height:50px; }   
.search_wrap div input[type='radio'], .search_wrap div input[type='checkbox'] {height:auto; width:auto;  line-height:30px; vertical-align:middle; margin:0px 5px; display:inline-block;}
.loginSubTitle {margin-bottom:20px; font-size:30px;}
/*아이디 비번찾기*/

.joinBox .reConsentBox{background:#fff; border:1px solid #eee; padding:15px; box-sizing:border-box; margin-bottom:20px;}
.joinBox .reConsentBox h2{text-align:center; font-size:30px; padding: 20px 0; line-height:38px;}
.joinBox .reConsentBox div{ padding:15px; box-sizing:border-box; line-height:26px; }
.joinBox .reConsentBox .reConsentBoxIn{background:#fafafa; border:1px solid #ddd;}
.joinBox .reConsentBox .reConsentInd{padding-left:80px; text-indent:-75px;}
.reConsentP{line-height:28px;}
/*개인정보 재동의*/
@media all and (max-width:600px) {  
    html, body { font-size:15px;}
    .loginArea h1{width:220px; margin:0 auto 20px auto;}    
    /*.loginArea section { top:20px; padding :100px 15px 0px 15px; }*/
    .loginArea section { top:20px; padding :15px 15px 0px 15px; }     
      
    .joinArea h1{width:180px;}
    .joinBasicBtn{ width:100%; margin:0 0 5px 0;} 
    /*회원가입 기본폼*/
    .snsLoginBox a, .joinLibList a, .joinBtn{ font-size:16px;}
    /*로그인*/
    .joinLibList li{width:100% !important; }
    .joinLibList a{ line-height:20px; height:40px; box-sizing:border-box; text-align:center; color:#333; background-color:#fff; padding-top:10px;}
    .joinLibList li:first-of-type a{ padding-top:10px; height:60px;}
    /*회원가입 첫번째페이지*/    
    .joinStep ul li{ width:100%; padding:0 0 5px 0; }    
    .joinStep ul li b{font-size:15px;}  
    /*회원가입 스텝*/    
    .joinInfo1 h3{font-size:17px;}
    .joinInfo1 div.joinInfoBasicBox{margin:12px 0 0 3px;}
    .joinInfo1 div.joinInfoBasicBox > ul > li{ font-size:14px;}
    /*회원가입 텍스트*/
    
    .boardform colgroup col:first-of-type{width:110px !important;} 
    .boardform tr th, .boardform tr td{padding:5px;}
    .boardform tr th, .boardform tr td, .joinInfo1 .boardform label{ font-size:15px; }
    .boardform tr td input.shortText, .boardform tr td select{width:100%;}
    .boardform tr td input.shortText2{width: calc(100% - 25px);}
    .writeBtn{width:100%; text-align:center;}
    /*가입정보*/
    
    .verificationLBox3{ left:0; margin-left:0; width:100%; height:100vh; top:0; margin-top:0; }
    .verificationLBox3 .pa30{padding: 5px 20px;}
    /*--------------저작권----------------*/
    
    .joinBox .reConsentBox h2{ font-size:22px; padding: 15px 0; line-height:26px;}
    .joinBox .reConsentBox div{  line-height:22px; }
    .joinBox .reConsentBox .reConsentInd{padding-left:70px; text-indent:-65px;}
    .reConsentP{line-height:22px;}
    /*개인정보 재동의*/
    
    .joinAgreeBox{height:200px;}
}
/*mobile*/

@media all and (min-width:601px) and (max-width:1100px) {  
.joinStep ul li{ width:50%; }   

}
/*tablet*/

@media all and (max-width:1101px) {      
    html{overflow-y: scroll;}
}
/*태블릿모바일*/
@media all and (min-width:1101px) {    
    .joinBox{min-height: calc(100vh - 245px);}
}

/*pc*/