@charset "utf-8";

/* =======================================================
    서브 공통 - 상단배너
========================================================*/
section{padding: 50px 0;}
section.introduction{padding-top: 100px;}

.top-banner-wrap{position: relative; color: #fff;}
.top-banner-wrap .top-banner{width: 100%; height: 500px; overflow: hidden; background-repeat: no-repeat; background-position: center 30%; background-size: cover;}
.top-banner-wrap .top-banner::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 500px; background: rgba(0,0,0, .5);}
h2.banner-title{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; text-align: center; word-break: keep-all;}
h2.sub-title{font-size: 28px; letter-spacing: -0.025em;}

@media (max-width: 960px){
	.top-banner-wrap .top-banner{height: 300px;}
	.top-banner-wrap .top-banner::after{height: 300px;}
}

@media (max-width: 690px){
	section{padding: 50px 0 70px;}
	section.sub-document-view{padding: 50px 0;}
	section.partice{padding:0;}
	h2.banner-title{font-size: 24px;}
}

@media (max-width: 375px){
	section{padding: 50px 0;}
	h2.banner-title{font-size: 22px;}
}

/*=================================*/
/*연구원 소개*/
/*=================================*/

/*공통*/
.company-left{float: left; width: 30%;}
.company-right{float: left; width: 70%;}

/*회사 이념*/
.company-right .company-logo img{width: 100%; max-width: 700px; margin: 0 auto 30px;}
.company-right .company-info p{line-height: 1.5;}
.company-right .info-principle{margin-top: 50px;}
.company-right .info-principle img{margin: 0 auto; width: 100%; max-width: 700px;}
 
@media (max-width: 690px){
	.company-left, .company-right{width: 100%; float: none;}
	.company-right .company-logo img{max-width: 600px;}
}

/*고객사*/
/*.parter .partner-logo img{float: left; width: 48.518%; max-width: 360px; margin-bottom: 2.964%;}
.parter .partner-logo img:nth-child(odd){margin-right: 2.964%;}*/

/*컨설팅 분야*/
.partice .cpn-part ul li{ text-align: center; }

.partice .cpn-part .consult-list>ul{ float: left; width:calc((100% - 60px)/5); margin-right: 15px; box-sizing: border-box; }
.partice .cpn-part .consult-list>ul>li { padding: 10px 15px; background-color: #173a84; color: #fff; font-size: 18px; font-weight:500; word-break: keep-all;}
.partice .cpn-part .consult-list>ul:last-child { margin-right: 0; }

.partice .cpn-part .consult-list .consult-sub { background-color: #fafafa; min-height: 148px; }
.partice .cpn-part .consult-list .consult-sub li { padding: 15px 20px; }


/*컨설턴트*/
.career{line-height: 1.5;}
.career .cpn-car{min-height: 959px;}
.career .career-tab .career-cpn-nm{float: left; width: 50%; height: 50px; background: #f5f5f5; color: #333; text-align: center; line-height: 50px; cursor: pointer;}
.career .career-tab .career-cpn-nm.cpn-01.active{display: block; background: #29c663; color: #fff;}
.career .career-tab .career-cpn-nm.cpn-02.active{display: block; background: #173a84; color: #fff;}

.career .career-top, .career .career-bottom{float: left; width: 100%;}
.career .career-bottom{display: none;}

.career .cpn-profile{padding: 30px 10px; border-bottom: 1px solid #ddd;}
.career .cpn-profile:nth-of-type(2n){border-bottom: none;}
.career .cpn-profile .labor-aott{display: block; font-size: 24px; margin-bottom: 25px;}
.career .cpn-profile .profile-name{font-size: 18px; color: #29c663;}
.career .cpn-profile .profile-list{margin-bottom: 25px;}
.career .cpn-profile .profile-list li{display: inline-block; margin: 5px 5px 5px 0; padding: 5px 15px; background: #173a84; color: #fff; font-size: 14px;}

.career .profile-career li:before{content: ""; width: 3px; height: 3px; margin-right: 10px; background: #ccc; border-radius: 50%; display: inline-block; vertical-align: middle;}
.career .profile-list > p, .career .profile-career > p, .career .profile-edu > p{padding-bottom: 5px; font-size: 18px; font-weight: 600;}
.career .profile-career, .career .profile-edu{float: left;}
.career .profile-career{width: 65%;}
.career .profile-edu{width: 35%;}

/*연구원 소개 하단 info*/
.contact{position: relative; width: 100%; height: 400px; background-image: url(/AppData/images/sub/bottom_company.jpg); background-repeat: no-repeat; background-size: cover; background-position: right center; line-height: 1.5;}
.contact .cpn-cnt.inner{padding-top: 0; margin-top: -5px;}
.contact .cnt-txt{text-align: left; color: #fff; font-size: 26px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.4;}

.contact .cnt-info{margin-top: 50px; color: #fff;}
.contact .cnt-info li{margin-top: 5px;}
.contact .cnt-info .cpn-call::before, .contact .cnt-info .cpn-fax::before, .contact .cnt-info .cpn-hp::before, .contact .cnt-info .cpn-address::before{
	display: inline-block; content: ""; background-repeat: no-repeat; background-size: contain; background-position: center; width: 35px; height: 35px; margin-right: 10px; vertical-align: middle; 
}
.contact .cnt-info .cpn-call::before{background-image: url(/AppData/images/sub/call.png);}
.contact .cnt-info .cpn-fax::before{background-image: url(/AppData/images/sub/fax.png);}
.contact .cnt-info .cpn-hp::before{background-image: url(/AppData/images/sub/hp.png);}
.contact .cnt-info .cpn-address::before{background-image: url(/AppData/images/sub/pin.png);}
.contact .cnt-info .cpn-address{position: relative;}
.contact .cnt-info .cpn-address .adrs-down{position: absolute; left: 45px;}

@media (max-width: 960px){
	.company-left, .company-right{float: left; width: 100%;}
	.company-left{margin-bottom: 20px;}
	.company-right .company-logo img{max-width: 500px;}
	.company-right .info-principle img{max-width: 600px;}

	.career .cpn-profile .profile-list li{padding: 3px 5px;}
	.career .profile-career, .career .profile-edu{width: 100%;}
	.career .profile-edu{margin-top: 20px;}

	.contact{background-position: 30% center;}
	.contact .cpn-cnt.inner{padding-top: 30px; margin-top: 0;}
	.contact .cnt-txt{font-size: 20px;}
	.contact .cnt-info{font-size: 14px;}
	.contact .cnt-info .cpn-call::before, .contact .cnt-info .cpn-fax::before, .contact .cnt-info .cpn-hp::before, .contact .cnt-info .cpn-address::before{width: 25px; height: 25px;}
	.contact .cnt-info .cpn-address .adrs-down{left: 35px;}

	/* 컨설팅 분야 */
	.partice .cpn-part .consult-part { padding: 0 10px; }
	.partice .cpn-part .consult-list ul { width: auto; float: none; margin-bottom: 25px; margin-right: 0; }
	.partice .cpn-part .consult-list ul:last-child{ margin-bottom: 0; }
	.partice .cpn-part .consult-list ul li { text-align: left; width: auto; }
	.partice .cpn-part .consult-list .consult-sub { min-height: auto; }
	.partice .cpn-part .consult-list .consult-sub li { float: left;  }
	
}

@media (max-width: 490px){
	.contact{background-position: center;}
	.contact .cnt-txt{text-align: center; font-size: 16px;}
	.contact .cnt-info{font-size: 13px;}
}

@media (max-width: 425px){
	.career .career-tab .career-cpn-nm{font-size: 14px; letter-spacing: -0.05em;}
	.career .cpn-profile .profile-list li{font-size: 13px;}
	.career .profile-career li{font-size: 14px; letter-spacing: -0.05em;}
}

@media (max-width: 320px){
	.contact .cnt-info .cpn-address{letter-spacing: -0.025em;}
}

/*=================================*/
/*노무 콘텐츠(유튜브)*/
/*=================================*/
.ytb-contents li{float: left; width: 31.415%; margin: 0 2.830% 2.830% 0; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,.1); overflow: hidden;}
.ytb-contents li:nth-of-type(3n){margin-right: 0;}
.ytb-contents li.course-nodata{float: initial; width: 100%; margin: 0 auto; border-radius: none; box-shadow: initial; text-align: center;}
.ytb-contents #mv_playlist .ytb .ytb-wrap{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.ytb-contents #mv_playlist .ytb .ytb-wrap iframe, .ytb-contents .youtube-box #mv_playlist .ytb .ytb-wrap object, .ytb-contents .youtube-box #mv_playlist .ytb .ytb-wrap embed{position: absolute; top: 0; left: 0; width: 100% !important; height: 100%  !important;}
.ytb-contents #mv_playlist .youtube-contents{min-height: 74px; padding: 25px;}
.ytb-contents #mv_playlist .youtube-contents .ytb-subj{display: block; height: 20px; margin-bottom: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.ytb-contents #mv_playlist .youtube-contents .ytb-tag{margin-right: 5px; word-break: keep-all; font-size: 14px; color: #aaa;}

@media (max-width: 960px){
	.ytb-contents li{width: 48.585%;}
	.ytb-contents li:nth-of-type(3n){margin-right: 2.830%;}
	.ytb-contents li:nth-of-type(2n){margin-right: 0;}
}

@media (max-width: 640px){
	.ytb-contents li{width: 100%; margin-bottom: 5%;}
	.ytb-contents li:nth-of-type(3n){margin-right: 0;}
	.ytb-contents #mv_playlist .youtube-contents{min-height: 54px;}
}

/*=========================================================================*/
/*서비스 - [노무 기사] + [노무 서식] + [노무/세무 이슈] + [지원금/정책 자금]*/
/*=========================================================================*/
table{width: 100%; min-width: 100%; border-collapse: collapse; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; table-layout: fixed;}
thead{width: 100%; background: #fafafa;}
thead th{padding: 10px;}
tbody td{padding: 15px 20px; border-top: 1px solid #ddd;}
tbody td.tbl-subject a{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
tbody td.tbl-modify{text-align: center;}
tbody td.tbl-date{text-align: center;}

@media (max-width: 768px){
	table, tbody td{border-top: none;}
	colgroup{display: none;}
	thead{display: none;}
	tr{border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
	tr:first-child{border-top: 2px solid #29c663;}
	td{box-sizing: border-box;}
	tbody td.tbl-subject{display: block; width: 100%; text-align: left;}
	tbody td.tbl-modify, tbody td.tbl-date{display: block; font-size: 14px; text-align: left;}
	tbody td.tbl-subject a{font-size: 18px; font-weight: 600;}
	tbody td.tbl-modify{margin-right: 5px; padding-top: 0; color: #999;}
	tbody td.tbl-date{color: #999; padding-top: 0;}
	tbody td.tbl-modify::before{content: "최종 수정일 : ";}
	tbody td.tbl-date::before{content: "작성일 : ";}
}


/*=========================================================*/
/*서비스 - [노무 기사] + [노무 서식] + [노무/세무 이슈] view*/
/*==========================================================*/
.document-board{border: 1px solid #ddd;}
.document-board .board-head{background: #fafafa; padding: 30px 20px; }
.document-board .board-head strong{display: inline-block; margin-bottom: 15px; font-size: 20px;}
.document-board .board-head p{color: #666; font-size: 14px; line-height: 1.5;}
.document-board .board-head .board-modify-date::before{content: "최종 수정일 : "; }
.document-board .board-head .board-date::before{content: "작성일 : ";}



.document-board .board-contents{padding: 30px 20px; min-height: 300px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.document-board .board-contents p a{word-break: break-all;}
.document-board .board-file{width: 100%; padding: 10px 20px; box-sizing: border-box;}
.document-board .view-file{font-size: 13px; color: #999;}
.document-board .view-upload{width: 100%;}
.document-board .view-upload a{display: inline; word-break: break-all;}
.document-board .view-upload div{margin: 15px 0; font-size: 13px;}
.document-board .view-upload div:last-child{margin-bottom: 0;}
.document-board .view-upload img{display: inline; width: 20px; height: 20px; margin-right: 7px; border-radius: 5px; vertical-align: middle;}
.document-board .view-upload div span{line-height: 1.5;}
.document-board .board-page .page-next, .document-board .board-page .page-prev{border-top: 1px solid #ddd; height: 40px; font-size: 13px; line-height: 40px;}
.document-board .board-page .view-next, .document-board .board-page .view-prev{float: left; width: 100px; height: 40px; border-right: 1px solid #ddd; background: #f6f6f6; color: #999; text-align: center; box-sizing: border-box;}
.document-board .board-page .view-subj{float: left; width: calc(100% - 100px);}
.document-board .board-page .view-subj p{padding: 0 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.document-board .board-page .view-subj p>a{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

/*====================================*/
/*서비스 - 노무 상담*/
/*====================================*/
.councel{padding-bottom: 0;}
.councel .councel-top-txt{padding-bottom: 0; font-size: 14px;}
.councel .councel-top-txt, .srv-councel{max-width: 768px;}
.srv-councel input, .srv-councel select{padding: 0 15px;}
.srv-councel dt, .srv-councel dd{float: left; min-height: 40px; padding: 25px; box-sizing: border-box;}
.srv-councel dt.required::before, .councel .councel-top-txt::before{content: "*"; display: inline-block; color: #f82a2a;}
.srv-councel dl{width: 100%; border: 1px solid #ddd; border-top: none;}
.srv-councel dl:first-child{border-top: 1px solid #ddd;}
.srv-councel dl dd span{position: relative;}
.srv-councel dt{width: 25%; background: #f6f6f6; border-right: 1px solid #ddd; line-height: 40px;}
.srv-councel dt.councel-cont{min-height: 353px;}
.srv-councel dt.councel-file{min-height: 139px;}
.srv-councel dd{width: 75%;}

.srv-councel dd .councel-name, .srv-councel dd .councel-tel{width: 50%;}
.srv-councel dd .councel-type, .srv-councel dd .councel-subj, .srv-councel dd .councel-txtbox{width: 100%;}

.srv-councel dd .selectbox select{background: url(/AppData/images/common/down_icon.png) no-repeat right 15px center; background-size: 11px;}
.srv-councel dd .councel-txtbox{height: 300px; border: 1px solid #eee;}

.srv-councel dd.filebox .upload-nm{display: inline-block; width: 78%; height: 40px; margin-right: 2%; padding: 0 10px; vertical-align: middle; border: 1px solid #eee; }
.srv-councel dd.filebox label{display: inline-block; width: 20%; height: 40px; background: #29c663; font-size: 14px; text-align: center; color: #fff; line-height: 40px; vertical-align: middle;}
.srv-councel dd.filebox input[type="file"]{position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}
.srv-councel dd.filebox p{margin-top: 10px; font-size: 14px; color: #999;}
.srv-councel dd.filebox .upload-file-nm{font-size: 14px; word-break: break-all;}
.srv-councel dd.filebox .upload-delete{display: inline-block; width: 20px; height: 20px; margin-left: 5px; vertical-align: middle; cursor: pointer;}

@media (max-width: 640px){
	.councel .councel-top-txt, .srv-councel{max-width: 640px;}
	.srv-councel input, .srv-councel select{padding: 0 10px;}
	.srv-councel dl{border: none;}	
	.srv-councel dl:first-child{border-top: 2px solid #29c663;}
	.srv-councel dl:last-child{border-bottom: 2px solid #29c663;}

	.srv-councel dt, .srv-councel dd{float: none; width: 100%;}
	.srv-councel dt{background: #fff; padding: 15px 0; border-right: none;}
	.srv-councel dd{padding: 0;}

	.srv-councel dd .councel-name, .srv-councel dd .councel-tel{width: 100%;}
	.srv-councel dt.councel-cont, .srv-councel dt.councel-file{min-height: 100%;}
	.srv-councel dd .selectbox select{background: url(/AppData/images/common/down_icon.png) no-repeat right 10px center; background-size: 11px;}
	.srv-councel dd.filebox{padding-bottom: 35px;}
}

@media (max-width: 425px){
	.srv-councel dd .selectbox::after{left: 90%;}
	.srv-councel dd.filebox .upload-nm{width: 76%; margin-right: 0;}
	.srv-councel dd.filebox label{width: 24%; min-width: 55px; font-size: 13px;}
}

/*====================================*/
/*서비스 - 노무 강의*/
/*====================================*/
.course-wrap li{position: relative; float: left; width: 22.8775%; max-width: 240.5px; margin: 0 2.830% 2.830% 0; background: #fff; box-shadow: 0 0 20px 0 rgba(0,0,0, .1); border-radius: 10px; transition: .3s;}
.course-wrap li:nth-child(4n){margin-right: 0;}

.course-wrap li.course-end::after{position: absolute; top: 0; left: 0; content: ""; background: rgba(0,0,0,.3); width: 100%; height: 100%; border-radius: 10px; cursor: pointer;}
.course-wrap li:hover .course-mask{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #29c663; text-align: center; border-radius: 10px; cursor: pointer; transition: .3s;}
.course-wrap li:hover .course-mask p{display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; }
.course-wrap li .course-mask p{display: none;}

.course-wrap li .course-img{position: relative; width: 100%; max-width: 240.5px; height: 100%; min-height: 240.5px; border-radius: 10px 10px 0 0;}
.course-wrap li .course-img .cost_y, .course-wrap li .course-img .cost_n{position: absolute; bottom: 0; padding: 10px; color: #fff;}
.course-wrap li .course-img .cost_y{background: #f82a2a;}
.course-wrap li .course-img .cost_n{background: #f5d22d;}

.course-wrap li .course-info{position: relative; padding: 10px; height: 60px; text-align: left;}
.course-wrap li .course-info .course-txt .course-sbjt{height: 56px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; word-break: keep-all; overflow: hidden;}

/*강의 클릭 시 팝업창*/
.course-pop{position: fixed; top: 0; left: 0; content: ""; width: 100%; height: 100vh; background: rgba(0,0,0, .7); z-index: 1001;}
.course-pop-all{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 600px; min-height: 387.56px; padding: 0 20px 20px 20px; margin: 0 auto; background: #fff; box-shadow: 0 0 20px 0 rgba(0,0,0, .1); border-radius: 10px;}

.course-pop .course-pop-header{width: 100%; height: 15px; margin-bottom: 20px;}
.course-pop .course-pop-header img{float: right; width: 100%; max-width: 15px; padding: 20px 0 15px;}

.course-pop .course-pop-subj{display: inline-block; margin-bottom: 20px;}
.course-pop .course-pop-period .pop-enr-period.end, .course-pop .course-pop-period .pop-edu-period.end{color: #f82a2a;}
.course-pop .pop-period-01, .course-pop .pop-period-02{width: 50%;}
.course-pop .pop-period-01 .pop-enr, .course-pop .pop-period-02 .pop-edu{color: #29c663; margin-bottom: 5px;}
.course-pop .pop-period-01{float: left;}
.course-pop .pop-period-02{float: right;}
.course-pop .course-pop-memo{margin: 30px 0; padding: 10px; border: 1px solid #ddd; width: 100%; height: 150px; box-sizing: border-box; overflow-y: scroll;}
.course-pop .course-pop-btn{width: 100%; text-align: center;}
.course-pop .course-pop-btn button{width: 100%; height: 45px; background: #173a84; color: #fff; line-height: 45px; }

@media (max-width: 960px){
	.course-wrap li{float: none; width: 100%; max-width: 768px; margin: 0 auto 2.830%;}
	.course-wrap li:nth-child(4n){margin: 0 auto 2.830%;}
	.course-wrap li .course-mask{line-height: 174.3px;}
	.course-wrap li.course-end::after{position: static;}
	.course-wrap li .course-img .cost_y, .course-wrap li .course-img .cost_n{right: 0;}
	.course-wrap li .course-img{float: left; width: 40%; max-width: 310px; min-height: 174.31px; border-radius: 10px 0 0 10px;}
	.course-wrap li .course-info{float: right; width: 60%; height: 100%; padding: 20px; box-sizing: border-box;}
	.course-wrap li .course-info .course-txt .course-sbjt{height: 100%; max-height: 134px; -webkit-line-clamp: 7;}
	.course-pop .pop-period-01 .pop-enr-period, .course-pop .pop-period-02 .pop-edu-period{letter-spacing: -0.05em;}
}

@media (max-width: 768px){
	.course-pop-all{max-width: 500px;}
}

@media (max-width: 520px){
	.online-course-txt .online-with{font-size: 16px;}
	.course-wrap li{margin-bottom: 20px;}
	.course-wrap li .course-mask{line-height: 239.19px;}
	.course-wrap li .course-img, .course-wrap li .course-info{float: none; width: 100%;}
	.course-wrap li .course-img{max-width: 520px; min-height: 180px; border-radius: 10px 10px 0 0;}
	.course-pop-all{max-width: 400px;}
}	

@media (max-width: 425px){
	.course-pop-all{max-width: 350px;}
	.course-pop-period{font-size: 14px;}
}

@media (max-width: 375px){
	.course-pop-all{max-width: 300px;}
	.course-pop-period{font-size: 13px;}
	.course-pop .pop-period-01 .pop-enr-period, .course-pop .pop-period-02 .pop-edu-period{letter-spacing: -0.1em;}
}