@media screen and (min-width: 1101px) {
	
	/*---------------------------------------
	 * Header
	---------------------------------------*/ 
	
	header{
		width: 100%;
		height: 80px;
		background: #FFFFFF;
	
		position: fixed;
		top:0;
		left:0;
		box-sizing: border-box;
		z-index: 500;
		
	}
	header .logo{
		width: 148px;
		margin: 20px 0 0 48px;
	}
	header nav{
		position: absolute;
		top:0;
		right:0 !important;
		left: unset !important;
		font-weight: 200;
		font-size: 1.1rem;
		letter-spacing: 1px;
	}
	header ul,
	header ol{
		display: inline-block;
	}
	header ol li{
		display: inline-block;
		margin-left:2vw;
	}
	header ol li.first{
		
	}
	header ol li.last{
		
		height: 80px;
	}
	header ol li.last a{
		color: #FFFFFF;
		display: block;
		width: 100%;
		height: 100%;
		background: #1C9888;
		line-height: 80px;
		padding: 0 2vw;
		transition: all .3s;
	}
	header ol li.last a:hover{
		color: #1C9888;
		background: #FFFFFF
	}
	header ul li{
		display: inline-block;
		margin-left:2vw;
	}
	.menu-btn{
		display: none;
	}
	
}
@media screen and (min-width: 769px) and (max-width: 1100px) {
	
	/*---------------------------------------
	 * Header
	---------------------------------------*/ 
	
	header{
		width: 100%;
		height: 80px;
		background: #FFFFFF;
	
		position: fixed;
		top:0;
		left:0;
		box-sizing: border-box;
		z-index: 500; 
		
	}
	header .logo{
		width: 148px;
		margin: 20px auto 0 ;
		position: relative;
		z-index: 200;
		background: url(../img/logo_wh.png) 50% no-repeat;
		background-size: 100%;
	}
	header .menu-content{
		position: fixed;
		top:0;
		left:-100%;
		width: 100%;
		height: 100vh;
		background: #1C9888;
		color: #FFFFFF;
		letter-spacing: 2px;
		font-weight: 200;
		text-align: center;
		padding: 120px 0 0;
		z-index: 100;
	}
	header nav ul li{
		margin: 0 0 20px;
	}
	header nav ol li a{
		display: block;
		background: url(../img/arrow.svg) center right 10px no-repeat #FFFFFF;
		background-size: 12px;
		color:#1C9888;
		width: 240px;
		margin: 0 auto 20px;
		padding: 20px 0;
	}
	
	/* MenuBtn
	---------------------------------------*/ 
	
	.menu-btn{
		width: 40px;
		height: 16px;
		position: absolute;
		top:0px;
		left:0;
		cursor: pointer;
		z-index: 2000;
		padding: 32px 20px;
		background: transparent;
		/*transition: background-color linear .2s;*/
	}
	.menu-btn p{
		font-size: 1rem;
		line-height: 1;
		letter-spacing: 1px;
		display: inline-block;
		margin-left: 23px;
		margin-top: -1px;
		color: #1C9888;
		font-weight: 500;
		vertical-align: top;
	}
	.menu-trigger,
	.menu-trigger span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	}
	.menu-trigger {
	  position: relative;
	  width: 16px;
	  height: 16px;
	}
	.menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background-color: #1C9888;
	}
	.on .menu-trigger span{
	  background-color: #FFFFFF;	
	}
	.on .menu-trigger p{
		color: #FFFFFF;
	}
	/*
	.menu-trigger.active span {
	  background-color: #FFFFFF;
	}
	*/
	.menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
	  top: 7px;
	}
	.menu-trigger span:nth-of-type(3) {
	  bottom: 0;
	}
	
	
	/* Animation*/
	
	.menu-trigger.active span:nth-of-type(1) {
	  -webkit-transform: translateY(7px) rotate(-45deg);
	  transform: translateY(7px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
	  opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
	  -webkit-transform: translateY(-7px) rotate(45deg);
	  transform: translateY(-7px) rotate(45deg);
	}
	
	
}

@media screen and (max-width: 768px) {
	
	/*---------------------------------------
	 * Header
	---------------------------------------*/ 
	
	header{
		background: #FFFFFF;
		width: 100%;
		position: fixed;
		top:0;
		left:0;
		box-sizing: border-box;
		padding: 0 0 4.333vw;
		z-index: 500;
	}
	header .logo{
		width: 32vw;
		height: 12.4vw;
		margin: 0 auto;
		top:4.333vw;
		position: relative;
		z-index: 200;
		background: url(../img/logo_wh.png) 0 0 no-repeat;
		background-size: 100%;
	}
	header .menu-content{
		position: fixed;
		top:0;
		left:-100%;
		width: 100%;
		height: 100vh;
		background: #1C9888;
		color: #FFFFFF;
		letter-spacing: 2px;
		font-weight: 200;
		text-align: left;
		padding: 26.667vw 0 0;
		z-index: 100;
	}
	header nav ul,
	header nav ol{
		padding: 0 10.667vw;
		font-size: 3.733vw;
	}
	
	header nav ul li{
		margin: 0 0 8vw;
	}
	header nav ol li a{
		display: block;
		background: url(../img/arrow.svg) center right 10px no-repeat #FFFFFF;
		background-size: 12px;
		color:#1C9888;
		width: 100%;
		margin: 0 auto 4vw;
		padding: 5.333vw 0;
		text-align: center;
	}
	
	/* MenuBtn
	---------------------------------------*/ 
	
	.menu-btn{
		width: 10.667vw;
		height: 4.8vw;
		position: absolute;
		top:0px;
		left:0;
		cursor: pointer;
		z-index: 2000;
		padding: 6.533vw 5.333vw;
		background: transparent;
		/*transition: background-color linear .2s;*/
	}
	.menu-btn p{
		font-size: 2.667vw;
		line-height: 1;
		letter-spacing: 1px;
		display: inline-block;
		margin-left: 6.133vw;
		margin-top: -1px;
		color: #1C9888;
		font-weight: 500;
		vertical-align: top;
	}
	.menu-trigger,
	.menu-trigger span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	}
	.menu-trigger {
	  position: relative;
	  width: 4.267vw;
	  height: 4.267vw;
	}
	.menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background-color: #1C9888;
	}
	.on .menu-trigger span{
	  background-color: #FFFFFF;	
	}
	.on .menu-trigger p{
		color: #FFFFFF;
	}
	/*
	.menu-trigger.active span {
	  background-color: #FFFFFF;
	}
	*/
	.menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
	  top: 1.867vw;
	}
	.menu-trigger span:nth-of-type(3) {
	  bottom: 0;
	}
	
	
	/* Animation*/
	
	.menu-trigger.active span:nth-of-type(1) {
	  -webkit-transform: translateY(1.867vw) rotate(-45deg);
	  transform: translateY(1.867vw) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
	  opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
	  -webkit-transform: translateY(-1.867vw) rotate(45deg);
	  transform: translateY(-1.867vw) rotate(45deg);
	}
	
}