뉴로캠퍼스-모바일

<style>
    .notion-topbar {
				display: none;
		}

    .css-1874hvy {
				display: none;
		}
		
		.css-1m3r9r {
				display: none;
		}

		.ej0hkt14{
				display: none;
		}

		.ej0hkt123 {
				display: none;
		}

		.padding {
				display: none;
		}

		.container {
			width: 100vw !important;
			margin-left: calc(-50vw + 50%) !important;
			margin: 0 auto;
			position: relative;
		}

/* 노말라이즈 */
body, ul, li {
    padding:0;
    margin:0;
    list-style:none;
}
a {
    text-decoration:none;
    color:inherit;
}
/* 노말라이즈 끝 */

/* 라이브러리 */
/* 상단바 */
.mobile-top-bar {
    background-color:black;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
}
.mobile-top-bar > .logo {
		padding-top: 0px;
    text-align:center;
    color:white;
    font-weight:bold;
    font-size:1.8rem;
    z-index:1000;
}

/* 토글 사이드바 버튼 아이콘 */
.ico {
    position:absolute;
    top:50%;
    left:10px;
    width:15px;
    height:15px;
    transform:translatey(-50%);
    cursor:pointer;

}
.ico > div {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:20%;
    background-color:white;
}
.ico > div:nth-child(2) {
    top:40%;
    transition:visibility 0s .15s;
}
.ico.active > div:nth-child(2) {
    visibility:hidden;
    transition:visibility 0s;
}
.ico > div:nth-child(3) {
    top:80%;
}
.ico > div:nth-child(1), .ico > div:nth-child(3) {
    transition:top .15s .15s, transform .15s;
}
.ico.active > div:nth-child(1), .ico.active > div:nth-child(3) {
    top:40%;
    transform:rotate(45deg);
    transition:top .15s, transform .15s .15s;
}
.ico.active > div:nth-child(3) {
    transform:rotate(-45deg);
}

/* 아이콘 색 변화 */
.ico[data-ico-now-animating="Y"] > div {
    background-color:#e8e8e8;
}
/* 라이브러리 끝 */

/* 커스텀 */
/* 좌측 사이드 바 */
/* 좌측 사이드바 배경 */
.left-side-bar-box {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0);
    visibility:hidden;
    transition:visibility .5s, background-color .5s;
    z-index:900;
}
.left-side-bar-box.active {
    background-color:rgba(0,0,0,0.5);
    visibility:visible;
}

/* 좌측 사이드바 */
.left-side-bar {
    position:fixed;
    top:10px;
    left:-250px;
    width:150px;
    height:30%;
    background-color:#efefef;
    padding-top:40px;
    transition:left .5s;
}
.left-side-bar-box.active > .left-side-bar {
    left:0;
}
.left-side-bar > .menu-1 ul > li > a {
    display:block;
    padding:5px;
}
.left-side-bar > .menu-1 ul > li:hover > a {
      /*color:red;*/
		font-weight:bold;
}
/* 혼자가 아닌 a 에 +를 붙혀준다 */
.left-side-bar > .menu-1 ul > li > a:not(:only-child)::after {
    content:"+";
    float:right;
}
/* 엑티브가 있는 메뉴(펼쳐진 메뉴)에 a에 - 를 붙혀준다 */
.left-side-bar > .menu-1 ul > li.active > a:not(:only-child)::after {
    content:"-";
}
.left-side-bar > .menu-1 > ul ul {
    display:none;
    background-color:#cfcfcf;
}
.left-side-bar > .menu-1 > ul ul ul {
    background-color:#dfdfdf;
}
.left-side-bar > .menu-1 ul > li.active > ul {
    display:block;
}

</style>

<script>
/* 토글 사이드 바 버튼 관련 */
$('.toggle-side-bar-btn').click(function(){
    //console.log("토글 사이드바 버튼클릭");
    
    var $clicked = $(this);
    var nowAnimating = $clicked.attr('data-ico-now-animating');
    
    /* 만약 토글 사이드바 버튼의 요소가 Y가 되면 */
    if ( nowAnimating == "Y" ){
        return;
        /* 함수를 리턴하여 다시 안눌리게 한다 */
    }
    
    /* 만약 클릭된 버튼에 active 클래스가 있다면 */
    if ( $clicked.hasClass('active') ){
        /* 사이드바를 없앤다 */
        hideLeftSideBar();
    }
    else {
        /* active 클래스가 없으면 나타나게 한다 */
        showLeftSideBar();
    }
    
    /* 아이콘의 색을 빨간색으로 만듬 */
    $clicked.attr('data-ico-now-animating', 'Y');
    
    /* 아이콘에 active 클래스가 없으면 active 클래스를 넣어주고 있으면 빼줌 */
    $clicked.toggleClass('active');
    
    /* 버튼 아이콘의 색이 변한 후에 0.4초 뒤에 다시 원래색으로 돌아오게 만듬 */
    setTimeout(function(){
        $clicked.attr('data-ico-now-animating', 'N');
    }, 400);
});

/* 왼쪽 사이드바 함수 */
function showLeftSideBar(){
    /* 메뉴바가 나올때 안에 펼쳐져 있는 메뉴들을 다 접기위해 엑티브를 없앤다 */
    $('.left-side-bar > .menu-1 ul > li.active').removeClass('active');
    $('.left-side-bar-box').addClass('active');
};
function hideLeftSideBar(){
    $('.left-side-bar-box').removeClass('active');
};

/* 메뉴 접히고 펼치기 */
$('.left-side-bar > .menu-1 ul > li').click(function(e){
    //console.log("메뉴 클릭됨");
    
    /* 만약 클릭된 메뉴에 엑티브 클래스가 있으면 */
    if ( $(this).hasClass('active') ){
        /* 클릭된 메뉴의 엑티브를 없앤다 */
        $(this).removeClass('active');
    }
    else {
        /* 클릭된 메뉴의 형제의 엑티브를 없앤다 */
        $(this).siblings('.active').removeClass('active');
        
        /* 클릭된 메뉴(지역)의 엑티브를 없앤다 */
        $(this).find('.active').removeClass('active');
        
        /* 클릭된 메뉴의 엑티브를 만든다 */
        $(this).addClass('active');
    }
    
    /* 클릭된 메뉴 안에 다른 메뉴를 클릭하면 위에있는 메뉴가 같이 클릭되는데 그것을 막아준다 */
    e.stopPropagation();
});

/* 좌측 사이드바 배경을 클릭했을때 */
$('.left-side-bar-box').click(function(){
    //console.log('배경클릭');
    
    /* 토글 사이드바 버튼을 클릭한 효과를 만듬 */
    $('.toggle-side-bar-btn').click();
});

/* 사이드바를 클릭할때 상위요소인 배경이 같이 클릭되어서 사이드바가 들어가버리기 때문에 그것을 막음 */
$('.left-side-bar').click(function(e){
    e.stopPropagation();
});

</script>

<!-- 제이쿼리 불러오기 -->
<script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js>"></script>

<!-- 상단 바 및 메뉴버튼 아이콘 -->
<div class="mobile-top-bar">
    <div class="ico toggle-side-bar-btn" data-ico-now-animating="N">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="logo"><img width="33%" src="<https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc0cc96d3-b7dd-4d8f-adb4-5399a90ffea3%2F%25EC%25A0%259C%25EB%25AA%25A9%25EC%259D%2584_%25EC%259E%2585%25EB%25A0%25A5%25ED%2595%2598%25EC%2584%25B8%25EC%259A%2594_-_2023-03-16T135349.157.png&blockId=6cefe96f-b58f-4f9e-b2e9-d60dc673ea76>" alt="" ></div>
</div>

<!-- 좌측 사이드 바 메뉴 -->
<div class="left-side-bar-box">
    <div class="left-side-bar">
        <div class="menu-1">
            <ul>
								<li>
                    <a href="<https://career.neurophet.com/ccategory>">교육 카테고리</a>
                </li>
                <li>
                    <a href="<https://career.neurophet.com/cn>">신규입사자 교육</a>
                </li>
                <li>
                    <a href="<https://career.neurophet.com/mchow>">교육 신청방법</a>
                </li>

                <li>
                    <a href="<https://career.neurophet.com/mcabout>">교육 체계</a>
                </li>

            </ul>
        </div>
    </div>
</div>

<style>
		.container {
      padding-top: 6vw;

			width: 100vw !important;
			margin-left: calc(-50vw + 50%) !important;
			margin: 0 auto;
			position: relative;
		}
		.banner-txt {
	    color:#ffffff;
			font-size:1.1rem;
	    position:absolute;
	    top:35%;
	    left:10%;
	    margin-left:0px;
			font-weight:bold;
		}
</style>
<div class="container">
	<div class="text" style="z-index:1;position:absolute;top:35%;transform:translate(0, -50%);color:white;text-align:center;width:100%">
	</div>
				<a href="" target="_blank"><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="" >
				<div class="banner-txt con">
					 <div class="banner1-title">뉴로피언의 성장, <B>뉴로캠퍼스와 함께해요.</B> </div>
					  <div class="button-4">
					    <div class="eff-4"></div>
					    <a href="<https://www.neurophet.com>"> <img class="brand w-50" src="<https://neurophethr.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc32779e2-b186-4664-8b51-3fb335101539%2Ficon_(13).png?table=block&id=90873437-95c5-4e5d-8389-0d4fd702e814&spaceId=9453ab34-9a3e-45a8-a6b2-ec7f1cefbd7f&width=600&userId=&cache=v2>" alt="homepage"></a>
					  </div>
					  <div class="button-4">
					    <div class="eff-4"></div>
					    <a href="<https://career.neurophet.com/mworks>">  <img class="brand w-50" src="<https://neurophethr.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9453ab34-9a3e-45a8-a6b2-ec7f1cefbd7f%2Fcab7e24c-76c7-4e9b-94f7-982d1566f68a%2Ficon_(15).png?table=block&id=f81711b3-f579-40a9-b417-52fd6033cbea&spaceId=9453ab34-9a3e-45a8-a6b2-ec7f1cefbd7f&width=600&userId=&cache=v2>" alt="뉴로웍스"></a>
					  </div>
				</div>
	</div>
<style>
<style>
.brand {
    width: 100%;
    max-width: 7.5rem;
}
.w-50 {
    width: 60% !important;
}
.button-4{
  width:26px;
  height:26px;
	background : #fff;
	border-radius: 0.3125rem;
  float:left;
  text-align:center;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  margin:20px 5px 10px 2px;
}
.button-4 a{
  font-family:arial;
  font-size:10px;
  color:#fff;
  text-decoration:none;
  line-height:26px;
  transition:all .5s ease;
  z-index:2;
  position:relative;
}
.eff-4{
  width:26px;
  height:26px;
  left:-140px;
  background:#fff;
  position:absolute;
  transition:all .5s ease;
  z-index:1;
}
.button-4:hover .eff-4{
  left:0;
}
.button-4:hover a{
  color:black;
}

</style>

직무교육 카테고리

교육카테고리

포럼 & 세미나 강연 공유 new

뉴로핏 교육 파트너사인 KMA의 강연/강의 동영상입니다. 다양한 분야, 뛰어난 인재들의 열정과 노하우를 만나보실 수 있습니다.

클릭하시면 다양한 콘텐츠를 시청하실 수 있습니다. (로그인 ID : 회사이메일주소 / PW : 1234)

무료 이러닝 교육

마인드셋 명사 특강

소통/리더십/건강/웃음/인문학/동기부여 등 다양한 주제의 온라인 명사 특강입니다. 업무에 지칠 때 보시면서 마인드셋 하세요.

<a href="<https://career.neurophet.com/cs>" target="_blank" class="myButton">더보기 ></a>

타운홀 미팅

2023하반기(3분기)타운홀미팅.mp4

무료 이러닝 교육

뉴로피언의 품격

회사의 기본이 되는 비즈니스 매너와 에티켓으로 뉴로피언의 품격을 높여보세요.

<a href="<https://career.neurophet.com/cm>" class="myButton">더보기 ></a>

무료 이러닝 교육

직무교육 카테고리

포럼 & 세미나 강연 공유 new

마인드셋 명사 특강

타운홀 미팅

뉴로피언의 품격

신규입사자 입문 교육