/*********** For PC ***********/

@media (min-width: 770px) {

/* ==================================================
   PC Navigation
================================================== */
nav#menu {
	width:100%;
	float:left;
}

nav#menu #menu-nav {
	margin-left:100px;
	padding: 0;	
}

nav#menu #menu-nav li {
	display: block;  
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
	float: left;
	height: 30px;
	background-image:url(../img/navigation.png);
	background-repeat:no-repeat;
}

nav#menu #menu-nav li:first-child {
	margin-left: 0;	
}

nav#menu #menu-nav li a {
	display:block;
	height:30px;
	text-indent:-9999px;
	outline:none;
}

nav#menu #menu-nav li.current a,
nav#menu #menu-nav li a:hover {
	color: #DE5E60;
}

#nav_btn1 {
	background-position:-1px 0px;
	margin-left:20px;
	width: 60px;
}

#nav_btn2 {
	background-position:-80px 0px;
	width: 130px;
}

#nav_btn3 {
	background-position:-225px 0px;
	width: 80px;
}

#nav_btn4 {
	background-position:-317px 0px;
	width: 80px;
}

#nav_btn5 {
	background-position:-415px 0px;
	width: 70px;
}

#nav_btn6 {
	background-position:-500px 0px;
	width: 60px;
}

#nav_btn7 {
	background-position:-560px 0px;
	width: 130px;
}

.external {
	/*background-image:url(../img/nav_btn6.png);
	background-repeat:no-repeat;*/
}

#nav_btn1:hover { background-position:-1px -34px; }
#nav_btn2:hover { background-position:-80px -34px; }
#nav_btn3:hover { background-position:-225px -34px; }
#nav_btn4:hover { background-position:-317px -34px; }
#nav_btn5:hover { background-position:-415px -34px; }
#nav_btn6:hover { background-position:-500px -34px; }
#nav_btn7:hover { background-position:-560px -34px; }

.external:hover {
	/*background-image:url(../img/nav_btn_on6.png);
	background-repeat:no-repeat;*/
}

/* ==================================================
   Main Rayout
================================================== */

header .sticky-nav { height: 100px; }


/* ==================================================
   Section Page
================================================== */

.container { margin-left:130px; }

#sect_prof_l {
	width:100px;
	text-align: justify;
	text-justify: distribute-all-lines;
	margin-right:30px;
}

.history_l {
	width:70px;
	float:left;
}

.history_r {
	float:left;
}


/* ==================================================
   Project Section
================================================== */

.block { display:block; }

.block img {
	width:30%;
	margin-right:1%;
	margin-bottom:10px;
}

.block_mobi { display:none; }

#recruit_l {
	width:150px;
}

}

/*********** iPad Rayout ***********/
@media (max-width: 769px) {

/* ==================================================
   Main Rayout
================================================== */

header .sticky-nav { height: 100px; }

header #logo {
	float: left;
	padding: 20px 0;
	margin-left: 20px;
}

#menu {	display: none; }
	
#mobile-nav {
	display: block;
	float: right;
}
	
#menu-nav-mobile {margin: 0;}
	
header .sticky-nav #mobile-nav,
header .sticky-nav.stuck #mobile-nav {	margin-right: 20px; }
	
.prof_area {
	margin-left:auto;
	margin-right:auto;
}

/* ==================================================
   Section Page
================================================== */

.container { margin-left:30px; }

.title-page { margin-left: 30px; }

#sect_prof_l {
	width:100px;
	text-align: justify;
	text-justify: distribute-all-lines;
	margin-right:30px;
}

.block { display:none; }

.block_mobi { display:block; }

.block_mobi img {
	width:29%;
	margin-right:1%;
	margin-bottom:10px;
}

.history_l {
	width:70px;
	float:left;
}

.history_r {
	float:left;
}

#recruit_l {
	width:100%;
	float:left;
}

#recruit_r {
	width:97%;
	margin-left:3%;
	float:left;
}

}

@media (min-width: 481px) and (max-width: 767px) {

.block { display:none; }

#back-to-top { display: none !important; }
	
#home-slider {
	margin-left: -20px;
	margin-right: -20px;
}

header .sticky-nav { position: relative; }

header .sticky-nav,
#navigation-mobile,
.page,
.page-alternate,
#twitter-feed,
footer {
	margin-left: -20px;
	margin-right: -20px;
	padding-left: 20px;
	padding-right: 20px;	
}

header .sticky-nav #logo { margin-left: 0; }
	
header .sticky-nav.stuck #logo { margin-left: 20px; }
	
header .sticky-nav #menu { margin-right: 0;	}
	
header .sticky-nav.stuck #menu { margin-right: 20px; }
	
#menu { display: none; }
	
#mobile-nav {
	display: block;
	float: right;
}

#menu-nav-mobile {
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: 0;
}

header .sticky-nav.stuck #mobile-nav { margin-right: 20px; }

.work-nav {	margin-bottom: 30px; }

.type-work {
	background: url(../img/filter-icon.png) no-repeat;
	width: 16px;
	height: 16px;
	display: inline-block;
	text-indent: -9999px;
	margin-bottom: 0;
	position: relative;
	line-height: 10px;
}

.work-nav #filters,
.work-nav #filters li {
	display: inline-block;
}

.work-nav #filters li {	margin:0 10px 0 0; }

.work-nav #filters li a {
	font-size: 13px;
	text-transform: uppercase;	
}

#about .profile { margin-bottom: 30px; }

#about .profile:last-child { margin-bottom: 0; }
	
#response {	margin-bottom: 30px; }


/* ==================================================
   Section Page
================================================== */

#sect_prof_l { width:100%; }

#sect_prof_r { margin-left:40px; }

.history_l {
	width:100%;
	float:left;
}

.history_r {
	float:left;
	margin-left:20px;
}

.block { display:none; }

.block_mobi { display:block; }

.block_mobi img {
	width:45%;
	margin-right:1%;
	margin-bottom:10px;
}

#recruit_l {
	width:100%;
	float:left;
}

#recruit_r {
	width:85%;
	margin-left:10%;
	float:left;
}

}

@media (max-width: 480px) {
#back-to-top { display: none !important; }
	
#home-slider {
	margin-left: -20px;
	margin-right: -20px;
}

#home-slider ul#slide-list { display: none;	}

header .sticky-nav { position: relative; }

header .sticky-nav,
#navigation-mobile,
.page,
.page-alternate,
#twitter-feed,
footer {
	margin-left: -20px;
	margin-right: -20px;
	padding-left: 20px;
	padding-right: 20px;	
}

header .sticky-nav #logo { margin-left: 0; }

header .sticky-nav.stuck #logo { margin-left: 20px;	}

header .sticky-nav #menu { margin-right: 0; }

header .sticky-nav.stuck #menu { margin-right: 20px; }

#menu { display: none; }

#mobile-nav {
   	display: block;
	float: right;
}

#menu-nav-mobile {
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: 0;
}

#navigation-mobile li a {
	font-size: 14px;
	padding: 12px 0;
}

header .sticky-nav.stuck #mobile-nav { margin-right: 20px; }

.work-nav {	margin-bottom: 30px; }

.type-work {
	background: url(../img/filter-icon.png) no-repeat;
	width: 16px;
	height: 16px;
	display: inline-block;
	text-indent: -9999px;
	margin-bottom: 0;
	position: relative;
	line-height: 10px;
}

.work-nav #filters li:first-child { margin-left: 0;	}

.work-nav #filters,
.work-nav #filters li {	display: inline-block; }

.work-nav #filters li {	margin:0 10px 0 0; }

.work-nav #filters li a {
	font-size: 13px;
	text-transform: uppercase;	
}

#about .profile { margin-bottom: 30px; }

#about .profile:last-child { margin-bottom: 0; }

#response {	margin-bottom: 30px; }




/* ==================================================
   Section Page
================================================== */

#sect_prof_l { width:100%; }

#sect_prof_r { margin-left:40px; }

.history_l {
	width:100%;
	float:left;
}

.history_r {
	float:left;
	margin-left:20px;
}

.block { display:none; }

.block_mobi { display:block; }

.block_mobi img {
	width:45%;
	margin-right:1%;
	margin-bottom:10px;
}

}

@media (max-width: 320px) {
#navigation-mobile li a { padding: 20px 0; }

.work-nav #filters li a { font-size: 12px; }

#sect_prof_l { width:100%; }

#sect_prof_r { margin-left:40px; }

.history_l {
	width:100%;
	float:left;
}

.history_r {
	float:left;
	margin-left:20px;
}

.block { display:none; }

.block_mobi { display:block; }

.block_mobi img {
	width:90%;
	margin-right:1%;
	margin-bottom:10px;
}

}


/* Retina Display */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
 	only screen and (-moz-min-device-pixel-ratio: 2),
  	only screen and (-o-min-device-pixel-ratio: 2/1),
  	only screen and (min-device-pixel-ratio: 2),
  	only screen and (min-resolution: 2dppx) {
		
		header #logo a {
			background-image: url(../img/logo_@2x.png);
			background-size: 231px 50px;
		}
		
		.menu-nav {
			background-image: url(../img/menu-mobile_@2x.png);
			background-size: 16px 32px;
		}
		
		.type-work {
			background-image: url(../img/filter-icon_@2x.png);
			background-size: 16px 16px;
		}
		
		.container { margin-left:0px; }
	}