@charset "utf-8";
/* CSS Document */
/* ----------------------------------------------
learn More for V4K
---------------------------------------------- */
/*.learnMore-intro { width: 100%; height: 100%;}*/
.learnMore-intro .note { font-size: .875em; color: #666;}

/* main1 */
.learnMore-intro.main1 { padding-top: 5%;}
.learnMore-intro.main1 .main1-wapper { position: relative;}
.learnMore-intro.main1 .textBox { width: 45%; padding: 2%; background: rgba(256, 256, 256, .8); position: absolute; top: 0; right: 0;}
.learnMore-intro.main1 .imgBox { width: 75%;}
.learnMore-intro.main1 .imgBox img { width: 100%; height: auto%;}

/* main2 */
.learnMore-intro.main2 { margin-bottom: 5%;}
.learnMore-intro.main2 .main2-wapper {}
.learnMore-intro.main2 .main2-wapper::after { content:""; display: block; clear: both;}
.learnMore-intro.main2 .textBox { float: left; width: 40%; padding-top: 15%;}
.learnMore-intro.main2 .imgBox { float: right; width: 45%; padding-top: 12%; position: relative;}
.learnMore-intro.main2 .v4k { width: 60%; position: absolute; top: 0; right: 0; z-index: 2;}
.learnMore-intro.main2 .notebook { width: 100%; position: relative;}
.learnMore-intro.main2 .srceen { width: 80%; position: absolute; top: 13%; z-index: 1;}
.learnMore-intro.main2 .srceen video { width: 100%; position: absolute;}
.learnMore-intro.main2 .frame { width: 100%;}
.learnMore-intro.main2 .imgBox img { width: 100%; height: auto;}

/* main3 */
.learnMore-intro.main3 { margin-bottom: 5%;}
.learnMore-intro.main3 .main3-wapper {}
.learnMore-intro.main3 .main3-wapper::after { content:""; display: block; clear: both;}
.learnMore-intro.main3 .textBox { float: right; width: 40%; margin-top: 5%;}
.learnMore-intro.main3 .imgBox { float: left; width: 50%; padding-top: 4%; position: relative;}
.learnMore-intro.main3 .v4k { width: 50%; position: absolute; top: 0; left: 0; z-index: 2;}
.learnMore-intro.main3 .map { width: 100%;}
.learnMore-intro.main3 .map video { width: 100%; position: absolute;}
.learnMore-intro.main3 .imgBox img { width: 100%; height: auto;}

/* main4 */
.learnMore-intro.main4 { background:#333 url("../../img/ipevo/v4k/v4k_descript_04-1.png") no-repeat center bottom; background-size: cover;}
.learnMore-intro.main4 .main4-wapper { position: relative;}
.learnMore-intro.main4 .textBox { width: 60%; padding: 10% 0 20%; color: #fff;}
.learnMore-intro.main4 .imgBox { display: none;}

/* main5 */
.learnMore-intro.main5 { padding: 5% 0;}
.learnMore-intro.main5 .main5-wapper { position: relative;}
.learnMore-intro.main5 .textBox { width: 45%; position: absolute; top: 5%; right: 0; z-index: 1;}
.learnMore-intro.main5 .imgBox { width: 60%;}
.learnMore-intro.main5 .imgBox img { width: 100%; height: auto;}

/* main6 */
.learnMore-intro.main6 { padding-bottom: 10%;}
.learnMore-intro.main6 .main6-wapper { position: relative;}
.learnMore-intro.main6 .textBox { width: 55%; padding-top: 8%;}
.learnMore-intro.main6 .imgBox { width: 50%; position: absolute; right: 0;}
.learnMore-intro.main6 .v4k { width: 60%; position: relative; left: 30%;}
.learnMore-intro.main6 .app { width: 15%; position: absolute; top:45%; right: 0;}
.learnMore-intro.main6 .imgBox img { width: 100%; height: auto;}



/* ----------------------------------------------
RWD
---------------------------------------------- */
@media only screen and (max-width: 1920px) {

}
@media only screen and (max-width: 1680px) {

}
@media only screen and (max-width: 1600px) {
/* main5 */
.learnMore-intro.main5 .imgBox { width: 50%;}
}
@media only screen and (max-width: 1440px) {

}

@media only screen and (max-width: 1366px) {

}

@media only screen and (max-width: 1280px) {
/* main5 */
.learnMore-intro.main5 { padding: 5% 0 12%;}
/* main6 */
.learnMore-intro.main6 .textBox { padding-top: 0;}
}

@media only screen and (max-width: 1024px) {
/* main5 */
.learnMore-intro.main5 { padding: 5% 0 20%;}
}

@media only screen and (max-width: 960px) {
/* main1 */
.learnMore-intro.main1 { margin-bottom: 15%;}

/* main4 */
.learnMore-intro.main4 .textBox { width: 70%;}
/* main5 */
.learnMore-intro.main5 { padding: 5% 0 30%;}
}

@media only screen and (max-width: 768px) {
/* main1 */
.learnMore-intro.main1 { margin-bottom: 5%;}
.learnMore-intro.main1 .main1-wapper {}
.learnMore-intro.main1 .textBox { width: 100%; padding: 0%; background: none; position: relative;}
.learnMore-intro.main1 .imgBox { width: 100%;}
/* main2 */
.learnMore-intro.main2 { margin-bottom: 10%;}
.learnMore-intro.main2 .textBox { float: none; width: 100%; padding-top: 0%;}
.learnMore-intro.main2 .imgBox { float: none; width: 100%; padding-top: 25%;}
/* main3 */
.learnMore-intro.main3 { margin-bottom: 10%;}
.learnMore-intro.main3 .main3-wapper {}
.learnMore-intro.main3 .textBox { float: none; width: 100%;}
.learnMore-intro.main3 .imgBox { float: none; width: 100%;}
/* main4 */
.learnMore-intro.main4 { background: none;}
.learnMore-intro.main4 .main4-wapper {}
.learnMore-intro.main4 .textBox { width: 100%; padding: 5% 0 0; color: #333;}
.learnMore-intro.main4 .imgBox { width: 100%; display: block;}
.learnMore-intro.main4 .imgBox img { width: 100%; height: auto;}
/* main5 */
.learnMore-intro.main5 { padding: 5% 0;}
.learnMore-intro.main5 .main5-wapper {}
.learnMore-intro.main5 .textBox { width: 100%; padding-top: 5%; position: relative;}
.learnMore-intro.main5 .imgBox { width: 90%; margin: 0 auto;}
/* main6 */
.learnMore-intro.main6 { }
.learnMore-intro.main6 .main6-wapper { }
.learnMore-intro.main6 .textBox { width: 100%; padding-top: 8%;}
.learnMore-intro.main6 .imgBox { width: 100%; position: relative;}
.learnMore-intro.main6 .v4k { width: 60%; position: relative; left: 10%;}
.learnMore-intro.main6 .app { width: 15%; position: absolute; top:45%; right: 25%;}
}

@media only screen and (max-width: 576px) {

}

@media only screen and (max-width: 480px) {

}


/* ----------------------------------------------
support background
---------------------------------------------- */
.product-main.support-box { background: url("../images/v4k/product-support-v4k-large.jpg") no-repeat center top; background-size: contain;}
@media only screen and (max-width: 1024px) {
.product-main.support-box { background: url("../images/v4k/product-support-v4k-small.jpg") no-repeat center top; background-size: none;}
}

/* ----------------------------------------------
Gallery  background
---------------------------------------------- */
.product-main.gallery-box { background:#333 url("../images/v4k/product-gallery-v4k-large@2x.jpg") no-repeat center top; background-size: cover;}
@media only screen and (max-width: 1024px) {
.product-main.gallery-box { background:#333 url("../images/v4k/product-gallery-v4k-small.jpg") no-repeat center top; background-size: cover;}
}

/* ----------------------------------------------
retina
---------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
.product-main.support-box { background: url("../images/v4k/product-support-v4k-large@2x.jpg") no-repeat center top; background-size: contain;}/* support */
.product-main.gallery-box { background:#333 url("../images/v4k/product-gallery-v4k-large@2x.jpg") no-repeat center top; background-size: cover;}/* Gallery */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1024px), only screen and (min-resolution: 1.5dppx) and (max-width: 1024px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1024px), (min-resolution: 144dpi) and (max-width: 1024px){
.product-main.support-box { background: url("../images/v4k/product-support-v4k-small@2x.jpg") no-repeat center top; background-size: contain;}/* support */
.product-main.gallery-box { background:#333 url("../images/v4k/product-gallery-v4k-small@2x.jpg") no-repeat center top; background-size: cover;}/* Gallery */
}