﻿ @font-face {
font-family:"Playfair Display";
font-weight:400;
font-style:normal;
font-display:swap;
src:local("Playfair Display"), local("PlayfairDisplay-Regular"), url("../fonts/playfair-display-v15-latin-400.woff2") format("woff2"), url("../fonts/playfair-display-v15-latin-400.woff") format("woff")
}
@font-face {
font-family:"Playfair Display";
font-weight:400;
font-style:italic;
font-display:swap;
src:local("Playfair Display Italic"), local("PlayfairDisplay-RegularItalic"), url("../fonts/playfair-display-v15-latin-400italic.woff2") format("woff2"), url("../fonts/playfair-display-v15-latin-400italic.woff") format("woff")
}
@font-face {
font-family:"Playfair Display";
font-weight:700;
font-style:normal;
font-display:swap;
src:local("Playfair Display Bold"), local("PlayfairDisplay-Bold"), url("../fonts/playfair-display-v15-latin-700.woff2") format("woff2"), url("../fonts/playfair-display-v15-latin-700.woff") format("woff")
}
@font-face {
font-family:"Playfair Display";
font-weight:700;
font-style:italic;
font-display:swap;
src:local("Playfair Display Bold Italic"), local("PlayfairDisplay-BoldItalic"), url("../fonts/playfair-display-v15-latin-700italic.woff2") format("woff2"), url("../fonts/playfair-display-v15-latin-700italic.woff") format("woff")
}
@font-face {
font-family:"Proxima Nova";
font-weight:400;
font-style:normal;
font-display:swap;
src:local("Proxima Nova"), local("ProximaNova-Regular"), url("/wcsstore/TJGCommonStorefrontAssets/fonts/proxima-nova-400.woff2") format("woff2"), url("/wcsstore/TJGCommonStorefrontAssets/fonts/proxima-nova-400.woff") format("woff")
}





#zhong {
	width:100%;
	margin:0 auto;
	height:auto;
	box-sizing: border-box;
}
#main {
	width:1280px;
	margin:0 auto;
	height:auto;
	box-sizing: border-box;
	display:flex
}
.left {
	width:304px;
	padding:40px 26px;
	border:1px #eaeaeb solid;
	box-sizing: border-box;
	margin-top:40px
}
#right {
	box-sizing: border-box;
	width:940px;
	float:right;
	margin-left:25px;
	margin-top:40px
}
#right h2{ font-weight:normal; font-size:16px; background:url(../images/logo_03.png) no-repeat left center; padding-left:30px; border-bottom:1px #eaeaeb solid; height:55px ; line-height:55px; }

#about{ padding-left:20px; line-height:26px; font-size:14px}
#about h4{ font-size:17px!important; color:#e60012!important;}


#about1{  line-height:26px; font-size:14px;}

#f1 {
	width:1280px;
	margin:0 auto;
	height:100px;
	box-sizing: border-box;
	background:#fde8eb;
	overflow:hidden;
	text-align:center
}
#f1 ul li {
	list-style:none
}
#f1 h2 {
	font-size: 3rem;
	color: #000000;
	margin-bottom: 15px !important;
	text-align: center;
	font-family: 'Playfair Display', 'Times New Roman', serif;
	line-height: 1.3em;
	letter-spacing: 0.02em;
	font-weight: normal;
}
.tit {
	background:url(../images/da.jpg) no-repeat left bottom;
	padding-bottom:5px;
	font-size:22px;
	margin-bottom:7px
}
.nr {
	margin:14px 0; float:left
}
.nr li {
	list-style:none
}


.nr h3{ background:url(../images/li.jpg) no-repeat left center; padding-left:10px; border-bottom:1px #e2e4f4 solid; padding:10px 0 10px 14px; margin:0; color:#000}
.nr li:hover {
  background: transparent;
  color: #000;
  
}

.nr li:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:1px;
  width:0;
  background: #fb7ab3;
  transition:400ms ease all;
}
.nr li:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}

.nr li:hover:after{
  width:100%;
  transition:800ms ease all;
}

.nr li {
  width: 100%;


  font-weight:normal;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block; padding:10px 5px; font-size:13.5px
}
.nr .active{ border:1px #fb7ab3 solid; padding:10px 5px; background:#fff5f5; color:#F00 
   }
.nr li.active a {
    font-weight: normal;
    color: #333!important;
    transition: All 0.4s ease-in-out;  color: #000;

    
}

.pro_list_1_mid_right_1_2_3:hover  span {
    color: #fff;
   
    background:#069727
}


.pro_list_1_mid_right_1_2_3 span i {
    font-style: inherit;
   
    display: inline-block;

}
.pro_list_1_mid_right_1 ul li:hover {
  border:1px #fb7ab3 solid; transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;




   transform: translate(0,-10px);
    -webkit-transform: translate(0,-10px);
    -moz-transform: translate(0,-10px);
    -o-transform: translate(0,-10px);
    -ms-transform: translate(0,-10px)
}
.divBox_ny{ width:100%; margin: 0 auto;box-sizing:none;}
.cell_h {
    height:30%;
    display: table-cell;
    vertical-align: middle;
}
.pro_list_1_mid_right_1 ul { display:flex; justify-content:left; padding:0; margin:0; flex-wrap:  wrap;
}
.pro_list_1_mid_right_1 ul li {
    background-color: #fff;
    width: 24.5%; margin-bottom:1.5%; list-style:none; overflow:hidden; margin-right:0.5%
}.pro_list_1_mid_right_1_1 {
    text-align: center;
    height: 160px;
}.cell_mid {
   
}.pro_list_1_mid_right_1_1 img {
    max-width: 88%; margin-top:-10px
}.pro_list_1_mid_right_1_2 {
    margin: 0 1em;
    text-align: center;
}.pro_list_1_mid_right_1_2_1 {
    font-size: 13px!important; height:40px!important; 
    color: #000; line-height:40px 
}.pro_list_1_mid_right_1_2_2 {
    color: #999;
    margin-top: 6px;
    margin-bottom: 3px; font-size:16px; line-height:30px
}.pro_list_1_mid_right_1_2_3 {
    margin-bottom:10px;
}.pro_list_1_mid_right_1_2_3 span {
    color: #666;
    display: inline-block;
    font-size: 15px;
    border: 1px #d5dce0 solid;
    width: 130px;
    line-height: 30px;
    border-radius:3em;
}

.pro_list_1_mid_right_1_2_3:hover  span {
    color: #fff;
   
    background:#069727
}

.pro_list_1_mid_right_1{ width:100%; margin:0 auto}
.pro_list_1_mid_right_1_2_3 span i {
    font-style: inherit;
   
    display: inline-block;

}
.pro_list_1_mid_right_1 ul li:hover { border:1px #000 solid;transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;


}.sou{ width:100%; float:left; border: 1px solid #fb7ab3;}

/* Global Button Style for our like/unlike el */
.like {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.08);
  position: relative;
  cursor: pointer;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
  overflow: hidden; border:0;
}

/* Global Button Hover Style for our like/unlike el */
.like:hover {
  background: #fff;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}

/* Liked/Unliked states of our like icon */
.liked .like-icon-state {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewbox='0 0 100 100'><path fill='%23de3618' d='M50,88.87 C76.67,70.46 90,53.9 90,39.17 C90,17.08 63.12,3.84 50,27.63 C38.875,3.85 10,17.08 10,39.17 C10,53.9 23.33,70.46 50,88.87 Z'/></svg>");
}

.unliked .like-icon-state {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewbox='0 0 100 100'><path fill='none' stroke='%23666' stroke-width='5' d='M50,88.87 C76.67,70.46 90,53.9 90,39.17 C90,17.08 63.12,3.84 50,27.63 C38.875,3.85 10,17.08 10,39.17 C10,53.9 23.33,70.46 50,88.87 Z'/></svg>");
}

.like span {
  text-indent: -1000px;
  fone-size: 1px;
}

/* Global aspects of the like icon (holding our icon state view) */
.like-icon {
  background-size: contain;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  top: 15%;
  right: 15%;
  bottom: 15%;
  left: 15%;
}

.liked .like-icon-state {
  -webkit-transform: scale(0);
          transform: scale(0);
}

/* Set initial opacity and attach the like animation  */
.liked .like-icon-state {
  opacity: 0;
  -webkit-animation: 1.2s like-animation both cubic-bezier(0.45, 0.05, 0.55, 0.95);
          animation: 1.2s like-animation both cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

@-webkit-keyframes like-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  15% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
  32% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes like-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  15% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
  32% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
/* Set initial opacity and attach the unlike animation  */
.unliked .like-icon-state {
  opacity: 0;
  -webkit-animation: 1.2s unlike-animation both cubic-bezier(0.45, 0.05, 0.55, 0.95);
          animation: 1.2s unlike-animation both cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

@-webkit-keyframes unlike-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  15% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  30% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes unlike-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  15% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  30% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
/* Pop a small animation of the background on like */
.liked {
  background: #e2e2e2;
  -webkit-animation: 1.2s liked-bg-animation both;
          animation: 1.2s liked-bg-animation both;
}

@-webkit-keyframes liked-bg-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  15% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  30% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes liked-bg-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  15% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  30% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
/* Pop a more discreet animation of the background on unlike */
.unliked {
  -webkit-animation: 1.2s unliked-bg-animation both;
          animation: 1.2s unliked-bg-animation both;
}

@-webkit-keyframes unliked-bg-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  10% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  30% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes unliked-bg-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  10% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  30% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
/* Pseudo el for our ring animation */
.like::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 0px solid rgba(255, 255, 255, 0.75);
  -webkit-transform: scale(0);
          transform: scale(0);
}

/* Apply animation to the ring el */
.liked::before {
  -webkit-animation: 1.2s bg-ring-animation both;
          animation: 1.2s bg-ring-animation both;
}

@-webkit-keyframes bg-ring-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  10% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: 0.25;
  }
  15% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0.15;
  }
  45% {
    -webkit-transform: scale(3.25);
            transform: scale(3.25);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}

@keyframes bg-ring-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  10% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: 0.25;
  }
  15% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0.15;
  }
  45% {
    -webkit-transform: scale(3.25);
            transform: scale(3.25);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}
.saving::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  border: 0 solid rgba(100, 100, 100, 0.5);
  border-radius: 50%;
  border-right-color: transparent;
  border-top-color: transparent;
  -webkit-animation: spin-animation 400ms infinite linear;
          animation: spin-animation 400ms infinite linear;
}

@-webkit-keyframes spin-animation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin-animation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* eof */