﻿html, body {font-family: 'Noto Sans KR', sans-serif, '맑은고딕', '돋움', 'Sans-serif' ,arial; -webkit-text-size-adjust: 100%;}
html{overflow-y: scroll; overflow-x: hidden;}
body{position:relative; overflow-x:hidden;}
.hide{position:absolute; display:block; overflow:hidden; border:0; width:1px; height:1px; clip: rect(1px, 1px, 1px, 1px); clip-path:inset(50%);}
input:-ms-input-placeholder { color: #aaa; }
input::-webkit-input-placeholder { color: #aaa; }
input::-moz-placeholder { color: #aaa; }
a{display:block;}
.right{text-align:right !important; }
.center{text-align:center !important;}
.left{text-align:left !important;}
.ma30{margin-bottom:30px !important;}
.ma50{margin-bottom:50px !important;}
.ma80{margin-bottom:80px !important;}
.maL15{margin-left:15px !important;}
.blue{color:#0072de;}
.floatClear:after{content: ''; display: block; clear: both; visibility: hidden;}


.errorPage{background:url(/libsearch/images/egovframework/uce/error.jpg) center 50px no-repeat ;}
.errorPage section{width:650px; margin: 570px auto 0 auto; padding:30px; text-align:center; box-sizing:border-box;}
.errorPage section p{font-size:28px; font-weight:bold; margin-bottom:30px;}
.errorPage section .grayBox{font-size:17px; line-height:26px; margin-bottom:30px; background-color:#f1f1f1; padding:20px 5px;}
/*에러페이지*/


.joinBody{min-height:100vh; box-sizing:border-box; padding:0px 0 70px 0;}
.joinBody header{padding:20px; box-sizing:border-box; width:100%; text-align:center; border-bottom:1px solid #555; margin-bottom:4em;}
.joinBody header img{ width:200px;}
.loginBody{min-height:100vh; box-sizing:border-box; padding:120px 0 70px 0;}
.loginBody header{padding:25px; box-sizing:border-box; width:100%; text-align:center;}
.loginBody header img{ width:252px;}
footer {position:absolute; bottom:0; left:0; padding:15px 0 45px 0; font-size:14px; line-height:17px; text-align:center; width:100%;}
/*기본 폼*/

.loginBox .inputBoxL {margin : 20px auto;}
.inputBoxL label {position:absolute; display:block; overflow:hidden; border:0; width:1px; height:1px; clip: rect(1px, 1px, 1px, 1px); clip-path:inset(50%);}
.inputBoxL input {width: 100%; height: 56px; padding: 18px 12px; border: 1px solid #e5e8eb; background-color: #fff; font-size: 16px; font-weight: 700; outline: 0; transition: border-color .3s linear; box-sizing:border-box;}
.inputBoxL input:focus { border: 2px solid #0072de; padding: 17px 11px; transition: border-color .4s linear; outline:0;}
.login_wrap form > a { width: 100%; height: 60px; font-size: 18px; color: #fff; background-color: #17191d; transition: all .2s linear; text-align:center; line-height:60px; margin-top:60px;}
.login_wrap form > a:hover { outline: 0; background-color: #0072de; transition: all .3s linear;}

.loginFind li a{color:#999; display:inline-block; font-size:14px; margin:15px 5px; font-weight:bold;}
.loginFind li:first-of-type{float:left;}
.loginFind li:last-of-type{float:right;}
/*로그인*/



.btnBox{text-align:center; margin:50px 0 10px 0;}
.joinBasicBtn{margin-bottom:10px; box-sizing:border-box;}
.joinBasicBtn1{ color: #fff; background-color: #17191d; transition: all .2s linear; text-align:center; padding:22px 10px;}
.joinBasicBtn1:hover { outline: 0; background-color: #0072de; transition: all .3s linear;}
.joinBasicBtn2{color:#000; padding:20px 8px; border:1px solid #000; transition: all .2s linear; text-align:center; }
.joinBasicBtn2:hover{color:#0072de; border:1px solid #0072de; transition: all .3s linear; outline: 0; }
/*버튼*/

.joinArea { width:100%; overflow:hidden; box-sizing:border-box;}
.joinBox h2{text-align:center; font-size:1.5em; margin-bottom:2em;}
.joinBox p{text-align:center; font-size:0.9em; line-height:1.5em; margin-bottom:30px; color:#888;}

.inputBox { width : 100%; box-sizing : border-box;  margin : 25px auto 0px auto;}
.inputBox label { display : block; font-size: 0.9em; color:#555; cursor:text; transition:all .15s; margin-bottom:10px;}
.inputBox.focus label{ color:#0072de;}
.inputBox.active label{ color:#aaa;}
.inputBox input { display : block; width : 100%; height : 55px; background-color : #f5f6f8; border:2px solid #f2f4f7; box-sizing:border-box; padding:0 10px; color:#444; font-size:17px; border-radius:3px;}
.inputBox input:focus { border:2px solid #0072de; color:#0072de; outline:0;}
.inputBox input.shortText{width:45%; max-width:250px; display:inline-block;}
.inputBox input.shortText2{width:calc(100% - 103px); display:inline-block;}
.inputBox input.shortText4{width:calc(50% - 7px); display:inline-block;}
.writeBtn{display:inline-block;  color: #fff; background-color: #585f6d; transition: all .2s linear; text-align:center; width:106px; margin-left:-7px; border-radius:0 3px 3px 0; line-height:55px; vertical-align:middle;}
.writeBtn:hover { outline: 0; background-color: #0072de; transition: all .3s linear;}
.inputBox select { display : block; width : 200px; height : 45px; background-color : transparent; border : none; border-bottom:2px solid #888; box-sizing:border-box;  color:#444; font-size:17px;}
.inputBox select:focus { border-bottom:2px solid #0072de; color:#0072de; outline:0;}

.textBox{margin-bottom:20px;}
.textBox span:first-of-type{color:#888;}
.textBox span:last-of-type{float:right;}
.dashBar{border:1px dashed #ddd ; margin:40px 0;}

.radioBox p{margin:25px 0 10px 0; color:#555; text-align:left;}
.radioBox label{margin-right:10px;}
p.commentB{font-size:14px; color:#0072de; padding:5px 0 0 0 ; line-height:18px; text-align:left; display:block;}
p.commentR{font-size:14px; color:#ed0b2d; padding:5px 0 0 0 ; line-height:18px; text-align:left; display:block;}

.twoInp > div{display:inline-block; width:auto;}
.inputBox input.shortText3{width:200px; display:inline-block;}

.joinInfo1 h3{font-size:1.2em; }

/*가입폼*/


.overlapBox {position: fixed; top: 0; right: 0; bottom: 0;  left: 0; background: rgba(0, 0, 0, 0.6);  overflow:hidden;
-webkit-transition: opacity 100ms ease-in; -moz-transition: opacity 100ms ease-in; transition: opacity 100ms ease-in;  z-index:9999; display:none;}
.overlapBox:target { opacity:1; pointer-events: auto; height:auto; }
.overlapBox .overlapCon{position: absolute; left:50%; margin-left:-150px; width: 300px; height:185px; top:50%; margin-top:-100px; background-color:#fff; box-sizing:border-box; line-height:25px; text-align:center; padding:30px 10px 10px 10px;}
.overlapBox .overlapCon div{padding-top:20px;}
.overlapBox .overlapCon div a{color: #fff; background-color: #17191d; transition: all .2s linear; text-align:center; padding:15px 5px;}
.overlapBox .overlapCon div a:hover { outline: 0; background-color: #0072de; transition: all .3s linear;}
.overlapBox > div > a{position:absolute; top:0px; right:0px; z-index:999; }
.joinComent{font-size:14px; line-height:17px;}
/*레이어버튼*/


.checkAll{ background-color : #f5f6f8; border:2px solid #f2f4f7; box-sizing:border-box; padding:20px; color:#444; border-radius:3px; margin-bottom:30px;}
.checkAll *{vertical-align:middle; margin-right:5px; display:inline-block;}

.checkReJoin{ background-color : #f5f6f8; border:2px solid #f2f4f7; box-sizing:border-box; padding:20px; color:#444; border-radius:3px; margin-bottom:30px;}
.checkReJoin *{vertical-align:middle; margin-right:5px; display:inline-block; font-weight: bold;}

.choice{position:relative; padding:10px 15px; box-sizing:border-box;}
.choice label{line-height:30px; margin-left:5px;}
.slideDownLlist li .slideDownBtn{display:block; padding: 11px 8px; cursor:pointer; position:absolute; top:10px; right:5px; transition-duration: 0.5s; transform: rotate(-90deg);}
.slideDownLlist li .slideDownBtn:hover, .slideDownLlist li.active .slideDownBtn {transform: rotate(0deg);}

.slideDownLlist .slideData{box-sizing:border-box; max-height:200px; background-color : #f5f6f8; border:2px solid #f2f4f7; box-sizing:border-box; padding:15px; color:#444; border-radius:3px; overflow-y:scroll; margin-top:10px; font-size:0.8em; line-height:1.2em;}
/*회원가입 개인정보이용동의*/

.myBody{background:#f7f9fa;}
.myBody header{ border-bottom:1px solid #ddd;  background:#fff;}

.maInfo{position:relative; margin-bottom:50px;}
.maInfo p {position:absolute; top:65px; right:0; box-sizing:border-box; width:100px; height:100px; line-height:94px; border-radius:50px; text-align:center; border:3px solid #0072de; color:#0072de; font-size:1.2em;}

.maInfo span{font-size:1.5em; display:block; margin-bottom:40px;}
.maInfo span a{float:right; margin-top:3px;}
.maInfo ul { padding-right:100px;}
.maInfo ul li {margin-bottom:12px;}
.maInfo ul li dl dt{display:inline-block; color:#888; vertical-align:top;}
.maInfo ul li dl dd{display:inline-block;  vertical-align:top;}
.maInfo ul li dl dd br{display:none;}

.myList h3{ margin-bottom:15px; font-size:1.1em;}
.myList ul {background:#fff; border-radius:10px; padding:25px 5px 30px 5px; box-sizing:border-box; margin-bottom:50px;}
.myList ul li {float:left; width:25%; text-align:center; position:relative;}
.myList ul li:before {content:''; display:block; width:1px; height:40px; background:#e1e3ed; position:absolute; top:20px; left:0;}
.myList ul li:first-of-type:before {display:none;}
.myList ul li a{text-align:center; display:inline; color:#555;}
.myList ul li a:hover{color:#000;}
.myList ul li a img{width:45px; padding-bottom:10px; }

.myApp ul li {float:left; width:33.3%; text-align:center}
.myApp ul li a{text-align:center; display:inline;}

.withdrawTi{font-size:1.5em; margin-bottom:30px;}

.bookLinkBtn{display:inline-block; padding:5px 6px 5px 6px;  color: #fff; background-color: #17191d; transition: all .2s linear; margin:-5px 0 -5px 5px; border-radius:3px; font-size:15px;}
.bookLinkBtn:hover { outline: 0; background-color: #0072de; transition: all .3s linear;}


.copyBtn{display:inline-block; border:1px solid #ddd; background:#f1f1f1; color:#888; padding:4px 5px 4px 5px; margin-left:8px; border-radius:3px; font-size:15px;}
.copyBtnT{margin:-5px 0 -5px 5px;}


.progress{height:5px; background:#eee; border-radius:10px; width:200px; margin:0 auto 50px auto; position:relative;}
.progress p{height:5px; background:#555; border-radius:10px;  position:absolute; top:0; left:0; }


.agreeConBox{width:100%; box-sizing:border-box;}
.mobileInfo{margin-bottom:5px; border:1px dashed #ddd; display:block; padding:5px; background:#fafafa; color:#888;}
.tableBox{ margin-bottom:10px; background-color:#fff; overflow-x:scroll;}
.tableBox table{width:100%; border-collapse:collapse; border-spacing:0; table-layout:fixed; min-width:550px;}
.type1 th, .type1 td { border : 1px solid #ddd; padding :4px; line-height:16px; vertical-align:middle; font-size:12px;}
.type1 th { background : #f4f7fb; font-weight :bold; border-bottom:none; text-align:center;}
.type1 td.toRight {text-align:right; padding-right:10px;}
.agreeConBox > ul {margin-bottom:10px; }
.agreeConBox > ul li{margin-bottom:5px; text-indent:-10px; padding-left:10px; }
.agreeConBox > ul li:before{content:'- '; }
.homeRBox section{margin-bottom:15px;}
.homeRBox h4{margin-bottom:7px; font-size:16px; font-weight:bold; text-align:center;}
.homeRBox article{margin-bottom:15px;}
.homeRBox article h5{margin-bottom:10px; font-size:15px; font-weight:bold;}
.homeRBox article ul > li{margin-bottom:5px; text-indent:-15px; padding-left:15px;}
.homeRBox article ul > li ol{padding:5px 0  0 15px;}
.homeRBox article ul > li ol li{margin-bottom:3px;}
.bulNoneLi{padding:0 !important; text-indent:0 !important;}
.type1 .strong{color:#0267C5; font-size: 1.2em; text-decoration: underline;}

/*동의 컨텐츠*/
@media all and (max-width:790px) {
    html, body { font-size:15px;}
    body { padding:0 20px;}
    .joinArea { padding:0 20px;}

    .errorPage{background:url(/libsearch/images/egovframework/uce/error.jpg) center 80px no-repeat ; background-size:250px;}
    .errorPage section{ width:100%; margin:260px auto 0 auto; padding:30px 0px;}
    .errorPage section p{font-size:18px; line-height:24px; margin-bottom:10px;}
    .errorPage section .grayBox{font-size:14px; line-height:20px; margin-bottom:20px; padding:10px;}
    .errorPage a{margin-bottom:5px;}
    /*에러페이지*/

    .maInfo ul li dl dd br{display:block;}
    .bookLinkBtn{ margin:5px 0 0 0px; }
    .copyBtnT{ margin:5px 0 0 0px; }
}
/*mobile*/

@media all and (min-width:791px) {
    html, body { font-size:17px;}
    .joinArea { overflow:hidden; max-width:1000px; padding:0 20px; margin:0px auto 0 auto;}
    .loginArea {max-width:460px; margin:50px auto 0 auto; }
}
/*pc~t*/

.guideList h3{ margin-bottom:15px; font-size:1.1em;}
.guideList ul {background:#fff; border-radius:10px; padding:25px 5px 30px 5px; box-sizing:border-box; margin-bottom:50px;}
.guideList ul li {float:left; width:33%; text-align:center; position:relative;}
.guideList ul li:before {content:''; display:block; width:1px; height:40px; background:#e1e3ed; position:absolute; top:20px; left:0;}
.guideList ul li:first-of-type:before {display:none;}
.guideList ul li a{text-align:center; display:inline; color:#555;}
.guideList ul li a:hover{color:#000;}
.guideList ul li a img{width:55px; padding-bottom:10px; }