@media (max-width: 769px) {
   #main li a div {width: 100%;position: relative;}
   #main li a .spreadImg {display: none;}
   #main li a div:nth-child(1) {display: block;}
   #main li a .spreadImg .bgImg, #main li a .spreadImg .bgImg img {width: 100%;}
   #main li a .spreadImg .icon {width: 90px;height: 90px;position: absolute;top: calc(50% - 45px);left: calc(50% - 45px);}
   #main li a .info {display: flex;align-items: center;background-color: #FFF;}
   #main li a .info div .ch_name {font-size: 30px;letter-spacing: 2px;color: #41210f;margin: 30px 0 0;}
   #main li a .info div .en_name {font-weight: bold;color: #41210f;}
   #main li a .info div .line {display: block;width: 25px;height: 3px;background-color: rgba(255, 255, 255, .2);position: absolute;right: 0;}
   #main li a .info div .txt {margin-top: 20px;color: rgba(255, 255, 255, .7);font-size: 12px;}   
   #main li a .info img {width: 160px;height: 200px;}
   #main li a .info img:nth-child(3) {display: none;}
}

@media (min-width: 769px) and (max-width: 1100px) {
   #main ul {margin: 0;}
   #main li a {display: flex;}
   #main li a div {width: 50%;position: relative;overflow: hidden;}
   #main li a .spreadImg {display: none;}
   #main li:nth-child(odd) a div:nth-child(1) {display: block;}
   #main li:nth-child(even) a div:nth-child(3) {display: block;}
   #main li a .spreadImg .bgImg {width: 100%;overflow: hidden;}
   #main li a .spreadImg .bgImg img {width: 100%;transition: all .5s;}
   #main li:hover a .spreadImg .bgImg img {transform: scale(1.1);}
   #main li a .spreadImg .icon {width: 8vw;position: absolute;top: calc(50% - 4vw);left: calc(50% - 4vw);}
   #main li a .info {display: flex;align-items: center;background-color: #FFF;transition: all .5s;}
   #main li:nth-child(odd) .info {text-align: right;}
   #main li a .info div p {margin: 0;}
   #main li a .info div .ch_name {font-size: 30px;letter-spacing: 2px;color: #41210f;}
   #main li a .info div .en_name {font-weight: bold;color: #41210f;padding-bottom: 10px;}
   #main li a .info div .line {display: none;width: 25px;height: 3px;background-color: rgba(255, 255, 255, .2);position: absolute;}
   #main li a .info div .txt {display: none;padding-top: 15px;color: rgba(255, 255, 255, .7);font-size: 12px;}   
   #main li a .info img {width: 40%;height: 65%;display: none;}
   #main li:nth-child(even) .info img:nth-child(1) {display: block;}
   #main li:nth-child(odd) .info img:nth-child(3) {display: block;}
   #main li:hover a .info {background-color: #4ec401;}
   #main li:hover a .info div {color: #FFF;position: relative;}
   #main li:hover a .info div .ch_name {color: #FFF;}
   #main li:hover a .info div .en_name {color: #FFF;}
   #main li:hover a .info div .line, #main li:hover a .info div .txt {display: block;}
   #main li:nth-child(odd) a .info div .line {right: 0;}
}

@media (min-width: 1100px) {
   #main ul {margin: 0;}
   #main li a {display: flex;}
   #main li a div {width: 50%;position: relative;overflow: hidden;}
   #main li a .spreadImg {display: none;}
   #main li:nth-child(odd) a div:nth-child(1) {display: block;}
   #main li:nth-child(even) a div:nth-child(3) {display: block;}
   #main li a .spreadImg .bgImg {width: 100%;overflow: hidden;}
   #main li a .spreadImg .bgImg img {width: 100%;transition: all .5s;}
   #main li:hover a .spreadImg .bgImg img {transform: scale(1.1);}
   #main li a .spreadImg .icon {width: 8vw;position: absolute;top: calc(50% - 4vw);left: calc(50% - 4vw);}
   #main li a .info {display: flex;align-items: center;background-color: #FFF;transition: all .5s;}
   #main li:nth-child(odd) .info {text-align: right;}
   #main li a .info div p {margin: 0;}
   #main li a .info div .ch_name {font-size: 30px;letter-spacing: 2px;color: #41210f;}
   #main li a .info div .en_name {font-weight: bold;color: #41210f;padding-bottom: 10px;}
   #main li a .info div .line {display: none;width: 25px;height: 3px;background-color: rgba(255, 255, 255, .2);position: absolute;}
   #main li a .info div .txt {display: none;padding-top: 15px;color: rgba(255, 255, 255, .7);font-size: 12px;}   
   #main li a .info img {width: 40%;height: 65%;display: none;}
   #main li:nth-child(even) .info img:nth-child(1) {display: block;}
   #main li:nth-child(odd) .info img:nth-child(3) {display: block;}
   #main li:hover a .info {background-color: #4ec401;}
   #main li:hover a .info div {color: #FFF;position: relative;}
   #main li:hover a .info div .ch_name {color: #FFF;}
   #main li:hover a .info div .en_name {color: #FFF;}
   #main li:hover a .info div .line, #main li:hover a .info div .txt {display: block;}
   #main li:nth-child(odd) a .info div .line {right: 0;}

}