@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Lora);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit
}
tr, th, td {
   margin: 0;
   padding: 0;
   font-size: 100%;
   font: inherit
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
   display: block
}
body {
   line-height: 1
}
blockquote, q {
   quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
   content: '';
   content: none
}
main[role="main"], section, article, .editorBox, .quick_link, .quick_link .quickBox, .page, header, .headerBox, footer, .footerBox, .productBox, .activitypage .activContent, .activitypage .activContent .acticBox, .formBox, .twoImg .frameImg, .threeImg .frameImg, .combatContent h2, .combatContent .comb1, .combatContent .comb1 .contrast, .outputList, .fbList {
   zoom: 1
}
main[role="main"]:before, section:before, article:before, .editorBox:before, .quick_link:before, .quick_link .quickBox:before, .page:before, header:before, .headerBox:before, footer:before, .footerBox:before, .productBox:before, .activitypage .activContent:before, .activitypage .activContent .acticBox:before, .formBox:before, .twoImg .frameImg:before, .threeImg .frameImg:before, .combatContent h2:before, .combatContent .comb1:before, .combatContent .comb1 .contrast:before, .outputList:before, .fbList:before, main[role="main"]:after, section:after, article:after, .editorBox:after, .quick_link:after, .quick_link .quickBox:after, .page:after, header:after, .headerBox:after, footer:after, .footerBox:after, .productBox:after, .activitypage .activContent:after, .activitypage .activContent .acticBox:after, .formBox:after, .twoImg .frameImg:after, .threeImg .frameImg:after, .combatContent h2:after, .combatContent .comb1:after, .combatContent .comb1 .contrast:after, .outputList:after, .fbList:after {
   content: "";
   display: table;
   height: 0;
   overflow: hidden
}
main[role="main"]:after, section:after, article:after, .editorBox:after, .quick_link:after, .quick_link .quickBox:after, .page:after, header:after, .headerBox:after, footer:after, .footerBox:after, .productBox:after, .activitypage .activContent:after, .activitypage .activContent .acticBox:after, .formBox:after, .twoImg .frameImg:after, .threeImg .frameImg:after, .combatContent h2:after, .combatContent .comb1:after, .combatContent .comb1 .contrast:after, .outputList:after, .fbList:after {
   clear: both
}
a, a:hover {
   transition: 0.4s
}
body {
   position: relative;
   margin: 0 auto;
   width: 100%;
   height: 100%;
   min-height: 100%;
   font-family: "Noto Sans TC", Arial, Verdana, sans-serif;
   line-height: 1.4rem;
   color: #000;
   font-size: 1rem;
   font-weight: 300;
   overflow: auto
}
html img {
   max-width: 100%
}
img {
   vertical-align: middle;
   max-width: 100%
}
*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box
}
.jqimgFill {
   position: relative;
   overflow: hidden;
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 100%;
   display: inline-block;
   transition: opacity .4s ease-in-out, transform .4s ease-in-out
}
.jqimgFill img, .jqimgFill-tc img {
   left: 0;
   top: 0;
   margin: 0;
   display: block;
   width: auto;
   height: auto;
   min-width: 100%;
   min-height: 100%;
   max-height: none;
   max-width: none;
   transition: opacity .4s ease-in-out, transform .4s ease-in-out
}
a[href^="tel"] {
   color: inherit;
   text-decoration: none
}
a:hover {
   opacity: 0.7
}
#wrapper {
   position: relative;
   margin: 0 auto;
   width: 100%;
   height: 100%;
   min-height: 100%;
   min-width: 320px !important;
   overflow: hidden;
   transition: 0.4s;
   left: 0
}
main[role="main"] {
   width: 100%;
   position: relative;
   z-index: 0
}
section {
   position: relative;
   width: 100%;
   display: block
}
article {
   width: 90%;
   max-width: 1280px;
   margin: 0 auto;
   margin-bottom: 106px;
   padding: 0 0
}
article li {
   list-style: none
}
.editorBox {
   font-size: 1rem;
   padding: 0px 0px 20px 0px;
   margin-top: 20px;
   line-height: 30px;
   word-break: break-all;
   font-weight: 400
}
@media screen and (max-width: 768px) {
   .editorBox img {
      width: auto !important;
      height: auto !important
   }
}
.quick_link {
   width: 100%;
   padding-top: 51px;
   background: #fff
}
.quick_link .quickBox {
   width: 90%;
   max-width: 940px;
   margin: 0 auto
}
.quick_link .quickBox ul {
   float: left;
   margin-right: 90px
}
.quick_link .quickBox ul:last-child {
   margin-right: 0
}
.quick_link .quickBox ul h4 {
   margin-bottom: 16px;
   padding-left: 13px
}
.quick_link .quickBox li {
   list-style: none;
   margin-bottom: 16px
}
.quick_link .quickBox li h4 a {
   color: #000
}
.quick_link .quickBox li a {
   text-decoration: none;
   color: #888
}
.quick_link .quickBox li a:before {
   content: '';
   display: inline-block;
   width: 16px;
   height: 14px;
   position: relative;
   top: 0px;
   left: -13px;
   opacity: 0;
   background: url(../img/arrw.png) top left no-repeat;
   transition: 0.4s
}
.quick_link .quickBox li a:hover {
   color: #94942a
}
.quick_link .quickBox li a:hover:before {
   opacity: 1;
   left: -5px;
   transition: 0.4s
}
.path {
   font-size: 0.875rem;
   width: 100%;
   clear: both;
   margin: 8px 0 31px 0;
   color: #6abbde
}
.path a {
   color: #6e6e6e;
   display: inline-block;
   text-decoration: none
}
.path a:hover {
   color: #6abbde
}
.path a:after {
   color: #6e6e6e;
   content: '＞';
   display: inline-block;
   vertical-align: top;
   margin: 0 4px
}
.path a:nth-child(1) {
   padding-left: 25px;
   background: url(../img/home_icon.png) left center no-repeat
}
.moreBtn {
   width: 100%;
   border-top: 1px solid #6abbde;
   padding-top: 47px;
   margin-top: 35px;
   text-align: center
}
.moreBtn a {
   margin: 0 auto;
   font-size: 1.438rem;
   width: 210px;
   height: 51px;
   line-height: 51px;
   display: block;
   border: 1px solid #6abbde;
   color: #6abbde;
   text-decoration: none
}
.moreBtn a:hover {
   color: #fff;
   background: #6abbde
}
.page {
   clear: both;
   text-align: center
}
.page dt {
   width: 36px;
   height: 36px;
   line-height: 36px;
   text-align: center
}
.page dt a {
   width: 100%;
   display: block;
   color: #3c3c3c;
   text-decoration: none
}
.page .ltbn {
   margin-right: 10px
}
.page .rtbn {
   margin-left: 10px
}
.page dt.nopage a {
   color: #C9C9C9
}
.page dd {
   width: 30px;
   height: 30px;
   line-height: 36px;
   text-align: center;
   -webkit-border-radius: 99em;
   -moz-border-radius: 99em;
   border-radius: 99em
}
.page dd a {
   width: 100%;
   display: block;
   color: #3c3c3c;
   text-decoration: none
}
.page dd a.mark, .page dd a:hover {
   color: #ff7900
}
.page dt, .page dd {
   vertical-align: top;
   display: inline-block
}
.back_btn {
   margin-top: 36px;
   position: relative;
   left: 0;
   display: block;
   width: 72px;
   height: 16px;
   background: url(../img/back_btn.png) top left no-repeat;
   transition: 0.2s
}
.back_btn:hover {
   left: 4px;
   transition: 0.2s
}
.bannerImg .slick-dots li button:before {
   -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.19);
   -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.19);
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.19)
}
.newspage nav .navBox ul li:nth-child(1):before {
   width: 51%
}
.newspage nav .navBox ul li:nth-child(1) a .en {
   transition: 0.2s;
   opacity: 0;
   z-index: -1
}
.newspage nav .navBox ul li:nth-child(1) a .tw {
   transition: 0s;
   opacity: 1;
   z-index: 1
}
.aboutpage nav .navBox ul li:nth-child(2):before {
   width: 51%
}
.aboutpage nav .navBox ul li:nth-child(2) a .en {
   transition: 0.2s;
   opacity: 0;
   z-index: -1
}
.aboutpage nav .navBox ul li:nth-child(2) a .tw {
   transition: 0s;
   opacity: 1;
   z-index: 1
}
.originpage nav .navBox ul li:nth-child(3):before {
   width: 70%
}
.originpage nav .navBox ul li:nth-child(3) a .en {
   transition: 0.2s;
   opacity: 0;
   z-index: -1
}
.originpage nav .navBox ul li:nth-child(3) a .tw {
   transition: 0s;
   opacity: 1;
   z-index: 1
}
.coursepage nav .navBox ul li:nth-child(4):before {
   width: 51%
}
.coursepage nav .navBox ul li:nth-child(4) a .en {
   transition: 0.2s;
   opacity: 0;
   z-index: -1
}
.coursepage nav .navBox ul li:nth-child(4) a .tw {
   transition: 0s;
   opacity: 1;
   z-index: 1
}
.locationpage nav .navBox ul li:nth-child(5):before {
   width: 51%
}
.locationpage nav .navBox ul li:nth-child(5) a .en {
   transition: 0.2s;
   opacity: 0;
   z-index: -1
}
.locationpage nav .navBox ul li:nth-child(5) a .tw {
   transition: 0s;
   opacity: 1;
   z-index: 1
}
.contactspage nav .navBox ul li:nth-child(6):before {
   width: 51%
}
.contactspage nav .navBox ul li:nth-child(6) a .en {
   transition: 0.2s;
   opacity: 0;
   z-index: -1
}
.contactspage nav .navBox ul li:nth-child(6) a .tw {
   transition: 0s;
   opacity: 1;
   z-index: 1
}
header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 60px;
   padding: 7px 0 0 0;
   background: #fff;
   -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
   -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
   z-index: 11;
   font-family: "Noto Sans TC", Arial, Verdana, sans-serif;
   font-size: 1rem;
   z-index: 9
}
header .logo {
   float: left;
   display: block;
   text-indent: -10000px;
   width: 181px;
   height: 65px;
   background: url(../img/logo.png) top left no-repeat;
   margin-right: 45px
}
header .logo a {
   width: 100%;
   height: 100%;
   display: block
}
.headerBox {
   width: 100%;
   max-width: 1280px;
   margin: 0 auto
}
nav {
   float: right;
   transition: 0.4s;
   position: relative;
   margin-top: 18px
}
nav li {
   float: left;
   margin-right: 42px;
   list-style: none
}
nav li:last-child{
   margin-right: 0;
}
nav li a {
   text-decoration: none
}
nav li a:hover {
   color: #3c3c3c
}
footer {
   color: #fff;
   width: 100%
}
.footerBox {
   width: 100%;
   max-width: 1280px;
   margin: 0 auto
}
.footerBox .copyright {
   padding-top: 15px;
   float: left
}
.footerBox .sponsor {
   padding-top: 13px;
   float: right
}
.footerBox .sponsor a {
   float: left;
   display: block;
   padding-bottom: 13px;
   margin-right: 11px;
}
.footerBox .sponsor a:last-child {
   margin: 0;
}
.indexpage nav li:nth-child(1) a {
   color: #3c3c3c
}
.activitypage nav li:nth-child(2) a {
   color: #3c3c3c
}
.applypage nav li:nth-child(3) a {
   color: #3c3c3c
}
.votepage nav li:nth-child(4) a {
   color: #3c3c3c
}
.bannerImg {
   margin-top: 60px
}
.bannerImg .slick-prev a, .bannerImg .slick-next a {
   width: 100%;
   display: block
}
.bannerImg .slick-prev {
   width: 18px;
   height: 47px;
   background: url(../img/arrw_1.png) top left no-repeat;
   left: 20px
}
.bannerImg .slick-next {
   width: 18px;
   height: 47px;
   background: url(../img/arrw_1.png) -18px 0 no-repeat;
   right: 20px
}
.bannerImg .slick-dots li {
   background: none;
   width: auto;
   height: auto;
   border: none;
   margin: 0 8px
}
.bannerImg .slick-dots {
   margin: -34px 0 0 0;
   text-align: center
}
.bannerImg .slick-dots li.slick-active button:before {
   background: #fff !important;
   -webkit-box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.31);
   -moz-box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.31);
   box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.31)
}
.bannerImg .slick-dots li button:before {
   border: none;
   width: 12px !important;
   height: 12px !important
}
.menu-icon {
   display: none;
   position: absolute;
   top: 67%;
   left: 1.5em;
   z-index: 100;
   width: 45px;
   height: 45px;
   margin-top: -30px;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   z-index: 0
}
.menu-icon-block {
   position: relative;
   height: 100%;
   margin: auto
}
.menu-icon-block i {
   position: absolute;
   border-radius: 99em;
   display: block;
   margin: auto;
   width: 100%;
   height: 2px;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}
.menu-icon-block i.b1 {
   top: 0%
}
.menu-icon-block i.b2 {
   top: 33%
}
.menu-icon-block i.b3 {
   top: 68%
}
.mclose {
   display: none;
   position: absolute;
   top: 24px;
   left: 1.4em;
   z-index: 100;
   width: 45px;
   height: 45px;
   cursor: pointer
}
.mclose .b1 {
   top: 49% !important;
   transform: rotate(45deg)
}
.mclose .b3 {
   width: 100%;
   top: 49% !important;
   transform: rotate(-45deg)
}
.mobileMenu {
   background: rgba(128, 195, 28, 0.95);
   position: fixed;
   top: 0;
   left: -40%;
   width: 40%;
   height: 100%;
   transition: 0.4s;
   z-index: 9999;
   overflow: auto;
   -webkit-box-shadow: 0 1px 5px 6px rgba(0, 0, 0, 0.08);
   -moz-box-shadow: 0 1px 5px 6px rgba(0, 0, 0, 0.08);
   box-shadow: 0 1px 5px 6px rgba(0, 0, 0, 0.08)
}
.mobileMenu.on {
   left: 0
}
.directions {
   padding: 70px 0 48px 0;
   text-align: center
}
.directions h2 {
   font-size: 36px;
   margin-bottom: 46px;
   font-weight: bold;
}
.directions .directionsTxt {
   line-height: 30px;
   font-weight: 400
}
.productBox {
   width: 100%;
   max-width: 1280px;
   margin: 0 auto
}
.productBox li {
   float: left;
   width: 32%;
   margin-right: 1%
}
.productBox li:nth-child(3) {
   margin-right: 0
}
.productImg {
   margin-bottom: 40px
}
.productBtn {
   display: block;
   width: 90%;
   height: 58px;
   margin-top: 0 auto;
   background: #ff7900;
   text-align: center;
   line-height: 58px;
   color: #fff;
   text-decoration: none;
   font-size: 22px;
}
.activitypage article {
   width: 100%;
   max-width: 100%
}
.activitypage .activContent {
   width: 100%;
/*   background: #fff*/
}
.activitypage .activContent .acticBox {
   max-width: 1280px;
   margin: 0 auto
}
.activitypage .actList {
   width: 50%;
   text-align: center;
   float: right;
   font-size: 1rem;
   padding-bottom: 80px
}
.activitypage .actList h2 {
   padding: 67px 0 41px 0;
   font-weight: bold;
   font-size: 30px
}
.activitypage .actList .actTxtColor {
   padding: 59px 0 40px 0;
   line-height: 30px
}
.activitypage .actList .lineColor {
   width: 100%;
   max-width: 530px;
   margin: 0 auto
}
.activitypage .actList .actBtn {
   display: block;
   width: 90%;
   max-width: 360px;
   height: 58px;
   margin: 0 auto;
   text-align: center;
   line-height: 58px;
   color: #fff;
   text-decoration: none
}
.applyBox {
   background: #fff
}
.applyTxt {
   padding: 66px 0 0 0;
   text-align: center;
   margin-bottom: 76px
}
.applyColor {
   font-size: 36px;
   font-weight: bold;
   display: block;
   margin-bottom: 36px;
   line-height: 40px;
}
.applyTxtColor {
   font-size: 1rem;
   line-height: 30px;
   padding-bottom: 50px
}
.applystep1, .applystep2 {
   width: 100%;
   max-width: 465px;
   margin: 0 auto 65px auto;
   text-align: center
}
.caption {
   font-size: 26px;
   line-height: 36px;
   color: #3c3c3c
}
.formBox {
   width: 100%;
   margin-top: 20px;
   margin-bottom: 30px
}
.formBox li {
   list-style: none;
   margin-bottom: 24px
}
.formBox h4, .formBox input, .formBox .item1, .formBox .item2, .formBox .item3, .formBox #twzipcode {
   display: inline-block;
   vertical-align: middle
}
.formBox h4 {
    width: 50px;
    font-size: 23px;
   color: #3c3c3c;
   margin-right: 7px
}
.formBox input {
   transition:0.2s;
   padding-left: 10px;
   font-size: 23px;
   width: 340px;
   height: 36px;
   background: #ebebeb;
   border: none;
   outline: 0;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif, "微軟正黑體"
}
.formBox input:focus{
   transition:0.2s;
   background: #fff;
   border: 1px solid #a0a0a0 
}

.formBox #twzipcode {
   width: 340px
}
.formBox .item1 input {
   padding-left: 10px;
   width: 67px;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif, "微軟正黑體"
}
.formBox .item2, .formBox .item3 {
   width: 124px;
   background: #ebebeb
}
.formBox .item2 select, .formBox .item3 select {
   outline: 0;
   padding-left: 10px;
   width: 100%;
   height: 36px;
   border: none;
   background: #ebebeb;
   color: #3c3c3c;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif, "微軟正黑體"
}
.formBox .item2 select, .formBox .item3 select {
   font-size: 22px;
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   background: url("../img/sele_btn.png") no-repeat scroll right center transparent;
   padding-right: 14px
}
.formBox .item2 select::-ms-expand, .formBox .item3 select::-ms-expand {
   display: none
}
.formBox .item2 {
   margin: 0 8px
}
.formBox .item4 {
   display: block;
   margin: 11px 0 0 55px
}
.formBox .item4 input {
   padding-left: 10px;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif, "微軟正黑體"
}
.applystep2 .formBox h4 {
   width: 76px
}
.fileBtn {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   background: #d4d4d4;
   color: #fff;
   font-size: 18px;
   width: 112px;
   height: 38px;
   line-height: 38px;
   text-align: center
}
.fileBtn:hover {
   background: #80ba27
}
.fileBtn input {
   cursor: pointer;
   opacity: 0;
   filter: alpha(opacity=0);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0
}
.fileBox {
   min-height: 1px;
   line-height: 160px;
   text-align: center;
   position: relative
}
.cover-wrap {
   display: none;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.4);
   z-index: 999;
   text-align: center
}
.cover-box {
   width: 900px;
   height: 509px;
   margin: 100px auto;
   background-color: #FFFFFF;
   overflow: hidden;
   border-radius: 4px
}
#view {
   width: 214px;
   height: 160.5px
}
#clipArea {
   margin: 10px;
   height: 420px
}
.clipAreaBox {
   height: 56px;
   line-height: 36px;
   text-align: center;
   padding-top: 8px
}

#clipArea2 {
   margin: 10px;
   height: 420px
}
.clipAreaBox2 {
   height: 56px;
   line-height: 36px;
   text-align: center;
   padding-top: 8px
}

#clipBtn {
   font-size: 18px;
   border: none;
   width: 120px;
   height: 36px;
   border-radius: 4px;
   background-color: #80c31c;
   color: #FFFFFF;
   font-size: 14px;
   text-align: center;
   line-height: 36px;
   outline: none
}

#clipBtn2 {
   font-size: 18px;
   border: none;
   width: 120px;
   height: 36px;
   border-radius: 4px;
   background-color: #80c31c;
   color: #FFFFFF;
   font-size: 14px;
   text-align: center;
   line-height: 36px;
   outline: none
}

.number {
   display: inline-block;
   vertical-align: middle;
   width: 200px;
   color: #3c3c3c;
   font-size: 1rem;
   text-align: left;
   margin-left: 24px
}
.composite {
   position: relative;
   width: 360px;
   height: 346px;
   margin: 0 auto 158px auto
}
.composite .frame {
   position: absolute;
   top: 0;
   left: 0
}
.composite .confirmBtn {
   display: block;
   width: 100%;
   height: 58px;
   line-height: 58px;
   background: #80c31c;
   color: #fff;
   text-align: center;
   font-size: 22px;
   margin-top: 58px;
   text-decoration: none
}
.frameImg .p1 {
   height: 346px
}
.twoImg .frameImg {
   clear: both
}
// .twoImg .p1, .twoImg .p2 {
//    float: left;
//    width: 50%;
//    height: 346px
// }
.twoImg .p1, .twoImg .p2 {
   float: left;
   width: 100%;
   height: 346px
}
.twoImg .p1 {
   float: none;
   margin: 0 auto
}
.threeImg .frameImg {
   clear: both
}
.threeImg .p1, .threeImg .p2, .threeImg .p3 {
   width: 100%
}
.threeImg .p1, .threeImg .right {
   width: 50%;
   float: left;
   height: 346px
}
.threeImg .p2, .threeImg .p3 {
   height: 173px
}
.popupBox, .combatPopupBox, .winningPopupBox, .fbPopupBox {
   overflow: auto;
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: rgba(0, 0, 0, 0.6)
}
.combatContent {
   text-align: center;
   width: 100%;
   max-width: 1000px;
   position: absolute;
   top: 18px;
   left: 50%;
   transform: translateX(-50%);
   padding: 83px 80px;
   background: #FFF;
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.26);
   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.26);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.26)
}
.combatContent h2 {
   display: inline-block;
   vertical-align: top;
   font-size: 36px;
   color: #575757;
   font-weight: bold;
   padding-left: 45px;
   line-height: 36px;
   margin-bottom: 47px
}
.combatContent h2.bat_1 {
   background: url(../img/bat_1.jpg) top left no-repeat
}
.combatContent h2.bat_2 {
   background: url(../img/bat_2.jpg) top left no-repeat
}
.combatContent h2.bat_3 {
   background: url(../img/bat_3.jpg) top left no-repeat
}
.combatContent .comb1 {
   width: 100%;
   clear: both;
   text-align: left;
   margin-bottom: 72px
}
.combatContent .comb1 .comImg {
   width: 50%;
   float: left;
   max-width: 602px
}
.combatContent .comb1 .conteaList {
   float: right;
   width: 50%
}
.combatContent .comb1 .contrast {
   width: 100%;
   margin-bottom: 30px
}
.combatContent .comb1 .contrast h3 {
   font-size: 18px;
   color: #3C3C3C;
   display: block;
   margin-bottom: 9px
}
.combatContent .comb1 .contrast .chart {
   float: left;
   width: 100%;
   max-width: 300px;
   height: 18px;
   overflow: hidden;
   background: #e6e6e6
}
.combatContent .comb1 .contrast .chart .figure {
   font-size: 14px;
   background: #B4B4B4;
   height: 18px;
   line-height: 18px;
   color: #FFF;
   padding-left: 5px
}
.combatContent .comb1 .contrast .numbervotes {
   margin-left: 10px;
   float: left;
   color: #575757;
   position: relative;
   top: -6px;
   font-size: 14px
}
.combatContent .comb1 .contrast .numbervotes b {
   display: inline-block;
   font-weight: normal;
   font-size: 40px;
   margin-right: 7px
}
.popupContent {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 460px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #fff;
   text-align: center;
   padding-top: 48px;
   letter-spacing: 1px
}
.popupContent h2 {
   font-size: 30px;
   font-weight: bold;
   display: block;
   margin-bottom: 42px;
   color: #575757
}
.popupContent .popTxt {
   font-size: 20px;
   line-height: 30px
}
.winningContent, .fbContent {
   padding: 83px 80px;
   position: relative;
   width: 620px;
   background: #fff;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center
}
.winningContent h2, .fbContent h2 {
   font-size: 30px;
   font-weight: bold;
   line-height: 30px;
   color: #575757;
   display: block;
   margin-bottom: 38px
}
.winningContent p, .fbContent p {
   font-size: 20px;
   color: #3c3c3c
}
.winningContent .formBox, .fbContent .formBox {
   margin-bottom: 54px
}
.winningContent .confirmBtn, .fbContent .confirmBtn {
   width: 100%;
   max-width: 360px;
   height: 58px;
   line-height: 58px;
   background: #b4b4b4;
   text-align: center;
   color: #fff;
   font-size: 22px;
   display: inline-block;
   text-decoration: none
}
.fbContent {
   width: 460px;
   padding: 83px 45px
}
.fbContent p {
   display: block;
   margin-bottom: 20px
}
.ribtn {
   width: 100%;
   margin-bottom: 47px;
   text-align: right
}
.ribtn a {
   display: inline-block;
   vertical-align: top;
   width: 112px;
   height: 36px;
   line-height: 36px;
   color: #fff;
   text-align: center;
   font-size: 18px;
   text-decoration: none;
   -webkit-border-radius: 99em;
   -moz-border-radius: 99em;
   border-radius: 99em
}
.ribtn a:nth-child(2) {
   margin-left: 15px
}
.votepage .applyTxt {
   margin-bottom: 20px
}
.outputList {
   width: 100%
}
.outputList li {
   width: 33%;
   max-width: 400px;
   float: left;
   padding: 15px;
   margin-right: 38px;
   margin-bottom: 50px;
   background: #fff;
   -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.26);
   -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.26);
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.26);
   color: #3c3c3c
}
.outputList li:nth-child(3n) {
   margin-right: 0
}
.outputList li a {
   color: #3c3c3c
}
.popupBox .popupContent {
   padding-bottom: 48px
}
.analysis {
   width: 100%;
   float: left
}
.analysis .stickers {
   width: 70%;
   float: left
}
.analysis .shot {
   float: left;
   width: 70px;
   height: 70px;
   overflow: hidden;
   -webkit-border-radius: 99em;
   -moz-border-radius: 99em;
   border-radius: 99em
}
.analysis .ranking {
   float: left;
   width: 102px;
   margin-left: 10px;
   padding-top: 10px
}
.analysis .ranking b {
   font-size: 16px;
   display: block;
   margin-bottom: 4px
}
.analysis .ranking h4 {
   font-size: 18px;
   width: 207%;
}
.oupImg {
   margin-bottom: 24px;
   text-align: center;
   cursor: pointer
}
.power {
   width: 30%;
   float: right;
   text-align: right
}
.power a {
   padding-left: 20px;
   color: #ff7900;
   text-decoration: none;
   background: url(../img/star.jpg) 0px 5px no-repeat
}
.votes {
   text-align: center;
   width: 100%;
   clear: both;
   padding-top: 10px
}
.votes b {
   font-weight: normal;
   font-size: 1rem;
   color: #3c3c3c;
   display: block;
   margin-bottom: 5px
}
.votes span {
   font-size: 30px;
   color: #80ba27
}
.votesBtn {
   clear: both;
   width: 100%;
   margin-top: 28px
}
.votesBtn a {
   display: block;
   width: 100%;
   height: 58px;
   line-height: 58px;
   color: #fff !important;
   text-align: center;
   font-size: 22px;
   text-decoration: none;
   margin-bottom: 10px
}
.votesBtn a:hover {
   opacity: 0.7
}
.votesBtn a:nth-child(1) {
   background: #ff7900
}
.votesBtn a:nth-child(2) {
   background: #80c31c
}
.comb1 .votesBtn a {
   width: 80%
}
.fbList {
   margin: 0 auto 70px auto;
   padding: 0 7%;
   text-align: center;
}
.fbList li {
   display: inline-block;
   list-style: none;
   margin-right: 20px;
   margin-bottom: 20px;
   width: 14%;
   height: 87px;
   overflow: hidden;
}

.nonumber {
   text-align: center;
   font-size: 40px;
   line-height: 40px;
   color: #575757;
   font-weight: bold;
   font-weight: 400;
   margin-bottom: 40px
}
.row {
   width: 100%;
   height: 16px;
   max-width: 600px;
   margin: 0 auto 40px auto;
   background: #e6e6e6;
   overflow: hidden
}
.row div {
   background: #b4b4b4;
   height: 16px
}
.close {
   position: absolute;
   top: 0;
   right: -30px;
   display: block;
   width: 19px;
   height: 19px;
   background: url(../img/closebtn.png) top left no-repeat
}
@media screen and (max-width: 1435px) {
   .outputList li {
      width: 31%
   }
}
@media screen and (max-width: 1366px) {
   .winningContent, .fbContent {
      top: 14px;
      transform: translateX(-50%)
   }
}
@media screen and (max-width: 1280px) {
   .combatContent .comb1 .contrast .chart {
      max-width: 250px
   }
}
@media screen and (max-width: 1280px) and (max-width: 1196px) {
   .combatContent .comb1 .contrast .chart {
      max-width: 200px
   }
}
@media screen and (max-width: 1280px) and (max-width: 1070px) {
   .combatContent .comb1 .contrast .chart {
      max-width: 150px
   }
}
@media screen and (max-width: 1280px) and (max-width: 940px) {
   .combatContent .comb1 .contrast .chart {
      max-width: 120px
   }
}
@media screen and (max-width: 1280px) {
   .combatContent .comb1 .comImg {
      width: 50%
   }
   .combatContent .comb1 .conteaList {
      width: 50%
   }
   .combatContent {
      width: 90%
   }
   .fbList {
      width: 100%;
      max-width: 740px
   }
}
@media screen and (max-width: 1268px) {
   .outputList li {
      width: 29%
   }
}
@media screen and (max-width: 1208px) {
   .analysis .ranking h4 {
      width: 170%;
   }
}
@media screen and (max-width: 933px) {
   .activitypage .actList {
      width: 48%
   }
   .activitypage .activContent .acticBox{
          padding: 0 8px;
   }

   .activitypage .actList:nth-child(2) {
     float: left;
   }
   .activitypage .actList h2 {
      font-size: 23px;
      padding: 67px 0 17px 0;
      line-height: 31px
   }
   .activitypage .actList .actTxtColor {
      padding: 29px 0 40px 0
   }
}
@media screen and (max-width: 895px) {
   nav {
      width: 100%;
      float: none;
      display: block
   }
   nav li {
      float: none;
      width: 100%;
      display: block;
      margin-bottom: 30px;
      font-weight: 400
   }
   nav li a {
      width: 100%;
      display: block
   }
   .mclose {
      top: -72px;
      left: 0em
   }
   .mobileMenu {
      padding: 77px 0 0 26px;
      font-size: 20px
   }
   .menu-icon, .mclose {
      display: block
   }
   .pcMenu {
      display: none
   }
   header .logo {
      float: none;
      margin: 3px auto 0 auto
   }
   .outputList li {
      width: 46%
   }
   .outputList li:nth-child(3n) {
      margin-right: 38px
   }
   .outputList li:nth-child(2n) {
      margin-right: 0
   }
   .analysis .stickers {
      width: 63%
   }
   .power {
      width: 37%
   }
   .productBtn{
      font-size: 21px;
   }
   .productBtn, .votesBtn a, .activitypage .actList .actBtn {
      height: 45px;
      line-height: 45px
   }
   header {
      height: 85px
   }
   .bannerImg {
      margin-top: 85px
   }
   .combatContent, .winningContent, .fbContent, .popupContent {
      width: 86%;
      padding: 30px
   }
   .combatContent .comb1 .comImg, .winningContent .comb1 .comImg, .fbContent .comb1 .comImg, .popupContent .comb1 .comImg {
      width: 100%;
      float: none;
      text-align: center;
      max-width: 100%
   }
   .combatContent .comb1 .conteaList, .winningContent .comb1 .conteaList, .fbContent .comb1 .conteaList, .popupContent .comb1 .conteaList {
      width: 76%;
      float: none;
      margin-left: 157px;
      margin-top: 30px
   }
   .combatContent .comb1 .contrast .chart, .winningContent .comb1 .contrast .chart, .fbContent .comb1 .contrast .chart, .popupContent .comb1 .contrast .chart {
      max-width: 240px
   }
   .fbList {
      width: 100%
   }
   .footerBox {
      padding: 0 30px
   }
   .footerBox .copyright {
      width: 100%;
      float: none;
      display: block
   }
   .footerBox .sponsor {
      width: 100%;
      display: block;
      float: none
   }
   .footerBox .sponsor a {
      float: none;
      display: inline-block;
      vertical-align: top
   }
   .cover-box {
      width: 90%
   }
   .votesBtn {
      width: 91%
   }
   .winningContent, .fbContent {
      top: 50%;
      transform: translate(-50%, -50%)
   }
}
@media screen and (max-width: 800px) {
   .editorBox iframe{
      width: 100%;
      height: 315px;
   }
   .analysis .ranking h4 {
      width: 207%;
   }
   .bannerImg .slick-dots,.bannerImg .slick-next,.bannerImg .slick-prev{
      display: none !important;
   }
   nav li {
      float: none;
      width: 100%;
      display: block;
      margin-bottom: 47px;
      font-size: 25px
   }
   nav ul {
      padding-top: 22px
   }
   .productBox {
      width: 95%
   }
   .winningContent .formBox {
      width: 95%;
      margin-bottom: 26px
   }
   .winningContent .formBox h4 {
      width: 100%;
      display: block;
      text-align: left;
      margin-bottom: 10px
   }
   .winningContent .formBox input {
      width: 100%
   }
   .winningContent .formBox .item2, .winningContent .formBox .item3 {
      width: 166px
   }
   .directions h2 {
      line-height: 32px
   }
   .analysis .ranking {
      width: 68px
   }
   .applyBox li {
      text-align: left
   }
   .applyBox li h4 {
      display: block;
      margin-bottom: 10px
   }
   .applyBox li input {
      width: 100%
   }
   .formBox .item1 input {
      width: 108px
   }
   .formBox h4{
      width: 100%;
   }
   .formBox #twzipcode {
      width: 100%
   }
   .formBox .item4 {
      display: block;
      margin: 11px 0 0 0
   }
   .formBox .item4 input {
      width: 100%
   }
   .applyColor {
      font-size: 36px
   }
   .footerBox .sponsor a {
      width: 30%
   }
   .activitypage .actList h2 {
      font-size: 20px
   }
   .activitypage .actList .actTxtColor {
      height: 225px;
   }
   .activitypage .actList .actTxtColor p{
      display: block;
       margin: 0 auto;
       width: 72%;
   }
   .applystep2 .formBox h4 {
      display: inline-block;
      vertical-align: -webkit-baseline-middle
   }
   .combatContent .comb1 .conteaList, .winningContent .comb1 .conteaList, .fbContent .comb1 .conteaList, .popupContent .comb1 .conteaList {
      margin-left: 60px
   }
   .votesBtn {
      width: 100%
   }
   .votesBtn a {
      width: 100%
   }
   .fbList li {
       width: 15%;
       height: 61px;
   }
}
.comPhoto {
   width: 360px;
   position: relative;
   margin: 0 auto
}
.comPhoto .frame {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 9
}
.twoImg .frameImg{
   width: 100%;
   display: none;
}
.twoImg .frameImg.active{
   display: flex;
}
.total-kilograms{
   width: 121px;
   height: 63px;
   position: absolute;
   top: 0px;
   left: 50%;
   transform: translateX(-50%);
   color: #52469a;
   font-size: 13px;
   border-radius: 0 0 100px 100px;
   background: #fff;
   border: 4px solid #52469a;
}
.total-kilograms b{
   display: block;
   transform: scale(0.7);
   position: relative;
   top: -2px;
   margin-bottom: -2px;
}
.total-kilograms span{
   font-size: 31px;
   color: #eb1617;
   font-weight: bold;
}
.total-kilograms small{
   transform: scale(0.8);
   display: inline-block;
   margin-left: -4px;
   color: #eb1617;
}

.beaf{
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   border: 3px solid #52469a;
   display: flex;
   font-size: 12px;
   background: #fff;
   padding: 0px 31px;
   height: 37px;
}

.before_content{
   border-right: 5px solid #52469a;
   /* padding: 0 7px; */
}
.after_content{
   /* padding: 0 7px; */

}
.before_content b,
.after_content b{
   position: relative;
   line-height: 1;
   display: block;
   color:  #52469a;
   transform: scale(0.7);
}
.before_content b{
   left: -34px;
   text-align: left;
}
.after_content b{
   padding-right: 0;
   text-align: right;
   left: 33px;
}

.before_content div,
.after_content div{
   color: #eb1617;
   font-size: 26px;
   position: relative;
   line-height: 1;
   font-weight: bold;
}
.before_content div{
   left: -13px;
}
.after_content div{
   left: 3px;
}

.before_content sub,
.after_content sub{
   transform: scale(0.35);
   display: inline-block;
   margin-left: 0;
   color: #eb1617;
   font-weight: normal;
   position: absolute;
   top: -1px;

}
.before_content sub{
   left: -6px;
}
.after_content sub{
   left: 22px;
}
.before_content span{
   position: relative;
   left: 14px;
   top: -6px;
}
.after_content span{
   position: relative;
   top: -6px;
}
.composite{
   height: auto;
}

#Img1,#Img2{
   background-color: rgb(218 218 218) !important;
}