@media (max-width: 769px) {
   #main .banner {position: relative;}
   #main .banner img {width: 100%;height: 100%;}
   #main .banner .txt {color: #FFF;position: absolute;top: 20%;left: 10%;}
   #main .banner .txt span {font-family: "Gotham Bold";display: block;font-size: 20px;}
   #main .banner .txt span:nth-child(2) {font-weight: bold;letter-spacing: 3px;}
   #main .tabs {width: 100%;height: 60px;padding: 0 40px 0 20px;background-color: #FCFCFC;}
   #main .tabs ul {width: 100%;height: 60px;display: flex;align-items: center;justify-content: space-between;margin: 0;overflow: hidden;}
   #main .tabs li {position: relative;}
   #main .tabs li a {height: 35px;line-height: 25px;font-size: 12px;color: #41210f;}
   #main .tabs li.active a {color: #01DD62;}
   #main .tabs li.active::after {content: "";width: 100%;height: 2px;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#ff8400, #ff8400);background-blend-mode: normal, normal;background-repeat:no-repeat;background-size:100% 100%;position: absolute;left: 0;bottom: 0;}
   #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;}
   
   #tabs-container .swiperList .title,
   #tabs-container .swiperList .title {margin: 50px 5% 0;}
   #tabs-container .swiperList .title .name {font-size: 30px;letter-spacing: 2px;text-align: center;color: #41210f;}
   #tabs-container .swiperList .title .synopsis {font-size: 13px;text-align: center;color: rgba(65, 33, 15, .7);margin-top: 30px;line-height: 24px;}
   .content {background-color: #F9F9F9;padding: 30px 0 50px;margin-top: 60px;}
   .content .gallery-top {padding: 0 5%;}
   .content .gallery-top .swiper-slide {width: 110px !important;text-align: center;}
   .content .gallery-top .swiper-slide img {width: 50px;height: 50px;}
   .content .gallery-top .swiper-slide p {font-size: 13px;font-weight: bold;color: #41210f;margin: 15px 0 0;}   
   .content .gallery-top .swiper-slide i {display: none;width: 15px;color: #01DD62;transform: rotate(90deg);font-size: 17px;margin: 0 auto;}   
   .content .gallery-top .swiper-slide-active img {width: 70px;height: 70px;}
   .content .gallery-top .swiper-slide-active p {font-size: 16px;}
   .content .gallery-top .swiper-slide-active i {display: block;}
   .content .gallery-thumbs {margin: 20px 5% 0;}
   .content .gallery-thumbs .swiper-slide .img, .content .gallery-thumbs .swiper-slide .img img {width: 100%;}
   .content .gallery-thumbs .swiper-slide .box {padding: 35px 20px;text-align: center;background-color: #FFF;}
   .content .gallery-thumbs .swiper-slide .box div .en_name {color: #41210f;font-size: 25px;font-weight: bold;margin: 0;}
   .content .gallery-thumbs .swiper-slide .box div .en_name:nth-child(2) {margin-top: -9px;}
   .content .gallery-thumbs .swiper-slide .box div .ch_name {font-size: 20px;margin-top: 8px;}
   .content .gallery-thumbs .swiper-slide .box ul li {line-height: 30px;font-size: 12px;color: rgba(65, 33, 15, .7);padding-left: 15px;text-align: left;position: relative;}
   .content .gallery-thumbs .swiper-slide .box ul li::before {content: "";width: 6px;height: 6px;border-radius: 50%;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#2c5961, #2c5961);background-blend-mode: normal, normal;position: absolute;position: absolute;top: 11px;left: 0;}
   .content .gallery-thumbs .swiper-slide .box .num {font-size: 20px;font-weight: bold;color: rgba(65, 33, 15, .1);position: absolute;bottom: 15px;}

}

@media (min-width: 769px) and (max-width: 1100px) {
   #main .banner {height: 36.5vw;position: relative;}
   #main .banner img {width: 100%;height: 100%;}
   #main .banner .txt {color: #FFF;position: absolute;top: 10.4vw;left: 5.2vw;}
   #main .banner .txt span {font-family: "Gotham Bold";display: block;font-size: 4.2vw;}
   #main .banner .txt span:nth-child(2) {font-size: 3.6vw;letter-spacing: 3px;margin-top: -1vw;}
   #main .banner .breadcrumb {background-color: initial;padding: 0;margin: 0;position: absolute;bottom: 100px;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 .banner .tabs {width: 90%;height: 80px;background-color: rgba(255, 255, 255, .91);position: absolute;bottom: 0;left: 5%;}
   #main .banner .tabs ul {width: 100%;display: flex;}
   #main .banner .tabs ul li {width: 25%;height: 80px;line-height: 80px;display: inline-block;text-align: center;position: relative;}
   #main .banner .tabs ul li::before {content: "|";color: #D4CDCA;position: absolute;left: 0;}
   #main .banner .tabs ul li:nth-child(1)::before {content: "";}
   #main .banner .tabs ul li a {color: #41210f;height: 80px;display: inline-block;}
   #main .tabs ul li.active a {color: #01DD62;position: relative;}
   #main .tabs ul li.active a::after {content: "";width: 100%;height: 2px;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#ff8400, #ff8400);background-blend-mode: normal, normal;background-repeat:no-repeat;background-size:100% 100%;position: absolute;left: 0;bottom: 0;}

   #tabs-container .swiperList .title {margin: 50px 5% 0;}
   #tabs-container .swiperList .title .name {font-size: 30px;letter-spacing: 2px;text-align: center;color: #41210f;}
   #tabs-container .swiperList .title .synopsis {font-size: 13px;text-align: center;color: rgba(65, 33, 15, .7);margin-top: 30px;line-height: 24px;}
   .content {background-color: #F9F9F9;padding: 30px 50px 60px;margin-top: 60px;}
   .content .gallery-top {padding: 0 5%;}
   .content .gallery-top .swiper-slide {width: 110px !important;text-align: center;cursor: pointer;}
   .content .gallery-top .swiper-slide img {width: 50px;height: 50px;}
   .content .gallery-top .swiper-slide p {font-size: 13px;font-weight: bold;color: #41210f;margin: 15px 0 0;}   
   .content .gallery-top .swiper-slide i {display: none;width: 15px;color: #01DD62;transform: rotate(90deg);font-size: 17px;margin: 0 auto;}   
   .content .gallery-top .swiper-slide-active img {width: 70px;height: 70px;}
   .content .gallery-top .swiper-slide-active p {font-size: 16px;}
   .content .gallery-top .swiper-slide-active i {display: block;}
   .content .gallery-thumbs {margin: 20px 5% 0;}
   .content .gallery-thumbs .swiper-slide {cursor: pointer;}
   .content .gallery-thumbs .swiper-slide::after {content: "";width: 100%;height: 7px;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#ffffff, #ffffff);background-blend-mode: normal, normal;position: absolute;bottom: 0;left: 0;}
   .content .gallery-thumbs .swiper-slide .img {overflow: hidden;}
   .content .gallery-thumbs .swiper-slide .img img {width: 100%;transition: all .5s;}
   .content .gallery-thumbs .swiper-slide:hover .img img {transform: scale(1.1);}
   .content .gallery-thumbs .swiper-slide .box {padding: 40px;background-color: #FFF;display: flex;}
   .content .gallery-thumbs .swiper-slide .box div {width: 35%;}
   .content .gallery-thumbs .swiper-slide .box div .en_name {color: #41210f;font-size: 25px;font-weight: bold;margin: 0;}
   .content .gallery-thumbs .swiper-slide .box div .en_name:nth-child(2) {margin-top: -9px;}
   .content .gallery-thumbs .swiper-slide .box div .ch_name {font-size: 20px;margin-top: 8px;}
   .content .gallery-thumbs .swiper-slide .box ul li {line-height: 30px;font-size: 12px;color: rgba(65, 33, 15, .7);padding-left: 15px;text-align: left;position: relative;}
   .content .gallery-thumbs .swiper-slide .box ul li::before {content: "";width: 6px;height: 6px;border-radius: 50%;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#2c5961, #2c5961);background-blend-mode: normal, normal;position: absolute;position: absolute;top: 11px;left: 0;}
   .content .gallery-thumbs .swiper-slide .box .num {font-size: 20px;font-weight: bold;color: rgba(65, 33, 15, .1);position: absolute;bottom: 15px;}
}

@media (min-width: 1100px) {
   #main .banner {position: relative;}
   #main .banner img {width: 100%;height: 100%;}
   #main .banner .txt {color: #FFF;position: absolute;top: 30%;left: 5%;}
   #main .banner .txt span {font-family: "Gotham Bold";display: block;font-size: 4.2vw;}
   #main .banner .txt span:nth-child(2) {font-size: 3.6vw;letter-spacing: 3px;margin-top: -1vw;}
   #main .banner .breadcrumb {background-color: initial;padding: 0;margin: 0;position: absolute;bottom: 100px;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 .banner .tabs {width: 90%;height: 80px;background-color: rgba(255, 255, 255, .91);position: absolute;bottom: 0;left: 5%;}
   #main .banner .tabs ul {width: 100%;display: flex;}
   #main .banner .tabs ul li {width: 25%;height: 80px;line-height: 80px;display: inline-block;text-align: center;position: relative;}
   #main .banner .tabs ul li::before {content: "|";color: #D4CDCA;position: absolute;left: 0;}
   #main .banner .tabs ul li:nth-child(1)::before {content: "";}
   #main .banner .tabs ul li a {color: #41210f;height: 80px;display: inline-block;}
   #main .tabs ul li.active a {color: #01DD62;position: relative;}
   #main .tabs ul li.active a::after {content: "";width: 100%;height: 2px;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#ff8400, #ff8400);background-blend-mode: normal, normal;background-repeat:no-repeat;background-size:100% 100%;position: absolute;left: 0;bottom: 0;}

   #tabs-container .swiperList .title {margin: 50px 5% 0;}
   #tabs-container .swiperList .title .name {font-size: 30px;letter-spacing: 2px;text-align: center;color: #41210f;}
   #tabs-container .swiperList .title .synopsis {font-size: 13px;text-align: center;color: rgba(65, 33, 15, .7);margin-top: 30px;line-height: 24px;}
   .content {background-color: #F9F9F9;padding: 30px 50px 60px;margin-top: 60px;}
   .content .gallery-top {padding: 0 5%;}
   .content .gallery-top .swiper-slide {width: 110px !important;text-align: center;cursor: pointer;pointer-events: auto !important;}
   .content .gallery-top .swiper-slide img {width: 50px;height: 50px;}
   .content .gallery-top .swiper-slide p {font-size: 13px;font-weight: bold;color: #41210f;margin: 15px 0 0;}   
   .content .gallery-top .swiper-slide i {display: none;width: 15px;color: #01DD62;transform: rotate(90deg);font-size: 17px;margin: 0 auto;}   
   .content .gallery-top .swiper-slide-active img {width: 70px;height: 70px;}
   .content .gallery-top .swiper-slide-active p {font-size: 16px;}
   .content .gallery-top .swiper-slide-active i {display: block;}
   .content .gallery-thumbs {margin: 20px 5% 0;}
   .content .gallery-thumbs .swiper-slide {cursor: pointer;}
   .content .gallery-thumbs .swiper-slide::after {content: "";width: 100%;height: 7px;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#ffffff, #ffffff);background-blend-mode: normal, normal;position: absolute;bottom: 0;left: 0;}
   .content .gallery-thumbs .swiper-slide .img {overflow: hidden;}
   .content .gallery-thumbs .swiper-slide .img img {width: 100%;transition: all .5s;}
   .content .gallery-thumbs .swiper-slide:hover .img img {transform: scale(1.1);}
   .content .gallery-thumbs .swiper-slide .box {padding: 40px;background-color: #FFF;display: flex;}
   .content .gallery-thumbs .swiper-slide .box div {width: 35%;}
   .content .gallery-thumbs .swiper-slide .box div .en_name {color: #41210f;font-size: 25px;font-weight: bold;margin: 0;}
   .content .gallery-thumbs .swiper-slide .box div .en_name:nth-child(2) {margin-top: -9px;}
   .content .gallery-thumbs .swiper-slide .box div .ch_name {font-size: 20px;margin-top: 8px;}
   .content .gallery-thumbs .swiper-slide .box ul li {line-height: 30px;font-size: 12px;color: rgba(65, 33, 15, .7);padding-left: 15px;text-align: left;position: relative;}
   .content .gallery-thumbs .swiper-slide .box ul li::before {content: "";width: 6px;height: 6px;border-radius: 50%;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#2c5961, #2c5961);background-blend-mode: normal, normal;position: absolute;position: absolute;top: 11px;left: 0;}
   .content .gallery-thumbs .swiper-slide .box .num {font-size: 20px;font-weight: bold;color: rgba(65, 33, 15, .1);position: absolute;bottom: 15px;}
}