@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-around;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;}

   #main .articleContent {margin: 50px 5%;}
   #main .articleContent .date {color: #41210f;font-size: 13px;}
   #main .articleContent .title {color: #41210f;font-size: 17px;font-weight: bold;letter-spacing: 1px;}
   #main .articleContent .line {width: 40px;height: 4px;display: block;margin-top: 20px;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#c5b5bd, #c5b5bd);background-blend-mode: normal, normal;}
   #main .articleContent .content {margin-top: 20px;line-height: 25px;}
   #main .articleContent .content img {max-width: 100%;height: auto !important;}
}

@media (min-width: 769px) and (max-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;justify-content: center;}
   #main .banner .tabs ul li {width: 20%;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: 3px;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 .articleContent {margin: 50px 5%;}
   #main .articleContent .date {color: #41210f;font-size: 13px;}
   #main .articleContent .title {color: #41210f;font-size: 28px;letter-spacing: 1px;}
   #main .articleContent .line {width: 40px;height: 4px;display: block;margin-top: 20px;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#c5b5bd, #c5b5bd);background-blend-mode: normal, normal;}
   #main .articleContent .content {margin-top: 20px;line-height: 25px;}
}

@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;justify-content: center;}
   #main .banner .tabs ul li {width: 20%;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: 3px;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 .articleContent {margin: 50px 5%;}
   #main .articleContent .date {color: #41210f;font-size: 13px;}
   #main .articleContent .title {color: #41210f;font-size: 28px;letter-spacing: 1px;}
   #main .articleContent .line {width: 40px;height: 4px;display: block;margin-top: 20px;background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#c5b5bd, #c5b5bd);background-blend-mode: normal, normal;}
   #main .articleContent .content {margin-top: 20px;line-height: 25px;}
}