body {
  color: #3d3d3d; }

#action-content {
  width: 80%;
  text-align: center; }
  @media screen and (max-width: 768px) {
    #action-content {
      width: 95%; } }
  #action-content .action-item-title {
    margin-bottom: 30px;
    width: 100%; }
  #action-content .action-item {
    margin-bottom: 30px;
    width: 100%; }
    @media screen and (max-width: 768px) {
      #action-content .action-item {
        width: 70%; } }

#share-done {
  width: 80%;
  text-align: center; }
  @media screen and (max-width: 768px) {
    #share-done {
      width: 95%; } }

#vote-done {
  width: 80%;
  text-align: center; }
  @media screen and (max-width: 768px) {
    #vote-done {
      width: 95%; } }
  #vote-done .vote-done-wording { 
    width: 70%;
    max-width: 656px; }

#thank {
  width: 80%; 
  text-align: center; }
  @media screen and (max-width: 768px) {
    #thank {
      width: 95%; } }
  #thank .wording2 {
    width: 50%;
    margin-top: 50px; }
    @media screen and (max-width: 768px) {
      #thank .wording2 {
        width: 95%; } }

.header {
  height: 80px;
  background-color: black;
  padding-top: 16px;
  text-align: center; position: relative; z-index: 999;}

.section1 {
  position: relative;
  background-color: #f3f3f2;
  padding: 0px; }
  .section1 .share-area {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    height: 70%; z-index: 998;}
    .section1 .share-area .title {
      height: 100%; }
    .section1 .share-area .share-btn-wrapper {
      position: absolute;
      bottom: 8%;
      left: 50%;
      transform: translateX(-50%);
      width: 100%; }
      .section1 .share-area .share-btn-wrapper .share-btn {
        width: 50%;
        float: left;
        margin-left: -20px;
        transform: scale(0.95);
        transition: transform .2s; }
        .section1 .share-area .share-btn-wrapper .share-btn:hover {
          transform: scale(1); }
      .section1 .share-area .share-btn-wrapper .vote-btn {
        width: 50%;
        float: right;
        margin-top: 4px;
        margin-right: -20px;
        transform: scale(0.95);
        transition: transform .2s; }
        .section1 .share-area .share-btn-wrapper .vote-btn:hover {
          transform: scale(1); }
      .section1 .share-area .share-btn-wrapper .vote-share-btn {
        position: absolute;
        left: 25%;
        transform: scale(0.95);
        bottom: 0px;
        width: 50%; 
		transition: transform .2s;}
		.section1 .share-area .share-btn-wrapper .vote-share-btn:hover {
          transform: scale(1); }
		@media screen and (max-width: 768px) {
		.cb-slideshow {
			background:#FFF;
			opacity : 0.6;
		}
		
      .section1 .share-area {
        width: 100%;
        height: auto;
        /*position: static;*/ top:10%;left:0;
		margin-bottom:20px;
        transform: translateY(0%); }
        .section1 .share-area .title {
          width: 100%;
          height: auto;
          margin-top: 30px;
          margin-bottom: 30px; }
        .section1 .share-area .share-btn-wrapper {
          bottom: -17%; }
          .section1 .share-area .share-btn-wrapper .share-btn {
            width: 60%;
            float: none;
            margin: auto;
            margin-bottom: 15px;
            display: block; }
          .section1 .share-area .share-btn-wrapper .vote-btn {
            width: 60%;
            float: none;
            margin-top: 0px;
            margin: auto;
            display: block; } 
			#share-area2{
			position: static;
			}
			#share-btn-wrapper2{
				bottom: 15%;
			}
		
	}
	

.section2 {
  background-color: #fff;
  height: auto;
  position: relative;
  padding: 0px; }
  .section2 img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1; }
  .section2 .video-mask {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }

.section3 {
  overflow: auto;
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative; background: #FFF;}
  @media screen and (max-width: 768px) {
    .section3 {
      padding-bottom: 85px; } }
  .section3 .teacher-info {
    text-align: right;
    width: 40%;
    float: left; }
    .section3 .teacher-info .teacher-title {
      margin-bottom: 15px; }
      @media screen and (max-width: 768px) {
        .section3 .teacher-info .teacher-title {
          margin-bottom: 25px;
          width: 100%;
          text-align: center; }
          .section3 .teacher-info .teacher-title img {
            width: 50%; } }
    .section3 .teacher-info .teacher-content {
      margin-bottom: 15px; }
      @media screen and (min-width: 768px) and (max-width: 850px) {
        .section3 .teacher-info .teacher-content {
          width: 100%; }
          .section3 .teacher-info .teacher-content img {
            width: 90%; } }
      @media screen and (max-width: 768px) {
        .section3 .teacher-info .teacher-content {
          margin-bottom: 35px;
          width: 100%;
          text-align: center; }
          .section3 .teacher-info .teacher-content img {
            width: 90%; } }
    .section3 .teacher-info .teacher-control div {
      display: inline-block; }
    @media screen and (max-width: 768px) {
      .section3 .teacher-info .teacher-control {
        position: absolute;
        bottom: 15px;
        width: 100%;
        text-align: center; }
        .section3 .teacher-info .teacher-control img {
          width: 90%; } }
    @media screen and (min-width: 768px) and (max-width: 1050px) {
      .section3 .teacher-info {
        width: 50%; } }
    @media screen and (max-width: 768px) {
      .section3 .teacher-info {
        width: 100%; } }
  .section3 .carousel-wrapper {
    width: 58%;
    float: right;
    padding-right: 2%; }
    @media screen and (min-width: 768px) and (max-width: 1050px) {
      .section3 .carousel-wrapper {
        width: 48%; } }
    @media screen and (max-width: 768px) {
      .section3 .carousel-wrapper {
        width: 95%;
        margin-right: 2.5%;
        padding-right: 0%; } }
    .section3 .carousel-wrapper .owl-item .teacher-img {
      transform: scale(0.9);
      transition: all .2s ease-in-out; }
    .section3 .carousel-wrapper .owl-item:hover .teacher-img {
      transform: scale(1);
      transition: all .2s ease-in-out; }
  .section3 .teacher-text {
    font-size: 14px;
    text-align: center;
    margin-top: 30px; }
    .section3 .teacher-text .line {
      border-bottom: 1px #000 solid;
      width: 65px;
      height: 1px;
      margin: auto;
      margin-top: 3px;
      margin-bottom: 3px; }

.section4 {
  position: relative; }
  .section4 .title {
    width: 80%;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%); }
    @media screen and (max-width: 768px) {
      .section4 .title {
        width: 90%; } }
  .section4 .vote {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    transition: transform .2s; }
    .section4 .vote:hover {
      transform: translateX(-50%) scale(1); }
    .section4 .vote img {
      width: 262px; }
      @media screen and (max-width: 768px) {
        .section4 .vote img {
          width: 130px; } }

.section5 {
  padding-top: 30px;
  background-color: #f5f5f5;
  position:relative;
  text-align: center; }
  .section5 .top-title {
    font-size: 36px;
    padding-left: 15px;
    padding-right: 15px;
    border-left: 2px #b60000 solid;
    border-right: 2px #b60000 solid;
    letter-spacing: 2px;
    display: inline-block; }
  .section5 .sub-title {
    font-size: 24px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: inline-block; }
	@media screen and (max-width: 768px) {
		.section5 .top-title {
			font-size: 22px;
			padding-left: 15px;
			padding-right: 15px;
			border-left: 2px #b60000 solid;
			border-right: 2px #b60000 solid;
			letter-spacing: 2px;
			display: inline-block; }
			
			.section5 .sub-title {
				font-size: 18px;
				letter-spacing: 2px;
				margin-bottom: 10px;
				display: inline-block; }
	}
  .section5 .item-nav {
    margin-top: 10px;
    overflow: auto;
    padding: 0px;
    display: flex;
    display: -webkit-flex;
    /* Safari 8 */
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    /* Safari 8 */
    justify-content: center;
    -webkit-justify-content: center; }
    .section5 .item-nav .item-nav-link {
      list-style: none;
      float: left;
      padding: 10px;
      display: inline-block;
      position: relative; }
      .section5 .item-nav .item-nav-link a {
        color: #3d3d3d;
        text-decoration: none; }
      .section5 .item-nav .item-nav-link .avtive-border {
        position: absolute;
        display: inline-block;
        width: 25px;
        border-bottom: 1px #b60000 solid;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        display: none; }
      .section5 .item-nav .item-nav-link.active a {
        color: #c63d3d; }
      .section5 .item-nav .item-nav-link.active .avtive-border {
        display: inline-block; }
  .section5 .production-item-wrapper {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    /* Safari 8 */
    justify-content: center;
    -webkit-justify-content: center;
    display: none; 
position: relative; }
    .section5 .production-item-wrapper.active {
      display: flex;
      display: -webkit-flex;
      /* Safari 8 */ }
  .section5 .ad-wrapper {
    background-image: url("../images/ad-wrapper.png");
    width: 369px;
    background-repeat: no-repeat;
    font-size: 16px;
    margin-bottom: 15px; }
  .section5 .production-item {
    position: relative;
    float: left;
    width: 369px;
    background-image: url("../images/border.png");
    background-size: 100%; }
    .section5 .production-item .op-border {
      opacity: 0; }
    .section5 .production-item.active {
      background-image: url("../images/hover-border.png"); }
    .section5 .production-item .item-title {
      text-align: center;
      position: absolute;
      top: 20px;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      color: #3d3d3d; }
    .section5 .production-item .item-img {
      position: absolute;
      width: auto;
      height: 80%;
      bottom: 35px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 0;
      overflow: hidden; }
	  .section5 .production-item .item-img img{
      max-width:300px;
	  margin-left:25px;
	  }
	  
	  @media screen and (max-width:768px){
		  .section5 .production-item .item-img img{
			max-width:280px;
			margin-left:25px;			
			}
	  }
    .section5 .production-item .item-price {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      color: #3d3d3d; }
    @media screen and (max-width: 768px) {
      .section5 .production-item {
        width: 100%; } }
  .section5 .week-share {
    padding-top: 30px;
    padding-bottom: 30px; }
    .section5 .week-share img {
      transform: scale(0.95);
      transition: transform .2s; }
      .section5 .week-share img:hover {
        transform: scale(1); }
  .section5 .flip-container {
    float: none;
    margin: auto; }
 .section5 .controller {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 100%;
    color: #fff; }
    .section5 .controller .owl-prev {
      background-color: rgba(0, 0, 0, 0.7);
      position: absolute;
      left: 0px;
      display: inline-block;
      width: 30px;
      height: 50px;
      font-size: 16px;
      padding-top: 14px; }
    .section5 .controller .owl-next {
      background-color: rgba(0, 0, 0, 0.7);
      position: absolute;
      right: 0px;
      display: inline-block;
      width: 30px;
      height: 50px;
      font-size: 16px;
      padding-top: 14px; }

.section6 {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 30px;
  background-color: black;
  color: #fff; }
  .section6 .top-title {
    font-size: 36px;
    padding-left: 15px;
    padding-right: 15px;
    border-left: 2px #b60000 solid;
    border-right: 2px #b60000 solid;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 50px; }
	@media screen and (max-width:768px){
		.section6 .top-title {
		font-size: 24px;
		padding-left: 15px;
		padding-right: 15px;
		border-left: 2px #b60000 solid;
		border-right: 2px #b60000 solid;
		letter-spacing: 2px;
		display: inline-block;
		margin-bottom: 50px; }
	}
  .section6 .sub-wording {
    margin-top: 30px;
    display: inline-block; }
  .section6 .vote-tab {
    margin: 0px;
    padding: 0px; }
    .section6 .vote-tab li {
      padding: 5px;
      list-style: none;
      display: inline-block;
      width: 10%;
      text-align: center;
      float: left;
      font-size: 12px;
      cursor: pointer;
      border-radius: 15px; }
      .section6 .vote-tab li.active {
        background-color: #b60000; }
      @media screen and (max-width: 768px) {
        .section6 .vote-tab li {
          padding: 0px; } }
  .section6 .vote-item-wrapper {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    /* Safari 8 */
    justify-content: center;
    -webkit-justify-content: center;
    display: none;
    margin-top: 30px; }
    .section6 .vote-item-wrapper.active {
      display: flex;
      display: -webkit-flex;
      /* Safari 8 */ }
  .section6 .vote-item {
    position: relative;
    float: left;
   
    background-image: url("../images/border.png");
    background-size: 100%; }
    .section6 .vote-item::before {
      content: url("../images/vote-mark.png");
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 90%;
      z-index: 5;
      opacity: 0;
      transition: opacity .3s ease-in-out; }
    .section6 .vote-item .op-border {
      opacity: 0; }
    .section6 .vote-item:hover::before {
      opacity: 1; }
    .section6 .vote-item.active::before {
      opacity: 1; }
    .section6 .vote-item .item-title {
      text-align: center;
      position: absolute;
      top: 20px;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      color: #3d3d3d; }
    .section6 .vote-item .item-img {
      position: absolute;
      width: auto;
      height: 80%;
      bottom: 35px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 0;
      overflow: hidden; }
    .section6 .vote-item .item-price {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      color: #3d3d3d; }
	  @media screen and (max-width:1980px){
		   .section6 .vote-item {
		   width: 369px;
		   }
	  }
	 @media screen and (max-width: 1440px) {
      .section6 .vote-item {
        width: 259px; } 
		}
    @media screen and (max-width: 768px) {
      .section6 .vote-item {
        width: 90%; } }

footer {
  text-align: center;
  padding-top: 15px;
  position:relative;
  padding-bottom: 15px; background: #FFF;}
  footer .wording {
    color: #727272;
    font-size: 14px; }
  footer .copyright {
    color: #727272;
    font-size: 12px; }

	
	@media screen and (min-width:769px){
/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  position: relative;
  float: left;
  width: 369px;
  height: 511px;
  margin-bottom: 15px; }

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg); }

.flip-container, .front, .back {
  width: 369px; }

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  height: 100%; }

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0; }

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg); }

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  width: 100%;
  height: 100%; }
  .back .border-wrapper {
    background-image: url("../images/back-bg.png");
    width: 100%;
    height: 100%;
    padding: 30px;
    color: #fff; }
}
footer {width: 100%; background: #2c2c2c; display: table;}
footer .footer_nav {border-bottom: 1px solid #FFF;}
footer .footer_nav ul {display: table; margin: 0 auto; padding: 20px 0;}
footer .footer_nav ul li {display: inline-block;}
footer .footer_nav ul li a {padding: 0 25px;}
footer .footer_nav ul li:after {content: '|'; color: #FFF; font-size: 20px;}
footer .footer_nav ul li:nth-last-child(1):after {content: '';}
footer .copyright_text {color: #FFF; font-size: 13px;}
footer .copyright_text p {line-height: 50px; display: table; margin: 0; float: left;}
footer .copyright_text ul {display: table; float: right;}
footer .copyright_text ul li {display: inline-block; border: 1px solid #FFF; margin: 10px 5px;}
footer .copyright_text ul li a {display: block; padding: 5px 12px; color: #FFF;}
footer .copyright_text ul li a i {font-size: 12px;}