@charset "utf-8";
/*-----------------------------------------------------------------------------
[TABLE OF CONTENTS]
    +media
-----------------------------------------------------------------------------*/
/* media 
*----------------------------------------------------------------------------*/
/**
*
* Desktops
*
**/
@media only screen 
and (max-width : 1200px) {	
	#section1 .fp-tableCell { background-position: 30% 40%;}
}
@media only screen 
and (max-width : 1024px) {
	header .main .logo { top: 20px; left: 20px;}
	header .main .share { top: 20px; right: 20px;}
	header .main .copyright {bottom: 20px;left: 20px;}
	#section2 .intro .main { height: 600px;}
	#section2 .intro .CUbox .product .nextPage,
	#section2 .intro .DHbox .product .prevPage,
	.bx-wrapper .bx-prev {left: 5%;}
	.bx-wrapper .bx-next {right: 5%;}
}
@media only screen 
and (max-width : 800px) {
	#section1 .intro .main .btn a.dh { margin: 0 3% 0 1%;}
	#fp-nav { display: none;}
	#section1 .intro { right: 0;}
}
@media only screen 
and (max-width : 767px) {
	header .main {position: fixed;top: 0;left: 0; height: 50px; font-size: inherit; border-bottom: 1px #d0d0d0 solid; width: 100%; z-index: 21;background: #fff;}
	header .main .logo { top: 10px; left: 10px;}
	header .main .logo a { width: 100px;}
	header .main .lineBox,
	header .main .share,
	header .main .copyright { display: none;}
	header .main .menu,
	header nav,
	#section0 .intro .main .bg,
	#section1 .intro .main .photo,
	footer { display: block;}
	#section0 .intro { top: 40%; left: 0;}
	#section0 .intro,
	#section1 .intro,
	#section2 .intro {position: relative;}
	#section0 .intro .main .title { margin-top: -5%; width: 80%;}
	#section0 .intro .main .photo img { width: 70%;}
	#section1 .fp-tableCell {background: none;}	
	#section1 .intro { left: 0;}
	#section0 .intro .main,
	#section1 .intro .main,
	#section2 .intro .main { position: relative; height: auto; padding: 0 0 50px 0;}
	#section2 .intro { right: 0; left: 0;}
	#section2 .intro .CUbox,
	#section2 .intro .DHbox { position: relative; top: 0; left: 0; width: 100%; display: block !important;}
	#section2 .intro .CUbox { padding: 0 0 80px 0;}
	#section2 .intro .product .photo { padding-bottom: 5%;}
	#section2 .intro .CUbox .product .nextPage,
	#section2 .intro .DHbox .product .prevPage { display: none !important;}
}
@media only screen 
and (max-width : 560px) {
	#section0 .intro { top: 40%;}
}
@media only screen 
and (max-width : 480px) {
	#section0 .intro { top: 30%;}
	#section2 .intro .CUbox .product .photo { width: 80%;}
	#section2 .intro .DHbox .product .photo { width: 90%;}
}
/**
*
* iPads
*
**/
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	#section2 .intro .product .photo img {width: 80%;}
}
/**
*
* iPhones 
*
**/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px) {
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px) 
and (orientation : portrait) {
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px) 
and (orientation : landscape) {
}
/**
*
* ratio: 1.5
*
**/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5){
}