@media (max-width: 769px) {
   #main .banner {position: relative;}
   #main .banner .bg {width: 100%;height: 220px;}
   #main .banner .titleInfo {color: #FFF;position: absolute;top: 20%;left: 10%;}
   #main .banner .titleInfo span {font-family: "Gotham Bold";display: block;font-size: 20px;}
   #main .banner .titleInfo .ch_name {font-weight: bold;letter-spacing: 2px;}
   #main .banner #topNav {width: 100%;position: absolute;bottom: 0;left: 0;}
   #main .banner #topNav .swiper-slide {width:100px;text-align: center;}
   #main .banner #topNav .swiper-slide .icon {width: 60px;height: 60px;}
   #main .banner #topNav .swiper-slide .name {color: #FFF;font-size: 12px;opacity: 0;margin-top: 8px;}
   #main .banner #topNav .active .name {opacity: 1;}
   #main .navigation {padding: 0 40px 0 20px;}
   #main .navigation .breadcrumb {padding-left: 0;background-color: #FFF;border-bottom: 1px solid rgba(100, 100, 100, .1);border-radius: 0;display: flex;align-items: center;}
   #main .navigation .breadcrumb li:nth-child(1) {margin-right: 8px;}
   #main .navigation .breadcrumb > li + li:before {content: "\e603";font-family: "iconfont";color: rgba(0, 0, 0, .7);padding: 0 5px;}
   #main .navigation .breadcrumb li a {color: #999;font-size: 13px;}
   #main .navigation .breadcrumb li a i {font-size: 17px;color: #000;}
   
   #main .content .title {font-size: 20px;text-align: center;color: #41210f;font-weight: bold;letter-spacing: 2px;}
   #main .content #twoNav {margin: 30px 5%;}
   #main .content #twoNav .swiper-slide {width: 100px;height: 30px;line-height: 28px;color: #01DD62;background: #FFF;letter-spacing: 1px;text-align: center;border: 2px solid #01DD62;border-radius: 30px;}
   #main .content #twoNav .active {line-height: 30px;color: #FFF;border: initial;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#99cc00, #99cc00);background-blend-mode: normal, normal;}

   #main .content .goodsList {margin: 50px 5%;}
   #main .content .goodsList ul li {padding: 10% 0;margin-bottom: 20px;border: 1px solid #ECE8E7;text-align: center;}
   #main .content .goodsList ul li .img {width: 50%;}
   #main .content .goodsList ul li .name {color: #41210f;font-size: 15px;font-weight: bold;letter-spacing: 1px;margin: 10px 0;}
   #main .content .goodsList ul li .synopsis {color: rgba(65, 33, 15, .7);font-size: 13px;}
   #main .content .goodsList ul li .more {width: 130px;height: 40px;line-height: 40px;margin: 35px auto 0;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#99cc00, #99cc00);background-blend-mode: normal, normal;border-radius: 35px;color: #FFF;font-size: 13px;display: flex;align-items: center;justify-content: center;}
   #main .content .goodsList ul li .more i {margin-left: 35px;font-size: 20px;}
}

@media (min-width: 769px) and (max-width: 1100px) {
   #main .banner {position: relative;}
   #main .banner .bg {width: 100%;}
   #main .banner .titleInfo {color: #FFF;position: absolute;top: 20%;left: 10%;}
   #main .banner .titleInfo span {font-family: "Gotham Bold";display: block;}
   #main .banner .titleInfo .en_name {font-weight: bold;font-size: 4.2vw;}
   #main .banner .titleInfo .ch_name {font-size: 3.6vw;margin-top: -1vw;letter-spacing: 3px;}
   #main .banner #topNav {width: 100%;position: absolute;bottom: 40px;left: 0;padding: 0 10%;}
   #main .banner #topNav .swiper-wrapper {justify-content: space-between;}
   #main .banner #topNav .swiper-slide {width:10vw;text-align: center;cursor: pointer;}
   #main .banner #topNav .swiper-slide .icon {width: 8.9vw;}
   #main .banner #topNav .swiper-slide .name {color: #FFF;font-size: 1.6vw;letter-spacing: 2px;opacity: 0;margin-top: 8px;position: relative;}
   #main .banner #topNav .active .name {opacity: 1;}
   #main .banner .breadcrumb {background-color: initial;padding: 0;margin: 0;position: absolute;bottom: 25px;right: 5%;display: flex;align-items: center;}
   #main .banner .breadcrumb > li + li:before {content: "\e603";font-family: "iconfont";color: #FFF;;padding: 0 5px;}
   #main .banner .breadcrumb li a {color: #FFF;}
   #main .banner .breadcrumb li:nth-child(1) a {margin-right: 8px;}
   #main .banner .breadcrumb li a i {font-size: 17px;}

   #main .content {margin-top: 80px;}
   #main .content .title {text-align: center;font-size: 35px;}
   #main .content #twoNav {margin-top: 50px;}
   #main .content #twoNav .swiper-wrapper {justify-content: center;}
   #main .content #twoNav .swiper-slide {margin-right: 15px;width: 135px;height: 40px;line-height: 37px;text-align: center;color: #01DD62;border: 3px solid #01DD62;border-radius: 40px;cursor: pointer;}
   #main .content #twoNav .active {line-height: 40px;color: #FFF;border: initial;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#99cc00, #99cc00);background-blend-mode: normal, normal;}

   #main .content .goodsList {margin-top: 50px;}
   #main .content .goodsList ul {display: flex;flex-wrap: wrap;}
   #main .content .goodsList ul li {width: 33.3%;padding: 40px 0;border: 1px solid #ECE8E7;text-align: center;cursor: pointer;}
   #main .content .goodsList ul li .img {width: 50%;transition: all .5s;}
   #main .content .goodsList ul li:hover .img {transform: scale(1.2);}
   #main .content .goodsList ul li .name {color: #41210f;font-size: 15px;font-weight: bold;letter-spacing: 1px;margin: 10px 0;}
   #main .content .goodsList ul li .synopsis {color: rgba(65, 33, 15, .7);font-size: 13px;}
   #main .content .goodsList ul li .more {width: 130px;height: 40px;line-height: 40px;margin: 35px auto 0;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#99cc00, #99cc00);background-blend-mode: normal, normal;border-radius: 35px;color: #FFF;font-size: 13px;display: flex;align-items: center;justify-content: center;opacity: 0;}
   #main .content .goodsList ul li .more i {margin-left: 35px;font-size: 20px;}
   #main .content .goodsList ul li:hover {border: 1px solid #01DD62;background-image: linear-gradient(90deg, rgba(0, 220, 98, .05) 0%, rgba(141, 214, 0, .05) 100%), linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05));background-blend-mode: normal, normal;} 
   #main .content .goodsList ul li:hover .more {opacity: 1;}
}

@media (min-width: 1100px) {
   #main .banner {height: 36.5vw;position: relative;}
   #main .banner .bg {width: 100%;height: 100%;}
   #main .banner .titleInfo {color: #FFF;position: absolute;top: 20%;left: 10%;}
   #main .banner .titleInfo span {font-family: "Gotham Bold";display: block;}
   #main .banner .titleInfo .en_name {font-weight: bold;font-size: 4.2vw;}
   #main .banner .titleInfo .ch_name {font-size: 3.6vw;margin-top: -1vw;letter-spacing: 3px;}
   #main .banner #topNav {width: 100%;position: absolute;bottom: 40px;left: 0;padding: 0 10%;}
   #main .banner #topNav .swiper-wrapper {justify-content: space-between;}
   #main .banner #topNav .swiper-slide {width:10vw;text-align: center;cursor: pointer;}
   #main .banner #topNav .swiper-slide .icon {width: 8.9vw;}
   #main .banner #topNav .swiper-slide .name {color: #FFF;font-size: 1.6vw;letter-spacing: 2px;opacity: 0;margin-top: 8px;position: relative;}
   #main .banner #topNav .swiper-slide:hover .name {opacity: 1;}
   #main .banner #topNav .active .name {opacity: 1;}
   #main .banner .breadcrumb {background-color: initial;padding: 0;margin: 0;position: absolute;bottom: 25px;right: 5%;display: flex;align-items: center;}
   #main .banner .breadcrumb > li + li:before {content: "\e603";font-family: "iconfont";color: #FFF;;padding: 0 5px;}
   #main .banner .breadcrumb li a {color: #FFF;}
   #main .banner .breadcrumb li:nth-child(1) a {margin-right: 8px;}
   #main .banner .breadcrumb li a i {font-size: 17px;}

   #main .content {margin-top: 80px;}
   #main .content .title {text-align: center;font-size: 35px;}
   #main .content #twoNav {margin-top: 50px;}
   #main .content #twoNav .swiper-wrapper {justify-content: center;}
   #main .content #twoNav .swiper-slide {margin-right: 15px;width: 135px;height: 40px;line-height: 37px;text-align: center;color: #01DD62;border: 3px solid #01DD62;border-radius: 40px;cursor: pointer;}
   #main .content #twoNav .active {line-height: 40px;color: #FFF;border: initial;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#99cc00, #99cc00);background-blend-mode: normal, normal;}

   #main .content .goodsList {margin-top: 50px;}
   #main .content .goodsList ul {display: flex;flex-wrap: wrap;}
   #main .content .goodsList ul li {width: 33.3%;padding: 40px 0;border: 1px solid #ECE8E7;text-align: center;cursor: pointer;}
   #main .content .goodsList ul li .img {width: 50%;transition: all .5s;}
   #main .content .goodsList ul li:hover .img {transform: scale(1.2);}
   #main .content .goodsList ul li .name {color: #41210f;font-size: 15px;font-weight: bold;letter-spacing: 1px;margin: 10px 0;}
   #main .content .goodsList ul li .synopsis {color: rgba(65, 33, 15, .7);font-size: 13px;}
   #main .content .goodsList ul li .more {width: 130px;height: 40px;line-height: 40px;margin: 35px auto 0;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#99cc00, #99cc00);background-blend-mode: normal, normal;border-radius: 35px;color: #FFF;font-size: 13px;display: flex;align-items: center;justify-content: center;opacity: 0;}
   #main .content .goodsList ul li .more i {margin-left: 35px;font-size: 20px;}
   #main .content .goodsList ul li:hover {border: 1px solid #01DD62;background-image: linear-gradient(90deg, rgba(0, 220, 98, .05) 0%, rgba(141, 214, 0, .05) 100%), linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05));background-blend-mode: normal, normal;} 
   #main .content .goodsList ul li:hover .more {opacity: 1;}
}