@charset "utf-8";

/*
 *
 * Usage: Collection layout
 *
 * Name: collection.css
 *
 */



/*---------------------------------------------------------------------
Page layout
---------------------------------------------------------------------*/
#container  {overflow:hidden;}
#inner  {padding:0; width:1100px; height:100%;}

#itemList  {text-align:center; display:table; width:100%; height:100%;}
    #itemList li  {display:table-cell; vertical-align:middle; padding:30px 0;}
    #itemList li:nth-child(2)  {padding:0 10px;}


#itemDetail  {position:absolute; top:30px; left:50%; width:100%; height:100%; background:#fff; display:none;}
#btnClose    {-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
              -moz-transition:    all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
              -ms-transition:     all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
              transition:         all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
              position:absolute; top:0; right:0; z-index:999; opacity:0;}
.item_title  {position:absolute; top:45px; left:50px; color:#000; z-index:999;}
    .item_title dt  {-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
                     -moz-transition:    all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
                     -ms-transition:     all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
                     transition:         all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
                     opacity:0; visibility:hidden;
                     font-size:41px; margin:0 0 10px -10px; line-height:100%;}
                     
    .item_title dd  {-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
                     -moz-transition:    all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
                     -ms-transition:     all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
                     transition:         all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
                     opacity:0; visibility:hidden;
                     font-size:14px; letter-spacing:2.0em; margin-left:-10px;}

#itemDetail .detail  {-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
                      -moz-transition:    all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
                      -ms-transition:     all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
                      transition:         all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
                      opacity:0; visibility:hidden;}


.item_nav  {position:absolute; bottom:35px; right:90px; width:100%; text-align:right; z-index:999;}
    .item_nav li   {display:inline-block; background:#e4e4e4; margin-left:5px;}
    .item_nav a    {display:block;}
    .item_nav img  {vertical-align:bottom; position:relative; top:-4px; left:-4px;}
    
    .item_nav :hover img,
    .item_nav :active img,
    .item_nav .active img  {top:0; left:0; opacity:0.5;}


#itemDetail .item  {-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
                    -moz-transition:    all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
                    -ms-transition:     all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
                    transition:         all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
                    opacity:0; visibility:hidden;
                    position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
    #itemDetail .item .item_img  {position:absolute;}
    #itemDetail .item .item_txt  {position:absolute; bottom:130px; right:0; width:305px; color:#000;}
        #itemDetail .item .item_txt dt  {font-size:18px; margin-bottom:15px;}
        #itemDetail .item .item_txt dd  {font-size:10px; line-height:180%; margin-bottom:20px;}
        #itemDetail .item .item_txt p   {font-size:8px; color:#b4b4b4; line-height:150%;}


/* active animation */
#itemDetail.active  {}
    #itemDetail.active #btnClose  {opacity:1;}
    

#itemDetail .detail.active  {opacity:1; visibility:visible;}
    #itemDetail .detail.active .item_title dt,
    #itemDetail .detail.active .item_title dd  {margin-left:0; opacity:1; visibility:visible;}

#itemDetail .item.active  {opacity:1; visibility:visible;}