@charset "utf-8";


/*showcase*/

#showcase {
position:relative;	
width:100%;
height:100%;
background-image:url(../imgok/showcase/bg.jpg);
background-size:cover;
background-position:top center;
background-attachment:fixed;
text-align:center;
padding:150px auto 50px auto;
}
#showcase .pbox {
position:absolute;
width:40%;
height:50%;
cursor:pointer;
border:0px solid #ff0000;
overflow:hidden;
}
#showcase .pbox .relbox {


}
#showcase .pbox .relbox:hover .bgbox{
opacity:1;
}

#showcase .pbox .relbox .bgbox{
position:absolute;
width:100%;
height:100%;
left:0px;
top:0px;	
opacity:.8;
background-size:cover;
background-position:center top;
background-repeat:no-repeat;	
transition:all .3s ease-out;
-webkit-transition:all .3s ease-out;
}

#showcase .pbox .hbox{
position:absolute;
top:50%;
left:50%;
width:130px;
height:100px;
margin-left:-65px;	
margin-top:-50px;
text-align:center;	
font-family:chaparral-pro,Lucida Grande,Verdana,Tahoma,Georgia,"MHei","微軟正黑體","Microsoft JhengHei","Heiti TC";
color:#ffffff;
}
#showcase .pbox .hbox .ibox{
width:60px;
height:60px;
background:url(../imgok/showcase/pbtn.png);
background-position:top center;
margin:auto;
}
#showcase .pbox .hbox .capbox{
padding-top:10px;
}

#showcase .pbox .hbox .capbox[class~=c]{
display:none;
}



#showcase .pbox:hover .hbox {
color:#333333;
}
#showcase .pbox:hover .hbox .ibox {
background-position:bottom center;
}

#showcase .pbox:hover .hbox .capbox[class~=n]{
display:none;
}
#showcase .pbox:hover .hbox .capbox[class~=c]{
display:block;
}



#showcase .tbox {
position:absolute;
width:20%;
height:100%;
border:0px solid #ff0000;
left:40%;
top:0px;	
background-image:url("../imgok/showcase/t.png");
background-size:90%;
background-position:center center;
background-repeat:no-repeat;
}
#showcase .p3{
left:0px;
top:0px;	
}
#showcase .p2{
right:0px;
top:0px	
}
#showcase .p1{
left:0px;
top:50%;	
}
#showcase .p4{
right:0px;
top:50%;
}

#showcase .p1 .relbox .bgbox{ background-image:url("../imgok/showcase/p1.jpg");	 }
#showcase .p2 .relbox .bgbox{ background-image:url("../imgok/showcase/p2.jpg");	 }
#showcase .p3 .relbox .bgbox{ background-image:url("../imgok/showcase/p3.jpg");	 }
#showcase .p4 .relbox .bgbox{ background-image:url("../imgok/showcase/p4.jpg");	 }

/*showcase popbox*/
.showpopbox .cbox {
position:absolute;	
width:924px;
height:540px;
left:50%;
top:50%;
margin-left:-462px;
margin-top:-270px;
background-color:#000000;
}


.showpopbox .cbox .pvbox ,.showpopbox .cbox .pvbox .relbox{
 background-size:cover;
 background-position:center center;	
}
.showpopbox .cbox .pvbox .relbox {
transition:all .3s ease-out;
-webkit-transition:all .3s ease-out;	
}
.showpopbox .cbox .pvbox .item .relbox:hover {
transform:scale(1.1,1.1);	
-webkit-transform:scale(1.1,1.1);		
}

.showpopbox .cbox .pvbox div {
position:absolute;
}

.showpopbox .cbox .pvbox .photo{
width:244px;
height:386px;
left:0px;
top:0px;	
}
.showpopbox .cbox .pvbox .title{
width:583px;
height:156px;
left:0px;
bottom:0px;	
}
.showpopbox .cbox .pvbox .mv{
width:680px;
height:386px;
right:0px;
top:0px;	
}
.showpopbox .cbox .pvbox .mv iframe {
position:absolute;
width:100%;
height:100%;	
}

.showpopbox .cbox .pvbox .item{
width:339px;
height:156px;
right:0px;
bottom:0px;	
overflow:hidden;	
}

/*pv1*/
.showpopbox #pv1 .photo { background-image:url("../imgok/showcase/pp1.jpg")}
.showpopbox #pv1 .title { background-image:url("../imgok/showcase/pt1.jpg")}
.showpopbox #pv1 .item .relbox{ background-image:url("../imgok/showcase/pi1.jpg")}

.showpopbox #pv2 .photo { background-image:url("../imgok/showcase/pp2.jpg")}
.showpopbox #pv2 .title { background-image:url("../imgok/showcase/pt2.jpg")}
.showpopbox #pv2 .item .relbox{ background-image:url("../imgok/showcase/pi2.jpg")}

.showpopbox #pv3 .photo { background-image:url("../imgok/showcase/pp3.jpg")}
.showpopbox #pv3 .title { background-image:url("../imgok/showcase/pt3.jpg")}
.showpopbox #pv3 .item .relbox{ background-image:url("../imgok/showcase/pi3.jpg")}

.showpopbox #pv4 .photo { background-image:url("../imgok/showcase/pp4.jpg")}
.showpopbox #pv4 .title { background-image:url("../imgok/showcase/pt4.jpg")}
.showpopbox #pv4 .item .relbox{ background-image:url("../imgok/showcase/pi4.jpg")}


/*mobile*/
#showcase .minbox {
background-image:url("../imgok/showcase/mbg.jpg");
background-size:cover;
background-position:top center;
background-color:#000000; 
}
#showcase .minbox .tbox {
top:50px;
left:0px;
height:60%;
width:100%;	
background-position:top;
background-image:url("../imgok/showcase/mt.png");
background-size:100%;
}

#showcase .minbox .pbox {
height:30%;
width:50%;	
}

#showcase .minbox .p3{
left:0px;
top:40%;	
}
#showcase .minbox .p2{
right:0px;
top:40%	
}
#showcase .minbox .p1{
left:0px;
top:70%;	
}
#showcase .minbox .p4{
right:0px;
top:70%;
}

.showpopbox .cbox[class~=mobile] {
width:100%;
position:absolute;
top:50px;
height:auto;
margin:0px;
left:0px;	
}
.showpopbox .cbox[class~=mobile] div {
left:0px;
top:0px;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;	

}

.showpopbox .cbox[class~=mobile] .title {
position:relative;
width:100%;	
height:auto;
padding-bottom:32%;
}
.showpopbox .cbox[class~=mobile] .mv {
 position:relative;
padding-bottom:56%;	
width:100%;
height:auto;
}

.showpopbox .cbox[class~=mobile] .btmbox{
position:relative;	
display:block;
padding-bottom:56%;	
width:100%;
background-color:#000000;
}

.showpopbox .cbox[class~=mobile] .btmbox .photo{
position:absolute;
left:0px;
top:0px;
width:68%;
height:100%;
}
.showpopbox .cbox[class~=mobile] .btmbox .item{
position:absolute;
left:68%;
top:0px;
width:32%;
height:100%;
}


.showpopbox .cbox[class~=mobile] #pv1 .photo { background-image:url("../imgok/showcase/mpp1.jpg")}
.showpopbox .cbox[class~=mobile] #pv1 .title { background-image:url("../imgok/showcase/mpt1.jpg")}
.showpopbox .cbox[class~=mobile] #pv1 .item .relbox{ background-image:url("../imgok/showcase/mpi1.jpg")}

.showpopbox .cbox[class~=mobile] #pv2 .photo { background-image:url("../imgok/showcase/mpp2.jpg")}
.showpopbox .cbox[class~=mobile] #pv2 .title { background-image:url("../imgok/showcase/mpt2.jpg")}
.showpopbox .cbox[class~=mobile] #pv2 .item .relbox{ background-image:url("../imgok/showcase/mpi2.jpg")}

.showpopbox .cbox[class~=mobile] #pv3 .photo { background-image:url("../imgok/showcase/mpp3.jpg")}
.showpopbox .cbox[class~=mobile] #pv3 .title { background-image:url("../imgok/showcase/mpt3.jpg")}
.showpopbox .cbox[class~=mobile] #pv3 .item .relbox{ background-image:url("../imgok/showcase/mpi3.jpg")}

.showpopbox .cbox[class~=mobile] #pv4 .photo { background-image:url("../imgok/showcase/mpp4.jpg")}
.showpopbox .cbox[class~=mobile] #pv4 .title { background-image:url("../imgok/showcase/mpt4.jpg")}
.showpopbox .cbox[class~=mobile] #pv4 .item .relbox{ background-image:url("../imgok/showcase/mpi4.jpg")}



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


} /*end w1600*/
@media screen  and (max-width: 1350px) {


} /*end w1200*/
@media screen  and (max-width: 1200px) {


} /*end w1200*/
@media screen  and (max-width: 1080px) {


} /*end w1080*/

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


} /*end w960*/

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


} /*end w800*/
@media screen  and (max-width: 640px) {


} /*end w640*/
@media screen  and (max-width: 480px) {


} /*end w480*/


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


} /*end w320*/