@import (once) "default.less";
@import (once) "common.less";

/* album ///////////////////////*/
.album{
.tac;
padding:100px 0 80px 0;
background:url("../image/bg_dot.svg") repeat-x 50% 20px;

ul{
.dt;
width:100%;
}

li{
.pr;
.dib;
.vat;
padding:0 0 50px 0;

.photo{
.pr;
width:240px;
max-width:500px;
border:6px #FFFFFF solid;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
z-index:1;
.r(0);
}

p{
margin:20px 0 0 0;
line-height:150%;
}
small{
.db;
}

}

.pin{
.pa;
z-index:2;
left:50%;
top:-40px;
margin-left:-30px;
}

li:nth-child(even) img{
transform:rotate(-10deg);
}
li:nth-child(odd) img{
transform:rotate(10deg);
}

.photo{
transition:.5s;
}
.photo:hover{
transform:rotate(0);
}

}




@media (max-width:1100px) {
.album{
padding:60px 0 60px 0;

li{
padding:0 0 50px 0;
.photo{
width:200px;
}
}

}
}

@media (max-width:720px) {
.album{
padding:60px 0 30px 0;
background:url("../image/bg_dot.svg") repeat-x 50% 20px;
background-size:150%;

li{
padding:0 0 30px 0;
width:150px;

.photo{
width:160px;
}
}

.pin{
width:30px;
left:50%;
top:-20px;
margin-left:-10px;
}

}
}


/* detail ///////////////////////*/
.detail{
padding:60px 0 120px 0;

.gallery{
.pr;
}

.prev{
.pa;
top:35%;
}
.next{
.pa;
top:35%;
right:0px;
}

.bx_viewer li{
padding:20px 0;
}
.bx_viewer img{
max-width:100%;
max-height:500px;
.center;
border:6px #FFFFFF solid;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.bx_pager li{
padding:20px 0;
}
.bx_pager img{
width:100px;
border:4px #FFFFFF solid;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

h3{
font-size:17pt;
padding:20px 0;
margin:10px 0;
background:url("../image/line3.svg") no-repeat 0 100%;
}
.text{
padding:20px 0 40px 0;
}

}

@media (max-width:480px) {
.detail{
padding:30px 0 60px 0;

.bx_viewer img{
max-width:100%;
max-height:350px;
}

}
}