@charset "utf-8";
h4.title{font-size:36px;color:#3c3a39;font-weight:700;text-align:center;line-height:1;padding-bottom:35px}
/*Top Section*/
.top_section{background:#f5f5f5;padding:25px 0}
.main_banner{width:calc(100% - 340px);float:left;position:relative}
.main_banner .flex-viewport{overflow:hidden}
.main_banner .slides li a img{width:100%}
.main_banner .slides li a img.mo{display:none}
.main_banner .flex-control-nav{width:100%;text-align:center;position:absolute;left:0;bottom:15px;z-index:9}
.main_banner .flex-control-nav li{display:inline-block;width:13px;height:13px;margin:0 4px}
.main_banner .flex-control-nav a{display:block;height:13px;border:2px solid #fff;border-radius:100%;cursor:pointer}
.main_banner .flex-control-nav a span{display:none}
.main_banner .flex-control-nav a.flex-active{background:#fff}
.main_banner a.ctrl{position:absolute;height:100%;width:45px;z-index:10;top:0}
.main_banner a.ctrl img{position:absolute;left:50%;top:50%;transform:translate(-50% , -50%)}
.main_banner a.ctrl:hover{background:rgba(255,255,255,0.2)}
.main_banner a.prev{left:0}
.main_banner a.next{right:0}
.top_section .right_con{float:right;width:315px}
.login_wrap{width:315px;height:115px;text-align:center;padding:20px 20px 0 20px;background:#fff}
.login_wrap > a{width:134px;display:inline-block;height:40px;line-height:40px;text-align:center;font-size:16px;color:#fff;font-weight:700}
.login_wrap > a.local{background:#ffae3e;float:left}
.login_wrap > a.naver{background:#60cd30;float:right}
.login_wrap p{text-align:right;padding-top:15px;clear:both}
.login_wrap p a{font-weight:400;display:inline-block;line-height:25px;position:relative;padding-left:10px}
.login_wrap p img{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.login_wrap a.find{margin-right:10px}
.login_wrap a.join{font-weight:700;color:#ffae3e}
.login_wrap.after p.user{text-align: left;margin-bottom: 12px;padding-top:0;}
.login_wrap.after a.local:last-child{float: right;}

.news_wrap{margin-top:25px}
.news_wrap .tab{width:100%;display:table}
.news_wrap .tab li{width:33.33%;display:table-cell}
.news_wrap .tab li a{display:block;text-align:center;font-weight:400;height:50px;line-height:50px;background:#fafafa;color:rgba(60,58,57,0.5);border:1px solid #ebe9e9}
.news_wrap .tab li:nth-child(2) a{border-left:none;border-right:none}
.news_wrap .tab li a.on{background:#fff;border-bottom:0;color:#3c3a39;font-weight:700}
.info_wrap{background:#fff;height:260px;border:1px solid #ebe9e9;border-top:none;padding:5px 25px 0 25px;position:relative}
.info_wrap .info{display:none}
.info_wrap li{height:60px;margin-top:10px;width:100%;display:inline-block} 
.info_wrap li a{display:block}
.info_wrap li p{height:40px;position:relative;padding-left:10px;font-size:16px;line-height:20px;color:#3c3a39;height:40px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.info_wrap li p:before{position:absolute;width:4px;height:4px;top:9px;left:0;content:'';background:#474544}
.info_wrap li span{display:block;padding-left:10px;color:#9e9e9e;font-size:15px;font-weight:400;line-height:1;padding-top:5px}
.info_wrap .more{text-align:right}
.info_wrap .more a{margin-top:3px;display:inline-block;color:#3c3a39;font-size:15px;font-weight:400;line-height:1}
.info_wrap .more a img{margin-right:9px;padding-bottom:3px}
/*Swiper Slider Area(Common)*/
.slider_area article{position:relative}
.slider_area .swiper-button-prev{background-image:url(../images/prev_black.png);left:-40px;background-size:16px}
.slider_area .swiper-button-next{background-image:url(../images/next_black.png);right:-40px;background-size:16px}
.slider_area .more_btn{text-align:center;margin-top:30px}
.slider_area .more_btn a{display:inline-block;padding:0 20px;height:35px;text-align:center;line-height:35px;border:1px solid #3c3a39;border-radius:40px;font-size:15px;font-weight:400;transition:all .3s;-webkit-transition:all .3s}
.slider_area .more_btn a img{margin-right:7px;padding-bottom:5px}
/*추천교육과정*/
.recommend{background-image:linear-gradient(to bottom, #fff 50%, #ebe9e9 50%);padding:65px 0 50px}
.recommend .flex-viewport{overflow:hidden}
.recommend .swiper-slide > a{display:inline-block;background:#fff;box-sizing:border-box;width:100%}
.recommend .thumb{position:relative}
.recommend .thumb img{width:100%}
.recommend .thumb i.ing{width:65px;position:absolute;right:5px;top:0}
.recommend .txt{padding:0 20px;position:relative}
.recommend p.wtitle{margin:20px 0 40px;color:#3c3a39;font-size:18px;font-weight:400;letter-spacing:-1px;line-height:26px;height:50px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.recommend .desc{border-top:1px solid #e9e9f2;padding:20px 0}
.recommend .desc > p{position:relative;color:#52504F;font-size:16px;font-weight:400;width:100%;padding-left:25px;text-overflow:ellipsis;max-width:100%;overflow:hidden;white-space:nowrap;height:25px;line-height:25px;letter-spacing:-1.5px}
.recommend .desc > p:before{position:absolute;left:0;height:20px;top:50%;transform:translateY(-50%);clear:both;content:'';display:block;width:20px}
.recommend p.wdate:before{background:url(../images/svg/icon_list_date.svg) no-repeat center center}
.recommend p.wname:before{background:url(../images/svg/icon_list_name.svg) no-repeat center center}
.recommend .arrow{position:absolute;bottom:0;right:0;width:45px;height:45px;background:#f8ac49 url(../images/arrow_white.png) no-repeat center center;display:block;opacity:0;-ms-filter:alpha(opacity=0);filter:alpha(opacity=0);transition:all .3s;-webkit-transition:all .3s}
.recommend .swiper-slide > a:hover .arrow {opacity:1;filter:alpha(opacity=100);-ms-filter:alpha(opacity=100);}
/*교육후기*/
.review{padding:50px 0}
.review .swiper-slide > a{display:inline-block;background:#fff;box-sizing:border-box;width:100%}
.review .info{background:#fff;padding:20px;border:1px solid #ebe9e9;box-sizing:border-box;}
.review .info .col_title {font-size:15px;text-align:left;display:block;line-height:1;color:#ffae3e;font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.review .info p{text-align:left;font-size:18px;color:#3a3736;font-weight:700;word-break:keep-all;min-height:75px;line-height:26px;padding:15px 0 20px;box-sizing:border-box;}
.review .info .txt{text-align:left;word-break:keep-all;font-size:16px;color:#797877;font-weight:300;line-height:24px;height:96px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.review .grade{padding-top:15px;width:100%;display:inline-block}
.review .grade span{display:inline-block;float:left;margin-left:3px;line-height:1;}
.review .grade span:first-child{margin-left:0}
.review .last{background:#ebe9e9;padding:14px 20px;box-sizing:border-box;text-align:left;}
.review .last span{color:#9e9e9e;font-size:16px;font-weight:300;padding-right:20px;position:relative;}
.review .last span:first-child:after{position:absolute;content:'';width:1px;height:16px;background:#fff;top:50%;margin-top:-8px;right:10px;}
/*HR영상*/
.video{padding:50px 0;background:#ebe9e9}
.video .swiper-slide > a{display:block;width:100%}
.video .img{position:relative}
.video .img p.pic{background-size:cover;background-repeat:no-repeat;background-position:center center}
.video .img p.pic img{max-width:100%;opacity:0;visibility:hidden;}
.video .img .col_title{text-align:left;width:100%;font-size:16px;font-weight:300;position:absolute;bottom:0;left:0;background:rgba(0,0,0,0.6);height:40px;line-height:40px;padding:0 20px;color:#fff;}
.video .txt{background:#fff;padding:25px 20px;box-sizing:border-box;}
.video .txt p{font-size:18px;line-height:18px;color:#3a3736;font-weight:400;text-align:left}
.video .txt .detail {margin-top:20px;box-sizing:border-box;font-size:15px;color:#797877;font-weight:300;line-height:21px;height:45px;display:-webkit-box;text-align:left;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.video .txt .last{border-top:1px solid #f4f4f4f9;padding-top:20px;margin-top:20px;text-align:left;line-height:1;}
.video .txt .last span{display:inline-block;color:#9e9e9e;font-size:16px;font-weight:400;line-height:1;}
.video .txt .last span:first-child{margin-right:10px}
/*HR아카데미 뉴스레터*/
.hr_newsletter{background:#4f4d4c;padding:50px 0}
.hr_newsletter h4.title{color:#fff}
.hr_newsletter .info{width:100%;display:inline-block}
.hr_newsletter .left{width:50%;float:left}
.hr_newsletter .left a{display:block;line-height:0}
.hr_newsletter .left img{width:100%}
.hr_newsletter .right{width:46%;float:right}
.hr_newsletter .right li{padding:10px 0;border-bottom:1px solid #615f5e;}
.hr_newsletter .right li a{display:block;position:relative;padding-left:72px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:16px}
.hr_newsletter .right li a span{position:absolute;left:0;top:0;font-weight:700;text-align:left;display:inline-block;}
.hr_newsletter .more_btn{margin-top:20px;text-align:right;}
.hr_newsletter .more_btn a{display:inline-block;padding:0 20px;height:35px;text-align:center;line-height:35px;border:1px solid rgba(255,255,255,0.5);border-radius:40px;font-size:15px;font-weight:400;transition:all .3s;-webkit-transition:all .3s;color:#fff}
.hr_newsletter .more_btn a img{margin-right:7px;padding-bottom:5px;}
.hr_newsletter .email{padding-top:30px;text-align:center;}
.hr_newsletter .email p{font-size:18px;color:#ffae3e;font-weight:400;line-height:1;padding-bottom:15px;word-break:keep-all;}
.hr_newsletter .email form{max-width:470px;height:50px;position:relative;width:100%;margin:0 auto;border-radius:5px;overflow:hidden;}
.hr_newsletter .email input[type="text"]{width:100%;background:#3c3a39 url(../images/email_new.png) no-repeat 15px center;border:none;padding-right:130px;height:50px;padding-left:45px;box-sizing:border-box;color:#fff;}
.hr_newsletter .email input[type="text"]::placeholder{font-size:16px;font-weight:400;color:#9e9e9e}
.hr_newsletter .email input[type="submit"]{position:absolute;right:0;top:0;width:120px;height:50px;line-height:50px;text-align:center;font-weight:700;font-size:16px;background:#ffae3e;outline:0;border:0; cursor:pointer;color:#3c3a39}
/*팝업*/
.MainPopUp{position:absolute;top:100px;left:100px;z-index:999;width:860px;height:452px}
.MainPopUp img{width:100%}
.MainPopUp .cookie_check{background:#000;text-align:right;padding:3px 0}
.MainPopUp .cookie_check span{color:#fff;font-size:12px;font-weight:bold}
.MainPopUp .cookie_check .close{color:#fff;font-size:12px;font-weight:bold;margin-right:7px;margin-left:4px}
@media all and (max-width:1300px){
    /*Layout*/
    article{width:100%}
    /*Top Section*/
    .top_section{padding:25px 20px}
    /*추천교육과정*/
    .recommend{padding:65px 40px 50px 40px}
    /*교육후기*/
    .review{padding:50px 40px}
    /*Swiper Slider Area(Common)*/
    .slider_area .swiper-button-prev{left:-30px;width:20px;background-size:20px}
    .slider_area .swiper-button-next{right:-30px;width:20px;background-size:20px}
    /*HR영상*/
    .video{padding:50px 40px}
    /*HR아카데미 뉴스레터*/
    .hr_newsletter{padding:50px 20px}
}
@media all and (max-width:1024px){
    /*Top Section*/
    .main_banner{width:100%}
    .main_banner .slides li{text-align:center;background:#fff}
    .main_banner .slides li a img.pc{display:none}
    .main_banner .slides li a img.mo{display:block;width:61%;margin:auto}
    .top_section .right_con{width:100%}
    .info_wrap{height:auto;padding:15px 25px}
    .info_wrap li{height:auto}
    .info_wrap li p{height:16px;line-height:16px}
    .login_wrap{display:none}
    /*HR뉴스레터*/
    .hr_newsletter .left{float:none;width:100%}
    .hr_newsletter .right{float:none;width:100%;margin-top:20px}
    .hr_newsletter .right li:first-child{padding-top:0}
    .hr_newsletter .more_btn{text-align:center}
    /*팝업*/
    .MainPopUp{left:50%;transform:translateX(-50%);width:84%}
}
@media all and (max-width:768px){
    /*Swiper Slider Area(Common)*/
    .slider_area .slide_wrap{width:calc(100% - 140px);margin:0 auto}
    /*추천교육과정*/
    .recommend .arrow{opacity:1}
    /*HR아카데미 뉴스레터*/
    .hr_newsletter .left{width:100%;float:none}
    .hr_newsletter .right{width:100%;float:none}
    .hr_newsletter .more_btn{text-align:center}
}
@media all and (max-width:520px){
    .info_wrap li p{height:14px;line-height:14px;font-size:14px;}
    .slider_area .more_btn a{padding:0 20px;font-size:16px;height:35px;line-height:33px;}
    .main_banner .slides li a img.mo{width:100%}
    .main_banner a.ctrl img{width:12px}
    .slider_area .swiper-button-prev{background-size:12px}
    .slider_area .swiper-button-next{background-size:12px}
    /*추천교육과정*/
    .recommend{padding-top:50px;padding-bottom:25px }
    .recommend p.wtitle {margin:20px 0 40px;font-size:16px;line-height:23px;height:45px;}
    .recommend .desc{border-top:1px solid #e9e9f2;box-sizing:border-box;padding:20px 0;}
    .recommend .desc > p{font-size:14px}
    /*교욱후기*/
    .review .info p{line-height:23px}
    .review .info .txt{line-height:21px;height:105px;-webkit-line-clamp:5}
    .video .txt p{line-height:23px!important}
    .video .txt .detail{-webkit-line-clamp:3;height:64px}
    /*HR아카데미뉴스레터*/
    .hr_newsletter .right li a{font-size:14px;padding-left:72px}
    .hr_newsletter .more_btn a{height: 35px;line-height: 35px;color: #fff;font-size:16px}
    .hr_newsletter .email form{height:50px}
    .hr_newsletter .email p{font-size:16px;line-height:23px}
    .hr_newsletter .email input[type="text"]{height:50px}
    .hr_newsletter .email input[type="submit"]{height:50px;line-height:50px}
}
@media all and (max-width:480px){
    /*Swiper Slider Area(Common)*/
    .slider_area .slide_wrap{width:calc(100% - 30px)}
    h4.title{font-size:25px}
    /*HR영상*/
    .video .txt{padding:20px 15px}
    .video .txt p{font-size:16px}
    .video .txt .detail{font-size: 14px;line-height:20px}
    .video .txt .last span{font-size:14px}
}