#SubHotelIndex2{ padding: 60px 0 0;width: 1200px;margin: 0 auto;}

#SubHotelIndex2 .item{ display: inline-block;width: 574px;vertical-align: top;margin-bottom: 50px;}
#SubHotelIndex2 .item *{ transition: 0.6s;}
#SubHotelIndex2 .odd{ margin-right: 50px;position: relative;left: -200px;opacity: 0;}
#SubHotelIndex2 .even{ position: relative;left: 200px;opacity: 0;}
#SubHotelIndex2 .odd .infoLeft{ float: left;width: 450px;text-align: right;}
#SubHotelIndex2 .odd .infoLeft .name{ font: normal 28px UtmBebas;color:#2a904f;display: inline-block;margin-bottom: 10px;}
#SubHotelIndex2 .odd .infoLeft .desc{ font: normal 14px/24px Arial;color: #333;}

#SubHotelIndex2 .odd .infoRight{ float: right;width: 100px;}
#SubHotelIndex2 .odd .infoRight .frameOut{width: 100px;height: 100px;background: #2a904f;border-radius: 100%;}
#SubHotelIndex2 .odd .infoRight .frameOut .frameIn{width: 100px;height: 100px;display: inline-block;background-repeat: no-repeat;background-position: center}


#SubHotelIndex2 .item{ display: inline-block;width: 574px;}
#SubHotelIndex2 .even .infoRight{ float: right;width: 450px;text-align: left;}
#SubHotelIndex2 .even .infoRight .name{ font: normal 28px UtmBebas;color: #2a904f;display: inline-block;margin-bottom: 10px;}
#SubHotelIndex2 .even .infoRight .desc{ font: normal 14px/24px Arial;color: #333;}

#SubHotelIndex2 .even .infoLeft{ float: left;width: 100px;}
#SubHotelIndex2 .even .infoLeft .frameOut{width: 100px;height: 100px;background: #2a904f;border-radius: 100%;}
#SubHotelIndex2 .even .infoLeft .frameOut .frameIn{width: 100px;height: 100px;display: inline-block;background-repeat: no-repeat;background-position: center}


#SubHotelIndex2 .item:hover .name{color:#3dd273}
#SubHotelIndex2 .item:hover .frameOut{background:#3dd273}
#SubHotelIndex2 .item:hover .frameOut .frameIn{ transform: rotateY(360deg);}




@media (max-width:768px) {
    #SubHotelIndex2 { width: 97%;margin: 0px auto}
    #SubHotelIndex2 .item{width: 350px}
    #SubHotelIndex2 .odd{left: inherit;opacity: 1;margin-right: 20px}
    
    #SubHotelIndex2 .odd .infoLeft{ width: 250px}
    #SubHotelIndex2 .odd .infoRight{width: 80px}
    #SubHotelIndex2 .odd .infoRight .frameOut{ width: 80px;height: 80px}
    #SubHotelIndex2 .odd .infoRight .frameOut .frameIn{ width: 80px;height: 80px}
    #SubHotelIndex2 .even{left: inherit;opacity: 1;}
    #SubHotelIndex2 .even .infoRight{ width: 260px}
    #SubHotelIndex2 .even .infoLeft{width: 80px}
    #SubHotelIndex2 .even .infoLeft .frameOut{ width: 80px;height: 80px}
    #SubHotelIndex2 .even .infoLeft .frameOut .frameIn{ width: 80px;height: 80px}
    
}

@media (max-width:736px) {
    #SubHotelIndex2 { width: 97%;margin: 0px auto}
    #SubHotelIndex2 .item{width: 100%}
    #SubHotelIndex2 .odd{left: inherit;opacity: 1;}
    #SubHotelIndex2 .odd .infoLeft{ width: inherit;display: inline-block;float: right;width: 78%;text-align: left}
    #SubHotelIndex2 .odd .infoRight{ float: left;display: inline-block;float: left;width: 15%}
    #SubHotelIndex2 .odd .infoRight .frameOut{ width: 80px;height: 80px}
    #SubHotelIndex2 .odd .infoRight .frameOut .frameIn{ width: 80px;height: 80px}
    #SubHotelIndex2 .even{left: inherit;opacity: 1;}
    #SubHotelIndex2 .even .infoLeft{ width: inherit;display: inline-block;float: left;width: 15%}
    #SubHotelIndex2 .even .infoRight{ float: left;display: inline-block;float: right;width: 78%;text-align: left}
    #SubHotelIndex2 .even .infoLeft .frameOut{ width: 80px;height: 80px}
    #SubHotelIndex2 .even .infoLeft .frameOut .frameIn{ width: 80px;height: 80px}
}
@media (max-width:400px) {
    #SubHotelIndex2 { width: 97%;margin: 0px auto}
    #SubHotelIndex2 .item{width: 100%}
    #SubHotelIndex2 .odd{left: inherit;opacity: 1;}
    #SubHotelIndex2 .odd .infoLeft{ width: inherit;display: inline-block;float: right;width: 70%;text-align: left}
    #SubHotelIndex2 .odd .infoRight{ float: left;display: inline-block;float: left;width: 30%}
    #SubHotelIndex2 .odd .infoRight .frameOut{ width: 80px;height: 80px}
    #SubHotelIndex2 .odd .infoRight .frameOut .frameIn{ width: 80px;height: 80px}
    #SubHotelIndex2 .even{left: inherit;opacity: 1;}
    #SubHotelIndex2 .even .infoLeft{ width: inherit;display: inline-block;float: left;width: 30%}
    #SubHotelIndex2 .even .infoRight{ float: left;display: inline-block;float: right;width: 70%;text-align: left}
    #SubHotelIndex2 .even .infoLeft .frameOut{ width: 80px;height: 80px}
    #SubHotelIndex2 .even .infoLeft .frameOut .frameIn{ width: 80px;height: 80px}
}