• 교육 카테고리
    • Item 1.1
    • Item 1.2  
      • Item 1.2.1
      • Item 1.2.2  
        • 교육 카테고리
          • Item 1.1
          • Item 1.2  
            • Item 1.2.1
            • Item 1.2.2  
              • 교육 카테고리
                • Item 1.1
                • Item 1.2  
                  • Item 1.2.1
                  • Item 1.2.2   
                    <!--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 &nbsp;<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 &nbsp;<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 &nbsp;<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>">&nbsp&nbsp교육신청 방법&nbsp&nbsp</a>
								<div class="tooltip1">🔔 교육별 프로세스 및<br>신청 방법을 안내합니다. </div> </div>
								&nbsp<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;
 	}