/** * 서브페이지 CSS -------------------------------------------------------------------------------------------------- * KEESS : [KEESS - #intro] * 학습솔루션 : [학습플랫폼 - #flatform], [운영/보안 - #operations], [부가서비스 - #additional] * 교육콘텐츠 : [온라인교육과정 - #onlineCourse], [마이크로러닝 - #microlearning], [콘텐츠 제작&제휴 - #production] * 기업교육 : [사업주훈련과정 - #ownerTraining], [구독형기업교육 - #subscribe], [오프라인교육 - #offlineEducation] * 법정의무교육 : [법정의무교육 - #compulsory] * 정부지원사업 : [HRD FLEX - #hrdFlex], [기업직업훈련카드 - #hrd4u] -------------------------------------------------------------------------------------------------- **/ /*** common ***/ #sub .sub-tit-box {display:grid; place-items:center; position:relative; width:100%; height:380px; max-height:380px; margin-top:90px; overflow:hidden; animation:scale-up 1s .5s forwards;} #sub .sub-tit-box h1 {font-weight:600; font-size:62px; color:#fff; text-align:center;} #sub .sub-tit-box p {margin-top:20px; font-weight:200; font-size:18px; color:#fff; text-align:center; line-height:26px; opacity:.8;} #sub h2.tit {position:relative; padding:100px 0 20px; font-weight:700; font-size:38px; color:#111;} #sub p.subtit {position:relative; font-size:18px; color:#333; line-height:28px;} #sub span.subtit {padding-left:10px; font-size:18px; color:#333;} #sub .bold {font-weight:700; color:#333;} #sub .center {text-align:center;} /*** sub-tit-box ***/ #intro .sub-tit-box {background:url('/_images/intro/tit-box-bg.jpg') no-repeat center center;} #flatform .sub-tit-box {background:url('/_images/learningFlatform/tit-box-bg.jpg') no-repeat center center;} #operations .sub-tit-box {background:url('/_images/operationsSecurity/tit-box-bg.jpg') no-repeat center center;} #additional .sub-tit-box {background:url('/_images/additionalService/tit-box-bg.jpg') no-repeat center center;} #onlineCourse .sub-tit-box {background:url('/_images/onlineCourse/tit-box-bg.jpg') no-repeat center center;} #microlearning .sub-tit-box {background:url('/_images/microlearning/tit-box-bg.jpg') no-repeat center center;} #economist .sub-tit-box {background:url('/_images/economist/tit-box-bg.jpg') no-repeat center center;} #production .sub-tit-box {background:url('/_images/contentsProduction/tit-box-bg.jpg') no-repeat center center;} #ownerTraining .sub-tit-box {background:url('/_images/ownerTraining/tit-box-bg.jpg') no-repeat center center;} #offlineEducation .sub-tit-box {background:url('/_images/offlineEducation/tit-box-bg.jpg') no-repeat center center;} #compulsory .sub-tit-box {background:url('/_images/compulsoryEducation/tit-box-bg.jpg') no-repeat center center;} #prevention .sub-tit-box {background:url('/_images/prevention/tit-box-bg.jpg') no-repeat center center;} #prevention_board .sub-tit-box {background:url('/_images/prevention/tit-box-bg-01.jpg') no-repeat center center;} /*** animation ***/ .motion {opacity:0;} .fade-up.act {animation:fade-up .8s forwards;} .fade-up-d2.act {animation:fade-up .8s .2s forwards;} .fade-up-d4.act {animation:fade-up .8s .4s forwards;} .fade-left.act {animation:fade-left .8s forwards;} .fade-left-d2.act {animation:fade-left .8s .2s forwards;} .fade-left-d4.act {animation:fade-left .8s .4s forwards;} .fade-right.act {animation:fade-right .8s forwards;} .fade-right-d2.act {animation:fade-right .8s .2s forwards;} .fade-right-d4.act {animation:fade-right .8s .4s forwards;} .floating {animation:floating 2.8s infinite;} .click {animation:click 2s infinite;} .motion-wrap.act .showing {animation:showing .8s forwards;} .motion-wrap.act .showing-d2 {animation:showing .8s .2s forwards;} .motion-wrap.act .showing-d4 {animation:showing .8s .4s forwards;} .motion-wrap.act .showing-d6 {animation:showing .8s .6s forwards;} .motion-wrap.act .showing-d8 {animation:showing .8s .8s forwards;} .motion-wrap.act .showing-d10 {animation:showing .8s 1s forwards;} @keyframes scale-up {from {background-size:1920px;} to {background-size:2020px;}} @keyframes fade-up {from {opacity:0; transform:translateY(50px);} to {opacity:1; transform:translateY(0);}} @keyframes fade-down {from {opacity:0; transform:translateY(-50px);} to {opacity:1; transform:translateY(0);}} @keyframes fade-left {from {opacity:0; transform:translateX(50px);} to {opacity:1; transform:translateX(0);}} @keyframes fade-right {from {opacity:0; transform:translateX(-50px);} to {opacity:1; transform:translateX(0);}} @keyframes floating {0% {transform:translateY(0);} 50% {transform:translateY(8px);} 100% {transform:translateY(0);}} @keyframes click {0% {transform:translate(0,0);} 50% {transform:translate(8px,8px);} 100% {transform:translateY(0);}} @keyframes showing {0% {opacity:0; transform:scale(.9);} 100% {opacity:1; transform:scale(1);}} @keyframes progress {0% {width:0;} 95%,100% {width:150px;}} /*** intro : keess ***/ #intro .section1 {position:relative; width:100%; padding:120px 0 60px; background:#fcfcfc;} #intro .section1 .mindmap-dep1 {width:1200px; height:50px; margin:0 auto; background:#fff; border:1px solid #ccc; border-radius:100px; box-shadow:5px 5px 15px rgba(0,0,0,.1);} #intro .section1 .mindmap-dep1 div {width:200px; border-right:1px solid #ccc; font-weight:700; font-size:18px; color:#333; text-align:center; line-height:50px;} #intro .section1 .mindmap-dep1 div:last-child {border-right:0;} #intro .section1 .mindmap-dep2 {align-items:flex-start; width:1200px; margin:0 auto;} #intro .section1 .mindmap-dep2 div {width:200px; padding:30px 10px 0;} #intro .section1 .mindmap-dep2 div p {position:relative; padding-left:15px; font-weight:300; font-size:15px; color:#333; line-height:24px;} #intro .section1 .mindmap-dep2 div p:after {content:'ㆍ'; position:absolute; top:0; left:0;} #intro .section1.location{} #intro .section1.location .tit{text-align: center; padding: 0px 0px 20px; font-size: 22px;} #intro .section1.location .subtit{text-align: center; margin-bottom: 50px; font-size: 18px;} #intro .section2 {position:relative; width:100%; background:#fcfcfc;} #intro .section2 .flex {align-items:flex-start;} #intro .section2 img {margin-right:-70px;} #intro .section3 {position:relative; width:100%; padding-bottom:100px;} #intro .section3 .intro-type1 {width:81.5%; height:500px; margin-top:30px; margin-right:352px; border-top:2px solid #682ed0; overflow:hidden;} #intro .section3 .intro-type1 .swiper-slide {display:flex;} /* 230323 수정 및 추가 -----> */ #intro .section3 .intro-type1 .since {display:inline-block; position:relative; height:100%; padding:30px 0; font-weight:700; font-size:26px; color:#682ed0; text-align:center; line-height:22px;} #intro .section3 .intro-type1 .since span {margin-left:5px; font-weight:700; font-size:24px;} /* <----- 230323 수정 및 추가 */ #intro .section3 .intro-type1 .since:before {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:10px; background:#682ed0;} #intro .section3 .intro-type1 .since:after {content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:1px; height:300px; background:#e6e6e6;} #intro .section3 .intro-type1 .his-txt {width:450px; padding:74px 0 0 20px; text-align:left;} /* 230323 수정 및 추가 -----> */ #intro .section3 .intro-type1 .his-txt p {font-weight:300; font-size:16px; color:#333; line-height:28px; letter-spacing:-0.5px;} #intro .section3 .intro-type1 .his-txt img {top:76px; right:86px;} /* <----- 230323 수정 및 추가 */ #intro .section3 .nav-wrap {position:relative; width:1200px; height:20px; margin:0 auto;} #intro .section3 .nav-wrap .next {position:absolute; right:60px; width:26px; height:18px; background:url('/_images/intro/nav-prev.png'); cursor:pointer; transition:all .3s;} #intro .section3 .nav-wrap .prev {position:absolute; right:0; width:26px; height:18px; background:url('/_images/intro/nav-next.png'); cursor:pointer; transition:all .3s;} #intro .section3 .nav-wrap .next:hover {background:url('/_images/intro/nav-prev_over.png');} #intro .section3 .nav-wrap .prev:hover {background:url('/_images/intro/nav-next_over.png');} #intro .section4 {position:relative; width:100%; padding-bottom:100px; background:#efeefe;} #intro .section4 .intro-type2 {width:1200px; margin-top:40px; overflow:hidden;} #intro .section4 .intro-type2 .swiper-slide div {width:220px; height: 70px; margin:12px 0; background:#fff; border-radius:10px; display: inline-flex; justify-content: center; align-items: center;} #intro .section5 {position:relative; width:100%; padding-bottom:100px; background:#fcfcfc;} #intro .section5 .awards {width:1200px; height:210px; margin-top:160px; padding:0 140px; background:#fff; border-radius:10px; box-shadow:5px 5px 10px rgba(0,0,0,.1);} #intro .section5 .awards div {width:230px; margin-top:-160px; text-align:center;} #intro .section5 .awards div p {margin-top:10px; font-size:15px; color:#333; line-height:20px;} #intro .section5 .intro-type3 {width:1200px; margin-top:70px; overflow:hidden;} #intro .section5 .intro-type3 .swiper-slide {width:150px; text-align:center;} #intro .section5 .intro-type3 .swiper-slide p {margin-top:10px; font-weight:300; font-size:13px; color:#888; line-height:17px;} #location{} /*** learningFlatform : 학습플랫폼 ***/ #flatform {padding-bottom:100px; background:#fcfcfc;} #flatform .txt-box, #flatform .img-box {width:600px;} #flatform .txt-box h2.tit {padding-top:40px;} #flatform .txt-box.txt-left {margin-left:110px;} #flatform .txt-box.txt-right {margin-right:50px; text-align:right;} #flatform p.tit-line {position:relative; padding:0 0 10px 5px; border-bottom:1px solid #bfc4c6; font-weight:700; font-size:24px; color:#111;} #flatform p.tit-line:after {content:''; position:absolute; bottom:0; left:0; width:75px; height:3px; background:#111;} #flatform .section1 {position:relative; width:100%; height:750px; background:linear-gradient(to right, #6930d0 50%, #b2b5b6 50%);} #flatform .section1 .ani-box {top:0; width:1200px; height:750px;} #flatform .section1 .ani-box div {width:600px;} #flatform .section1 .ani-box div:nth-child(1) {margin-top:140px;} #flatform .section1 .ani-box div:nth-child(2) {margin-top:140px; padding-left:125px;} #flatform .section1 .ani-box div:nth-child(2) h5{color: #686c6d;} #flatform .section1 .ani-box div:nth-child(1) p:after {background:url('/_images/learningFlatform/chk1.png') no-repeat top center;} #flatform .section1 .ani-box div:nth-child(2) p:after {background:url('/_images/learningFlatform/chk2.png') no-repeat top center;} #flatform .section1 .ani-box div:nth-child(1) img {left:-240px; bottom:-80px; z-index:1;} #flatform .section1 .ani-box div:nth-child(2) img {right:-260px; bottom:-80px; z-index:1;} #flatform .section1 .ani-box div h5{position: relative; margin: 20px 0; font-size: 32px; color: #692fcf; line-height: 46px; font-weight: 600; background: #fff; border-radius: 60px; text-align: center; width: 480px; padding: 8px 0;} #flatform .section1 .ani-box div p {position:relative; margin:20px 0; padding-left:60px; font-weight:300; font-size:36px; color:#fff; line-height:46px;} #flatform .section1 .ani-box div p span {font-weight:600;} #flatform .section1 .ani-box div p:after {content:''; position:absolute; top:0; left:0; width:43px; height:42px;} #flatform .section1 .ani-box img {vertical-align:middle;} #flatform .section2 {position:relative; width:100%; padding:80px 0;} #flatform .section2 .flex {align-items:baseline;} #flatform .section2 .tit-box {width:340px;} #flatform .section2 .slide-box {position:relative; width:430px; text-align:center; overflow:hidden;} #flatform .section2 .slide-box span.back-cir {position:absolute; top:10px; left:155px; width:45px; height:45px; background:#fff4f1; border-radius:100px;} #flatform .section2 .slide-box p {position:relative; z-index:1; margin:20px 0; font-weight:700; font-size:23px; color:#666;} #flatform .section2 .slide-box p > span {font-weight:700; color:#f08263;} #flatform .section2 .slide-box:nth-child(3) span.back-cir {position:absolute; top:10px; left:145px; width:45px; height:45px; background:#eeeefe; border-radius:100px;} #flatform .section2 .slide-box:nth-child(3) p > span {font-weight:700; color:#682ed0;} #flatform .section2 .slide-box img {top:0; right:0; z-index:2;} #flatform .section2 .swiper-pagination-bullet {background:transparent; border:1px solid #682ed0; opacity:1;} #flatform .section2 .swiper-pagination-bullet-active {background:#682ed0; border:1px solid #682ed0;} #flatform .section4 {margin-top:-150px;} #flatform .section5 .img-box {position:relative; margin-top:70px;} #flatform .section5 .flatform-type3 {width:640px; overflow:hidden;} #flatform .section5 .next {right:-70px; top:50%; transform:translateY(-50%); z-index:1; width:22px; height:41px; margin-top:15px; background:url('/_images/learningFlatform/nav-next.png'); cursor:pointer; transition:all .3s;} #flatform .section5 .prev {left:-70px; top:50%; transform:translateY(-50%); z-index:1; width:22px; height:41px; margin-top:15px; background:url('/_images/learningFlatform/nav-prev.png'); cursor:pointer; transition:all .3s;} #flatform .section5 .next:hover {background:url('/_images/learningFlatform/nav-next_over.png');} #flatform .section5 .prev:hover {background:url('/_images/learningFlatform/nav-prev_over.png');} #flatform .section6 {margin-top:-120px;} /*** operationsSecurity : 운영/보안 ***/ #operations .section1 {position:relative; width:100%; padding-bottom:100px; background:#fcfcfc;} #operations .section1 .care {padding:70px 100px;} #operations .section1 .care div {width:300px; height:330px; padding:60px 0; background:#fff; border-radius:10px; text-align:center; box-shadow:0px 25px 40px -15px rgba(0,0,0,.1);} #operations .section1 .care div h3 {margin:18px 0; font-weight:700; font-size:28px;} #operations .section1 .care div p {font-weight:300; font-size:16px; color:#333; line-height:22px;} #operations .section1 .step div {width:370px; height:90px; margin:0 auto; text-align:center; overflow:hidden;} #operations .section1 .step div.ar {width:45px; height:33px;} #operations .section1 .step .back-circle {position:relative; width:180px; height:180px; border-radius:100px;} #operations .section1 .step .back-circle:after {content:''; position:absolute; top:12px; left:12px; width:156px; height:156px; background:#fff; border-radius:100px;} #operations .section1 .step .back-circle1 {background:#f0eff4;} #operations .section1 .step .back-circle1:after {border:1px dashed #8f8f91;} #operations .section1 .step .back-circle1 p {color:#575757;} #operations .section1 .step .back-circle2 {background:#f9d8cf;} #operations .section1 .step .back-circle2:after {border:1px dashed #e8795b;} #operations .section1 .step .back-circle2 p {color:#f08165;} #operations .section1 .step .back-circle3 {background:#b2b3ec;} #operations .section1 .step .back-circle3:after {border:1px dashed #7239d6;} #operations .section1 .step .back-circle3 p {color:#672dcf;} #operations .section1 .step .back-circle p {position:relative; z-index:1; padding-top:40px; font-weight:600; font-size:15px;} #operations .section1 .step .back-circle h6 {position:relative; z-index:1; padding-top:10px; font-weight:700; font-size:22px; color:#111;} #operations .section1 .step-cont {margin-top:20px;} #operations .section1 .step-cont div {width:370px; text-align:center;} #operations .section1 .step-cont div p {width:100%; height:80px; margin:10px 0; font-size:19px; line-height:80px;} #operations .section1 .step-cont div.step-cont1 p {background:#f3f4f6; color:#333;} #operations .section1 .step-cont div.step-cont2 p {background:#fbf1ef; color:#111;} #operations .section1 .step-cont div.step-cont3 p {background:#8377dd; color:#fff;} #operations .section2 {position:relative; width:100%; padding-bottom:100px;} #operations .section2 img {left:-50px; bottom:0;} #operations .section2 .tech-box {margin-top:70px;} #operations .section2 .tech {margin-left:270px;} #operations .section2 .tech-tit {display:grid; place-items:center; width:250px; height:150px; margin-bottom:10px; background:linear-gradient(to bottom, #7f4cd7, #682ed0); border-radius:15px; box-shadow:3px 3px 20px rgba(104,46,208,.3);} #operations .section2 .tech-tit h5 {font-weight:600; font-size:24px; color:#fff; text-align:center;} #operations .section2 .tech-cont {display:grid; place-items:inherit; width:680px; height:150px; margin-left:10px; margin-bottom:10px; padding:25px 30px; background:#f7f7f7; border-radius:15px;} #operations .section2 .tech-cont p {position:relative; padding-left:20px; font-weight:300; font-size:16px; color:#333; line-height:26px;} #operations .section2 .tech-cont p:after {content:'ㆍ'; position:absolute; top:0; left:0;} #operations .section2 .tech:last-child .tech-tit, #operations .section2 .tech:last-child .tech-cont {height:180px !important;} /*** additionalService : 부가서비스 ***/ #additional .txt-box, #additional .img-box {width:600px;} #additional .txt-box h2.tit {padding-top:0 !important;} #additional .txt-box p.desc {margin-top:30px; font-weight:300; font-size:14px; color:#999;} #additional .section1 {position:relative; width:100%; padding:60px 0; background:#fcfcfc;} #additional .section2 {position:relative; width:100%; padding:60px 0;} #additional .section3 {position:relative; width:100%; padding:60px 0; background:#fcfcfc;} /*** onlineCourse : 온라인교육과정 ***/ #onlineCourse {padding-bottom:100px; background:#fcfcfc;} #onlineCourse .flex.abs {top:0;} #onlineCourse .flex div.txt-box-left {position:relative; width:640px; padding-left:240px;} #onlineCourse .flex div.list-box-right {width:1040px; padding:100px 0 0 100px;} #onlineCourse .flex div.txt-box-right {position:relative; width:640px; padding-left:120px;} #onlineCourse .flex div.list-box-left {width:1040px; padding:100px 0 0;} #onlineCourse .flex div.lec {width:220px; margin-right:20px; padding:0;} #onlineCourse .flex div.lec:last-child {margin-right:0;} #onlineCourse .flex div.lec img {width:220px; height:140px;} /* 230314 추가 230315 수정 */ #onlineCourse .flex div.lec p {margin-top:12px; font-weight:300; font-size:16px; color:#333; line-height:24px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} #count {display:inline-block; position:relative; top:6px; width:133px; font-weight:700; font-size:54px; color:#333; letter-spacing:-2px;} #onlineCourse .section1 {position:relative; width:100%; padding-bottom:100px;} #onlineCourse .section1 .sec1-img1 {margin:55px 0 80px;} #onlineCourse .section1 h3 {height:54px; margin-bottom:30px; font-weight:700; font-size:32px; color:#333; text-align:center;} #onlineCourse .section1 .sec1-img2 {width:100%; height:100%; border-radius:20px; box-shadow:0px 25px 40px -15px rgba(0,0,0,.1);} #onlineCourse .section2 {position:relative; width:100%; height:380px; margin-bottom:70px; background:url('/_images/onlineCourse/sec2-bg.jpg') no-repeat top center;} #onlineCourse .section2 .sec2-img {bottom:-180px; right:-65px;} #onlineCourse .section3 {position:relative; width:100%; height:380px; margin-bottom:70px; background:url('/_images/onlineCourse/sec3-bg.jpg') no-repeat top center;} #onlineCourse .section3 .sec3-img {bottom:-250px; left:-126px; z-index:1;} #onlineCourse .section4 {position:relative; width:100%; height:380px; margin-bottom:70px; background:url('/_images/onlineCourse/sec4-bg.jpg') no-repeat top center;} #onlineCourse .section4 .sec4-img {bottom:-200px; right:-60px;} /*** microlearning : 마이크로러닝 ***/ #microlearning {position:relative; width:100%; margin:0 auto; overflow:hidden;} #microlearning .section1 {position:relative; width:100%; background:#fcfcfc;} #microlearning .section1 .sec1-img {margin-top:20px;} #microlearning .section1 .sec1-bubble1 {top:390px; right:90px; width:475px; height:90px; border-radius:100px; box-shadow:0px 12px 25px rgba(0,0,0,.2);} #microlearning .section1 .sec1-bubble2 {top:460px; left:120px; width:356px; height:90px; border-radius:100px; box-shadow:0px 12px 25px rgba(0,0,0,.2);} #microlearning .section1 .sec1-bubble3 {top:590px; right:40px; width:456px; height:90px; border-radius:100px; box-shadow:0px 12px 25px rgba(0,0,0,.2);} #microlearning .section1 .sec1-bubble4 {top:710px; left:120px; width:425px; height:90px; border-radius:100px; box-shadow:0px 12px 25px rgba(0,0,0,.2);} #microlearning .section1 h1 {margin-top:-40px; font-weight:700; font-size:40px; color:#682ed0; letter-spacing:-1px; text-align:center;} #microlearning .section1 h1 span {font-weight:800; font-size:56px; color:#682ed0; text-decoration:underline;} #microlearning .section1 p.cont-subtxt {margin-top:25px; font-weight:600; font-size:22px; color:#333; text-align:center; line-height:34px; letter-spacing:-0.5px;} #microlearning .section1 .subtit strong{font-weight: 700} #microlearning .section2 {width:100%; padding-bottom: 100px;} #microlearning .section2 {} #microlearning .section2 .advantage-Wrap .advantage{background-color: #f7f7f7; width: 290px; padding: 40px 0 42px;} #microlearning .section2 .advantage-Wrap .advantage dl{text-align: center; display: flex; flex-direction: column; align-items: center;} #microlearning .section2 .advantage-Wrap .advantage dl dt{color: #753bdb; font-size: 24px; font-weight: 700; position: relative;} #microlearning .section2 .advantage-Wrap .advantage dl dt:before{content: ''; background-color:#753bdb; width: 7px; height: 7px; border-radius: 7px; position: absolute; top: -7px; left: -7px} #microlearning .section2 .advantage-Wrap .advantage dl dd{color: #333333; font-size: 18px; margin-top: 10px; line-height: 1.4;} #microlearning .section3 {position:relative; width:100%; padding:100px 0; background:#f7f7f7;} #microlearning .section3 h2.tit{font-size: 37px; color:#333; padding: 0px 0px 30px; color:#333;} #microlearning .section3 p.subtit{color: #666;} #microlearning .section3 .about_micro_Wrap .left_Cnt{} #microlearning .section3 .about_micro_Wrap .left_Cnt .img_about_micro{position: relative; top: 32px; left: 44px;} #microlearning .section3 .about_micro_Wrap .right_Cnt{width: 830px; display: flex; flex-wrap: wrap; gap: 10px;} #microlearning .section3 .about_micro_Wrap .right_Cnt .about_micro{background-color: #753bdb; color: #fff; text-align: center; width: 270px; padding: 24px 0; letter-spacing: -0.075em; } #microlearning .section3 .about_micro_Wrap .right_Cnt .about_micro>span{font-size: 14px; font-weight: 900; display: inline-flex; align-items: center; gap: 3px; margin-bottom: 8px;} #microlearning .section3 .about_micro_Wrap .right_Cnt .about_micro>span:before{content: ''; width: 20px; height: 3px; background-color: #fff; display: block;} #microlearning .section3 .about_micro_Wrap .right_Cnt .about_micro>em{font-style: normal; font-size: 22px; font-weight: 700; display: block; } #microlearning .section3 .about_micro_Wrap .right_Cnt .about_micro>p{color: #b9a3eb; font-size: 16px; line-height: 1.4; margin-top: 20px;} /*** economist : 이코노미스트 ***/ #economist {position:relative; width:100%; margin:0 auto; overflow:hidden;} #economist .section1 {position:relative; width:100%; background:#fcfcfc;} #economist .section1 .sec1-img {margin-top:60px;} #economist .section1 .sec1-phone {left: 50%; bottom: 4px; margin-left: -360px;} #economist .section1 .sec1-bubble1 {top:550px; right:90px; width:300px; height:203px;} #economist .section1 .sec1-bubble2 {top:460px; left:120px; width:200px; height:266px;} #economist .section1 .sec1-bubble3 {top:438px; right:50px; width:456px; height:90px; border-radius:100px; box-shadow:0px 12px 25px rgba(0,0,0,.2);} #economist .section1 .sec1-bubble4 {top:744px; left:50px; width:475px; height:90px; border-radius:100px; box-shadow:0px 12px 25px rgba(0,0,0,.2);} #economist .section1 .sec1-bubble5 {top:822px; right:40px; width:142px; height:142px; border-radius:800px; box-shadow:0px 0px 25px rgba(0,0,0,.2);} #economist .section1 h1 {margin-top:-40px; font-weight:700; font-size:40px; color:#682ed0; letter-spacing:-1px; text-align:center;} #economist .section1 h1 span {font-weight:800; font-size:56px; color:#682ed0; text-decoration:underline;} #economist .section1 p.cont-subtxt {margin-top:25px; font-weight:600; font-size:22px; color:#333; text-align:center; line-height:34px; letter-spacing:-0.5px;} #economist .section1 .subtit strong{font-weight: 700} #economist .section1 .subtit em{font-style: normal; color: #af1b29;} #economist .section2 {width:100%; padding-bottom: 100px;} #economist .section2 {} #economist .section2 h2.tit em{font-style: normal; font-weight: 700; color: #af1b29;} #economist .section2 h2.tit:nth-of-type(2){padding: 40px 0px 20px} #economist .section2 p.subtit em{font-style: normal; font-weight: 700; font-size: 18px; } #economist .section2 p.subtit em.black {} #economist .section2 p.subtit em.red {color: #af1b29;} #economist .section2 .Graph_img{position: relative; left: 50%; transform: translateX(-50%);} #economist .section2 .Graph_img_01{right:0; bottom: 314px;} #economist .section2 .advantage-Wrap .advantage{width: 380px; height: 340px; padding: 40px 0 56px; border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column;} #economist .section2 .advantage-Wrap .advantage:nth-child(1){background-color: #b3335a;} #economist .section2 .advantage-Wrap .advantage:nth-child(2){background-color: #562ea1;} #economist .section2 .advantage-Wrap .advantage:nth-child(3){background-color: #0c90d9;} #economist .section2 .advantage-Wrap .advantage dl{text-align: center; display: flex; flex-direction: column; align-items: center;} #economist .section2 .advantage-Wrap .advantage dl dt{color: #fff; font-size: 30px; font-weight: 700; position: relative;} #economist .section2 .advantage-Wrap .advantage dl dt:before{content: ''; background-color:#fff; width: 7px; height: 7px; border-radius: 7px; position: absolute; top: -7px; left: -7px} #economist .section2 .advantage-Wrap .advantage dl dd{color: #e9e2f7; font-size: 20px; margin-top: 10px; line-height: 1.4;} #economist .section3 {position:relative; width:100%; padding:52px 0; background:#1d1545;} #economist .section3 h2.tit{font-size: 30px; color:#ff0037; padding: 0px 0px 10px;} #economist .section3 p.subtit{font-size: 18px; font-weight: 700; color: #ffffff;} #economist .section3 .about_micro_Wrap{position: relative;} #economist .section3 .about_micro_Wrap .left_Cnt{} #economist .section3 .about_micro_Wrap .left_Cnt .img_about_micro{position: absolute; top: -96px; left: 50%; margin-left: -30px;} #economist .section3 .about_micro_Wrap .right_Cnt{display: flex; flex-wrap: wrap; gap: 10px;} #economist .section3 .about_micro_Wrap .right_Cnt .menu_set{display: flex; gap: 10px;} #economist .section3 .about_micro_Wrap .right_Cnt .menu_set a{border-radius: 4px; font-size: 20px; font-weight: bold; width: 180px; text-align: center; display: block; padding: 14px 0;} #economist .section3 .about_micro_Wrap .right_Cnt .menu_set a.btn_01{background-color: #fff; color: #000;} #economist .section3 .about_micro_Wrap .right_Cnt .menu_set a.btn_02{background-color: #d11a23; color: #fff;} #economist .section4{text-align: center; margin-bottom: 100px;} #economist .section4 h3.tit{font-size: 30px; color:#333; padding-bottom: 40px;} #economist .section4.img_economist_logo{} /*** contentsProduction : 콘텐츠 제작&제휴 ***/ #production {position:relative; padding-bottom:100px; background:#fcfcfc;} #production .section1 a {display:inline-block; top:90px; right:0; width:190px; height:50px; background:#fff; border:1px solid #999; border-radius:5px; font-weight:700; font-size:17px; color:#333; text-align:center; line-height:50px;} #production .section1 h2.tit:after {content:''; position:absolute; bottom:40px; right:0; width:860px; height:1px; background:#999;} #production .section2 {position:relative; width:100%; height:690px; margin-top:60px; background:url('/_images/contentsProduction/sec2-bg.jpg') no-repeat center center;} #production .section2 .cont-box {top:120px; width:674px; height:438px; padding-left:70px; background:#fff; box-shadow:0px 25px 40px -15px rgba(0,0,0,.1);} #production .section2 .cont-box h1 {margin-top:-35px; font-weight:700; font-size:62px;} #production .section2 .cont-box h1 span {font-weight:700; color:#682ed0;} #production .section2 .cont-box p {margin:30px 0 80px; font-size:18px; color:#999; line-height:30px;} #production .section2 .cont-box .studio {display:inline; padding:10px 25px; background:#111; font-weight:200; font-size:18px; color:#fff;} #production .section2 .cont-box .studio-txt {margin:10px 0 0; padding:20px 0 10px 20px; border-left:1px solid #111; font-weight:500; font-size:17px; color:#333;} /*** ownerTraining : 사업주훈련과정 ***/ #ownerTraining {position:relative; padding-bottom:100px; background:#fcfcfc;} #ownerTraining .section1 a.btn-view {display:inline-block; top:90px; right:0; width:190px; height:50px; background:#fff; border:1px solid #999; border-radius:5px; font-weight:700; font-size:17px; color:#333; text-align:center; line-height:50px;} #ownerTraining .section1 h2.tit:after {content:''; position:absolute; bottom:40px; right:0; width:830px; height:1px; background:#999;} #ownerTraining .section1 img.sec1-img {margin-top:115px;} #ownerTraining .section1 .consulting {width:100%; height:210px; margin-top:130px; padding:70px; background:#e0f5f7; border-radius:20px;} #ownerTraining .section1 .consulting a {display:inline-block; position:relative; top:-5px; margin-left:20px; padding:15px 40px; background:#fff; border-radius:100px; font-weight:700; font-size:20px; color:#333;} #ownerTraining .section1 .consulting a img {position:relative; top:-1px; margin-left:10px;} #ownerTraining .section1 .consulting h3 {display:inline-block; font-weight:700; font-size:35px; color:#333;} #ownerTraining .section1 .consulting p {margin-top:5px; font-size:18px; color:#5c8f94;} #ownerTraining .section1 .sec1-img1 {width:110px; height:110px; border-radius:20px; box-shadow:5px 10px 20px rgba(129,129,129,.2);} #ownerTraining .section1 .sec1-img2 {position:relative; z-index:1; width:110px; height:110px; margin:0 90px 0 5px; border-radius:20px; box-shadow:5px 10px 20px rgba(129,129,129,.2);} #ownerTraining .section1 .sec1-img3 {bottom:10px; right:50px;} #ownerTraining .section2 .sec2-cnt {margin-top:20px;} #ownerTraining .section2 .ani-box {top:100px; width:100%;} #ownerTraining .section2 .ani-box .sec2-img1 {top:80px; right:0;} #ownerTraining .section2 .ani-box .sec2-img2 {top:0; right:360px;} #ownerTraining .section2 .ani-box .sec2-img3 {top:80px; left:70px;} #ownerTraining .section2 .ani-box .sec2-img4 {top:230px; left:320px;} #ownerTraining .section2 .ani-box .sec2-img5 {top:360px; left:0;} #ownerTraining .section2 .ani-box .sec2-img6 {top:330px; right:60px;} #ownerTraining .section2 .btn-box {justify-content:center;margin-top:70px;} #ownerTraining .section2 .btn-box a {width:250px; height:70px; margin:0 5px; background:#682ed0; border-radius:5px; font-weight:500; font-size:19px; color:#fff; text-align:center; line-height:70px;} /*** subscribeEducation : 구독형기업교육 ***/ #subscribe {position:relative; padding-bottom:100px; background:#fcfcfc;} #skrollr-body {position:fixed; width:100%; height:100%; background:#fcfcfc;} #skrollr-body section {position:absolute; width:100%; height:100%;} #skrollr-body .center {left:50%; transform:translateX(-50%);} #skrollr-body .section1 {margin-top:90px; background:#fcfcfc url('/_images/subscribeEducation/sec1-bg.jpg') no-repeat top center;} #skrollr-body .section1 .circle-box {z-index:1; width:550px; height:553px; border-radius:100%; box-shadow:15px 15px 50px rgba(0,0,0,.25);} #skrollr-body .section1 .circle-box h3 {top:305px; width:100%; font-weight:700; font-size:40px; text-align:center;} #skrollr-body .section1 .circle-box p {top:365px; width:100%; font-size:17px; color:#333; text-align:center; line-height:28px;} #skrollr-body .section1 .line {top:55%; width:1px; background:linear-gradient(to bottom, #525359 20%, #682ed0 70%, #fcfcfc 100%);} #skrollr-body .txt h1 {font-weight:300; font-size:48px; text-align:center; letter-spacing:-1px;} #skrollr-body .txt h1 span {font-weight:600;} #skrollr-body .txt h1 svg {position:relative; top:10px; width:70px; height:70px;} #skrollr-body .section4 .txt h1 svg {top:18px;} #skrollr-body .section6 .line {width:1px; background:linear-gradient(to top, #682ed0 20%, #525359 70%, #fcfcfc 100%);} #skrollr-body .section6 .btn-box {z-index:2; width:260px; height:260px;} #skrollr-body .section6 .hand {top:40%; z-index:1; margin-top:60px;} #skrollr-body .section7 .subtxt {width:100%; margin-top:-400px;} #skrollr-body .section7 .subtxt h4 {margin-bottom:20px; font-weight:700; font-size:40px; text-align:center;} #skrollr-body .section7 .subtxt p {font-size:17px; color:#111; text-align:center; line-height:28px;} #skrollr-body .fee {width:100%; height:1500px; margin-top:350px; padding-bottom:100px; background:#111;} #skrollr-body .fee .flex {justify-content:center; width:100%;} #skrollr-body .fee .flex img {margin:-230px 20px 0} #skrollr-body .fee h3 {margin:60px 0 0; font-weight:700; font-size:44px; color:#fff; text-align:center;} #skrollr-body .simply-scroll {width:100%; height:700px !important; margin:40px 0;} #skrollr-body .simply-scroll .simply-scroll-clip {width:100% !important; height:700px !important;} #skrollr-body .simply-scroll .simply-scroll-list li {width:1884px !important; height:700px !important; margin-right:30px;} #skrollr-body .footer-container {width:100%; background:#fff;} /*** offlineEducation : 오프라인교육 ***/ #offlineEducation .section1 {position:relative; width:100%; background:#f9f9f9;} .offlineEducation-type1 {width:100%; height:500px; margin-top:70px;} .offlineEducation-type1 .swiper-slide {width:840px !important; height:390px;} .offlineEducation-type1 .swiper-slide .slide-back h4 {margin-bottom:28px; font-weight:500; font-size:33px; color:#fff;} .offlineEducation-type1 .swiper-slide .slide-back h4 span {font-size:18px;} .offlineEducation-type1 .swiper-slide .slide-back p {font-weight:300; font-size:16px; color:#fff; line-height:25px; opacity:.7;} .offlineEducation-type2 {width:150px; height:3px; margin-top:6px; overflow:hidden;} .offlineEducation-type2 .swiper-slide {width:150px; height:3px; background:#b7b7ba;} .offlineEducation-type2 .swiper-slide-active {background:#682ed0; animation:progress 4.6s ease-in forwards;} #offlineEducation .section2 {padding-bottom:100px;} #offlineEducation .on-off {justify-content:center; margin:60px 0 50px;} #offlineEducation .on-off p {margin:0 30px; font-weight:700; font-size:30px; color:#333;} #offlineEducation .on-off p img {position:relative; top:3px;} #offlineEducation .step div {width:220px; height:360px; padding:40px 30px; background:#fff; border-radius:10px; text-align:center; box-shadow:0px 25px 40px -15px rgba(0,0,0,.1);} #offlineEducation .step div h6 {font-weight:700; font-size:15px;} #offlineEducation .step div:nth-child(odd) h6 {color:#672dcf;} #offlineEducation .step div:nth-child(even) h6 {color:#f08165;} #offlineEducation .step div h3 {margin:10px 0; font-weight:700; font-size:24px;} #offlineEducation .step div h3 > p {margin-top:4px; padding-left:0; font-weight:500; color:#666; text-align:center;} #offlineEducation .step div h3 > p:after {display:none;} #offlineEducation .step div img {margin:22px 0;} #offlineEducation .step div:nth-child(2) img {margin-top:-5px;} #offlineEducation .step div p {position:relative; padding-left:18px; font-weight:300; font-size:15px; color:#333; text-align:left; line-height:23px;} #offlineEducation .step div p:after {content:'ㆍ'; position:absolute; top:0; left:0;} #offlineEducation .sec2-img {margin-top:25px;} /*** compulsoryEducation : 법정의무교육 ***/ #compulsory .section1 {position:relative; width:100%; background:#f9f9f9;} .compulsory-type1 {width:100%; height:500px; margin-top:70px;} .compulsory-type1 .swiper-slide {width:840px !important; height:390px;} .compulsory-type1 .swiper-slide .slide-back h4 {margin-bottom:24px; font-weight:600; font-size:32px; color:#fff; line-height:36px;} .compulsory-type1 .swiper-slide .slide-back p {position:relative; margin-bottom:4px; padding-left:18px; font-size:15px; color:#fff;} .compulsory-type1 .swiper-slide .slide-back p:after {content:'ㆍ'; position:absolute; top:5px; left:0;} .compulsory-type1 .swiper-slide .slide-back p span {line-height:21px;} .compulsory-type1 .swiper-slide .slide-back p span:first-child {display:inline-block; width:95px;} .compulsory-type1 .swiper-slide .slide-back p span:last-child {display:inline-block; width:152px; font-weight:200; opacity:.7;} .compulsory-type1 .swiper-slide .slide-back div.warning {position:absolute; bottom:50px; height:auto; padding:0; font-weight:600; font-size:15px; color:#333;} .compulsory-type1 .swiper-slide .slide-back div.warning span {color:#f46462;} .compulsory-type2 {width:150px; height:3px; margin-top:6px; overflow:hidden;} .compulsory-type2 .swiper-slide {width:150px; height:3px; background:#b7b7ba;} .compulsory-type2 .swiper-slide-active {background:#682ed0; animation:progress 4.6s ease-in forwards;} .mb10 {margin-bottom:10px !important;} #compulsory .section2 {padding-bottom:100px;} #compulsory .process {margin-top:70px;} #compulsory .process div:first-child {display:grid; place-items:center; width:215px; height:240px; margin-right:55px; border-top:1px solid #111; border-bottom:1px solid #111;} #compulsory .process div:first-child p {font-weight:700; font-size:34px; text-align:center; line-height:42px;} #compulsory .process div:first-child p span {font-weight:700;} #compulsory .process div:nth-child(3), #compulsory .process div:nth-child(5) {margin:0 30px;} #compulsory .process div.circle-box {display:grid; place-content:center; width:240px; height:240px; background:#a5a4ad; border-radius:100%;} #compulsory .process div.circle-box:nth-child(4) {background:#f08263;} #compulsory .process div.circle-box:nth-child(6) {background:#682ed0;} #compulsory .process div.circle-box h4 {font-weight:600; font-size:28px; color:#fff; text-align:center;} #compulsory .process div.circle-box span {display:block; width:5px; height:5px; margin:15px auto; background:#fff; border-radius:100%;} #compulsory .process div.circle-box p {font-weight:300; font-size:15px; color:#fff; text-align:center; line-height:24px;} #compulsory .step div {width:275px; height:360px; margin-top:60px; padding:40px 30px; background:#fff; border-radius:10px; text-align:center; box-shadow:0px 25px 40px -15px rgba(0,0,0,.1);} #compulsory .step div h3 {margin:25px 0 10px; font-weight:700; font-size:24px; line-height:30px;} #compulsory .step div p {position:relative; padding-left:18px; font-weight:300; font-size:15px; color:#333; line-height:23px;} #compulsory .section3 {position:relative; width:100%; height:799px; background:url('/_images/compulsoryEducation/sec3-bg.jpg') no-repeat top center;} #compulsory .section3 h2.tit {color:#fff;} #compulsory .section3 img {margin:30px 0 60px;} #compulsory .section3 a {display:block; width:250px; height:70px; margin:0 auto; background:#682ed0; border-radius:5px; font-weight:500; font-size:19px; color:#fff; text-align:center; line-height:70px;} /* 오프라인교육 법정의무교육 - 공통 */ .swiper-slide .slide-back {width:770px; height:290px; margin:20px 35px 0; box-shadow:0px 12px 30px rgba(0,0,0,.2);} .swiper-slide .slide-back.n1 {background:linear-gradient(to left, #898e98, #616876);} .swiper-slide .slide-back.n2 {background:linear-gradient(to left, #7d62af, #522d94);} .swiper-slide .slide-back.n3 {background:linear-gradient(to left, #58c0a9, #20ab8c);} .swiper-slide .slide-back.n4 {background:linear-gradient(to left, #df8065, #d45531);} .swiper-slide .slide-back div:first-child {width:430px;} .swiper-slide .slide-back div:last-child {width:340px; padding:50px 40px;} .swiper-slide .slide-back img {margin:-20px 0 0 30px; box-shadow:0px 15px 30px -15px rgba(0,0,0,.5);} .swiper-nav {display:flex; bottom:80px; left:50%; transform:translateX(-50%); z-index:1; height:15px;} .swiper-pagination {position:relative !important; bottom:1px !important; width:100px !important; font-weight:600; font-size:17px; color:#adacb0;} .swiper-pagination .swiper-pagination-current {font-weight:700; color:#682ed0;} .swiper-pagination .line {display:inline-block; width:12px; height:3px; margin:0 4px 4px; background:#ccc;} .next1 {width:11px; height:15px; margin-right:15px; background:url('/_images/offlineEducation/nav-next.png'); cursor:pointer; transition:all .3s;} .prev1 {width:11px; height:15px; margin-left:20px; background:url('/_images/offlineEducation/nav-prev.png'); cursor:pointer; transition:all .3s;} .next1:hover {background:url('/_images/offlineEducation/nav-next_over.png');} .prev1:hover {background:url('/_images/offlineEducation/nav-prev_over.png');} .swiper-play-puase {width:11px; height:15px; cursor:pointer;} .swiper-play-puase .swiper-play {display:none; width:11px; height:15px; background:url('/_images/offlineEducation/nav-play.png'); transition:all .3s;} .swiper-play-puase .swiper-puase {display:block; width:11px; height:15px; background:url('/_images/offlineEducation/nav-puase.png'); transition:all .3s;} .swiper-play-puase .swiper-play:hover {background:url('/_images/offlineEducation/nav-play_over.png');} .swiper-play-puase .swiper-puase:hover {background:url('/_images/offlineEducation/nav-puase_over.png');} /*** hrd4u : 기업직업훈련카드 ***/ #hrd4u .inner1100 {position:relative; width:1100px; margin:0 auto;} #hrd4u .inner1200 {position:relative; width:1200px; margin:0 auto;} /* #hrd4u h3.tit {padding:0; font-weight:600; font-size:34px; line-height:44px;} #hrd4u p.subtit {margin:6px 0; font-weight:500; font-size:24px; letter-spacing:-1px;} */ #hrd4u .section1 {background:url('/_images/hrd4u/sec1-bg.jpg') no-repeat top center; margin-top: 90px;} #hrd4u .section1 .hrd4u_top {position:absolute; top:124px;} #hrd4u .section1 .hrd4u_top p.stitle {font-weight:500; font-size:26px;} #hrd4u .section1 .hrd4u_top p.stitle strong {font-weight:600; color:#682ed0;} #hrd4u .section1 .hrd4u_top h1 {margin:20px 0; font-weight:700; font-size:74px; color:#111;} #hrd4u .section1 .hrd4u_top p.txts {font-weight:300; font-size:18px; color:#666; line-height:26px;} #hrd4u .section1 .hrd4u_top p.txts strong {font-weight:500; color:#111;} #hrd4u .section1 a.btn_Application {display: block; position: absolute; top: 541px; left: 0px; width: 600px; height: 70px; overflow: hidden; text-indent: -999em;} #hrd4u .section2 {background:url('/_images/hrd4u/sec2-bg.jpg') no-repeat top center;} #hrd4u .section2 a.btn_link_01 {display: block; position: absolute; top: 112px; right: 0px; width: 189px; height: 50px; overflow: hidden; text-indent: -999em;} #hrd4u .section2 a.btn_link_02 {display: block; position: absolute; bottom: 197px; left: 475px; width: 250px; height: 70px; overflow: hidden; text-indent: -999em;} #hrd4u .section2 a.btn_link_03 {display: block; position: absolute; top: 268px; left: 556px; width: 180px; height: 46px; overflow: hidden; text-indent: -999em;} /* #hrd4u .section2 .flex {margin-top:80px; border-bottom:1px solid #ddd;} #hrd4u .section2 .flex:last-child {border-bottom:0;} #hrd4u .section2 .flex div:first-child {width:380px;} #hrd4u .section2 .flex div:last-child {width:720px;} #hrd4u .section2 .flex div img {display:block;} #hrd4u .section2 .flex .flex {margin-top:0; margin-bottom:120px; border-bottom:0;} #hrd4u .section2 dl dt {position:relative; margin-bottom:7px; font-weight:600; font-size:24px;} #hrd4u .section2 dl dt:after {content:''; position:absolute; top:-12px; left:1px; width:12px; height:2px; background:#682ed0;} #hrd4u .section2 dl dd {margin-bottom:30px; font-weight:300; font-size:16px; color:#666; line-height:24px;} #hrd4u .section2 dl dd:last-child {margin-bottom:70px;} #hrd4u .section2 dl dd span {font-size:13px; color:#999;} #hrd4u .section2 .flex div span {display:block; margin-top:15px; font-size:13px; color:#999;} #hrd4u .section2 .flex div span:before, .section2 dl dd span:before {content:'*'; display:inline-block; position:relative; top:2px; margin-right:7px; color:#682ed0;} #hrd4u .section2 .flex div.step {position:relative; width:180px;} #hrd4u .section2 .flex div.step:after {content:''; position:absolute; top:30px; right:8px; width:18px; height:33px; background:url('/_images/hrd4u/sec2-stepArr.png')center center no-repeat;} #hrd4u .section2 .flex div.step:last-child:after {display:none;} #hrd4u .section2 .flex div.step h4 {margin:24px 0 14px 16px; font-weight:600; font-size:24px;} #hrd4u .section2 .flex div.step p {margin-left:16px; font-weight:300; font-size:15px; color:#666; line-height:20px;} #hrd4u .section2 .btn-benefit, #hrd4u .section2 .btn-cardApplication {display:block; width:220px; margin-top:40px; padding:15px 0px; background:#000; border-radius:5px; font-weight:600; font-size:16px; color:#fff; text-align:center; transition:all .4s;} #hrd4u .section2 .btn-benefit:hover, #hrd4u .section2 .btn-more:hover, #hrd4u .section2 .btn-cardApplication:hover {background:#692ed0; color:#fff;} #hrd4u .section2 .btn-more {display:block; width:220px; margin-top:40px; padding:15px 0px; background:#c0c0c0; border-radius:5px; font-weight:600; font-size:16px; color:#fff; text-align:center; transition:all .4s;} #hrd4u .section2 .btn-limitCheck {position:relative; margin-left:10px; font-size:16px; color:#000;} #hrd4u .section2 .btn-limitCheck:before {content: ''; display:block; position:absolute; top:4px; right:-15px; width:7px; height:11px; background:url('/_images/hrd4u/btn-arr.png')center center no-repeat;} #hrd4u .section2 .btn-limitCheck:after{content: ''; display:block; position:absolute; left:0; bottom:-1px; width:98px; height:1px; background:#000;} */ /* #hrd4u .section3 {height:678px; background:url('/_images/hrd4u/sec3-bg.jpg') no-repeat top center;} */ /* #hrd4u .section3 img {position:absolute; top:-50px; right:0;} */ #hrd4u .section3 .btn-hrdkr_01 {position: absolute; top: 175px; left: 484px; width: 130px; height: 36px;} #hrd4u .section3 .btn-hrdkr_02 {position: absolute; top: 956px; left: 444px; width: 130px; height: 36px;} #hrd4u .bestcourseWrap {position:absolute; width:100%; } #hrd4u .bestcourse_list {margin:0 auto; text-align:center;} #hrd4u .bestcourse_list .swiper {overflow:inherit;} #hrd4u .bestcourse_list .course_card_front em.icon_new {display:block; position:absolute; top:0px; right:50px; width:35px; height:34px; background:url('/kees/assets/images/icon_new.png') no-repeat;} #hrd4u .bestcourse_list .course_card_front img{width: 220px; height: 139px; object-fit: cover;} #hrd4u .bestcourse_list .card-content {display:inline-block; position:relative; width:220px; padding-top:10px; font-size:16px; color:#111; overflow:hidden; text-overflow:ellipsis; height: 52px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; display: -webkit-box; line-height: 22px; text-align: left; margin: 0 auto;} #hrd4u .swiper-button-wrap {position:absolute; top:-48px; left:50%; width:180px; height:40px; margin-left:-600px;} #hrd4u .swiper-button-wrap:after {content:''; display:block; position:absolute; left:50%; transform:translateX(-50%); width:1px;} #hrd4u .swiper-button-wrap .swiper-button-next {width:11px; height:15px; background:url('/_images/hrdFlex/nav-next.png') no-repeat;} #hrd4u .swiper-button-wrap .swiper-button-prev {width:11px; height:15px; background:url('/_images/hrdFlex/nav-prev.png') no-repeat;} #hrd4u .swiper-button-next:after, .swiper-button-prev:after {display:none;} #hrd4u .swiper-button-wrap .swiper-pagination {z-index:1; bottom:2px !important; width:auto !important;} #hrd4u .swiper-button-wrap .swiper-pagination .swiper-pagination-current {margin-right:80px;} #hrd4u .swiper-button-wrap .pagination_progress {position:absolute; top:5px; left:19px; width:66px; height:2px;} #hrd4u .swiper-button-wrap .pagination_progress .swiper-pagination-bullet {position:absolute; width:66px; height:2px; background:#b7b7ba; border-radius:0;} #hrd4u .swiper-button-wrap .pagination_progress .swiper-pagination-bullet-active {position:absolute; z-index:2; background:#682ed0 !important; border-radius:0; animation:progress1 5s ease-in alternate forwards;} #hrd4u .swiper-button-wrap .swiper-sbtn {position:absolute; top:-2px; right:-12px;} #hrd4u .swiper-button-wrap .swiper-sbtn .stop {width:11px; height:15px; background:url('/_images/hrdFlex/nav-puase.png') no-repeat; cursor:pointer;} #hrd4u .swiper-button-wrap .swiper-sbtn .start {display:none; width:11px; height:15px; background:url('/_images/hrdFlex/nav-play.png') no-repeat; cursor:pointer;} @keyframes progress1 {0% {width:0;} 95%,100% {width:66px;}} #hrd4u .section4 {background: #2a2686;} #hrd4u .section4 .btn-application {display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 130px; width: 250px; padding: 17px 0px; border: 1px solid #fff; font-weight: 600; font-size: 18px; color: #fff; text-align: center; transition: all .4s;} #hrd4u .section5 {padding: 40px 0; background:#ebebeb;} #hrd4u .section5 .awardList li {text-align:center;} #hrd4u .section5 .awardList li p.img_award {text-align:center;} #hrd4u .section5 .awardList li p.img_awardtxt {font-size:12px; color:#83838c; text-align:center; line-height:16px;} #hrd4u .section5 .awardList li p.img_awardtxt:before {content: ''; display:block; width:10px; height:1px; margin:0px auto 10px auto; background:#7b7b84;} /*** hrdFlex : HRD FLEX ***/ #hrdFlex .inner1100 {position:relative; width:1100px; margin:0 auto;} #hrdFlex .inner1200 {position:relative; width:1200px; margin:0 auto;} #hrdFlex .section1 {margin-top:90px; background:url('/_images/flex/bg_01.jpg')top center no-repeat;} #hrdFlex .section1 .btn-application {display: block; position: absolute; top: 571px; left: 50%; transform: translateX(-50%); width: 600px; height: 70px; font-weight: 600; font-size: 18px; color: #fff; text-align: center; overflow: hidden; text-indent: -999em;} #hrdFlex .section2 {padding-top:90px;} #hrdFlex .section2 .vodarea{position: absolute; right: 0; top: 28px; border-radius: 10px; overflow: hidden;} #hrdFlex .section3 {position:relative; background:url('/_images/flex/bg_03.jpg')top center no-repeat; text-align: center;} #hrdFlex .section3 .advantageWrap{width: 1200px;position: absolute; left: 50%; transform: translateX(-50%); top: 177px;} #hrdFlex .section3 .advantageBox{height: 240px; background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 30px 0 rgba(0,0,0,0.2); margin: 0 auto; margin-bottom: 40px;font-size: 22px; display: flex; align-items: center; flex-direction: column; line-height: 140%; justify-content: center;} #hrdFlex .section3 .advantageBox strong{color: #753bdb; font-weight: bold; line-height: 140%;} #hrdFlex .section3 .advantageWrap .swiper-button-next {width:16px; height:25px; background:url('/_images/flex/atw-nav-next.png') no-repeat; right: -45px; margin-top: -36px} #hrdFlex .section3 .advantageWrap .swiper-button-prev {width:16px; height:25px; background:url('/_images/flex/atw-nav-prev.png') no-repeat; left: -45px; margin-top: -36px} #hrdFlex .section3 .advantageWrap .swiper-button-next:after, #hrdFlex .section3 .advantageWrap .swiper-button-prev:after {display:none;} #hrdFlex .section_course, #hrd4u .section_course, #naeilbaeum .section_course {position: relative; width: 100%; height: 380px; background: url(/_images/Flex/bg_courseInfo.jpg) no-repeat top center; margin-bottom: 80px;} .courseInfo {position:relative;} .courseInfo__title {width: 400px; position: absolute; left: 50%; margin-left: -594px;} .courseInfo__title > h4.tit {position: relative; padding: 70px 0 30px; font-weight: 700; font-size: 38px; color: #111;} .courseInfo__title > p.subtit {position: relative; font-size: 18px; color: #333; line-height: 28px; margin-bottom: 38px;} .courseInfo__title .btn_courseInfo {background-color: #f1f1f1; font-size: 18px; font-weight: 700; color: #333; padding: 18px 28px; border-radius: 100px;} .courseInfo__title .btn_courseInfo i {display: inline-block; width: 20px; height: 17px; background: url(/_images/flex/icon_down.png) no-repeat center center; margin-left: 10px;} .courseInfo__title .decoimg {position: absolute; top: 243px; left: 250px;} .courseInfo__ListWrap {position: absolute; top: 20px; left: 50%; margin-left: -110px; width: 1200px; height: 280px; overflow: hidden; padding: 74px 0;} #hrdFlex .bestcourseWrap {position:absolute; width:100%; } #hrdFlex .bestcourse_list {margin:0 auto; text-align:center;} #hrdFlex .bestcourse_list .swiper {overflow:inherit;} #hrdFlex .bestcourse_list .course_card_front em.icon_new {display:block; position:absolute; top:0px; right:50px; width:35px; height:34px; background:url('/kees/assets/images/icon_new.png') no-repeat;} #hrdFlex .bestcourse_list .course_card_front img{width: 220px; height: 139px; object-fit: cover;} #hrdFlex .bestcourse_list .card-content {display:inline-block; position:relative; width:220px; padding-top:10px; font-size:16px; color:#111; overflow:hidden; text-overflow:ellipsis; height: 52px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; display: -webkit-box; line-height: 22px; text-align: left; margin: 0 auto;} #hrdFlex .swiper-button-wrap {position:absolute; top:-48px; left:50%; width:180px; height:40px; margin-left:-600px;} #hrdFlex .swiper-button-wrap:after {content:''; display:block; position:absolute; left:50%; transform:translateX(-50%); width:1px;} #hrdFlex .swiper-button-wrap .swiper-button-next {width:11px; height:15px; background:url('/_images/hrdFlex/nav-next.png') no-repeat;} #hrdFlex .swiper-button-wrap .swiper-button-prev {width:11px; height:15px; background:url('/_images/hrdFlex/nav-prev.png') no-repeat;} #hrdFlex .swiper-button-next:after, .swiper-button-prev:after {display:none;} #hrdFlex .swiper-button-wrap .swiper-pagination {z-index:1; bottom:2px !important; width:auto !important;} #hrdFlex .swiper-button-wrap .swiper-pagination .swiper-pagination-current {margin-right:80px;} #hrdFlex .swiper-button-wrap .pagination_progress {position:absolute; top:5px; left:19px; width:66px; height:2px;} #hrdFlex .swiper-button-wrap .pagination_progress .swiper-pagination-bullet {position:absolute; width:66px; height:2px; background:#b7b7ba; border-radius:0;} #hrdFlex .swiper-button-wrap .pagination_progress .swiper-pagination-bullet-active {position:absolute; z-index:2; background:#682ed0 !important; border-radius:0; animation:progress1 5s ease-in alternate forwards;} #hrdFlex .swiper-button-wrap .swiper-sbtn {position:absolute; top:-2px; right:-12px;} #hrdFlex .swiper-button-wrap .swiper-sbtn .stop {width:11px; height:15px; background:url('/_images/hrdFlex/nav-puase.png') no-repeat; cursor:pointer;} #hrdFlex .swiper-button-wrap .swiper-sbtn .start {display:none; width:11px; height:15px; background:url('/_images/hrdFlex/nav-play.png') no-repeat; cursor:pointer;} @keyframes progress1 {0% {width:0;} 95%,100% {width:66px;}} /* #hrdFlex .section5 {height:835px; background:url('/_images/flex/bg_05.jpg') top center no-repeat;} #hrdFlex .section5 img {position:absolute; right:0; top:46px;} */ #hrdFlex .section5 .btn-hrdkr {position: absolute; top: 356px; left: 448px; width: 120px; height: 36px;} #hrdFlex .section6 {background:url('/_images/flex/bg_06.jpg') top center no-repeat;} #hrdFlex .section6 .btn-application {display:block; position:absolute; top:50%; transform:translateY(-50%); right:130px; width:250px; padding:17px 0px; border:1px solid #fff; font-weight:600; font-size:18px; color:#fff; text-align:center; transition: all .4s;} #hrdFlex .section6 .btn-application:hover {background:#fff; border:1px solid #fff; color:#111;} /*** kdc : HRD FLEX ***/ #kdc .inner1100 {position:relative; width:1100px; margin:0 auto;} #kdc .inner1200 {position:relative; width:1200px; margin:0 auto;} #kdc .section1 {margin-top:90px; background:url('/_images/kdc/bg_01.jpg')top center no-repeat;} #kdc .section1 .btn-application {display: block; position: absolute; top: 541px; left: 0; width: 600px; height: 70px; font-weight: 600; font-size: 18px; color: #fff; text-align: center; overflow: hidden; text-indent: -999em;} #kdc .section2 {background:url('/_images/kdc/bg_02.jpg')top center no-repeat;} #kdc .section2 a.btn_link_01 {display: block; position: absolute; top: 691px; left: 292px; width: 300px; height: 70px; overflow: hidden; text-indent: -999em;} #kdc .section2 a.btn_link_02 {display: block; position: absolute; top: 691px; left: 450px; width: 300px; height: 70px; overflow: hidden; text-indent: -999em;} #kdc .section2 a.btn_link_03 {display: block; position: absolute; bottom: 101px; left: 0; width: 360px; height: 70px; overflow: hidden; text-indent: -999em;} #kdc .section4 {background:url('/_images/kdc/bg_04.jpg')top center no-repeat;} #kdc .section4 .btn-application {display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 130px; width: 250px; padding: 17px 0px; border: 1px solid #fff; font-weight: 600; font-size: 18px; color: #fff; text-align: center; transition: all .4s;} #kdc .section5 {padding: 40px 0; background:#ebebeb;} #kdc .section5 .awardList li {text-align:center;} #kdc .section5 .awardList li p.img_award {text-align:center;} #kdc .section5 .awardList li p.img_awardtxt {font-size:12px; color:#83838c; text-align:center; line-height:16px;} #kdc .section5 .awardList li p.img_awardtxt:before {content: ''; display:block; width:10px; height:1px; margin:0px auto 10px auto; background:#7b7b84;} /*** hrd4u : 내일배움카드 ***/ #naeilbaeum .inner1100 {position:relative; width:1100px; margin:0 auto;} #naeilbaeum .inner1200 {position:relative; width:1200px; margin:0 auto;} #naeilbaeum .section1 {background:url('/_images/naeilbaeum/sec1-bg.jpg') no-repeat top center; margin-top: 90px;} #naeilbaeum .section1 a.btn_Application {display: block; position: absolute; top: 541px; left: 0px; width: 600px; height: 70px; overflow: hidden; text-indent: -999em;} #naeilbaeum .section2 {background:url('/_images/naeilbaeum/sec2-bg.jpg') no-repeat top center;} #naeilbaeum .section2 a.btn_link_01 {display: block; position: absolute; bottom: 160px; left: 450px; width: 300px; height: 70px; overflow: hidden; text-indent: -999em;} #naeilbaeum .section3 {position:relative; background:url('/_images/flex/bg_03.jpg')top center no-repeat; text-align: center;} #naeilbaeum .section3 .advantageWrap{width: 1200px;position: absolute; left: 50%; transform: translateX(-50%); top: 177px;} #naeilbaeum .section3 .advantageBox{height: 240px; background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 30px 0 rgba(0,0,0,0.2); margin: 0 auto; margin-bottom: 40px;font-size: 22px; display: flex; align-items: center; flex-direction: column; line-height: 140%; justify-content: center;} #naeilbaeum .section3 .advantageBox strong{color: #753bdb; font-weight: bold; line-height: 140%;} #naeilbaeum .section3 .advantageBox span{color: #111; font-size: 12px; margin-top: 18px;} #naeilbaeum .section3 .advantageWrap .swiper-button-next {width:16px; height:25px; background:url('/_images/flex/atw-nav-next.png') no-repeat; right: -45px; margin-top: -36px} #naeilbaeum .section3 .advantageWrap .swiper-button-prev {width:16px; height:25px; background:url('/_images/flex/atw-nav-prev.png') no-repeat; left: -45px; margin-top: -36px} #naeilbaeum .section3 .advantageWrap .swiper-button-next:after, #hrdFlex .section3 .advantageWrap .swiper-button-prev:after {display:none;} #naeilbaeum .section4 .btn-hrdkr_01 {position: absolute; bottom: 202px; left: 342px; width: 517px; height: 78px;} #naeilbaeum .bestcourseWrap {position:absolute; width:100%; } #naeilbaeum .bestcourse_list {margin:0 auto; text-align:center;} #naeilbaeum .bestcourse_list .swiper {overflow:inherit;} #naeilbaeum .bestcourse_list .course_card_front em.icon_new {display:block; position:absolute; top:0px; right:50px; width:35px; height:34px; background:url('/kees/assets/images/icon_new.png') no-repeat;} #naeilbaeum .bestcourse_list .course_card_front img{width: 220px; height: 139px; object-fit: cover;} #naeilbaeum .bestcourse_list .card-content {display:inline-block; position:relative; width:220px; padding-top:10px; font-size:16px; color:#111; overflow:hidden; text-overflow:ellipsis; height: 52px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; display: -webkit-box; line-height: 22px; text-align: left; margin: 0 auto;} #naeilbaeum .swiper-button-wrap {position:absolute; top:-48px; left:50%; width:180px; height:40px; margin-left:-600px;} #naeilbaeum .swiper-button-wrap:after {content:''; display:block; position:absolute; left:50%; transform:translateX(-50%); width:1px;} #naeilbaeum .swiper-button-wrap .swiper-button-next {width:11px; height:15px; background:url('/_images/hrdFlex/nav-next.png') no-repeat;} #naeilbaeum .swiper-button-wrap .swiper-button-prev {width:11px; height:15px; background:url('/_images/hrdFlex/nav-prev.png') no-repeat;} #naeilbaeum .swiper-button-next:after, .swiper-button-prev:after {display:none;} #naeilbaeum .swiper-button-wrap .swiper-pagination {z-index:1; bottom:2px !important; width:auto !important;} #naeilbaeum .swiper-button-wrap .swiper-pagination .swiper-pagination-current {margin-right:80px;} #naeilbaeum .swiper-button-wrap .pagination_progress {position:absolute; top:5px; left:19px; width:66px; height:2px;} #naeilbaeum .swiper-button-wrap .pagination_progress .swiper-pagination-bullet {position:absolute; width:66px; height:2px; background:#b7b7ba; border-radius:0;} #naeilbaeum .swiper-button-wrap .pagination_progress .swiper-pagination-bullet-active {position:absolute; z-index:2; background:#682ed0 !important; border-radius:0; animation:progress1 5s ease-in alternate forwards;} #naeilbaeum .swiper-button-wrap .swiper-sbtn {position:absolute; top:-2px; right:-12px;} #naeilbaeum .swiper-button-wrap .swiper-sbtn .stop {width:11px; height:15px; background:url('/_images/hrdFlex/nav-puase.png') no-repeat; cursor:pointer;} #naeilbaeum .swiper-button-wrap .swiper-sbtn .start {display:none; width:11px; height:15px; background:url('/_images/hrdFlex/nav-play.png') no-repeat; cursor:pointer;} @keyframes progress1 {0% {width:0;} 95%,100% {width:66px;}} #naeilbaeum .section5 {background: #2a2686;} #naeilbaeum .section5 .btn-application {display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 130px; width: 250px; padding: 17px 0px; border: 1px solid #fff; font-weight: 600; font-size: 18px; color: #fff; text-align: center; transition: all .4s;} #naeilbaeum .section6 {padding: 40px 0; background:#ebebeb;} #naeilbaeum .section6 .awardList li {text-align:center;} #naeilbaeum .section6 .awardList li p.img_award {text-align:center;} #naeilbaeum .section6 .awardList li p.img_awardtxt {font-size:12px; color:#83838c; text-align:center; line-height:16px;} #naeilbaeum .section6 .awardList li p.img_awardtxt:before {content: ''; display:block; width:10px; height:1px; margin:0px auto 10px auto; background:#7b7b84;} /*** archive : HRD FLEX ***/ #archive .inner1100 {position:relative; width:1100px; margin:0 auto;} #archive .inner1200 {position:relative; width:1200px; margin:0 auto;} #archive .section1 {margin-top:90px; background:#1a1a1a url('/_images/archive/bg_01.jpg')top center no-repeat;} #archive .section1 .btn-application {display: block; position: absolute; top: 660px; left: 50%; transform: translateX(-50%); width: 800px; height: 80px; font-weight: 600; font-size: 18px; color: #fff; text-align: center; overflow: hidden; text-indent: -999em;} #archive .section2 {background-color: #1a1a1a;} #archive .section3 {position:relative; padding: 100px 0;} #archive .section3 .img_cnt_03_title{padding-bottom: 60px; text-align: center;} #archive .section3 .tabWrap{width: 100%; max-width: 1200px; margin: 0 auto;} /* 탭 버튼 */ #archive .section3 .tabMenu{display: flex;} #archive .section3 .tabMenu li{flex: 1; text-align: center; padding: 26px 0; cursor: pointer; background: #ccc; font-size: 28px; font-weight: bold; border-radius: 10px 10px 0 0;} #archive .section3 .tabMenu li.is-active{background: #191919; color: #fff; font-weight: bold;} /* 탭 내용 */ #archive .section3 .tabContent{border-top: 4px solid #191919;} #archive .section3 .tabPane{display: none;} #archive .section3 .tabPane.is-active{display: block;} #archive .section4 {background: url('/_images/archive/bg_04.jpg')center center no-repeat;} #archive .section5{padding: 90px 0 100px;} #archive .section5 h5{font-size:38px; font-weight: 700; color: #111111; margin-bottom: 50px;} #archive .section_course, #hrd4u .section_course, #naeilbaeum .section_course {position: relative; width: 100%; height: 380px; background: url(/_images/archive/bg_courseInfo.jpg) no-repeat top center; margin-bottom: 80px;} .courseInfo {position:relative;} .courseInfo__title {width: 400px; position: absolute; left: 50%; margin-left: -594px;} .courseInfo__title > h4.tit {position: relative; padding: 70px 0 30px; font-weight: 700; font-size: 38px; color: #111;} .courseInfo__title > p.subtit {position: relative; font-size: 18px; color: #333; line-height: 28px; margin-bottom: 38px;} .courseInfo__title .btn_courseInfo {background-color: #f1f1f1; font-size: 18px; font-weight: 700; color: #333; padding: 18px 28px; border-radius: 100px;} .courseInfo__title .btn_courseInfo i {display: inline-block; width: 20px; height: 17px; background: url(/_images/archive/icon_down.png) no-repeat center center; margin-left: 10px;} .courseInfo__title .decoimg {position: absolute; top: 243px; left: 250px;} .courseInfo__ListWrap {position: absolute; top: 20px; left: 50%; margin-left: -110px; width: 1200px; height: 280px; overflow: hidden; padding: 74px 0;} #archive .bestcourseWrap {position:absolute; width:100%; } #archive .bestcourse_list {margin:0 auto; text-align:center;} #archive .bestcourse_list .swiper {overflow:inherit;} #archive .bestcourse_list .course_card_front em.icon_new {display:block; position:absolute; top:0px; right:50px; width:35px; height:34px; background:url('/kees/assets/images/icon_new.png') no-repeat;} #archive .bestcourse_list .course_card_front img{width: 220px; height: 139px; object-fit: cover;} #archive .bestcourse_list .card-content {display:inline-block; position:relative; width:220px; padding-top:10px; font-size:16px; color:#111; overflow:hidden; text-overflow:ellipsis; height: 52px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; display: -webkit-box; line-height: 22px; text-align: left; margin: 0 auto;} #archive .swiper-button-wrap {position:absolute; top:-48px; left:50%; width:180px; height:40px; margin-left:-600px;} #archive .swiper-button-wrap:after {content:''; display:block; position:absolute; left:50%; transform:translateX(-50%); width:1px;} #archive .swiper-button-wrap .swiper-button-next {width:11px; height:15px; background:url('/_images/archive/nav-next.png') no-repeat;} #archive .swiper-button-wrap .swiper-button-prev {width:11px; height:15px; background:url('/_images/archive/nav-prev.png') no-repeat;} #archive .swiper-button-next:after, .swiper-button-prev:after {display:none;} #archive .swiper-button-wrap .swiper-pagination {z-index:1; bottom:2px !important; width:auto !important;} #archive .swiper-button-wrap .swiper-pagination .swiper-pagination-current {margin-right:80px;} #archive .swiper-button-wrap .pagination_progress {position:absolute; top:5px; left:19px; width:66px; height:2px;} #archive .swiper-button-wrap .pagination_progress .swiper-pagination-bullet {position:absolute; width:66px; height:2px; background:#b7b7ba; border-radius:0;} #archive .swiper-button-wrap .pagination_progress .swiper-pagination-bullet-active {position:absolute; z-index:2; background:#682ed0 !important; border-radius:0; animation:progress1 5s ease-in alternate forwards;} #archive .swiper-button-wrap .swiper-sbtn {position:absolute; top:-2px; right:-12px;} #archive .swiper-button-wrap .swiper-sbtn .stop {width:11px; height:15px; background:url('/_images/archive/nav-puase.png') no-repeat; cursor:pointer;} #archive .swiper-button-wrap .swiper-sbtn .start {display:none; width:11px; height:15px; background:url('/_images/archive/nav-play.png') no-repeat; cursor:pointer;} @keyframes progress1 {0% {width:0;} 95%,100% {width:66px;}} #archive .section5 .btn-link_01 {position: absolute; top: 356px; left: 448px; width: 160px; height: 36px; overflow: hidden; text-indent: -99em;} #archive .section5 .btn-link_02 {position: absolute; top: 996px; left: 550px; width: 160px; height: 36px; overflow: hidden; text-indent: -99em;} #archive .section6 {background:url('/_images/archive/bg_06.jpg') top center no-repeat;} #archive .section6 .btn-application {display:block; position:absolute; top:50%; transform:translateY(-50%); right:130px; width:250px; padding:17px 0px; border:1px solid #fff; font-weight:600; font-size:18px; color:#fff; text-align:center; transition: all .4s;} #archive .section6 .btn-application:hover {background:#fff; border:1px solid #fff; color:#111;} /*** ai basic training : AI 기초 훈련 ***/ #ai_bt .inner1200 {position:relative; width:1200px; margin:0 auto;} #ai_bt .section1 {margin-top:90px; background:#1a1a1a url('/_images/ai_basic_training/bg_01.jpg')top center no-repeat;} #ai_bt .section1 .btn-application {display: block; position: absolute; top: 478px; left: 0; width: 280px; height: 70px; font-weight: 600; font-size: 18px; color: #fff; text-align: center; overflow: hidden; text-indent: -999em;} #ai_bt .section2 {background-color: #fff;} #ai_bt .section3 {position:relative; padding: 80px 0; background:#1a1a1a url('/_images/ai_basic_training/bg_03.jpg')top center no-repeat;} #ai_bt .section3 .img_cnt_03_title{padding-bottom: 60px; text-align: center;} #ai_bt .section3 .tabWrap{width: 100%; max-width: 1200px; margin: 0 auto;} /* 탭 버튼 */ #ai_bt .section3 .tabMenu{display: flex;} #ai_bt .section3 .tabMenu li{flex: 1; text-align: center; padding: 24px 0; color: #9893A3; cursor: pointer; background: #716C7A; font-size: 22px; font-weight: bold; border-radius: 40px 40px 0 0;} #ai_bt .section3 .tabMenu li.is-active{background: rgba(255, 255, 255, 0.80); color: #333; font-weight: bold;} /* 탭 내용 */ #ai_bt .section3 .tabPane{display: none;} #ai_bt .section3 .tabPane.is-active{display: block;} #ai_bt .section4 {background-color: #EEEBF5;} #ai_bt .section5 {background-color: #DED8EB;} #ai_bt .section6 {background:#1a1a1a url('/_images/ai_basic_training/bg_06.jpg')top center no-repeat;} #ai_bt .section6 .btn-application {display: block; position: absolute; bottom: 54px; left: 50%; width: 280px; height: 70px; font-weight: 600; font-size: 18px; color: #fff; text-align: center; overflow: hidden; text-indent: -999em; transform: translateX(-50%);} /*** prevention : 운영/보안 ***/ #prevention .section1 {position:relative; width:100%; background:#fcfcfc;} #prevention .section1 .subtitle{font-size: 14px; color: #999; margin-top: 30px;} #prevention .section1 ul li{font-size: 18px; color: #333; line-height: 28px;} #prevention .section1 .process {margin-top:100px;} #prevention .section1 .process div:first-child {display:grid; place-items:center; width:215px; height:240px; margin-right:55px; border-top:1px solid #111; border-bottom:1px solid #111;} #prevention .section1 .process div:first-child p {font-weight:700; font-size:34px; text-align:center; line-height:42px;} #prevention .section1 .process div:first-child p span {font-weight:700;} #prevention .section1 .process div:nth-child(3), #prevention .process div:nth-child(5) {margin:0 30px;} #prevention .section1 .process div.circle-box {display:grid; place-content:center; width:240px; height:240px; background:#a5a4ad; border-radius:100%;} #prevention .section1 .process div.circle-box:nth-child(4) {background:#f08263;} #prevention .section1 .process div.circle-box:nth-child(5) {background:#682ed0;} #prevention .section1 .process div.circle-box h4 {font-weight:600; font-size:28px; color:#fff; text-align:center;} #prevention .section1 .process div.circle-box span {display:block; width:5px; height:5px; margin:15px auto; background:#fff; border-radius:100%;} #prevention .section1 .process div.circle-box p {font-weight:300; font-size:15px; color:#fff; text-align:center; line-height:24px;} #prevention .section2 {position:relative; width:100%;} #prevention .section2 img {right:0px; bottom:-100px;} #prevention .section2 .tit{} #prevention .section2 .tech-box {margin-top:34px;} #prevention .section2 .tech {align-items: inherit;} #prevention .section2 .tech-tit {display:grid; place-items:center; width:250px; margin-bottom:10px; background:linear-gradient(to bottom, #7f4cd7, #682ed0); border-radius:15px; box-shadow:3px 3px 20px rgba(104,46,208,.3);} #prevention .section2 .tech-tit h5 {font-weight:600; font-size:24px; color:#fff; text-align:center;} #prevention .section2 .tech-cont {display:grid; place-items:inherit; width:100%; height:auto; margin-left:10px; margin-bottom:10px; padding:25px 30px; background:#f7f7f7; border-radius:15px;} #prevention .section2 .tech-cont p {position:relative; padding-left:20px; font-weight:300; font-size:16px; color:#333; line-height:26px;} #prevention .section2 .tech-cont p:after {content:'ㆍ'; position:absolute; top:0; left:0;} #prevention .section2 .tech-cont p.none_Bullet{padding-left:0px;} #prevention .section2 .tech-cont .bold{font-weight: 700;} #prevention .section2 .tech-cont .textColor_blue{color:#6930d0; font-weight: bold;} #prevention .section2 .tech-cont p.none_Bullet:after{content: none;} #prevention .section3 {position:relative; width:100%; padding-bottom:200px;} #prevention .section3 .btn_link{background-color: #111; color: #fff; font-size: 20px; font-weight: 700; border-radius: 80px; margin-left: 30px; padding: 15px 40px;} #prevention .section3 .btn_link i{display: block; width: 12px; height: 12px; background: url('/_images/prevention/icon_link.png')no-repeat; margin-left: 16px;} #prevention .section3 img {right:0px; bottom:-100px;} #prevention .section3 .tech-box {margin-top:34px;} #prevention .section3 .tech {} #prevention .section3 .tech-tit {display:grid; place-items:center; width:250px; height:150px; margin-bottom:10px; background:linear-gradient(to bottom, #7f4cd7, #682ed0); border-radius:15px; box-shadow:3px 3px 20px rgba(104,46,208,.3);} #prevention .section3 .tech-tit h5 {font-weight:600; font-size:24px; color:#fff; text-align:center;} #prevention .section3 .tech-cont {display:grid; place-items:inherit; width:100%; height:150px; margin-left:10px; margin-bottom:10px; padding:25px 30px; background:#f7f7f7; border-radius:15px;} #prevention .section3 .tech-cont p {position:relative; padding-left:20px; font-weight:300; font-size:16px; color:#333; line-height:26px;} #prevention .section3 .tech-cont p:after {content:'ㆍ'; position:absolute; top:0; left:0;} #prevention .section3 .tech:last-child .tech-tit, .section3 .tech:last-child .tech-cont {height:180px !important;} #prevention_board .section1 {position:relative; width:100%; background:#fcfcfc; padding-bottom: 100px;} #prevention_board .section1 .btn_Registration{background-color: #111; color: #fff; font-size: 20px; font-weight: 700; border-radius: 5px; margin-left: auto; padding: 13px 40px;} #prevention_board .section1 .btn_Registration2{background-color: #111; color: #fff; font-size: 20px; font-weight: 700; border-radius: 5px; margin-left: auto; padding: 13px 40px;} #prevention_board .section1 .tb_prevention_board{margin-top: 60px} #prevention_board .section1 .tb_prevention_board th{font-size: 18px; color: #111; background-color: #f2f2f2; padding: 26px 0px;} #prevention_board .section1 .tb_prevention_board td{text-align: center; border-bottom: 1px solid #f2f2f2; padding: 22px 0px;} #prevention_board .section1 .tb_prevention_board td a{color: #333;} #prevention_board .section1 .tb_prevention_board td a:hover{text-decoration: underline;} #prevention_board .board_pagging{justify-content: center; gap: 12px; margin-top: 40px;} #prevention_board .board_pagging a{width: 36px; height: 36px; text-align: center; border:1px solid #e5e5e5;display: inline-flex; justify-content: center; align-items: center; color: #333; border-radius: 5px} #prevention_board .board_pagging a:hover{background: #682ed0; border: 1px solid #682ed0; color: #fff;} #prevention_board .board_pagging a.on{background: #682ed0; border: 1px solid #682ed0; color: #fff;} #prevention_board .board_pagging a.sp_board{background: url('/_images/common/sp_board.png')no-repeat;;} #prevention_board .board_pagging a.p_fst{overflow: hidden; text-indent: -99em;} #prevention_board .board_pagging a.p_prev{overflow: hidden; text-indent: -99em; background-position-x: -36px;} #prevention_board .board_pagging a.p_next{overflow: hidden; text-indent: -99em; background-position-x: -72px;} #prevention_board .board_pagging a.p_last{overflow: hidden; text-indent: -99em; background-position-x: -108px;} #prevention_board .viewWrap{padding-top: 100px;} #prevention_board .viewWrap .viewHead{background-color: #f2f2f2; padding: 26px 40px;} #prevention_board .viewWrap .viewHead p{font-size: 18px; font-weight: 700;} #prevention_board .viewWrap .viewHead dl{margin-left: auto ;font-size: 16px;} #prevention_board .viewWrap .viewHead dl dt{} #prevention_board .viewWrap .viewHead dl dt:after{content: ''; display: block; width: 1px; height: 10px; background-color: #222; margin:0 24px;} #prevention_board .viewWrap .viewHead dl dd{} #prevention_board .viewWrap .viewInfo{border-bottom: 1px solid #f2f2f2; padding: 21px 40px; justify-content: space-between;} #prevention_board .viewWrap .viewInfo dl{} #prevention_board .viewWrap .viewInfo dl dt{font-size: 16px; font-weight: 700;} #prevention_board .viewWrap .viewInfo dl dt:before{content: ''; display: block; width: 4px; height: 4px; border-radius:4px; background-color: #111; margin-right: 4px;} #prevention_board .viewWrap .viewInfo dl dd{} #prevention_board .viewWrap .viewInfo dl dd:before{content: ''; display: block; width: 1px; height: 10px; background-color: #b8b8b8; margin:0 14px;} #prevention_board .viewWrap .viewCnt{padding: 20px 40px 60px; line-height: 150%;} #prevention_board .viewWrap .viewAnswer{background-color: #f3f4ff; padding: 40px; font-size: 18px; font-weight: 700;} #prevention_board .viewWrap .viewbtnset{margin-top: 40px; justify-content: center; gap: 20px} #prevention_board .viewWrap .viewbtnset a{font-size: 20px; color: #fff; font-weight: 700; width: 200px; text-align: center; border-radius: 5px; padding: 20px 0} #prevention_board .viewWrap .viewbtnset a.bnt__edit{background-color: #682ed0; } #prevention_board .viewWrap .viewbtnset a.bnt__delete{background-color: #666; } #prevention_board .viewWrap .viewbtnset a.bnt__list{background-color: #666; } .tb_style_01{margin-top: 24px;} .tb_style_01 table tr th{font-weight: bold; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background-color:#f7f7f7; padding : 12px 0;} .tb_style_01 table tr td{text-align: center; border-bottom: 1px solid #e6e6e6; padding : 12px 0;} .faqList{display:flex;flex-direction:column;gap: 18px;} .faqItem{border: 1px solid #eaeaea;border-radius: 20px;padding: 40px;overflow:hidden;} .faqHead{display:flex;align-items:center;gap: 16px;cursor:pointer;user-select:none;} .qaIcon{flex: 0 0 36px;width:36px;height:36px;border-radius: 12px;display:flex;align-items:center;justify-content:center;font-weight: 800;font-size: 18px;} .qaIcon.is-q{background: #682ed0;color:#fff;} .faqTitleArea{display:flex;align-items:center;gap: 14px;flex: 1;min-width: 0;} .faqTitle{margin:0;font-size: 20px;font-weight: 800;color: #682ed0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .faqHeadRight{display:flex;align-items:center;gap: 12px;flex: 0 0 auto;} .goBtn{display:inline-flex;align-items:center;gap: 8px;padding: 10px 14px;border: 1px solid #682ed0;border-radius: 4px;color: #682ed0;text-decoration:none;font-size: 14px;font-weight: 700;background:#fff;white-space:nowrap;} .goBtn .goIcon{width:14px;height:14px;display:inline-block;background: url("/_images/archive/btn_link.png") no-repeat center center;} .toggleBtn{width: 36px;height: 36px;border: 0;border-radius: 10px;background: #333;display:flex;align-items:center;justify-content:center;cursor:pointer;flex: 0 0 auto;} .toggleBtn .arrow{width: 18px;height: 18px;background: url("/_images/common/icon_arrow_down.png") no-repeat center/contain;} /* 바디(답변 영역) */ .faqBody{display:none;padding-top: 10px;} .answerRow{display:flex;gap: 16px;align-items:flex-start;} .qaIcon.is-a{background:#ebebeb;color:#999;flex: 0 0 36px;width:36px;height:36px;font-weight: 900;font-size: 18px;} .answerContent{flex:1;min-width:0;font-size: 18px;line-height: 1.75;color:#333;} .answerContent p{margin:0 0 10px; width: 92%; line-height: 140%;} .answerContent .muted{color: #666; font-size: 16px} .answerContent ul{margin: 10px 0 0;padding: 0;list-style:none;} .answerContent ul li{display:flex;gap: 8px;margin: 6px 0; color: #666; font-size: 14px; line-height: 140%;} .answerContent ul li a {font-size: 14px; line-height: 140%;} .answerContent ul li::before{content:"-";color:#999;flex: 0 0 auto;} .answerContent ol{margin: 10px 0 0;padding: 0;list-style:none;} .answerContent ol li{display:flex;gap: 8px;margin: 6px 0; color: #666; font-size: 14px; line-height: 140%;} .answerContent ol li a {font-size: 14px; line-height: 140%;} /* 오픈 상태 */ .faqItem.is-open .toggleBtn{ background:#ccc; } .faqItem.is-open .toggleBtn .arrow{background-image: url("/_images/common/icon_arrow_up.png");}