/*탑배너*/
.topBannerBox {width: 100%; height: 100px; overflow: hidden}
.topBannerWrap.topBannerBg1 { background: #dafcff}
.topBannerWrap.topBannerBg2 { background: #fff8e4}
.topBannerWrap.topBannerBg3 { background: #ffedf9}
.topBanner .slick-prev.slick-arrow, .topBanner .slick-next.slick-arrow {width: 28px !important; height: 28px !important; z-index: 5 !important; top: 63% !important}
.topBanner .slick-prev.slick-arrow:before, .topBanner .slick-next.slick-arrow:before {content: ''}
.topBanner .slick-prev.slick-arrow {left: calc((100vw * 0.75) - 43px) !important; background: url("../Images/topBannerPreArrow.png") no-repeat}
.topBanner .slick-next.slick-arrow {left: calc((100vw * 0.75) + 65px); background: url("../Images/topBannerNextArrow.png") no-repeat}
.topBanner .pagingInfo {position: absolute; top: 50%; background: #000; color: #fff; display: inline-block; border-radius: 30px; width: 60px; text-align: center;
    left: calc((100vw * 0.75) - 5px)}
.topBannerNav {position: absolute; right: -160px; width: 160px; height: 50px; top: 50%}
.topBannerCloseBtn {position: absolute; right: 20px; width: 15px; height: 15px; z-index: 5; ; text-align: center;
    line-height: 18px; font-size: 24px; padding: 10px; top: 30px; border: 1px solid #000}

/*메인 법정교육*/
.allCourseGoBtn {padding: 10px 20px 8px; background: #ff7800; color: #fff; border-radius: 12px}
.mainBtnWrap {margin-top: 92px; background: url("../Images/mainBtnBg.png") repeat-x; padding-top: 45px; position: relative}
.wideInner {width: 1400px; margin: 0 auto; background: url("../Images/mainBtnBg1.png") no-repeat; background-position: 40px 60px}
.mainBtnBg {position: absolute; left: calc((100vw - 239px) / 5.6); top: 90px}
.mainBtnItem {display: inline-block; width: 238px; height: 158px; box-sizing: border-box; position: relative; border-radius: 20px; overflow: hidden; margin: 10px 0 10px 20px}
.mainBtnItem img {border-radius: 20px}
.mainBtnItem .cover {background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)); width: 100%; height: 40%; position: absolute; bottom: 0; opacity: 1;
    border-bottom-right-radius: 20px; border-bottom-left1-radius: 20px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0); transition: all 0.01s ease}
.mainBtnItem .itemTxt {position: absolute; text-align: center; top: 80%; transition: all 0.01s ease; width: 100%}
.mainBtnItem .itemTit {color: #fff; text-shadow: 1px 1px 1px #000; width: 100%; box-sizing: border-box}
.mainBtnItem .warning {font-family: "GmarketSansL"; font-size: 12px; position: relative; bottom:-60px; transition: all 0.01s ease; padding: 0 18px; width: 100%;
    box-sizing: border-box}
.mainBtnItem:hover {box-shadow: 5px 5px 5px rgba(0,0,0,0.4)}
.mainBtnItem:hover .cover {background: rgba(0,0,0,0.6); height: 100%; border-radius: 20px}
.mainBtnItem:hover .itemTxt {top :45%}
.mainBtnItem:hover .warning {bottom: 0}

    /*메인 슬라이드*/
.mainSlideWrap {width: 100%; position: relative; margin-top: 45px; min-width: 1280px}
.mainSlideBox {width: 100%; height: auto; overflow: hidden}
.mainSlide {width: 100%; position: relative}
.mainSlideBtn {width: 150px; height: 38px; box-sizing: border-box; border: 1px solid #fff; text-align: center; background: transparent; color: #fff; top: 70%;
    position: absolute; left: calc(50% - 75px); font-size: 18px; line-height: 36px; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.05) }
.mainSlideBox .slick-dots {margin: 0 !important; bottom: 25px !important}
.slick-slide img {width: 100%}
.slideCount {position: absolute; bottom: 2.6042vw; left: calc((100vw - 3.1250vw) / 3.5)}
.slideCountItem {font-size: 1.2500vw}
.slideCountItem:first-of-type {font-size: 1.8750vw; font-family: "GmarketSansB"}
.mainSlideWrap .slick-prev, .mainSlideWrap .slick-next {width: 1.7188vw; height: 1.7188vw; top: auto; bottom: 2.0833vw; z-index: 2; background-size: 100% !important;
    background-repeat: no-repeat}
.mainSlideWrap .slick-prev {background-image: url("../Images/prevBtn.png") !important; left: calc((100vw - 1.7188vw) / 4.2)}
.mainSlideWrap .slick-next {background-image: url("../Images/nextBtn.png") !important; left: calc((100vw - 1.7188vw) / 3); right: auto}
.slick-prev:before, .slick-next:before {color: transparent !important}

/*중앙슬라이드 법정교육*/
.midSlideWrap {height: 370px}
.mainTitle { font-weight: bolder; font-size: 28px; width: 100%; text-align: center; margin-top: 50px}
.midSlide {width: 1200px; margin: 0 auto}
.midSlideItem {width: 220px !important; height: 275px !important; text-align: center; margin: 0 10px; top: 0; float: left}
.midSlideItem a {display: block; width: 220px; height: 275px; position: relative; transition: all 0.2s ease-in-out}
.midSlideItem .cover {background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)); width: 220px; height: 30%; position: absolute; bottom: 0; opacity: 1;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0); transition: all 0.01s ease}
.midSlideItem .itemTxt {position: absolute; text-align: center; top: 84%; color: #fff; }
.midSlideItem .itemTit {font-size: 18px; margin: 0 auto 24px; width: 220px}
.midSlideItem .itemTxt div {padding: 0 20px; word-break: keep-all; line-height: 18px; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); display: none; font-size: 13px}
.warning {color: #ffd400; font-weight: bold; margin-top: 10px}
.midSlideItem:hover a {box-shadow: 1px 1px 5px rgba(0,0,0,0.5); top: -25px}
.midSlideItem:hover .cover {height: 100%}
.midSlideItem:hover .itemTxt {top: 35%}
.midSlideItem:hover .itemTxt div {display: block}
.midSlide .slick-list {padding: 50px 0 20px; height: 300px}
.midSlide .slick-dots li button:before, .cardNewsSlide .slick-dots li button:before {border-color: #000}
.midSlide .slick-dots li.slick-active button:before, .cardNewsSlide .slick-dots li.slick-active button:before {background: #000}
.midSlide .slick-dots {position: static; margin: -25px 0 0}
.cardNewsSlide .slick-dots  {position: static; margin: 10px 0}
.midSlide .slick-prev {left: -50px}
.midSlide .slick-next {right: -50px}
.cardNewsSlide .slick-prev {left: -70px}
.cardNewsSlide .slick-next {right: -70px}
.midSlide .slick-prev, .midSlide .slick-prev:hover, .midSlide .slick-prev:focus {background: url("../Images/prev.png") no-repeat !important}
.midSlide .slick-next, .midSlide .slick-next:hover, .midSlide .slick-next:focus {background: url("../Images/next.png") no-repeat !important}
.cardNewsSlide .slick-prev, .cardNewsSlide .slick-prev:hover, .cardNewsSlide .slick-prev:focus {background: url("../Images/prev.png") no-repeat !important}
.cardNewsSlide .slick-next, .cardNewsSlide .slick-next:hover, .cardNewsSlide .slick-next:focus {background: url("../Images/next.png") no-repeat !important}
.midSlide .slick-prev, .midSlide .slick-next, .cardNewsSlide .slick-prev, .cardNewsSlide .slick-next {width: 45px; height: 45px}
.midSlide .slick-prev:before, .midSlide .slick-next:before, .cardNewsSlide .slick-prev:before, .cardNewsSlide .slick-next:before {content: ''}

/*추천강좌*/
#recommend {background: url("../Images/section2_bg.png") no-repeat; width: 100%; height: 622px; margin-top: 50px; background-size: 100%}
.itemLabel {width: 80px; height: 22px; line-height: 22px; background: #ca1515; text-align: center;  font-size: 14px; color: #fff;
    position: absolute; top: 0; left: 0; z-index: 2}
.itemLabel.black {background: #000}
.cover {background: rgba(0,0,0,0.5); width: 100%; height: 100%; position: absolute; bottom: 0; opacity: 0; transition: all 0.3s linear}
.itemBox {float: left; position: relative; padding-left: 5px; padding-top: 8px; width: 276px; height: 315px; margin-left: 25px}
.item {width: 276px; height: 315px; box-sizing: border-box; border: 1px solid #ff7800; background: #fff}
.imgBox {width: 274px; height: 165px; border: 5px solid #ff7800; box-sizing: border-box; position: relative}
.imgBox:hover .cover {opacity: 1}
.imgBox img {width: 100%; height: 100%}
.txtBox {padding: 10px 15px; height: 41%; box-sizing: border-box}
.itemBox .itemTit {font-size: 15px; font-weight: bold; margin: 0; width: inherit}
.coverBtn {width: 100%; box-sizing: border-box; padding: 0 10px; text-align: center; margin-top: 25%}
.coverBtn a {color: #fff;  font-weight: bold; line-height: 30px; font-size: 18px; box-sizing: border-box}
.coverBtn a:first-child {border-right: 1px solid #fff}
.coverBtn img {width: 30px; vertical-align: middle}
.moreBtnWrap {width: 100%; text-align: right; margin-top: 145px}
.courseBtn {position: absolute; bottom: 10px; right: 15px; height: 47px}
.courseBtn > div {float: left; width: 47px; height: 47px; background-size: 100%; display: block}
.mobileBtn {background: url("../Images/mobileBtn.png") no-repeat}
.mobileNoBtn {background: url("../Images/noMobileBtn.png") no-repeat}
.licenseBtn {background: url("../Images/license_off.png") no-repeat; margin-left: 5px}
.licenseBtn:hover {background: url("../Images/license_on.png") no-repeat; background-size: 100%}

/*공지영역*/
.noticeWrap {height: auto; overflow: hidden}
.noticeTitle {display: inline-block; font-size: 36px; font-family: "GmarketSansB"; width: 164px; float: left; margin-top: 10px}
.noticeTitle p {z-index: 2; display: block}
.mainLinkBtn {display: block; border-radius: 60px; width: 120px; height: 120px; background: #ffebe5; font-size: 16px; font-family: "GmarketSansM"; line-height: 150px;
    text-align: center; z-index: 1; margin-left: 21px; margin-top: -52px}
.noticeBox {width: 950px; height: 272px; overflow: hidden; display: inline-block; float: right}
.noticeItem {display: inline-block; width: 270px; height: 86px; background: #fff; border: 1px solid #bfbfbf; box-sizing: border-box; border-radius: 20px;
    padding: 20px 20px 20px 55px; position: relative; margin: 30px 0 20px 40px; float: right; transition: all ease-in-out 0.5s}
.noticeItem .date {display: block; position: absolute; background: #d1edf0; text-align: center; font-size: 12px; width: 86px; height: 86px; border-radius: 45px;
    box-sizing: border-box; padding: 20px 0; top: -30px; left: -35px}
.noticeItem .date p {font-size: 30px; padding-top: 5px; letter-spacing: -1.5px}
.noticeItem .simpleTxts {line-height: 24px; -webkit-line-clamp: 2; height: 48px}
.noticeItem:hover {border: 1px solid #ff770a}
.noticeItem:hover .date {background: #ffebe5}

/*중앙버튼*/
.midBtnWrap {height: auto; overflow: hidden; margin-top: 50px}
.midBtnWrap a {display: inline-block; width: 205px; height: 205px; text-align: center; box-sizing: border-box; border: 2px solid #fbfbfb; background: #fbfbfb;
    border-radius: 100px; margin: 0 15px; transition: all ease-in-out 0.5s}
.midBtnWrap a img {margin: 60px 0 10px}
.midBtnWrap a:hover {background: #fff; border: 2px solid #ff770a}

/*카드뉴스*/
.cardNewsWrap {background: #d1edf0; margin-top: 70px; height: 265px; text-align: right}
.cardNewsWrap .wideInner {background: url("../Images/cardNewsBg.png") no-repeat}
.cardNewsWrap .mainLinkBtn {display: inline-block; position: absolute; margin: 0; bottom: 5px; left: 105px; line-height: 120px}
.cardNewsBox {width: 920px; text-align: right; display: inline-block}
.cardNewsItem {display: inline-block; width: 270px; height: 270px; box-sizing: border-box; border-radius: 20px; margin: 60px 0 0 30px}
.cardNewsItem img {width: 100%; height: 100%; border-radius: 20px}
.cardNewsItem:hover {box-shadow: 10px 10px 10px rgba(0,0,0,0.3)}

/*카드뉴스 뷰*/
.item.cardNewsType {border: none; height: 380px; float: left; margin: 10px 32px 0 0}
.item.cardNewsType:nth-child(4n) {margin: 10px 0 0}
.item.cardNewsType .imgBox {height: 276px; border: none}
.cardNewsTitle {width: 276px; font-weight: bold; text-align: left}
.cardNewsTitle.simpleTxt {-webkit-line-clamp: 2; line-height: 24px; height: 48px; margin: 0 auto; display: -webkit-box; white-space: normal}
.cardNewsSlide {width: 600px; height: auto; margin: 0 auto}
.cardNewsType .fileItemBox {border-bottom: 1px dashed #ccc; padding-bottom: 3px}
.cardNewsType .fileItemBox:last-child {border-bottom: none}

/*게시판*/
.boardWrap {clear: both; margin-top: 150px; height: auto; overflow: hidden}
.leftArea {width: 575px; height: 365px; box-sizing: border-box; border-radius: 5px; border: 1px solid #dbdbdb; padding: 30px; display: inline-block; float: left}
.boardWrap .areaTitle {font-family: "GmarketSansM"; border-bottom: 1px solid #dbdbdb; padding-bottom: 10px; font-size: 24px; font-weight: bold; }
.boardWrap .areaTitle a {font-size: 15px; color: #ff770a}
.boardWrap .wrap p {line-height: 30px}
.boardWrap .wrap p a {overflow: hidden; text-overflow: ellipsis; display: inline-block; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word;
    white-space: nowrap; width: 75%; color: #404040}
.boardWrap .wrap p a:hover {color: #ff770a}
.boardWrap .wrap p.on {margin-bottom: 20px; display: inline-block}
.boardWrap .wrap p.on a {display: block; width: 100%; font-size: 18px; max-height: 65px; line-height: 30px; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; -webkit-line-clamp: 2; white-space: normal}
.boardWrap .wrap p.on .date {display: block; width: 100%; text-align: left; float: left; font-size: 17px}
.boardWrap .wrap p .date {color: #777777; font-size: 16px; font-family: "Noto Sans KR"}
.rightArea {width: 575px; height: 365px; box-sizing: border-box; border-radius: 5px; border: 1px solid #dbdbdb; padding: 30px; display: inline-block; float: right}
.csWrap {height: auto; overflow: hidden; margin: 70px 0; width: 100%}
.csWrap a {display: inline-block; float: left; height: 150px}

    /*교육상담*/
.offlineEduForm {width: 960px; margin: 0 auto; position: fixed; top: calc((100vh - 700px) / 2); left: calc((100vw - 960px) / 2);
    display: none; z-index: 5000; height: 700px; background: #fff; border-radius: 5px; }
.popupTitle {padding: 10px 20px; background: #ff7800;  font-weight: bold; font-size: 18px; color: #fff}
.consult { padding: 20px;}
#btnFindZipcodeOff, #btnFindZipcode {background: #ff7800; border-color: #ff7800; color: #fff; padding: 0 10px; 
    height: 34px; line-height: 34px}
.closeBtn1 {float: right; width: 24px; height: 24px; border: 1px solid; background: transparent; display: inline-block; font-size: 24px;
    line-height: 21px; text-align: center; box-sizing: border-box; cursor: pointer}
.consult.eduConsultType { padding: 10px 20px;}
.consult.eduConsultType .text1 {font-size: 14px; line-height: 20px; margin-bottom: 10px}
.btn.submitType {background: #ff7800 !important; border: 1px solid #ff7800 !important; color: #fff; }

/*로그인*/
.area {background: #f5f5f5; width: 100%; height: auto; overflow: hidden; min-height: 100vh}
.areaBox {position: relative; width: 100%; height: 100%}
.areaBox > .wrap {width: 800px;  height: 600px; position: absolute; top: calc((100vh - 750px) / 2); left: calc((100vw - 800px) / 2)}
.loginLogo {text-align: center; margin: 10px}
.loginLogo img {width: 120px}
.loginBox {border-radius: 5px;background: #fff; width: 100%; height: 500px; box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.2)}
.popupTitle {border-top-left-radius: 5px; border-top-right-radius: 5px}
.loginBox .login, .loginBox .loginAdBox {box-sizing: border-box; float: left}
.login {width: 45%; padding: 30px}
.loginAdBox {width: 55%; height: 456px; background: url("../Images/login_img.png") no-repeat; position: relative; border-bottom-left-radius: 5px}
.login .inputBox {height: 40px}
.areaBox .fullBtn {height: 46px;  font-weight: bold; line-height: 38px}
.login p {font-size: 13px;  line-height: 20px}
.loginAdBox > .wrap {color: #fff;  position: absolute; bottom: 30px; right: 30px; height: 140px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3)}
.loginAdBox > .wrap p {line-height: 32px}
.fullBtn.joinType {display: block; background: transparent; border: 2px solid #fff; color: #fff; text-align: center; box-sizing: border-box;
    height: 46px; line-height: 42px; margin-top: 30px}
.fullBtn.findType {display: block; background: #ff7800; border-color: #ff7800; color: #fff; text-align: center; box-sizing: border-box;
    height: 46px; line-height: 40px; font-size: 16px; margin-top: 5px}
.login .description {margin-top: 157px}

/*회원가입*/
.register, .findWrap {width: 100%; margin: 0 auto; background: #fff; border-radius: 5px; box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.2)}
.register .textareaBox { margin: 5px 0; height: 150px; padding: 20px; font-size: 14px}
.contentsWrap {padding: 20px 30px}
.wrap.join2 > div {float: left}
.wrap.join2 > div {border: 1px solid #ddd; height: 250px; width: 298px; text-align: center; position: relative; margin: 5px 19px 0 0}
.wrap.join2 > div:nth-child(3) {margin: 5px 0 0 0}
.certBox > div {box-sizing: border-box; padding: 15px 0; cursor: pointer}
.certBox b {display: block; margin-top: 10px}
.certBox p {font-size: 13px; text-align: left; line-height: 18px; padding: 0 5px; }
.certBox a img {vertical-align: sub}
.certAuth {padding-bottom: 10px !important;}
.juminBox {line-height: 48px !important; text-align: center !important;}
.juminBox input {width: 64px; box-sizing: border-box; padding: 3px; height: 24px; font-size: 12px; text-align: center}
.certBox .descriptionBox {position: absolute; bottom: 5px; padding: 5px; cursor: auto}
.agreeBtn {vertical-align: middle; width: 15px; height: 15px}
.wrap.registerType {width: 1000px; top: calc((100vh - 890px) / 2); left: calc((100vw - 1000px) / 2)}
.wrap.memberInfoType {top: calc((100vh - 850px) / 2)}
table.memberInfoType tr td {text-align: left !important}

/*아이디비번찾기*/
.wrap.findType {top: calc((100vh - 750px) / 2)}
.findBoxWrap {width: 100%; height: auto; overflow: hidden; box-sizing: border-box; padding: 30px}
.findArea {padding: 50px; min-height: 600px}
.findTab {margin: 20px auto 0; text-align: center; width: 480px; font-size: 14px; font-weight: 500; height: 46px; clear: both}
.findTab div {display: inline-block; line-height: 45px; width: 50%; box-sizing: border-box; border: 1px solid #D1D1D1; float: left; background: #fafafa}
.findTab div a:hover {text-decoration: none; color: #444}
.findTab div:nth-child(1) { border-right: 0}
.findTab div.active {background: #ff7800; color: #fff; font-weight: bold; border: 1px solid #ff7800}
.findTab div.active a {color: #fff}
.findForm {width: 100%; margin: 0 auto; height: 250px}
.findForm form{clear: none !important;}
.findForm div {display: inline-block; width: 250px; padding: 25px 50px}
.findForm form:nth-child(odd) .findBox {float: left; background: url("../Images/findTitle_bg1.png") no-repeat; background-size: 10%; background-position: 50px 14px}
.findForm form:nth-child(even) .findBox {float: right; background: url("../Images/findTitle_bg2.png") no-repeat; background-size: 9%; background-position: 50px 17px}
.findForm div .bTit {font-size: 16px; font-weight: bold; color: #ff7800; margin-bottom: 15px; position: relative; left: 35px}
.findForm .findBtn {color: #ff7800; border-color: #ff7800 !important; background: #fff}
.findForm .findBtn:hover {background: #ff7800; color: #fff}
.idPssearch {font-size: 14px}
.idPssearch p {padding: 20px; border-bottom: 2px solid #ff7800}
.idPssearch div {padding: 30px; background: #fafafa}
.idPssearch div span {float: left; line-height: 40px}
.idPssearch div b {display: inline-block; background: #ff7800; width: 70%; height: 40px; line-height: 40px; font-size: 16px; color: #ffffff}
.findResultBox {width: 480px; margin: 0 auto; text-align: center}
.findTabLine {width: 100%; border-bottom: 1px solid #D1D1D1; margin-bottom: 50px}
.findForm div p input {padding: 8px; border: 1px solid #D1D1D1; color: #575757; font-size: 14px; border-radius: 3px; vertical-align: middle; box-sizing: border-box; height: 40px }
.hpBox input {width: 30%}
.findForm div:nth-child(1)::after {content: ''; width: 1px; height: 100px; color: #ff7800; position: absolute;}
.hr {width: 1px; height: 100px; border-right: 1px solid #ff7800; position: absolute; top : 345px; left: 405px}
.recaptchaDiv {width: 330px; margin: 0 auto; height: 100px}

/*서브페이지 타이틀*/
.subVisualWrap {width: 100%; height: 165px; background-size: 100%}
.subVisualWrap.subBg1 {background: url("../Images/sub_visual1.png") fixed}
.subVisualWrap.subBg2 {background: url("../Images/sub_visual2.png") fixed}
.subVisualWrap.subBg3 {background: url("../Images/sub_visual3.png") fixed}
.subVisualWrap.subBg4 {background: url("../Images/sub_visual4.png") fixed}
.subVisualWrap.subBg5 {background: url("../Images/sub_visual5.png") fixed}
.pageTitle {font-size: 24px;  font-weight: bold; color: #fff; text-align: center; width: 100%;
    position: absolute; top: -60px; z-index: 1}

/*카테고리*/
.divisionWrap {width: 100%; height: auto; overflow: hidden; padding-top: 20px; margin-bottom: 20px}
.divisionWrap > .divisionHeader {background: aliceblue}
.divisionHeader {font-size: 22px; font-weight: bold; width: 100%; line-height: 28px; padding: 10px; box-sizing: border-box}
.divisionBtn {line-height: 20px; font-size: 13px; font-weight: normal; padding: 3px 10px}
.division {padding: 10px 0; text-align: center}
.mainCategory {height: 100px; padding:10px; border: 1px solid #999; border-radius: 10px; font-weight: bold; background: #fff;
    margin: 4px 2px; box-sizing: border-box; display: inline-block; font-size: 14px; width: 142px; text-align: center; line-height: 20px}
.mainCategory:hover, .mainCategory.on  {background: #fdffe3; color: #ff7800; border-color: #ff7800}
.cateName {display: table-cell; vertical-align: middle; height: 50px; width: 142px; word-break: keep-all}
.divisionHeader > div.showInline {margin-left: -67px}

.divisionSearchBox {padding: 20px 0; width: 100%; box-sizing: border-box}
.divisionSearchBox.allCateType {padding: 0; float: left; width: 50%}
.divisionArea .boardSearch {width: 288px; display: inline-block}
.divSearch, .division, .divisionWrap > .divisionHeader {border-bottom: 1px dashed #006cda}
.divisionArea {padding: 0 30px;  font-weight: bold; width: 100%}
.divisionArea, .onoffswitch {display: inline-block}
.onoffswitch {vertical-align: middle}
.divisionArea > span {font-size: 14px}


.onoffswitch {position: relative; width: 48px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none}
.onoffswitch-checkbox {display: none}
.onoffswitch-label {display: block; overflow: hidden; cursor: pointer; border: 2px solid #fff; border-radius: 20px}
.onoffswitch-inner {display: block; width: 200%; margin-left: -100%;transition: margin 0.3s ease-in 0s}
.onoffswitch-inner:before, .onoffswitch-inner:after {display: block; float: left; width: 50%; height: 22px; padding: 0; line-height: 22px; font-size: 13px; color: white;
    font-family: Trebuchet, Arial, sans-serif; font-weight: bold;box-sizing: border-box}
.onoffswitch-inner:before {content: "";padding-left: 10px; background-color: #ff7800; color: #FFFFFF}
.onoffswitch-inner:after {content: ""; padding-right: 10px; background-color: #EEEEEE; color: #999999;text-align: right}
.onoffswitch-switch {display: block; width: 18px; margin: 1px; background: #FFFFFF; position: absolute; top: 1px; bottom: 0; right: 29px; border: 2px solid #ff7800;
    border-radius: 20px; transition: all 0.3s ease-in 0s; height: 18px}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {margin-left: 0}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {right: 0}

.listTypeSelect {width: 68px; height: 34px; float: right}
.listTypeSelect .half {cursor: pointer; text-align: center; height: 34px; line-height: 34px; background: #fff; border: 1px solid #e4e4e4}
.listTypeSelect .galleryType {border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: none}
.listTypeSelect .galleryType.on .TypeImg {background: url("../Images/gallery_active.png") no-repeat; background-position: 50%}
.listTypeSelect .listType.on .TypeImg {background: url("../Images/list_active.png") no-repeat; background-position: 50%}
.listTypeSelect .galleryType .TypeImg {background: url("../Images/gallery.png") no-repeat; background-position: 50%}
.listTypeSelect .listType .TypeImg {background: url("../Images/list.png") no-repeat; background-position: 50%}
.listTypeSelect .listType {border-top-right-radius: 5px; border-bottom-right-radius: 5px}
.listTypeSelect .listType .TypeImg {background: url("../Images/list.png") no-repeat; background-position: 50%}
.listTypeSelect .galleryType:hover, .listTypeSelect .listType:hover {background: #ff7800}
.listTypeSelect .galleryType:hover .TypeImg {background: url("../Images/gallery_on.png") no-repeat; background-position: 50%}
.listTypeSelect .listType:hover .TypeImg {background: url("../Images/list_on.png") no-repeat; background-position: 50%}

/*과정안내*/
.itemBox.courseListItem {margin: 15px 25px 10px 0}
.itemBox.courseListItem:nth-child(4n){margin: 15px 0 10px 0}
.List.galleryType {border-top: 2px solid #6f6f6f; padding: 20px 0}
.courseListItemFooter {position: absolute; width: 100%; bottom: 10px}
.courseListItemFooter .courseBtn {bottom: 0; right: 35px}
.csTitle {position: relative;  font-size: 20px; font-weight: bold; width: 100%; height: 35px;
    line-height: 30px; border-bottom: 2px solid #ff7800; padding-top: 30px; display: block}
.csTitle .courseBtn {position: static; float: left; margin-right: 5px; height: 30px}
.csTitle .courseBtn > div {float: left; width: 30px}
.csInfoBox {padding: 10px 0; width: 100%; height: 265px}
.csInfoBox > div {float: left}
.csInfoBox .imgBox {width: 439px; height: 265px}
.csInfoBox .cover a {font-size: 24px; border-right: none !important}
.csInfo {width: 741px; margin-left: 20px}
table.courseType {box-sizing: border-box; border: 2px solid #404040}
table.courseType tr th, table.courseType tr td {border-right: 1px solid #ccc}
table.courseType tr:last-child td {border-bottom: none !important}
table.courseType tr td:last-child, table.courseType tr th:last-child {border-right: none !important}
.min13 {color: #fff; display: inline-block; width: 16px; height: 16px; background: #006cda; border-radius: 10px; padding: 2px; font-size: 12px; line-height: 16px;
    text-decoration: none !important; font-family: "Noto Sans KR"; text-align: center; margin-left: 5px}

.csContents {height: auto; overflow: hidden}
.courseDetailView .wrap {width: 100%; height: auto; overflow: hidden; margin: 0 auto 20px}
.courseDetailTit, .courseDetailTxt {float: left}
.courseDetailTit {width: 18%}
.courseDetailTit p {width: 70%; text-align: center; border: 1px solid #ff7800; padding: 10px; margin: 0 auto; font-weight: bold}
.courseDetailTxt {width: 82%; font-size: 14px; line-height: 30px; padding-left: 20px; box-sizing: border-box}
.courseDetailTxt * {font-size: 14px !important;}
.teacherTitle {font-weight: bold; padding: 10px 0}
.courseDetailTxt .half:first-child {padding-right: 20px}
.courseDetailTxt .half:nth-child(2) {padding-left: 30px}
.courseDetailTxt table {margin: 0 !important; line-height: normal}
.courseScore {width: 100px; vertical-align: sub; display: inline-block}
.courseReview table {border-color: #404040}
.courseReview table .star span {vertical-align: super}
.courseDetail .wrap:last-child {margin-bottom: 0}
.courseDetailView.active {display: block}
.courseDetailView {display: none}
.contentSubTit {font-size: 15px; color: #404040; }
.courseDateSelect {background: #006cda}



/*이용약관, 개인정보 처리방침*/
.textBoxType {padding: 20px 30px; background: #fff}

/*프로그램 다운로드*/
.infoBox .num {width: 100%; position: relative}
.infoBox .num span {font-size: 24px; margin: 20px 0; color: #333; font-family: 'NanumSquareB'}
.downloadWrap {margin-bottom: 50px}
.downloadWrap div {float: left}
.downloadWrap .imgBox {width: 50%; height: auto; border: none; padding: 20px}
.downloadWrap .txtBox {width: 47%; margin: 30px 0 20px 36px; font-size: 17px; line-height: 30px; padding: 0; height: auto}
.downloadWrap .txtBox a {display: inline-block; width: 258px; height: 70px; margin-top: 50px; float: right}
.infoBox {font-size: 18px; margin-bottom: 30px; height: auto; overflow: hidden; }
.num {font-family: 'NanumSquareEB'; font-size: 48px; color: #ddd; float: left}
.screen {position: absolute; width: 30px; height: 15px; background: #fff; transform: rotate(-45deg); top: 37px; left: 40px}

/*학습환경설정*/
.contentTitSub {width: 100%; overflow: hidden; height: auto}
.contentTitSub > div {width: 50%; float: left; box-sizing: border-box; padding: 40px 10px}
.titleBg.setting {height: 310px; background: url("../Images/settingTit_bg.png") no-repeat; background-position-y: 65%}
.titTxt.setting {text-align: left; }
.titTxt.setting b {font-size: 20px}
.titTxt.setting p {font-size: 17px; line-height: 24px}
.titTxt.setting p b {font-size: 16px}
.imgWrap {width: 100%; height: auto; overflow: hidden}
.imgWrap .imgBox {width: auto; height: auto; border: none; position: static}
.imgWrap div {float: left; margin: 20px}
.imgWrap .orBg {margin: 0 41px; background: url("../Images/login_bg1.jpg") no-repeat; width: 25px;}
.orBg.another {background-position-y: 42%; height: 304px}
.orBg.other {background-position-y: 42%; height: 400px}
.halfLeft, .halfRight {width: 50%; box-sizing: border-box; float: left}
.infoTxtBox .halfRight {padding-left: 65px}
.orBg.transparent {opacity: 0; height: 300px}
.imgWrap a {width: 258px; height: 70px; margin: 20px; display: inline-block}
.infoTxtBox {float: right; width: 1120px; box-sizing: border-box}
.infoBox .num span.setting {margin: 0}
.manualBtn {width: 100%; border: 2px solid #006cda; ; font-size: 20px; line-height: 60px; display: block;
    box-sizing: border-box; border-radius: 10px}
.manualBtn:hover {background: #006cda; color: #fff}

/*오시는 길*/
.locationInfoBox {text-align: left !important; width: 100%; height: auto; overflow: hidden}
.locationInfoBox img {width: 60px;float: left; margin: 0 15px}
.locationInfo {float: left; line-height: 28px}
.locationInfo b {font-size: 20px; display: inline-block; margin-bottom: 5px}

/*대표인사말*/
.greeting {position: relative; line-height: 28px}
.greetingTitle {line-height: 34px;  font-size: 22px}
.greeting::after {position: absolute; background: url("../Images/ceo_bg.png") no-repeat; background-position: 420px -22px;  content: ''; display: block;
    top: 0; left: 0; width: 100%; height: 100%}
.greeting > pre {}

/*Why Humus*/
.infoBox .contentsBox {margin-top: 20px; width: 100%; clear: both; min-height: 156px}

/*사업영역*/
.businessType .stepWrap {background: url(../Images/stepWrap_bg2.jpg) no-repeat; background-size: 124% 100%; height: 72px; background-position-x: -290px}
.businessTxt {margin-bottom: 30px; line-height: 28px}
.businessType .step {width: 25%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; float: left; height: 100%}
.infoContent {width: 277px; height: 300px; float: left; border: 1px solid #ddd; box-sizing: border-box}
.tbTitle {font-weight: bold; font-size: 18px; font-weight: bold; margin-bottom: 5px}
.businessType table tr th, .businessType table tr td {font-size: 16px}

/*비전*/
.visionType {font-size: 15px; text-align: left}
.visionType > b {font-size: 16px; width: 100%; display: inline-block; margin-bottom: 20px}
.visionType > div {line-height: 20px; margin-bottom: 50px}

/*사업주위탁교육 안내 추가*/
.infoType2 tr td, .infoType2 tr th {border-bottom: 1px solid #ddd}
.infoType2 tr td, .infoType2 thead tr th {padding: 7px; line-height: 18px}
.infoType2 thead tr th {border-top: 2px solid #006cda; background: #edf8ff}
.infoType2 thead tr th:first-child, .infoType2 .tbTitle {border-right: 1px solid #ddd}
.tbBottomTxt {margin: 10px 0 30px 0; display: inline-block; color: #2196f3; line-height: 18px; font-weight: bold}

/*슬라이드 메인 팝업*/
.slideMainPopupWrap {width: 500px; position: absolute; z-index: 5; background: white; cursor: move; top: 290px; right: 360px;}
.slideMainPopupWrap .slideItem {width: 500px; height: 500px}
/*.slideMainPopupWrap .slick-dots {width: 100%; margin: 0 auto; bottom: 0; left: 0}
.slideMainPopupWrap .slick-dots li button:before {border: none}
.slideMainPopupWrap .slick-dots li.slick-active button:before {background: #000}
.slideMainPopupWrap .slick-dots li button:before {background: #fff}*/
.slideMainPopupNew {position: relative; height: 500px; overflow: hidden; z-index: 3; box-shadow: 5px 0 5px rgba(0, 0, 0, 0.2)}
.pBtn {margin: 0 auto; z-index: 2; box-shadow: 5px 0 5px rgba(0, 0, 0, 0.2); height: auto; overflow: hidden}
.popup {position: absolute; z-index: 16; background: white; cursor: move; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2)}
.mainPopupBtn {font-size: 14px; color: #fff;  line-height: 36px; font-weight: 600; background: #949494; cursor: pointer}
.mainPopupCloseBtn {font-size: 14px; color: #fff;  line-height: 36px; font-weight: 600; background: #006cda; cursor: pointer}
.slideMainPopupTextNew {position: absolute; top: 0; right: -100px; height: 500px; overflow: hidden; width: 100px; z-index: 1}
.slideTextGo {display: inline-block; width: 95px; height: auto; box-sizing: border-box; padding: 10px; background: #fff; margin-bottom: 5px;
     font-size: 12px; font-weight: bold; line-height: 18px; border-right: 15px solid #006cda; text-align: center}
.slideTextGoBox {width: 70px; margin: 0 auto}
.slideTextGo.on {border-color: #ff6600; width: 100px; transition:  all 0.1s ease-in-out}


    /*공통아이콘*/
.icon {display: inline-block; width: 70px; height: 16px; padding: 5px 10px; color: #fff; background: #003d76; }
.icon.card {background: #ff7e00}
.hoverBtn a.on {background: #006cda; color: #fff; border: 1px solid #006cda}
.icon.noRefund {background: #228e86}
.noRefund.courseListType {display: inline-block; width: 58px; height: 26px; padding: 4px 8px; color: #fff; font-size: 14px; line-height: 18px; font-weight: normal;
    border-radius: 5px; box-sizing: border-box; text-align: center; margin-left: 5px}
.card.courseListType {display: inline-block; width: 70px; height: 26px; padding: 4px 8px; color: #fff; font-size: 14px; line-height: 18px; font-weight: normal;
    border-radius: 5px; box-sizing: border-box; text-align: center; margin-left: 5px}

/*마이페이지*/
.subTab a {width: 128px; height: 40px; line-height: 40px; box-sizing: border-box; border : 1px solid; display: inline-block;  text-align: center;
    font-size: 15px}
.subTab a:hover {background: #006cda; color: #fff; border: 1px solid #006cda}
.magnitude {position: relative; width: 100%; height: 8px; background: #eee; display: inline-block; border-radius: 10px}
.magnitude span {position: absolute; height: 100%; background: #ff4242; left: 0; display: inherit; border-radius: inherit}

/*후기*/
.starWrap {background: url("../Images/star_gray.png") repeat-x;  height: 20px; width: 90px}
.star {background: url("../Images/star.png") repeat-x; height: 100%}
.starScore label {line-height: 38px; margin-right: 10px}
.starScore input {height: auto}
.starScore span {display: inline-block; width: 102px}
.starScore .star span {vertical-align: sub}

/*수강신청*/
.divisionArea.studyType {text-align: right; padding: 0}

/*사업주 위탁교육안내*/
.descriptionTxtBox {padding: 20px; border: 1px solid #ccc; font-size: 16px; line-height: 24px; border-radius: 10px}
.infoBox .num span.conceptBlue {color: #006cda}

/*비환급 검색*/
.division.NoRefundType {text-align: left !important; border-bottom: 1px dashed #666}
.mainCategory.NoRefundType {height: 80px}
.subCategoryBox {margin-top: 10px; border-top: 1px dashed #666; width: 100%; padding-top: 10px}
.subCategoryBox.noLine {border-top: none; border-bottom: 1px dashed #666; padding-bottom: 10px; height: auto; overflow: hidden}
.subCategory {font-size: 13px; height: 27px; padding: 3px 10px; border: 1px solid #006cda; border-radius: 5px; font-weight: bold; line-height: 20px; margin: 2px; box-sizing: border-box;
    display: inline-block; color: #006cda; cursor: pointer; width: 164px; text-align: center; }
.subCategory.on {background: #006cda; border-color: #006cda; color: #fff}
.divisionArea.NoRefundType {margin-left: 75px}

/*법정교육 안내*/
.tabWrap.legalEduType {text-align: center; height: 104px; overflow: hidden; margin-bottom: 45px; background: #fff; z-index: 2}
.legalEduTypeBox {text-align: center; width: 33.33%}
.legalEduTypeBox .imgWrap {background: #fafafa}
.legalEduTypeBox .txtBox {font-size: 16px; line-height: 24px; padding: 0 45px}
.circleBtn {background: #006cda; color: #fff; width: 20px; height: 20px; display: inline-block; margin: 0 5px 0 15px; padding: 5px; border-radius: 20px;
    text-align: center; line-height: 20px}
table.legalEduType tr td {text-align: left; border-right: 1px solid #ccc}
table.legalEduType tr td:last-child {border-right: none}

.faqStyle.legalEduType tr th {padding: 0 8px; background: #fff}
.faqStyle.legalEduType tr td {padding: 0; border-bottom: none !important}
.faqStyle.legalEduType tr th { height: 35px}
.faqStyle.legalEduType tr th a { display: block; padding: 10px 5px; text-decoration: none; color:#737b87}
.faqStyle.legalEduType tr th.faqTableTitle { text-align: left}
.rowTitle {font-size: 16px; line-height: 24px}
.faqStyle.legalEduType tr:hover th { background: #eee}
.faqStyle.legalEduType tr:hover th a { color: #6e7582}
.faqIcon {vertical-align: middle; width: 36px; height: 36px; margin-right: 10px}
.faqIcon.off {transform: rotate(180deg)}
.rowTxt {background: #fdffe3; padding: 20px 40px}
.faqIcon.legalEduType {margin-top: -5px}
.rowTxt pre {font-family: "Noto Sans KR"; line-height: 24px; white-space: pre-wrap}

/*사업주위탁교육절차*/
.study_process ul { background: url("../Images/sp_img1.png") no-repeat; background-size: 116px; padding-left: 130px;  }
.study_process ul li { height: 95px; margin-bottom: 45px; background: #f2f2f2; padding: 20px 0 0 35px; border-radius: 58px; }
.study_process ul li h3 { font-size: 14px; font-family: "Noto Sans KR", "나눔고딕", "NanumGothic", "Nanum Gothic"; font-weight: 500; color: #2c2c2c; }
.study_process ul li p { margin-top: 15px; font-size: 14px; font-weight: 400; }

/*다음 우편번호 검색*/
#searchZipcodeBox {display:none; position:fixed; overflow:hidden; z-index:99999999999999999; -webkit-overflow-scrolling:touch; background: #fff}
#searchZipcodeBox .searchZipcodeTitle {line-height: 36px; padding: 5px 5px 5px 10px; border-bottom: 1px solid}
#searchZipcodeBox .modalCloseBtn {width: 20px; height: 20px; float: right; border: 2px solid; text-align: center; font-size: 18px; line-height: 16px; margin: 5px; cursor: pointer}

@media screen and (max-width: 1400px) {
    .gnb_upMenu {padding: 20px 0}

}