<!--Content--> <style> /* 로고 */ .logo { background-image:url(<https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fce016730-88ae-4cfe-a1e7-ff219e7062c6%2Fneurocampus.png&blockId=873b3464-f0b4-428e-8bcc-2a77d50c9d73>); background-size: contain ; background-repeat:no-repeat; position:relative; display:block; left:3%; top:10px; width:140px; height:45px; z-index: 1000; margin: 5px 10px -32px 50px; } </style> <div class="container"> <div class="logo"><a href="<https://career.neurophet.com/works>"></a></div> <nav id="topBar"> <ul> <li><a href="#">교육 카테고리<i class="fa fa-angle-down"></i></a> <ul class="subMenu"> <li><a href="#">Item 1.1</a></li> <li><a href="#">Item 1.2 <i class="fa fa-angle-right"></i></a> <ul class="subMenu"> <li><a href="#">Item 1.2.1 </a></li> <li><a href="#">Item 1.2.2 <i class="fa fa-angle-right"></i></a> <ul class="subMenu"> <li><a href="#">Item 1.2.2.1</a></li> <li><a href="#">Item 1.2.2.2 <i class="fa fa-angle-right"></i></a> <ul class="subMenu"> <li><a href="#">Item 1.2.2.2.1</a></li> <li><a href="#">Item 1.2.2.2.2</a></li> <li><a href="#">Item 1.2.2.2.3</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Item 1.3</a></li> <li><a href="#">Item 1.4</a></li> </ul> </li> <li><a href="#">신규입사자 교육 <i class="fa fa-angle-down"></i></a> <ul class="subMenu"> <li><a href="#">Item 2.1</a></li> <li><a href="#">Item 2.2</a></li> <li><a href="#">Item 2.3</a></li> </ul> </li> <li><a href="#">교육신청 방법</a></li> <li><a href="#">교육체계</a></li> </ul> </nav> </div> <!--컨테이너 닫기--> <div id=page> <h1>Multi-Level Dropdown.</h1> <p>Simple DropDown with <strong>CSS</strong> and <strong>jQuery</strong>.</p> <p><strong>You can take this as deep, user-unfriendly and ridiculous as you like.</strong></p> </div> <style> /*** Base Styling (Scroll for the useful part) ***/ /* Layout */ html, body, div, h1, h2, p, a, ul, li, nav { box-sizing: inherit; margin: 0; padding: 0; border: none; font: inherit; vertical-align: baseline; } body { width: 100%; line-height: 1.5; } /* Typography */ body { font-size: 100%; } h1 { font-size: 240%; font-weight: 600; } p{ font-weight: 400; margin: .6rem 0; } a:link, a:visited { color: #008CCD; text-decoration: none; } a:hover { color: #00BCED; } a:action { color: #008CCD; } /*******************************/ /********* USEFUL PART *********/ /*******************************/ body{ position: relative; background: #FFF; font-weight: 300; color: #333; } #page { position: absolute; top: 4.5rem; padding: 0 15px; font-size: 1.2rem; } #topBar { position: fixed; width: 100%; padding: 0 15px; top: 0; left: 30%; z-index: 5000; background: #fff; height: 3.6rem; font-size: 1.0rem; } #topBar ul li{ position: relative; display: inline-block; } #topBar>ul>li { float: left; } #topBar a { display: inline-block; padding: 1.2rem 1.8rem; line-height: 1.2rem; color: #1b1b1e; transition: .2s ease-out; } #topBar a:hover, li.active{ background: #fff; color: #ff3333; } ul.subMenu { box-sizing: border-box; position: absolute; top: 100%; left: 0; width: 120%; } ul.subMenu li { width: 100%; background: #fff; } #topBar ul.subMenu li a { width: 100%; padding: 1rem 1rem; border-bottom: 1px solid rgba(0,0,0,.05); border-top: 1px solid rgba(255,255,255,.1); } #topBar ul.subMenu li a:hover, #topBar ul.subMenu li.active>a { background: #ff3333; color: #fff; padding-left: 1.1rem; } ul.subMenu ul.subMenu{ position: absolute; top: 0; left: 100%; width: 100%; } </style> <script> // Hide SubMenus. $(".subMenu").hide(); // Shows SubMenu when it's parent is hovered. $(".subMenu").parent("li").hover(function () { $(this).find(">.subMenu").not(':animated').slideDown(300); $(this).toggleClass("active "); }); // Hides SubMenu when mouse leaves the zone. $(".subMenu").parent("li").mouseleave(function () { $(this).find(">.subMenu").slideUp(150); }); // Prevents scroll to top when clicking on <a href="#"> $("a[href=\\"#\\"]").click(function () { return false; }); </script>
<!--<h3 class="container text-danger text-center"></h3>--> <div class="container"> <div class="sec-page wrap" id="page1"> <div class="page-wrap" > <div class="banner-txt con"> <!--<div class="banner-top-txt">뉴로핏의 경쟁력을 만드는 것은 바로'뉴로피언'<br></div>--> <div class="banner1-title">뉴로피언의 성장,<br>뉴로캠퍼스와 함께해요.</div> <div class="wrap2"><a href="<https://career.neurophet.com/chow>">  교육신청 방법  </a> <div class="tooltip1">🔔 교육별 프로세스 및<br>신청 방법을 안내합니다. </div> </div>  <div class="wrap1"><a href="<https://career.neurophet.com/crec>" target="_blank">추천영상 공유신청</a> <div class="tooltip1">뉴로캠퍼스에 공유할<br> 컨텐츠를 기다립니다.🙂</div> </div> </div> <img width="100%" src="<https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2d79e985-7f67-446e-92ec-c19fb4740566%2Flife_at_neurophet_(3).gif&blockId=6efc7a9f-7483-4c49-8fe1-7db3272d593e>" alt="" > <!--<img width="100%" src="<https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2d79e985-7f67-446e-92ec-c19fb4740566%2Flife_at_neurophet_(3).gif&blockId=6efc7a9f-7483-4c49-8fe1-7db3272d593e>" style="display: block; margin:53px 0 0 0; " alt="" >--> <!--<video width="100%" style="object-fit:cover;position:relative;z-index:-1;filter:brightness(1)" height="auto" muted="" autoplay="" loop="" playsinline="" preload="auto"> <source src="<https://www.neurophet.com/uploads/recruit.slogan.mp4>" type="video/mp4" />슬기로운 뉴로핏 생활 </video>--> </div> </div>
<!-- 스크립트 --> <!-- 제이쿼리 불러오기 --> <script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js>"></script> <!--font awesome--> <link rel="stylesheet" type="text/css" href="<https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css>" /> <script src="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css>"></script> <!-- slick불러오기 --> <!--<script src="<https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js>"></script>--> <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css>"> <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css>"> <script> console.clear(); setTimeout(function() { $(window).scrollTop(0); }, 100); var filter = "win16|win32|win64|mac|macintel"; if ( navigator.platform ) { if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) { //mobile console.log('mobile 접속'); location.replace('/mworks'); } else { //pc console.log('pc 접속'); } } </script> <!--뉴로캠퍼스 기본 css --> <div class="CodeBlock_block__3Yr6P css-1sk2dg5"> <style> .notion-page-content img { border-radius: 0px !important } .notion-topbar { display: none; } .css-1874hvy { display: none; } .ej0hkt123 { display: none; } .padding { display: none; } video {margin:0; padding:0;} .container { width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin: 0 auto; position: relative; } /* 메인 배너 page-1 */ body{ margin-top: 100px; line-height: 1.6 } .container{ width: 500px; margin: 0 auto; } .page-wrap { overflow:hidden; position:relative; left:0; top:0; } .page-wrap .page { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; visibility:hidden; transition:opacity .5s, visibility .3s; } .page.active { opacity:1; visibility:visible; } /* 폰트 적용 */ @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); html { font-family: "Noto Sans KR", sans-serif; /* 임시 scroll-behavior:smooth; */ overflow-x:hidden; } html[data-side-bar-actived="N"], html[data-side-bar-actived="N"] > body { overflow:hidden; } /* 노말라이즈 */ body, ul, li, h1 { margin:0; padding:0; list-style:none; } a { color:inherit; text-decoration:none; } /* 라이브러리 */ .con { margin:0 auto; } .img-box > img { width:100%; display:block; } .row::after { content:""; display:block; clear:both; } .cell { float:left; box-sizing:border-box; } .cell-center { float:center; box-sizing:border-box; } .cell-right { float:right; box-sizing:border-box; } .margin-0-auto { margin:0 auto; } .block { display:block; } .inline-block { display:inline-block; } .text-align-center { text-align:center; } .line-height-0-ch-only { line-height:0; } .line-height-0-ch-only > * { line-height:normal; } .relative { position:relative; } .absolute-left { position:absolute; left:0; } .absolute-right { position:absolute; right:0; } .absolute-top { position:absolute; top:0; } .absolute-bottom { position:absolute; bottom:0; } .absolute-middle { position:absolute; top:50%; /*transform:translateY(-50%);*/ } .width-100p { width:100%; } .table { display:table; } .table-cell { display:table-cell; } .vertical-align-top { vertical-align:top; } .vertical-align-middle { vertical-align:middle; } .vertical-align-bottom { vertical-align:bottom; } /* 커스텀 */ .con-min-width { min-width:1180px; } /* 반응형 레이아웃 */ .con { max-width:1280px; } /* 상단 메뉴 */ .top-bar { position:fixed; top:0; left:0; width:100%; transition:background .3s; z-index:1000; } .wrap > .top-bar > .menu-box-1 > ul > li { padding:0 20px 15px 0; } .wrap > .top-bar:hover { background-color:white; } html.not-scroll-top-0 .top-bar { background-color:rgba(255,255,255,0.96); box-shadow:3px 0px 8px 1px #afafaf; } .wrap > .top-bar > .menu-box-1 > ul > li > a { color:#fff; font-size:20px; font-weight:500; } .wrap > .top-bar:hover > .menu-box-1 > ul > li > a , html.not-scroll-top-0 .wrap > .top-bar > .menu-box-1 > ul > li > a { color:#222222; } /* 사이드메뉴 */ .wrap > .top-bar > .gnb > .gnb-menu { right:1%; top:20px; } .wrap > .top-bar > .gnb > .gnb-menu > ul > li { padding-right:30px; } .wrap > .top-bar > .gnb > .gnb-menu > ul > li > a { color:#808080; font-weight:300; font-size:12px; position:relative; } .wrap > .top-bar > .gnb > .gnb-menu > ul > li:hover > a { text-decoration:underline; } .wrap > .top-bar:hover > .gnb > .gnb-menu > ul > li > a, html.not-scroll-top-0 .wrap > .top-bar > .gnb > .gnb-menu > ul > li > a { color:#222222; } .wrap > .top-bar > .gnb > .gnb-menu > ul > li:nth-child(1) > a::after, .wrap > .top-bar > .gnb > .gnb-menu > ul > li:nth-child(2) > a::after, .wrap > .top-bar > .gnb > .gnb-menu > ul > li:nth-child(3) > a::after { content:"·"; position:absolute; top:0; margin-left:10px; } .wrap > .top-bar > .gnb > .gnb-menu > ul > li:nth-child(4) > a::after { content:""; position:absolute; background-color:#dfdfdf; height:50%; width:1px; top:50%; /*transform:translateY(-50%);*/ left:42px; } .wrap > .top-bar:hover > .gnb > .gnb-menu > ul > li:nth-child(4) > a::after, html.not-scroll-top-0 .wrap > .top-bar > .gnb > .gnb-menu > ul > li:nth-child(4) > a::after { background-color:#222222; } html.not-scroll-top-0 .wrap > .top-bar > .gnb > .btns >.search-btn::after, .wrap > .top-bar:hover > .gnb > .btns > .search-btn::after { opacity:1; } .wrap > .top-bar > .gnb > .btns > .allmenu-btn { background-image:url(<https://www.komsco.com/images/site/kor/layout/allmenu_ico.png>); display:inline-block; width:31px; height:32px; position:relative; top:55px; right:40px; } .wrap > .top-bar > .gnb > .btns >.allmenu-btn::after { content:""; display:block; background-image:url(<https://www.komsco.com/images/site/kor/layout/allmenu_ico2.png>); position:absolute; width:31px; height:32px; opacity:0; transition:opacity .3s; } html.not-scroll-top-0 .wrap .top-bar > .gnb > .btns >.allmenu-btn::after, .wrap .top-bar:hover > .gnb > .btns >.allmenu-btn::after { opacity:1; } /* 상단 메뉴 끝 */ /* 상단 서브메뉴시작 */ .top-bar .menu-box-1 > ul > li > a { padding:0 20px; font-size:1.3rem; letter-spacing:-0.1rem; font-weight:bold; } .top-bar .menu-box-1 > ul > li:first-child > a { padding-left:200px; } .top-bar .menu-box-1 > ul > li:last-child > a { padding-right:200px; } @media ( max-width:1100px ) { .top-bar .menu-box-1 > ul > li:first-child > a { padding-left:50px; } .top-bar .menu-box-1 > ul > li:last-child > a { padding-right:50px; } } .top-bar .menu-box-1 > ul > li > a > span { padding:10px 0; } /* 인디케이터 */ .top-bar .menu-box-1 > .li-indicator-1-box > .li-indicator-1 { position:absolute; top:4px; left:-700px; width:100px; height:2px; background-color:#ff3333; transition:top 0.3s, left 0.3s, width 0.3s, height 0.3s; z-index:100000; } /* 컨텐트 박스, 서브메뉴 박스 */ .top-bar .content-box { height:0; overflow:hidden; transition:height .5s; z-index:10000; } .top-bar .content-box > ul > li > .row > .cell:first-child { width:350px; } .top-bar .content-box > ul > li > .row > .cell:last-child { width:calc(100% - 350px); padding:40px 30px; background-color:#fff; } .top-bar .content-box > ul > li > .row > .cell:last-child > nav > ul > li { width:130px; height:100px; padding-right:2%; margin-bottom:60px; white-space:nowrap; } .top-bar .content-box > .left-bg { width:350px; background-color:#EBEDEF; z-index:-1; } .top-bar .content-box > .left-bg > .img-1 { margin-left:100px; margin-bottom:-100px; } /* 컨텐트 박스 - 서브 메뉴 박스 */ .content-box > .left-bg > img { z-index:10; } .content-box > ul > li > div > div.side-content { text-align:right; padding-right:30px; } .content-box > ul > li > div > div.side-content > .title { display:block; font-size:29px; color:#222; line-height:34px; padding-bottom:20px; letter-spacing:-1px; font-weight:700; position:relative; margin-top:90px; } .content-box > ul > li > div > div.side-content > .title::after { content:""; position:absolute; background-color:#222; bottom:0; right:0; width:30px; height:1px; } .content-box > ul > li > div > div.side-content > .title > span { font-weight:400; } .content-box > ul > li > div > div.side-content > .content { color:#666; font-size:14px; margin-top:20px; } .content-box > ul > li > div > div.sub-menu { text-align:left; /* 임시코드, 작업 1*/ background-color:red; } .wrap .content-box .sub-menu > nav > ul > li > a { font-weight:500; padding-bottom:0px; display:block; color:black; } .wrap .content-box .sub-menu > nav > ul ul > li > a { font-size:14px; color:#222222; } .wrap .content-box .sub-menu > nav > ul ul > li:hover > a { text-decoration:underline; } /* page-1 */ .page-wrap { overflow:hidden; position:relative; left:0; top:0; width:100%; } .page-wrap .page { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; visibility:hidden; transition:opacity .5s, visibility .3s; } .page.active { opacity:1; visibility:visible; } .page-1 { background-image:url(<https://jihye730.github.io/pf-img/zope/img/indeximg/banner4.jpg>); background-repeat:no-repeat; background-size:cover; } .page-2 { background-image:url(<https://jihye730.github.io/pf-img/zope/img/indeximg/banner3.jpg>); background-repeat:no-repeat; background-size:cover; } .page-3 { background-image:url(<https://jihye730.github.io/pf-img/zope/img/indeximg/banner2.jpg>); background-repeat:no-repeat; background-size:cover; } .page-4 { background-image:url(<https://jihye730.github.io/pf-img/zope/img/indeximg/banner3.jpg>); background-repeat:no-repeat; background-size:cover; } /* 베너 텍스트 */ .banner-txt { color:#ffffff; position:absolute; top:26%; left:10%; margin-left:20px; } .page-wrap .banner-txt .banner1-title { font-size:55px; font-weight:800; line-height:75px; margin-top:15px; margin-bottom:20px; } .page-wrap .banner-txt a { border:solid rgba(255,255,255,0.5) 1px; padding:10px 20px; display:inline-block; transition:background .3s, color .3s; } .page-wrap .banner-txt a:hover { background:rgba(255,255,255,0.8); color:#444444; } .page-wrap .banner-txt .banner-top-txt { letter-spacing:2px; font-size:16px; } .page-wrap .banner-txt .banner-title .gold { display:inline-block; color:#fce524; font-weight:600; } .page-wrap .banner-txt .banner-content1 { font-size: 20px; line-height: 26px; font-weight:500; } .page-wrap .banner-txt .banner-content2 { font-size:16px; margin-top:20px; font-weight:300; } /* 페이지 버튼 */ .page-wrap > .page-btns { position:absolute; bottom:20%; left:20%; } .page-wrap > .page-btns > div { display:inline-block; background-color:#ffffff; width:40px; height:5px; margin-right:10px; /*opacity:80%;*/ cursor:pointer; /*transition:opacity .2s;*/ } .page-wrap > .page-btns > div.active { opacity:1; } /* banner - play btns 재생 버튼 */ .page-wrap .page-btns { user-select:none; } .page-wrap .play-btns { position:relative; top:-6px; left:7px; display:inline-block; } .page-wrap .play-btns::before { content:""; position:absolute; background-color:rgba(255,255,255,0.3); border-radius:50%; top:-6px; right:-13.6px; width:21px; height:21px; } . .play-btns > a > img { width:7px; height:10px; position:absolute; top:0; left:0; } .wrap .page-wrap[data-autoplay="Y"] .page-btns .stop { display:none; } .wrap .page-wrap[data-autoplay="N"] .page-btns .play { display:none; } /* banner - play btns 재생 버튼 끝 */ /* ★link banner 시작 */ .my_1{ font-size:15px; font-weight:bold; padding:3px 0px; margin-bottom: 1px; margin-top: 5px; } .my_text{ padding:3px 20px; margin-bottom: 5px; } .myButton { box-shadow:inset 0px 1px 0px 0px #ffffff; margin-top: 8px; margin-bottom: 8px; background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); background-color:#ffffff; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; cursor:pointer; color:#666666; font-size:12px; font-weight:bold; padding:3px 8px; text-decoration:none; text-shadow:0px 1px 0px #ffffff; } .myButton:hover { background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%); background-color:#f6f6f6; } .myButton:active { position:relative; top:1px; } .link-banner { float:center; padding:12px 30px; position:relative; border-radius:4px; /*border:1px solid #eee; */ /* margin-top: 30px ;*/ } /* link-banner 끝 */ /* 임시 */ .layout { padding:0 20px; } </style>
<!--뉴로캠퍼스 기본 css --> <div class="CodeBlock_block__3Yr6P css-1sk2dg5"> <style> .notion-page-content img { border-radius: 0px !important } .notion-topbar { display: none; } .css-1874hvy { display: none; } .ej0hkt123 { display: none; } .padding { display: none; } video {margin:0; padding:0;} .container { width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin: 0 auto; position: relative; }