@media (min-width: 2400px) {
	.about-content {max-height: 700px;}
	.homepage-item img, .detail-item img {
		height: auto;
		width: 100% !important;
	}
}


@media (max-height: 760px) {
	.about-body {top: 80px;}
	.about-content {
		margin: 30px 0 0 0;
		max-height: 300px;
	}
	.about-body > a {margin-top: 8%;}
}

@media (max-width: 1730px) {
	
	.owl-navigation {height: 8%;}
	.list .owl-nav {bottom: -23px;}
	.owl-navigation .slider-counter {left: 89%;}
}

@media (max-width: 1600px) {
	.mobile > ul {font-size: 28px;}
	.owl-navigation {height: 9.7%;}
	.list .owl-nav {bottom: -22px;}
	.owl-navigation .slider-counter {left: 86%;}
	.detail .nfo {letter-spacing: 0;}
	.detail .title {width: 35%;}
	.detail .description {width: 52%;}
	.detail .navi {width: 13%;}
	.detail .title h1 {font-size: 20px;}
	.detail .title h2, .detail .title span {font-size: 13px;}
	.detail .description p {font-size: 12px;}
	.slide a .desc h2 {
		font-size: 20px;
		letter-spacing: 1px;
	}
	
}

@media (min-width: 1300px) {
	
}

/* iPad Pro landscape ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1366px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
}


/* iPad air landscape ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1180px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	
}

/* ipad Pro portrait ----------------------------------- */
@media only screen and (min-device-width : 820px) and (max-device-width : 1180px) and (orientation : portrait) {
	body {overflow: hidden;}
	nav {
		width: 100%;
		height: auto;
		z-index: 10;
		transform: translate(100%,0);
	}
	.logo {
		width: 100%;
		top: 0;
		left: 0;
		background: #fff;
		transform: translate(-100%,0);
		padding: 15px;
		z-index: 6;
	}
	.logo img {width: 200px;}
	.hamburger {display: block;}
	.mobile {
		background: #fff;
		width: 100%;
		position: relative;
		z-index: 5;
		padding: 70px 15px 15px 15px;
	}
	nav.active .mobile {transform: translate(-100%,0);}
	nav address {
		position: relative;
		left: auto;
		bottom: auto;
	}
	.mobile > ul {
		font-size: 25px;
		position: relative;
		left: auto;
		top: auto;
		transform: translate(0,0);
		padding: 30px 0;
	}
	.mobile > ul li {padding: 6px 0;}
	.mobile > ul a {
		display: inline-block;
		position: relative;
		text-decoration: none;
	}
	.mobile > ul a:hover:before {
	   content: "";
	   position: absolute;
	   bottom: 5px;
	   left: 0;
	   width: 100%;
	   height: 2px;
	   background: #000;
	   animation: hovermenu 0.6s 1;
	}
	.about {width: 100%;}
	.about-body {
		right: 5%;
		width: 90%;
	}
	.about-body h4 {
		font-size: 80px;
		line-height: 80px;
		letter-spacing: 10px;
	}
	.about-body h4 span {line-height: 20px;}
	.about-content {padding-right: 15px;}
	.about-content strong {
		font-size: 25px;
		padding: 0 25px 0 0;
	}
	.about-content strong:before {
		width: 15px;
		height: 2px;
		top: 15px;
	}
	.about-content table td:first-child {width: 95px;}
	.about-content table td:last-child {padding: 8px 0 10px 0;}
	.home-banner {width: 100%;}
	.list {
		width: 100%;
		padding: 74px 10px 10px 10px;
	}
	.owl-navigation .slider-counter {display: none;}
	.owl-navigation {font-size: 14px;}
	.detail {
	    width: 100%;
		padding-top: 74px;
	}
	.detail .close {
		right: 23px;
	    top: 95px;
	}
	.detail-slider {height: 55vh;}
	.detail .title {
		width: 100%;
		padding: 15px 15px 0 15px;
	}
	.detail .description {
		width: 100%;
		padding: 0 15px;
	}
	.detail .navi {
		width: 100%;
		padding: 5px 15px 0 15px;
	}
	.detail-slider .owl-nav {
		top: 75%;
		right: 30px;
		left: auto;
	}
	.detail .slider-counter {
		top: 50.5%;
		left: auto;
		right: 10px;
	}
}

/* mobile landscape ----------------------------------- */
@media (min-width: 420px) and (max-width: 896px) and (orientation: landscape) {
	.landscape {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #000;
		color: #fff;
		z-index: 20;
		text-align: center;
	}
	.landscape h6 {
		position: absolute;
		left: 50%;
		top: 50%;
		margin: 0;
		font-size: 24px;
		transform: translate(-50%,-50%);
	}
}

/* mobile portrait ----------------------------------- */
@media(max-width:480px) and (orientation : portrait) {	
	body {overflow: hidden;}
	nav {
		width: 100%;
		height: auto;
		z-index: 10;
		transform: translate(100%,0);
	}
	.logo {
		width: 100%;
		top: 0;
		left: 0;
		background: #fff;
		transform: translate(-100%,0);
		padding: 15px;
		z-index: 6;
	}
	.logo img {width: 200px;}
	.hamburger {display: block;}
	.mobile {
		background: #fff;
		width: 100%;
		position: relative;
		z-index: 5;
		padding: 70px 15px 15px 15px;
	}
	nav.active .mobile {transform: translate(-100%,0);}
	nav address {
		position: relative;
		left: auto;
		bottom: auto;
	}
	.mobile > ul {
		font-size: 25px;
		position: relative;
		left: auto;
		top: auto;
		transform: translate(0,0);
		padding: 30px 0;
	}
	.mobile > ul li {padding: 6px 0;}
	.mobile > ul a {
		display: inline-block;
		position: relative;
		text-decoration: none;
	}
	.mobile > ul a:hover:before {
	   content: "";
	   position: absolute;
	   bottom: 5px;
	   left: 0;
	   width: 100%;
	   height: 2px;
	   background: #000;
	   animation: hovermenu 0.6s 1;
	}
	.about {width: 100%;}
	.about-body {
		right: 5%;
		width: 90%;
	}
	.about-body h4 {
		font-size: 80px;
		line-height: 80px;
		letter-spacing: 10px;
	}
	.about-body h4 span {line-height: 20px;}
	.about-content {padding-right: 15px;}
	.about-content strong {
		font-size: 25px;
		padding: 0 25px 0 0;
	}
	.about-content strong:before {
		width: 15px;
		height: 2px;
		top: 15px;
	}
	.about-content table td:first-child {width: 95px;}
	.about-content table td:last-child {padding: 8px 0 10px 0;}
	.home-banner {width: 100%;}
	.list {
		width: 100%;
		padding: 74px 10px 10px 10px;
	}
	.owl-navigation .slider-counter {display: none;}
	.owl-navigation {font-size: 14px;}
	.detail {
	    width: 100%;
		padding-top: 74px;
	}
	.detail .close {
		right: 23px;
	    top: 95px;
	}
	.detail-slider {height: 55vh;}
	.detail .title {
		width: 100%;
		padding: 15px 15px 0 15px;
	}
	.detail .description {
		width: 100%;
		padding: 0 15px;
	}
	.detail .navi {
		width: 100%;
		padding: 5px 15px 0 15px;
	}
	.detail-slider .owl-nav {
		top: 75%;
		right: 30px;
		left: auto;
	}
	.detail .slider-counter {
		top: 50.5%;
		left: auto;
		right: 10px;
	}
}



/* tom 2023 ----------------------------------- */