<div class="main_page">         
    <div id="newversion">
        <button class="accordion">
            <h2 class="explosive-text">채용하기</h2>
        </button>
        <div class="panel">
            <dl>
                <dt>지원 이력서의 연락처로 연락 주시면 감사하겠습니다</dt>
                <dd></dd>
            </dl>
        </div>
	</div>
	
	<div id="intro">
		<h1 id="title2">
			<span id="title-line1" class="title-line">일하기 </span>
			<span id="title-line2" class="title-line">딱 좋은</span>
			<span id="title-line3" class="title-line">나이&nbsp&nbsp&nbsp</span>
		</h1>
	</div>
	 <!-- 1 -->
	 <div id="editor-wrap">
		<div class="illustration-editor-wrap">
			<div class="illustration-editor">
				<div class="code-blocks">
					<div class="code code-html">
						<header>
							<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9999 6.675L13.1999 6.075C12.9999 5.975 12.8999 5.775 12.9999 5.675L13.8999 3.975C14.4999 2.775 13.1999 1.475 11.9999 2.075L10.2999 2.975C10.1999 3.075 9.9999 2.975 9.8999 2.775L9.2999 0.975C8.8999 -0.325 7.0999 -0.325 6.6999 0.975L6.0999 2.775C5.9999 2.975 5.7999 3.075 5.6999 2.975L3.9999 2.075C2.7999 1.475 1.4999 2.775 2.0999 3.975L2.9999 5.675C3.0999 5.775 2.9999 5.975 2.7999 6.075L0.999902 6.675C-0.300098 7.075 -0.300098 8.975 0.999902 9.375L2.7999 9.975C2.9999 9.975 3.0999 10.175 2.9999 10.275L2.0999 11.975C1.4999 13.175 2.7999 14.475 3.9999 13.875L5.6999 12.975C5.8999 12.875 6.0999 12.975 6.0999 13.175L6.6999 14.975C7.0999 16.275 8.9999 16.275 9.3999 14.975L9.9999 13.175C10.0999 12.975 10.2999 12.875 10.3999 12.975L12.0999 13.875C13.2999 14.475 14.5999 13.175 13.9999 11.975L12.9999 10.275C12.8999 10.075 12.9999 9.875 13.1999 9.875L14.9999 9.275C16.2999 8.875 16.2999 7.075 14.9999 6.675ZM7.9999 10.375C6.6999 10.375 5.5999 9.275 5.5999 7.975C5.5999 6.675 6.6999 5.575 7.9999 5.575C9.2999 5.575 10.3999 6.675 10.3999 7.975C10.3999 9.275 9.2999 10.375 7.9999 10.375Z" fill="#4C4F5A"/></svg>
							<h1>HTML</h1>
							<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.7089 7.65105L14.8704 2.02908C15.1112 1.80937 15.2528 1.51212 15.2528 1.18902C15.2528 0.865913 15.1112 0.56866 14.8704 0.348951C14.6296 0.129241 14.3038 0 13.9497 0C13.5956 0 13.2698 0.129241 13.029 0.348951L7.75989 5.1567L2.49077 0.348951C2.24998 0.129241 1.9242 0 1.57009 0C1.21598 0 0.890202 0.129241 0.649409 0.336026C0.380287 0.568659 0.252808 0.878837 0.252808 1.18902C0.252808 1.48627 0.380286 1.78352 0.621079 2.02908C2.23581 3.51535 6.42844 7.3538 6.71173 7.6252L6.74006 7.65105C7.24998 8.11632 8.19898 8.11632 8.7089 7.65105Z" fill="#4C4F5A"/></svg>
						</header>
						<div class="code-content">
							<code>
								<span class="c-r">&lt;div</span><span class="c-y"> class</span><span class="c-w">=</span><span class="c-g">"rect"</span><span class="c-r">&gt;<span class="code-color-1">ODH</span>&lt;/div&gt;</span>
							</code>
						</div>
					</div>
					<div class="code code-css">
						<header>
							<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9999 6.675L13.1999 6.075C12.9999 5.975 12.8999 5.775 12.9999 5.675L13.8999 3.975C14.4999 2.775 13.1999 1.475 11.9999 2.075L10.2999 2.975C10.1999 3.075 9.9999 2.975 9.8999 2.775L9.2999 0.975C8.8999 -0.325 7.0999 -0.325 6.6999 0.975L6.0999 2.775C5.9999 2.975 5.7999 3.075 5.6999 2.975L3.9999 2.075C2.7999 1.475 1.4999 2.775 2.0999 3.975L2.9999 5.675C3.0999 5.775 2.9999 5.975 2.7999 6.075L0.999902 6.675C-0.300098 7.075 -0.300098 8.975 0.999902 9.375L2.7999 9.975C2.9999 9.975 3.0999 10.175 2.9999 10.275L2.0999 11.975C1.4999 13.175 2.7999 14.475 3.9999 13.875L5.6999 12.975C5.8999 12.875 6.0999 12.975 6.0999 13.175L6.6999 14.975C7.0999 16.275 8.9999 16.275 9.3999 14.975L9.9999 13.175C10.0999 12.975 10.2999 12.875 10.3999 12.975L12.0999 13.875C13.2999 14.475 14.5999 13.175 13.9999 11.975L12.9999 10.275C12.8999 10.075 12.9999 9.875 13.1999 9.875L14.9999 9.275C16.2999 8.875 16.2999 7.075 14.9999 6.675ZM7.9999 10.375C6.6999 10.375 5.5999 9.275 5.5999 7.975C5.5999 6.675 6.6999 5.575 7.9999 5.575C9.2999 5.575 10.3999 6.675 10.3999 7.975C10.3999 9.275 9.2999 10.375 7.9999 10.375Z" fill="#4C4F5A"/></svg>
							<h1>CSS</h1>
							<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.7089 7.65105L14.8704 2.02908C15.1112 1.80937 15.2528 1.51212 15.2528 1.18902C15.2528 0.865913 15.1112 0.56866 14.8704 0.348951C14.6296 0.129241 14.3038 0 13.9497 0C13.5956 0 13.2698 0.129241 13.029 0.348951L7.75989 5.1567L2.49077 0.348951C2.24998 0.129241 1.9242 0 1.57009 0C1.21598 0 0.890202 0.129241 0.649409 0.336026C0.380287 0.568659 0.252808 0.878837 0.252808 1.18902C0.252808 1.48627 0.380286 1.78352 0.621079 2.02908C2.23581 3.51535 6.42844 7.3538 6.71173 7.6252L6.74006 7.65105C7.24998 8.11632 8.19898 8.11632 8.7089 7.65105Z" fill="#4C4F5A"/></svg>
						</header>
						<div class="code-content">
							<code>
								<p class="line-1"><span class="c-y">.rect</span> <span>{</span></p><br/><p class="line-2"><span class="c-p">background</span><span>:</span> <span class="c-y">linear-gradient</span>( </p><br/><p class="line-3"><span class="c-o">-119deg</span>,</p><br/><p class="line-4"><span class="c-y">$gray</span> <span class="c-o">0%</span>,</p><br/><p class="line-5"><span class="c-y">$dark-gray</span> <span class="c-o">100%</span>);}</p>
							</code>
						</div>
					</div>
					<div class="code code-js">
						<header>
							<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9999 6.675L13.1999 6.075C12.9999 5.975 12.8999 5.775 12.9999 5.675L13.8999 3.975C14.4999 2.775 13.1999 1.475 11.9999 2.075L10.2999 2.975C10.1999 3.075 9.9999 2.975 9.8999 2.775L9.2999 0.975C8.8999 -0.325 7.0999 -0.325 6.6999 0.975L6.0999 2.775C5.9999 2.975 5.7999 3.075 5.6999 2.975L3.9999 2.075C2.7999 1.475 1.4999 2.775 2.0999 3.975L2.9999 5.675C3.0999 5.775 2.9999 5.975 2.7999 6.075L0.999902 6.675C-0.300098 7.075 -0.300098 8.975 0.999902 9.375L2.7999 9.975C2.9999 9.975 3.0999 10.175 2.9999 10.275L2.0999 11.975C1.4999 13.175 2.7999 14.475 3.9999 13.875L5.6999 12.975C5.8999 12.875 6.0999 12.975 6.0999 13.175L6.6999 14.975C7.0999 16.275 8.9999 16.275 9.3999 14.975L9.9999 13.175C10.0999 12.975 10.2999 12.875 10.3999 12.975L12.0999 13.875C13.2999 14.475 14.5999 13.175 13.9999 11.975L12.9999 10.275C12.8999 10.075 12.9999 9.875 13.1999 9.875L14.9999 9.275C16.2999 8.875 16.2999 7.075 14.9999 6.675ZM7.9999 10.375C6.6999 10.375 5.5999 9.275 5.5999 7.975C5.5999 6.675 6.6999 5.575 7.9999 5.575C9.2999 5.575 10.3999 6.675 10.3999 7.975C10.3999 9.275 9.2999 10.375 7.9999 10.375Z" fill="#4C4F5A"/></svg>
							<h1>JS</h1>
							<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.7089 7.65105L14.8704 2.02908C15.1112 1.80937 15.2528 1.51212 15.2528 1.18902C15.2528 0.865913 15.1112 0.56866 14.8704 0.348951C14.6296 0.129241 14.3038 0 13.9497 0C13.5956 0 13.2698 0.129241 13.029 0.348951L7.75989 5.1567L2.49077 0.348951C2.24998 0.129241 1.9242 0 1.57009 0C1.21598 0 0.890202 0.129241 0.649409 0.336026C0.380287 0.568659 0.252808 0.878837 0.252808 1.18902C0.252808 1.48627 0.380286 1.78352 0.621079 2.02908C2.23581 3.51535 6.42844 7.3538 6.71173 7.6252L6.74006 7.65105C7.24998 8.11632 8.19898 8.11632 8.7089 7.65105Z" fill="#4C4F5A"/></svg>
						</header>
						<div class="code-content">
							<code>
								<span class="c-y">var</span> <span class="c-b">colors</span> = [<span class="c-g">“#74B087”</span>, <span class="c-g">“#DE7300”</span>, <span class="c-g">“#74B087”</span>];<br/><br/>
								<span class="c-c">// 수정</span><br/>
								<span class="c-y">function</span> <span class="c-b">animate</span>() {}
							</code>
						</div>
					</div>
					<div class="editor-block"></div>
				</div>
			</div>
			<div id="title-info">
				<p class="credit"></p>
				<p class="credit masked-text">신입의 마음가짐으로<br> <b>새롭게</b> 시작하겠습니다</p>
				<!-- effect -->
				<div class="effect-wrap">
					<div class="effect-top">
						<div class="words word-1">
							<span>신</span>
							<span>입</span>
							<span>의</span>
							<span>마</span>
							<span>음</span>
							<span>가</span>
							<span>짐</span>
						</div>
						<div class="words word-2">
							<span>으</span>
							<span>로</span>
						</div>
					</div>
					<div class="effect-bottom">
						<div class="words word-3">
							<span>새</span>
							<span>롭</span>
							<span>게</span>
							<span>시</span>
							<span>작</span>
							<span>합</span>
							<span>니</span>
							<span>다</span>
						</div>
					</div>
				</div>
				<!--//effect -->
			</div>
		</div>
	</div>
	<!-- //1 -->
    
	<div id="download" style="display:none">
		<p id="fly-up"><em>포트폴리오는 역량의 10%만이 노출되어 있습니다</em><br /><a href=""></a></p>
		<!-- <p><span class="accent">&#9733;</span><span class="accent">&#9733;</span><br />
			<a class="download" href=""></a>
		</p> -->
	</div>
	<div id="showcase">
		<h1>다양한 경험</h1>
		<p id="fly-up">포트폴리오는 겨우 역량의 10%만이 노출되었습니다.</p>
		<div class="gallery clearfix">
			<figure>
				<figcaption>웹디자인</figcaption>
                <small>모든 툴</small>
			</figure>
            <figure>
				<figcaption>퍼블리싱</figcaption>
                <small>다양한 웹 환경</small>
			</figure>
            <figure>
				<figcaption>쇼핑몰</figcaption>
                <small>관련업무</small>
			</figure>
			<!-- <figure>
				<a href="http://lifeisvertical.alpina-since1883.com">
					<img src="gallery/alpina.jpg" alt="Alpina - Life Is Vertical">
				</a>
				<figcaption>Alpina - Life Is Vertical<br />
					<small><a href="http://www.cssdesignawards.com/css-web-design-award-winner.php?id=20048">CSS Design Award Winner</a></small>
				</figcaption>
			</figure> -->
			<figure>
				<figcaption>App</figcaption>
                <small>다양한 개발자와의 협업 경험</small>
			</figure>
            <figure>
				<figcaption>힘쓰는 일</figcaption>
                <small>땀 흘리는것을 즐기는 편</small>
			</figure>
            <figure>
				<figcaption>소통</figcaption>
                <small>업무관련 소통 활발</small>
			</figure>
            <figure>
				<figcaption>다양한 협업툴</figcaption>
                <small>협업 관련 협업툴 적극 사용</small>
			</figure>
            <figure>
				<figcaption>새로운 영역</figcaption>
                <small>배움에 있어서 거부감 없음</small>
			</figure>
		</div>
	</div>
    <div id="examples-parallax">
			<h2 id="parallax-it">변화를 두려워하지 않는 성향</h2>
			<h2 id="parallax-it-left">겸손</h2>
			<h2 id="parallax-it-right">열정</h2>
	</div>
    <div class="hire_wrap">
        <div id="hire">
            <h3>축적된 노하우 </h3>
            <!-- <p>저와 함께하신다면 후회없는 선택이 될 것입니다</p> -->
        </div>
        <div id="hire">
            <h3>다양한 스킬</h3>
            <p><a href="#" class="banner"></a></p>
        </div>
    </div>
	<div id="content-wrapper">
		<div id="examples-1">
            <div class="ex1">
			    <h2 id="fade-it">안정감 + 신뢰감</h2>
                <p>믿고 맡길수 있는 편안함</p>
            </div>
            <div class="ex2">
			    <h2 id="fly-it" class="ex1"><span class="neon-text">묵직함</span><br><p>흔들림 없는 든든함</p></h2>
            </div>
            <div class="ex1">
			    <h2 id="spin-it" class="wave-text">
					<span>즐</span><span>기</span><span>는</span> <span>자</span>
				</h2>
                <p>업무가 곧 취미</p>
            </div>
			<!-- <div class="ex3">
				<h2 id="bring-it">OdongHyun</h2>
			</div> -->
            <div class="ex1">
			    <h2 id="scale-it">압도적 평판 <p id="bring-it">&#9733;&#9733;&#9733;&#9733;&#9733;</p></h2>
                <!-- <p id="bring-it">⭐⭐⭐⭐⭐</p> -->
            </div>
            <div id="scale-it2" class="scale-it">
			    <h2>극 효율주의</h2>
                <!-- <p>약속을 중요시 합니다.</p> -->
				<div class="box">
					<div class="inner">
						<span>능동적이고 효율적으로</span>
					</div>
					<div class="inner">
						<span>능동적이고 효율적으로</span>
					</div>
				</div>
            </div>
			<div class="ex1 possible">
			    <h2 id="">
					<span>I</span>M<span>POSSIBLE</span>
				</h2>
				<div class="roller">
					<h2 id="rolltext">
						<div>IMPOSSIBLE</div>
						<div>I'<span>M</span> POSSIBLE</div>
					</h2>
					<!-- <span id="spare-time">too much spare time?</span><br/> -->
				</div>
            </div>
			<div class="ex1 drop-container">
				<h2>Whatever</h2>
				<div class="drop-wrap">
					<span>:</span>
					<div class="dropping-texts">
						<div>디자인</div>
						<div>퍼블리싱</div>
						<div>FrontEnd</div>
						<div>EVERYONE!</div>
					</div>
				</div>
				<div class="text-container">
					<div>무서운 집중력과 끝을 보는 성격</div>
					<div>근면 성실 끈기 노력 책임감</div>
					<div>무엇이든 최선을 다하는 열정</div>
					<div>모르는것을 부끄러워 하지 않는 철면피</div>
					<div>후회없는 선택</div>
				</div>
			</div>
            <div class="ex1">
			    <h2 id="smush-it">지금 채용 해보세요</h2>
                <!-- <p>약속을 중요시 합니다.</p> -->
				 
            </div>
			<!-- <div class="ex3">
				<h2>OdongHyun</h2>
			</div> -->
			<div class="ex3 mo-sec">
				<button class="accordion">
					<div class="explosive-text">채용하기</div>
				</button>
				<div class="panel">
					<dl>
						<dt>지원 이력서의 연락처로 연락 주시면 감사하겠습니다</dt>
						<dd></dd>
					</dl>
				</div>
			</div>
		</div>
		
		<!-- <div id="examples-pin">
			<div id="pin-frame-pin" class="pin-frame"><h2>Pin It</h2></div>
			<div id="pin-frame-slide" class="pin-frame"><h2>Slide It</h2></div>
			<div id="pin-frame-wipe" class="pin-frame"><h2>Wipe It</h2></div>
			<div id="pin-frame-bounce" class="pin-frame"><h2>Bounce It</h2></div>
			<div id="pin-frame-color" class="pin-frame"><h2>Color It</h2></div>
			<div id="pin-frame-unpin" class="pin-frame"><h2>Unpin It</h2></div>
		</div> -->
		
		<!-- <div id="examples-2">
			<h2 id="fling-it">Fling It</h2>
			<h2 id="move-it">Move It</h2>
		</div> -->
    </div>
</div>