/*.ih-item.square.effect {*/
    /*overflow: hidden;*/
/*}*/
.ih-item, .ih-item * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ih-item.square.effect .mask1 {
    left: auto;
    right: 0;
    top: 0;
}
.ih-item.square.effect .mask1, .ih-item.square.effect .mask2 {
    position: absolute;
    background: #333333;
    background: rgba(60, 82, 42, 0.6);
}

/*********ģ��λ��***********/
/************* ģ��effect0 ******************/
.ih-item.square.effect0 .mask1 {
    -webkit-transform: rotate(69.265deg) translateX(-320px);
    -moz-transform: rotate(69.265deg) translateX(-320px);
    -ms-transform: rotate(69.265deg) translateX(-320px);
    -o-transform: rotate(69.265deg) translateX(-320px);
    transform: rotate(69.265deg) translateX(-320px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect0 .mask2 {
    -webkit-transform: rotate(69.265deg) translateX(320px);
    -moz-transform: rotate(69.265deg) translateX(320px);
    -ms-transform: rotate(69.265deg) translateX(320px);
    -o-transform: rotate(69.265deg) translateX(320px);
    transform: rotate(69.265deg) translateX(320px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect0 a:hover .mask1 {
    -webkit-transform: rotate(69.265deg) translateX(1px);
    -moz-transform: rotate(69.265deg) translateX(1px);
    -ms-transform: rotate(69.265deg) translateX(1px);
    -o-transform: rotate(69.265deg) translateX(1px);
    transform: rotate(69.265deg) translateX(1px);
}
.ih-item.square.effect0 a:hover .mask2 {
    -webkit-transform: rotate(69.265deg) translateX(-1px);
    -moz-transform: rotate(69.265deg) translateX(-1px);
    -ms-transform: rotate(69.265deg) translateX(-1px);
    -o-transform: rotate(69.265deg) translateX(-1px);
    transform: rotate(69.265deg) translateX(-1px);
}
.ih-item.square.effect0 .mask1, .ih-item.square.effect0 .mask2{
    width: 640px;
    height: 1000px;
}

/************* ģ��effect1 ******************/
.ih-item.square.effect1 .mask1 {
    -webkit-transform: rotate(123.26deg) translateX(0);
    -moz-transform: rotate(123.26deg) translateX(0);
    -ms-transform: rotate(123.26deg) translateX(0);
    -o-transform: rotate(123.26deg) translateX(0);
    transform: rotate(123.26deg) translateX(0);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect1 .mask2 {
    -webkit-transform: rotate(123.26deg) translateX(0);
    -moz-transform: rotate(123.26deg) translateX(0);
    -ms-transform: rotate(123.26deg) translateX(0);
    -o-transform: rotate(123.26deg) translateX(0);
    transform: rotate(123.26deg) translateX(0);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect1 a:hover .mask1 {
    -webkit-transform: rotate(123.26deg) translateX(600px);
    -moz-transform: rotate(123.26deg) translateX(600px);
    -ms-transform: rotate(123.26deg) translateX(600px);
    -o-transform: rotate(123.26deg) translateX(600px);
    transform: rotate(123.26deg) translateX(600px);
}
.ih-item.square.effect1 a:hover .mask2 {
    -webkit-transform: rotate(123.26deg) translateX(-600px);
    -moz-transform: rotate(123.26deg) translateX(-600px);
    -ms-transform: rotate(123.26deg) translateX(-600px);
    -o-transform: rotate(123.26deg) translateX(-600px);
    transform: rotate(123.26deg) translateX(-600px);
}
.ih-item.square.effect1 .mask1, .ih-item.square.effect1 .mask2{
    width: 1000px;
    height: 488px;
}

/************* ģ��effect2 ******************/
.ih-item.square.effect2 .mask1 {
    -webkit-transform: rotate(69.265deg) translateX(-320px);
    -moz-transform: rotate(69.265deg) translateX(-320px);
    -ms-transform: rotate(69.265deg) translateX(-320px);
    -o-transform: rotate(69.265deg) translateX(-320px);
    transform: rotate(69.295deg) translateX(-320px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect2 .mask2 {
    -webkit-transform: rotate(69.265deg) translateX(320px);
    -moz-transform: rotate(69.265deg) translateX(320px);
    -ms-transform: rotate(69.265deg) translateX(320px);
    -o-transform: rotate(69.265deg) translateX(320px);
    transform: rotate(69.295deg) translateX(320px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect2 a:hover .mask1 {
    -webkit-transform: rotate(69.265deg) translateX(1px);
    -moz-transform: rotate(69.265deg) translateX(1px);
    -ms-transform: rotate(69.265deg) translateX(1px);
    -o-transform: rotate(69.265deg) translateX(1px);
    transform: rotate(69.295deg) translateX(1px);
}
.ih-item.square.effect2 a:hover .mask2 {
    -webkit-transform: rotate(69.265deg) translateX(-1px);
    -moz-transform: rotate(69.265deg) translateX(-1px);
    -ms-transform: rotate(69.265deg) translateX(-1px);
    -o-transform: rotate(69.265deg) translateX(-1px);
    transform: rotate(69.295deg) translateX(-1px);
}
.ih-item.square.effect2 .mask1, .ih-item.square.effect2 .mask2{
    width: 640px;
    height: 1000px;
}

/************* ģ��effect3 ******************/
.ih-item.square.effect3 .mask1 {
    -webkit-transform: rotate(52.91deg) translateX(-250px);
    -moz-transform: rotate(52.91deg) translateX(-250px);
    -ms-transform: rotate(52.91deg) translateX(-250px);
    -o-transform: rotate(52.91deg) translateX(-250px);
    transform: rotate(52.91deg) translateX(-250px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect3 .mask2 {
    -webkit-transform: rotate(52.91deg) translateX(250px);
    -moz-transform: rotate(52.91deg) translateX(250px);
    -ms-transform: rotate(52.91deg) translateX(250px);
    -o-transform: rotate(52.91deg) translateX(250px);
    transform: rotate(52.91deg) translateX(250px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect3 a:hover .mask1 {
    -webkit-transform: rotate(52.91deg) translateX(1px);
    -moz-transform: rotate(52.91deg) translateX(1px);
    -ms-transform: rotate(52.91deg) translateX(1px);
    -o-transform: rotate(52.91deg) translateX(1px);
    transform: rotate(52.91deg) translateX(1px);
}
.ih-item.square.effect3 a:hover .mask2 {
    -webkit-transform: rotate(52.91deg) translateX(-1px);
    -moz-transform: rotate(52.91deg) translateX(-1px);
    -ms-transform: rotate(52.91deg) translateX(-1px);
    -o-transform: rotate(52.91deg) translateX(-1px);
    transform: rotate(52.91deg) translateX(-1px);
}
.ih-item.square.effect3 .mask1, .ih-item.square.effect3 .mask2{
    width: 300px;
    height: 500px;
}

/************* ģ��effect4 ******************/
.ih-item.square.effect4 .mask1 {
    -webkit-transform: rotate(123.26deg) translateX(0);
    -moz-transform: rotate(123.26deg) translateX(0);
    -ms-transform: rotate(123.26deg) translateX(0);
    -o-transform: rotate(123.26deg) translateX(0);
    transform: rotate(123.26deg) translateX(0);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect4 .mask2 {
    -webkit-transform: rotate(123.26deg) translateX(0);
    -moz-transform: rotate(123.26deg) translateX(0);
    -ms-transform: rotate(123.26deg) translateX(0);
    -o-transform: rotate(123.26deg) translateX(0);
    transform: rotate(123.26deg) translateX(0);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect4 a:hover .mask1 {
    -webkit-transform: rotate(123.26deg) translateX(600px);
    -moz-transform: rotate(123.26deg) translateX(600px);
    -ms-transform: rotate(123.26deg) translateX(600px);
    -o-transform: rotate(123.26deg) translateX(600px);
    transform: rotate(123.26deg) translateX(600px);
}
.ih-item.square.effect4 a:hover .mask2 {
    -webkit-transform: rotate(123.26deg) translateX(-600px);
    -moz-transform: rotate(123.26deg) translateX(-600px);
    -ms-transform: rotate(123.26deg) translateX(-600px);
    -o-transform: rotate(123.26deg) translateX(-600px);
    transform: rotate(123.26deg) translateX(-600px);
}
.ih-item.square.effect4 .mask1, .ih-item.square.effect4 .mask2{
    width: 1000px;
    height: 488px;
}

/************* ģ��effect5 ******************/
.ih-item.square.effect5 .mask1 {
    -webkit-transform: rotate(123.26deg) translateX(0);
    -moz-transform: rotate(123.26deg) translateX(0);
    -ms-transform: rotate(123.26deg) translateX(0);
    -o-transform: rotate(123.26deg) translateX(0);
    transform: rotate(123.26deg) translateX(0);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect5 .mask2 {
    -webkit-transform: rotate(123.26deg) translateX(0);
    -moz-transform: rotate(123.26deg) translateX(0);
    -ms-transform: rotate(123.26deg) translateX(0);
    -o-transform: rotate(123.26deg) translateX(0);
    transform: rotate(123.26deg) translateX(0);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect5 a:hover .mask1 {
    -webkit-transform: rotate(123.26deg) translateX(600px);
    -moz-transform: rotate(123.26deg) translateX(600px);
    -ms-transform: rotate(123.26deg) translateX(600px);
    -o-transform: rotate(123.26deg) translateX(600px);
    transform: rotate(123.26deg) translateX(600px);
}
.ih-item.square.effect5 a:hover .mask2 {
    -webkit-transform: rotate(123.26deg) translateX(-600px);
    -moz-transform: rotate(123.26deg) translateX(-600px);
    -ms-transform: rotate(123.26deg) translateX(-600px);
    -o-transform: rotate(123.26deg) translateX(-600px);
    transform: rotate(123.26deg) translateX(-600px);
}
.ih-item.square.effect5 .mask1, .ih-item.square.effect5 .mask2{
    width: 1000px;
    height: 488px;
}

/************* ģ��effect6 ******************/
.ih-item.square.effect6 .mask1 {
    -webkit-transform: rotate(52.91deg) translateX(-250px);
    -moz-transform: rotate(52.91deg) translateX(-250px);
    -ms-transform: rotate(52.91deg) translateX(-250px);
    -o-transform: rotate(52.91deg) translateX(-250px);
    transform: rotate(52.91deg) translateX(-250px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect6 .mask2 {
    -webkit-transform: rotate(52.91deg) translateX(250px);
    -moz-transform: rotate(52.91deg) translateX(250px);
    -ms-transform: rotate(52.91deg) translateX(250px);
    -o-transform: rotate(52.91deg) translateX(250px);
    transform: rotate(52.91deg) translateX(250px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect6 a:hover .mask1 {
    -webkit-transform: rotate(52.91deg) translateX(1px);
    -moz-transform: rotate(52.91deg) translateX(1px);
    -ms-transform: rotate(52.91deg) translateX(1px);
    -o-transform: rotate(52.91deg) translateX(1px);
    transform: rotate(52.91deg) translateX(1px);
}
.ih-item.square.effect6 a:hover .mask2 {
    -webkit-transform: rotate(52.91deg) translateX(-1px);
    -moz-transform: rotate(52.91deg) translateX(-1px);
    -ms-transform: rotate(52.91deg) translateX(-1px);
    -o-transform: rotate(52.91deg) translateX(-1px);
    transform: rotate(52.91deg) translateX(-1px);
}
.ih-item.square.effect6 .mask1, .ih-item.square.effect6 .mask2{
    width: 300px;
    height: 500px;
}

/************* ģ��effect7 ******************/
.ih-item.square.effect7 .mask1 {
    -webkit-transform: rotate(52.91deg) translateX(-250px);
    -moz-transform: rotate(52.91deg) translateX(-250px);
    -ms-transform: rotate(52.91deg) translateX(-250px);
    -o-transform: rotate(52.91deg) translateX(-250px);
    transform: rotate(52.91deg) translateX(-250px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect7 .mask2 {
    -webkit-transform: rotate(52.91deg) translateX(250px);
    -moz-transform: rotate(52.91deg) translateX(250px);
    -ms-transform: rotate(52.91deg) translateX(250px);
    -o-transform: rotate(52.91deg) translateX(250px);
    transform: rotate(52.91deg) translateX(250px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect7 a:hover .mask1 {
    -webkit-transform: rotate(52.91deg) translateX(1px);
    -moz-transform: rotate(52.91deg) translateX(1px);
    -ms-transform: rotate(52.91deg) translateX(1px);
    -o-transform: rotate(52.91deg) translateX(1px);
    transform: rotate(52.91deg) translateX(1px);
}
.ih-item.square.effect7 a:hover .mask2 {
    -webkit-transform: rotate(52.91deg) translateX(-1px);
    -moz-transform: rotate(52.91deg) translateX(-1px);
    -ms-transform: rotate(52.91deg) translateX(-1px);
    -o-transform: rotate(52.91deg) translateX(-1px);
    transform: rotate(52.91deg) translateX(-1px);
}
.ih-item.square.effect7 .mask1, .ih-item.square.effect7 .mask2{
    width: 300px;
    height: 500px;
}

/************* ģ��effect8 ******************/
.ih-item.square.effect8 .mask1 {
    -webkit-transform: rotate(52.91deg) translateX(-250px);
    -moz-transform: rotate(52.91deg) translateX(-250px);
    -ms-transform: rotate(52.91deg) translateX(-250px);
    -o-transform: rotate(52.91deg) translateX(-250px);
    transform: rotate(52.91deg) translateX(-250px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect8 .mask2 {
    -webkit-transform: rotate(52.91deg) translateX(250px);
    -moz-transform: rotate(52.91deg) translateX(250px);
    -ms-transform: rotate(52.91deg) translateX(250px);
    -o-transform: rotate(52.91deg) translateX(250px);
    transform: rotate(52.91deg) translateX(250px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect8 a:hover .mask1 {
    -webkit-transform: rotate(52.91deg) translateX(1px);
    -moz-transform: rotate(52.91deg) translateX(1px);
    -ms-transform: rotate(52.91deg) translateX(1px);
    -o-transform: rotate(52.91deg) translateX(1px);
    transform: rotate(52.91deg) translateX(1px);
}
.ih-item.square.effect8 a:hover .mask2 {
    -webkit-transform: rotate(52.91deg) translateX(-1px);
    -moz-transform: rotate(52.91deg) translateX(-1px);
    -ms-transform: rotate(52.91deg) translateX(-1px);
    -o-transform: rotate(52.91deg) translateX(-1px);
    transform: rotate(52.91deg) translateX(-1px);
}
.ih-item.square.effect8 .mask1, .ih-item.square.effect8 .mask2{
    width: 300px;
    height: 500px;
}

/************* ģ��effect9 ******************/
.ih-item.square.effect9 .mask1 {
    -webkit-transform: rotate(52.777deg) translateX(-500px);
    -moz-transform: rotate(52.777deg) translateX(-500px);
    -ms-transform: rotate(52.777deg) translateX(-500px);
    -o-transform: rotate(52.777deg) translateX(-500px);
    transform: rotate(52.777deg) translateX(-500px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect9 .mask2 {
    -webkit-transform: rotate(52.777deg) translateX(500px);
    -moz-transform: rotate(52.777deg) translateX(500px);
    -ms-transform: rotate(52.777deg) translateX(500px);
    -o-transform: rotate(52.777deg) translateX(500px);
    transform: rotate(52.777deg) translateX(500px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect9 a:hover .mask1 {
    -webkit-transform: rotate(52.777deg) translateX(1px);
    -moz-transform: rotate(52.777deg) translateX(1px);
    -ms-transform: rotate(52.777deg) translateX(1px);
    -o-transform: rotate(52.777deg) translateX(1px);
    transform: rotate(52.777deg) translateX(1px);
}
.ih-item.square.effect9 a:hover .mask2 {
    -webkit-transform: rotate(52.777deg) translateX(-1px);
    -moz-transform: rotate(52.777deg) translateX(-1px);
    -ms-transform: rotate(52.777deg) translateX(-1px);
    -o-transform: rotate(52.777deg) translateX(-1px);
    transform: rotate(52.777deg) translateX(-1px);
}
.ih-item.square.effect9 .mask1, .ih-item.square.effect9 .mask2{
    width: 640px;
    height: 1000px;
}

.ih-item.square.effect .mask1, .ih-item.square.effect .mask2 {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}

/*********ģ��λ��***********/

.ih-item.square.effect .mask2 {
    top: auto;
    bottom: 0;
    left: 0;
}
.ih-item.square.effect .info {
    background: rgba(27, 44, 21, 0.5);
    height: 0;
    visibility: hidden;
    width: 360px;
    position: absolute;
    -webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
    -moz-transform: rotate(-33.5deg) translate(-112px, 166px);
    -ms-transform: rotate(-33.5deg) translate(-112px, 166px);
    -o-transform: rotate(-33.5deg) translate(-112px, 166px);
    transform: rotate(-33.5deg) translate(-112px, 166px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: all 0.35s ease-in-out 0.35s;
    -moz-transition: all 0.35s ease-in-out 0.35s;
    transition: all 0.35s ease-in-out 0.35s;
}
.ih-item.square .info {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.ih-item.square.effect .info h3 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    font-size: 17px;
    padding: 10px;
    background: transparent;
    margin-top: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    -webkit-transition: all 0.35s ease-in-out 0.35s;
    -moz-transition: all 0.35s ease-in-out 0.35s;
    transition: all 0.35s ease-in-out 0.35s;
}
.ih-item.square.effect .info p {
    /*font-style: italic;*/
    font-size: 12px;
    position: relative;
    color: #bbb;
    padding: 20px 20px 20px;
    text-align: center;
    opacity: 0;
    -webkit-transition: all 0.35s ease-in-out 0.35s;
    -moz-transition: all 0.35s ease-in-out 0.35s;
    transition: all 0.35s ease-in-out 0.35s;
}
.ih-item.square.effect a:hover .info {
    width: 300px;
    height: 120px;
    visibility: visible;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -55px;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.ih-item.square.effect a:hover .info h3,
.ih-item.square.effect a:hover .info p {
    opacity: 1;
}