@charset "utf-8";

/* =======================================================
    메인 공통
========================================================*/
section{padding: 100px 0;}
h2.main-title{margin-bottom: 50px; font-size: 30px; text-align: center;}

@media (max-width: 768px){
	h2.main-title{font-size: 26px; }
}

@media (max-width: 520px){
	h2.main-title{font-size: 20px; }
}

@media (max-width: 360px){
	h2.main-title{letter-spacing: -0.06em;}
}

/* =======================================================
    메인 - 상단배너
========================================================*/
.main-visual{position: relative; width: 100%; padding: 0; color: #fff; height: 100vh;}
.main-visual .visual-item{position: relative; width: 100%; height: 100vh; overflow: hidden; background-repeat: no-repeat; background-size: cover;}
.main-visual .visual-item::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0, .5);}
.main-visual .visual-txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 1100px; line-height: 1.5;}
.main-visual .visual-txt .visual-txt-top span{color: #29c663;}
.main-visual .visual-txt .visual-txt-top strong{display: block; font-size: 36px; letter-spacing: -0.025em;}
.main-visual .visual-txt .visual-txt-bottom{padding:40px 0 70px; line-height: 1.5;}
.main-visual .visual-txt .visual-btn a{display: block; padding: 13px 25px; background:transparent; border: 1px solid #fff; border-radius: 10px; color: #fff; font-weight: 700; transition: .5s;}
.main-visual .visual-txt .visual-btn a:hover{background:#173a84; border: 1px solid #173a84; transition: .5s;}
.main-visual .scroll-down-arrow img{position: absolute; top: -200%; left: 50%; width: 100%; max-width: 30px; opacity: .7; animation: motion 1s infinite;}

@keyframes motion{
	0%{top: -200%;}
	50%{top: -220%;}
	100%{top: -200%;}
}

@media (max-width: 960px){
	.main-visual .visual-txt .visual-txt-top strong{font-size: 30px;}
	.main-visual .visual-txt .visual-btn a{display: block; padding: 12px 20px; background:#173a84; border: 1px solid #173a84;}
}

@media (max-width: 640px){
	.main-visual .visual-txt .visual-txt-top strong{font-size: 24px; text-align: center;}
	.main-visual .visual-txt .visual-txt-bottom p{font-size: 14px; text-align: center;}
	.main-visual .visual-txt .visual-btn{text-align: center;}
}


@media (max-width: 460px){
	.main-visual .visual-txt .visual-txt-top strong{font-size: 18px; letter-spacing: -0.09em;}
	.main-visual .visual-txt .visual-txt-bottom p{font-size: 13px; text-align: center;}
}

/* =======================================================
    메인 - ERP
========================================================*/
.main-erp{padding-bottom: 0; text-align: left;}
.main-erp .erp-img{float: left; width: 40%; margin-right: 10%;}
.main-erp .erp-img img{width: 100%; max-width: 343px; text-align: center;}
.main-erp .erp-txt{float: left; width: 50%; margin-top: 2%;}
.main-erp .erp-txt-all{margin-bottom: 40px; font-size: 28px; line-height: 1.5; }
.main-erp .erp-txt-all .underline{color: #29c663; font-weight: 600;}
.main-erp .erp-txt-all p:last-child{margin-top: 10px; font-size: 14px; color: #999;}

.main-erp .small-btn a{display: block; padding: 13px 25px; background:#173a84; border: 1px solid #173a84;  border-radius: 10px; color: #fff; font-weight: 700; transition: .5s;}
.main-erp .small-btn a:hover{background:transparent; border: 1px solid #173a84; color: #173a84; transition: .5s;}

@media (max-width: 960px){
	.main-erp .erp-img{width: 40%; margin: 0 7% 0 5%;}
	.main-erp .erp-img img{margin: 0 auto;}
	.main-erp .erp-txt-all{margin-bottom: 30px; font-size: 22px; letter-spacing: -0.025em;}
	.main-erp .erp-txt{width: 48%; margin-top: 5%;}
	.main-erp .small-btn a{padding: 10px 20px;}
}

@media (min-width: 769px) and (max-width: 801px){
	.main-erp .erp-img{margin: 0 5% 0 4%;}
	.main-erp .erp-txt{width: 51%;}
}

@media (max-width: 768px){
	.main-erp{text-align: center;}
	.main-erp .erp-img{float: none; width: 100%; margin-right: 0; margin-bottom:50px;}
	.main-erp .erp-txt{float: none; width: 100%; margin-top: 0;}
	.main-erp .erp-txt-all{margin-bottom: 30px; font-size: 22px; letter-spacing: -0.025em;}
}

@media (max-width: 520px){
	.main-erp .erp-img img{max-width: 243px;}
	.main-erp .erp-txt{float: none; width: 100%; margin-top: 0;}
	.main-erp .erp-txt-all{font-size: 18px;}
}

@media (max-width: 375px){
	.main-erp .erp-txt-all{font-size: 16px;}
}

/* =======================================================
    메인 - 노무관련 서비스
========================================================*/
.main-service .service-list li{float: left; width: 31.415%; margin: 0 2.830% 2.830% 0; border-radius: 10px; text-align: center; box-shadow: 0 0 20px rgba(0,0,0, .1); overflow: hidden; transition: .5s;}
.main-service .service-list li:nth-child(3n){margin-right: 0;}
.main-service .service-list li .service-img{overflow: hidden;}
.main-service .service-list li .service-img img{width: 100%; max-width: 345.56px;}
.main-service .service-list li .service-txt p{height: 50px; line-height: 50px; font-weight: 500;}
.main-service .service-list li:hover .service-img img{transform: scale(1.2); transition: .5s;}
.main-service .service-list li:hover .service-txt p{color: #29c663; transition: .5s;}

@media (max-width: 640px){
	.main-service .service-list li{float: left; width: 48%; margin: 0 4% 4% 0;}
	.main-service .service-list li:nth-child(3n){margin-right: 4%;}
	.main-service .service-list li:nth-child(2n){margin-right: 0;}
}

/* =======================================================
    메인 - 신정욱 노무사
========================================================*/
.main-profile{position: relative; padding: 0;}
.main-profile::after{display: block; width: 100%; height: 235px; margin-top: -235px; background: #f5f5f5; content: ""; }
.main-profile .profile-txt{float: left; width: 55%; text-align: right;}
.main-profile .profile-txt .profile-txt-top{padding: 55px 25px 0 0; height: 150px; background: #173a84; color: #fff; font-size: 24px; line-height: 1.3; letter-spacing: -0.025em;}
.main-profile .profile-txt .profile-txt-bottom{padding-top: 26px;}
.main-profile .profile-txt .profile-txt-bottom .txt-name{font-size: 20px;}
.main-profile .profile-txt .profile-txt-bottom .txt-cpn{color: #999;}
.main-profile .profile-img{float: right; width: 45%; }
.main-profile .profile-img img{width: 100%; max-width: 258px; float: left; margin-left: 10%; }

@media (max-width: 960px){
	.main-profile .profile-txt{width: 60%;}
	.main-profile .profile-txt .profile-txt-top{padding: 55px 25px 0 25px; height: 130px; font-size: 20px; letter-spacing: -0.05em;}
	.main-profile .profile-img{width: 40%; }
}

@media (max-width: 768px){
	.main-profile::after{height: 200px; margin-top: -200px;}
	.main-profile .profile-txt{width: 65%;}
	.main-profile .profile-txt .profile-txt-top{padding: 30px 20px 0 20px; height: 100px; font-size: 18px;}
	.main-profile .profile-txt .profile-txt-bottom .txt-name{font-size: 18px;}
	.main-profile .profile-img{width: 35%; }
	.main-profile .profile-img img{max-width: 200px; }
}

@media (max-width: 640px){
	.main-profile::after{height: 150px; margin-top: -150px }
	.main-profile-wrapper{position: relative;}
	.main-profile .profile-txt{float: none; width: 100%; text-align: center;}
	.main-profile .profile-txt .profile-txt-bottom{position: absolute; bottom: 170px; width:50%; text-align:right;}
	.main-profile .profile-img{width: 50%; }
	.main-profile .profile-img img{margin-left: 20%; margin-top: 20px;}
}

@media (max-width: 420px){
	.main-profile .profile-txt .profile-txt-top{height: 90px; font-size: 16px;}
	.main-profile .profile-txt .profile-txt-bottom .txt-name{font-size: 16px;}
	.main-profile .profile-img img{max-width: 180px; margin-left: 10%; }
}


@media (max-width: 375px){
	.main-profile .profile-txt .profile-txt-top{padding: 30px 10px; height: 50px; font-size: 14px;}
	.main-profile .profile-img img{margin-left: 0;}
}

@media (max-width: 301px){
	.main-profile .profile-txt .profile-txt-top{font-size: 13px; letter-spacing: -0.06em;}
}

/* =======================================================
    메인 - 노무관련 내용 알아보기
========================================================*/
.main-youtube .youtube-box{position: relative; float: left; width: 42.264%; margin: 0 3.867% 3.867% 3.867%; background: #fff; box-shadow: 0 0 20px 0 rgba(0,0,0, .1); border-radius: 10px; overflow: hidden; cursor: pointer;}
.main-youtube .main-ytb-more{position: absolute; top: 28px; right: 10px;}
.main-youtube .main-ytb-more::after{content: ""; display: inline-block; width: 25px; height: 16px; background-image: url(/AppData/images/common/page_next.png); background-repeat: no-repeat; background-size: 22px;}
.main-youtube .main-ytb-more{font-size: 13px; display: inline-block;}
.main-youtube .youtube-box .ytb .ytb-wrap{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.main-youtube .youtube-box .ytb .ytb-wrap iframe, .main-youtube .youtube-box .ytb .ytb-wrap object, .main-youtube .youtube-box .ytb .ytb-wrap embed{position: absolute; top: 0; left: 0; width: 100% !important; height: 100%  !important;}
.main-youtube .youtube-box .youtube-contents{padding: 25px;}
.main-youtube .youtube-box .youtube-contents .ytb-subj{display: block; height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.main-youtube #mv_playlist .nodata{min-height: 300px; text-align: center;}

@media (max-width: 768px){
	.main-youtube .youtube-box{float: none; width: 100%; max-width: 768px; margin: 0 auto 5%;}
	.main-youtube .main-ytb-more{top: 26px;}
}

@media (max-width: 520px){
	.main-youtube .main-ytb-more{top: 22px;}
}


/* =======================================================
    메인 - 노무관련 소식
========================================================*/
.main-board{background: #f6f6f6;}
.main-board .main-board-box{position: relative; float: left; width: 31.415%; max-width: 333px; min-height: 333px; margin-right: 2.830%; background: #fff; box-shadow: 0 0 20px 0 rgba(0,0,0, .1); border-radius: 10px; transition: .3s; cursor: pointer; box-sizing: border-box;}
.main-board .main-board-box:hover{margin-top: -20px; box-shadow: 0 0 20px 0 rgba(0,0,0, .2); transition: .3s;}

.main-board .board-info{margin-right: 0;}
.main-board .main-board-box .board-cate{margin-top: 20px; color: #fff; padding:10px; width: 120px; text-align: center;}
.main-board .main-board-box .board-cate.blue{background: #173a84;}
.main-board .main-board-box .board-cate.green{background: #29c663;}
.main-board .main-board-box .board-content{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88%; padding: 0 20px; text-align: center; overflow: hidden;}
.main-board .main-board-box .board-content .board-haedline{position: relative; max-height: 72px; line-height: 24px; overflow: hidden;}

.main-board .main-board-box .board-view-more{position: absolute; bottom: 0; left: 0; width:100%; max-width: 346px; height: 45px; color: #fff; text-align: center; line-height: 45px; border-radius: 0 0 10px 10px;}
.main-board .main-board-box .board-view-more.blue{background: #173a84;}
.main-board .main-board-box .board-view-more.green{background: #29c663;}

@media (max-width: 960px){
	.main-board .main-board-box{width: 31.415%; max-width: 333px; min-height: 250px;}
}

@media (max-width: 768px){
	.main-board .main-board-box{float: none; width: 90%; max-width: 768px; margin: 0 auto 4%; padding-top: 5px;}
	.main-board .main-board-box .board-view-more{max-width: 768px;}
}