@charset "utf-8";

/* 카테고리 영역 팝업 임시 CSS */
.pop-wrap { position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 90; }
.pop-wrap .cate-pop-area { position: absolute; width: 1400px; height: auto; background: #fff; border-radius: 10px; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); }
.pop-wrap .cate-pop-area .head-area {text-align: center; border-bottom: 1px solid #dee3eb;  width: 100%; padding: 15px 0; position: relative; }
.pop-wrap .cate-pop-area .head-area h4 { font-weight: 500; }
.pop-wrap .cate-pop-area .head-area img { position: absolute; top: 18px; right: 18px; width: 10px; height: 10px; cursor: pointer; opacity: .6; }
.pop-wrap .cate-pop-area .head-area img:hover {opacity: 0.8;}
.pop-wrap .cate-pop-area .body-area { padding: 50px 40px; text-align: center; max-height: 475px; overflow-y: auto;}
.pop-wrap .cate-pop-area .body-area h4 { margin-bottom: 25px; font-size: 13px; font-weight: 400; }
.pop-wrap .cate-pop-area .body-area h4.success { color: #03bb00 }
.pop-wrap .cate-pop-area .body-area h4.error { color: #bf0000 }
.pop-wrap .cate-pop-area .body-area .input-area .input-row {position: relative; margin-bottom: 30px;}
.pop-wrap .cate-pop-area .body-area .input-area .input-row .head {color: #999; font-size: 13px; display: block; margin-bottom: 5px; text-align: left;}
.pop-wrap .cate-pop-area .body-area .input-area .input-row i {position: absolute; top:15px; right: 20px; font-size: 13px; color: #aaa;}
.pop-wrap .cate-pop-area .body-area .input-area .input-row i.success-check { color: #03bb00 }
.pop-wrap .cate-pop-area .body-area .input-area .input-row i.error-check { color: #bf0000 }
.pop-wrap .cate-pop-area .body-area .input-area .input-row input { display: block; width: 100%; border: none; border-bottom: 1px solid #555; height: 45px; outline: 0; -webkit-transition: background .5s; -o-transition: background .5s; transition: background .5s; letter-spacing: 0; font-size: 13px; padding: 0 5px; -webkit-transition: border-color .5s ease,background .5s ease; -o-transition: border-color .5s ease,background .5s ease; transition: border-color .5s ease,background .5s ease; background: #f8f8f8;}
.pop-wrap .cate-pop-area .body-area .input-area .input-row input:hover { background: #efefef; }
.pop-wrap .cate-pop-area .body-area .input-area button {background: #005cd9; font-weight: 500; -webkit-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); -webkit-transition: background .25s ease,-webkit-box-shadow .25s ease; transition: background .25s ease,-webkit-box-shadow .25s ease; -o-transition: background .25s ease,box-shadow .25s ease; transition: background .25s ease,box-shadow .25s ease; transition: background .25s ease,box-shadow .25s ease,-webkit-box-shadow .25s ease; border: none; display: block; width: 100%; margin-top: 30px; color: #fff; height: 40px; border-radius: 5px; font-weight: 400; outline: 0; font-size: 14px; }
.pop-wrap .cate-pop-area .body-area .input-area button:hover { background: #005cd9; -webkit-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); }

/* 사이트 공통 스타일 */
*,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { text-shadow: 1px 1px 1px rgba(0,0,0,0.004); min-width: 1500px; font-size: 62.5%; }
html, body { width:100%; height:100%; background: #fff; color: #222; }
body { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.3rem; letter-spacing: -0.5px; background-color: #fff; text-rendering: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body>.wrapper { overflow-x: hidden; }
a { text-decoration:none; color: #222; }
::-moz-selection {background:#0015ae; color:#FFF; text-shadow:none;}
::selection {background:#0015ae; color:#FFF; text-shadow:none;}
::-moz-selection {background:#0015ae; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#0015ae; color:#FFF; text-shadow:none;}
@media all and (max-width:1199px)
{
	html { font-size: 58.5%; }
}

/*폼 요소*/
input, textarea,option, button { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.2rem; letter-spacing: -0.5px; outline: none; border-radius: 0;}
input[type=text],input[type=password],textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0;  border-radius: 0;}
select {  font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.3rem; letter-spacing: -0.5px; color: #222; border-radius: 0; }

textarea:focus { outline: none; }
select:focus { outline: none; }
button:focus { outline: none; }
input:focus { outline: none; }

input::-ms-input-placeholder { color: #ccc; }
input::-webkit-input-placeholder { color: #ccc; } 
input::-moz-placeholder { color: #ccc; }
textarea::-ms-input-placeholder { color: #ccc; }
textarea::-webkit-input-placeholder { color: #ccc; } 
textarea::-moz-placeholder { color: #ccc; }


/*클리어픽스*/
.clearfix:after { display:block; clear:both; font-size:0; height:0; content: ''; }

/* wrapper */
.wrapper {position: relative; width: 100%; height: 100%;}
.wrapper .container {position: relative; width: 100%; height: 100%;}

/* 레이어 팝업 */
.pop-wrap { position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 90; }
.pop-wrap .pop-area { position: absolute; width: 450px; height: auto; background: #fff; border-radius: 10px; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); }
.pop-wrap .pop-area .head-area {text-align: center; border-bottom: 1px solid #dee3eb;  width: 100%; padding: 15px 0; position: relative; }
.pop-wrap .pop-area .head-area h4 { font-weight: 500; }
.pop-wrap .pop-area .head-area img { position: absolute; top: 18px; right: 18px; width: 10px; height: 10px; cursor: pointer; opacity: .6; }
.pop-wrap .pop-area .head-area img:hover {opacity: 0.8;}
.pop-wrap .pop-area .body-area { padding: 50px 40px; text-align: center; max-height: 475px; overflow-y: auto;}
.pop-wrap .pop-area .body-area h4 { margin-bottom: 25px; font-size: 13px; font-weight: 400; }
.pop-wrap .pop-area .body-area h4.success { color: #03bb00 }
.pop-wrap .pop-area .body-area h4.error { color: #bf0000 }
.pop-wrap .pop-area .body-area .input-area .input-row {position: relative; margin-bottom: 30px;}
.pop-wrap .pop-area .body-area .input-area .input-row .head {color: #999; font-size: 13px; display: block; margin-bottom: 5px; text-align: left;}
.pop-wrap .pop-area .body-area .input-area .input-row i {position: absolute; top:15px; right: 20px; font-size: 13px; color: #aaa;}
.pop-wrap .pop-area .body-area .input-area .input-row i.success-check { color: #03bb00 }
.pop-wrap .pop-area .body-area .input-area .input-row i.error-check { color: #bf0000 }
.pop-wrap .pop-area .body-area .input-area .input-row input { display: block; width: 100%; border: none; border-bottom: 1px solid #555; height: 45px; outline: 0; -webkit-transition: background .5s; -o-transition: background .5s; transition: background .5s; letter-spacing: 0; font-size: 13px; padding: 0 5px; -webkit-transition: border-color .5s ease,background .5s ease; -o-transition: border-color .5s ease,background .5s ease; transition: border-color .5s ease,background .5s ease; background: #f8f8f8;}
.pop-wrap .pop-area .body-area .input-area .input-row input:hover { background: #efefef; }
.pop-wrap .pop-area .body-area .input-area button {background: #005cd9; font-weight: 500; -webkit-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); -webkit-transition: background .25s ease,-webkit-box-shadow .25s ease; transition: background .25s ease,-webkit-box-shadow .25s ease; -o-transition: background .25s ease,box-shadow .25s ease; transition: background .25s ease,box-shadow .25s ease; transition: background .25s ease,box-shadow .25s ease,-webkit-box-shadow .25s ease; border: none; display: block; width: 100%; margin-top: 30px; color: #fff; height: 40px; border-radius: 5px; font-weight: 400; outline: 0; font-size: 14px; }
.pop-wrap .pop-area .body-area .input-area button:hover { background: #005cd9; -webkit-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); }

/* header-container */
.header-container { position: relative; width: 100%; padding: 15px 0; background: #005cd9; }
.header-container .header { position: relative; width: 1200px; margin: 0 auto; }
.header-container .header .logo-area { float: left; cursor: pointer; }
.header-container .header .logo-area img { width: 190px; height: 40px; }
.header-container .header .guide-area { float: right; }
.header-container .header .guide-area a { color: #fff; margin-left: 15px; opacity: 1; -webkit-transition: opacity .3s;-o-transition: opacity .3s;transition: opacity .3s; position: relative; top: 10px;}
.header-container .header .guide-area a i {margin-right: 4px;}
.header-container .header .guide-area a:hover { opacity: .7; }

/* body-container */
.body-container { position: relative; width: 100%; min-height:calc(100% - 215px);}

/* 검색 레이어팝업 */
.pop-wrap.find-company-wrap .pop-area { width: 800px; }
.pop-wrap.find-company-wrap .pop-area .btn-wrap {margin: 0;}
.pop-wrap.find-company-wrap .pop-area .btn-wrap .btn-center {margin: 0;}

/* footer */
.footer-container { position: relative; width: 100%; background: #eee; border-top: 1px solid #dee3eb; }
.footer-container .footer-wrap { position: relative; width: 1200px; margin: 0 auto; padding: 30px 0 30px 200px; color: #8a99ad;}
.footer-container .footer-wrap p { margin-bottom: 5px; }
.footer-container .footer-wrap p.copyright {margin-top: 15px; font-size: 12px; font-weight: 400;}
.footer-container .footer-wrap img { position: absolute; top:30px; left: 0; width: 130px; }

/* ngIf animation */
.animationIf.ng-enter,
.animationIf.ng-leave {
  -webkit-transition: opacity ease-in-out 0.5s;
  -moz-transition: opacity ease-in-out 0.5s;
  -ms-transition: opacity ease-in-out 0.5s;
  -o-transition: opacity ease-in-out 0.5s;
  transition: opacity ease-in-out 0.5s;
}
.animationIf.ng-enter,
.animationIf.ng-leave.ng-leave-active {
  opacity: 0;
}
.animationIf.ng-leave,
.animationIf.ng-enter.ng-enter-active {
  opacity: 1;
}