@import "https://fonts.googleapis.com/css2?family=Marcellus&display=swap&family=Plus+Jakarta+Sans:ital,wght@0,400..600;1,400..600&display=swap&subset=latin%2Clatin-ext&display=swap";
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
	}
fieldset, img {
    border: 0;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}
a{ text-decoration:none;transition:all 0.3s;}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
    font-style: normal;
    font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
abbr, acronym {
    border: 0;
    font-variant: normal;
}
button {
	overflow:visible
}
button, select {
	text-transform:none
}
button, html input[type=button], input[type=reset], input[type=submit] {
	appearance:button;
	cursor:pointer
}
button[disabled], html input[disabled] {
	cursor:default
}
button::-moz-focus-inner, input::-moz-focus-inner {
padding:0;
border:0
}
input, button, textarea,
select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
input {
	line-height:normal
}
input[type=checkbox], input[type=radio] {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
height:auto
}
input[type=search] {
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
	appearance:textfield
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance:none
}

code, kbd, samp, tt {
    font-size: 100%;
}
ol, ul { list-style: none; }
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
    font-size: 100%;
}
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	overflow:visible;
}

:after, :before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
body{
	position:relative;
	font-family: 'Plus Jakarta Sans',sans-serif;
	font-display:"swap";
	font-weight: 400;
	font-size:1.8rem;
	background-color:#fff;
	color:#32302d;
	line-height:1.5em;
	}
html{
	font-size:10px;
	}

/*公共代码*/
:root{
	--web-theme-color:#E62129;
	--web-theme-color-black:#32302d;
	--web-theme-color-gray:#999;
	--web-theme-color-purple:#9393c9;
	--web-theme-color-white:#ffffff;
}
section{
	padding:8rem 0;
	}
.wrap-flex{
  	display: flex;
}
.grid{
  display: grid;
}
.grid-1{
  display: grid;
}	
/* side */
#side-nav{position:fixed;width:54px; right:0;bottom:10%;z-index:2;}
#side-nav ul li{position: relative; width:54px;height:54px; display: block; border-bottom:1px solid #444; background-color: #666; padding: 1.6rem; color: var(--web-theme-color-white);}
#side-nav ul li:hover{ background-color: var(--web-theme-color); cursor: pointer;}
#side-nav ul li i{font-size: 2.4rem;}
.sideboxlink{ position:absolute; left: 0; cursor: pointer; display: none; transition: left 5s;}
.sideboximg{ position:absolute; left: 0; cursor: pointer; display: none; transition: left 5s;}
.sideboxlink-mail{ position:absolute; left: 0; cursor: pointer; display: none; transition: left 5s;}
.sideboxlink a{ font-size: 2rem; color: var(--web-theme-color-white); }
#side-nav ul li:hover .sideboxlink{display: block; left: -200px; top: 0; padding:10px 16px ;  width:200px; height:100%; background-color: #333;}
#side-nav ul li:hover .sideboximg{display: block;  left: -150px; top: 0; padding:0;  width:150px; }
#side-nav ul li:hover .sideboxlink-mail{display: block;  left: -210px; top: 0; padding:10px 16px ; width:210px; height:100%; background-color: #333;}
.sideboximg img{ width: 100%;}
#side-nav ul li a{color: var(--web-theme-color-white); }

/*form-group*/
/*page-cneter*/
.text-center {
	text-align:center
}

/*clearflot*/
.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
	display:table;
	content:" "
}
.btn-group-vertical>.btn-group:after, .btn-toolbar:after, .clearfix:after, .container-fluid:after, .container:after, .dl-horizontal dd:after, .form-horizontal .form-group:after, .modal-footer:after, .modal-header:after, .nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row:after {
	clear:both
}
.form-control::-moz-placeholder {
color:#fff;
opacity:1
}
.form-control:-ms-input-placeholder {
color:#fff;
}
.form-control::-webkit-input-placeholder {
color:#fff;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
	background-color:#fff;
	opacity:1
}
/*input-group-btn */
.input-group-btn {
	position:relative;
	font-size:1em;
	white-space:nowrap
}
.input-group-btn>.btn:active, .input-group-btn>.btn:focus, .input-group-btn>.btn:hover {
	z-index:2
}
.input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group {
	margin-right:1px
}
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
	z-index:2;
	margin-left:-12px
}
/*nycer*/
img {
	vertical-align:middle
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
	display:block;
	max-width:100%;
	height:auto
}
.thumbnail {
	display:block;
	padding:4px;
	margin-bottom:20px;
	line-height:1.42857143;
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:4px;
-webkit-transition:border .2s ease-in-out;
-o-transition:border .2s ease-in-out;
transition:border .2s ease-in-out
}
.thumbnail a>img, .thumbnail>img {
	margin-right:auto;
	margin-left:auto;
}
a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
	border-color:#337ab7
}
.thumbnail .caption {
	padding:9px;
	color:#333
}


/*font*/

h1{
	font-size:5.5rem;
	color:#fff;
	font-weight: 600;
	}	
h2{
	font-size:4rem;
	text-align:center;
	line-height:1.1em;
	font-weight: 600;
	color:rgba(255,255,255,.9);
	}	
h3{
	font-size:2.2rem;
	}
h4{
	letter-spacing: 2px;
	font-size:1.8rem;
}															
p{color:rgba(255,255,255,.6); line-height:1.8em;}
/*button*/
.more{ display:inline-block;   color:var(--web-theme-color-white);  text-align:center; text-decoration:none;}
.more i{ position:relative; left:0; transition: all .3s ease-in-out; -webkit-text-stroke: 1px white;}
.more:hover{ border:none; color:var(--web-theme-color-black);}
.more:hover i{ left:15px; color:var(--web-theme-color-black);}
/*-------
common
-------*/
.sy-container{
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto;
	width:100%;
	max-width:1600px;
}
.sy-img-responsive, .sy-thumbnail a>img, .sy-thumbnail>img {
	display:block;
	max-width:100%;
	height:auto
}
.sy-center-block {
	display:block;
	margin-right:auto;
	margin-left:auto
}
.sy-rounded{ border-radius:20px;}
.sy-list-inline{ float:left;}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
#nav-bottom{ position: absolute; left:45%; bottom:25%; }
.cd-popup-trigger{  text-align:left;}
.cd-popup-trigger i{  font-size: 2rem; -webkit-text-stroke: 0 white; color:rgba(255,255,255,.4);}
.search-box:hover i{color:rgba(255,255,255,1);}
.nav-title{ padding: 3rem 3.5rem 1rem 3.5rem;  text-align: left;  font-weight:600; font-size:2rem;  color:var(--web-theme-color-black);}
#nav-bottom .form-control{ 
background-color:rgba(0,0,0,.5); 
-webkit-box-shadow:inset 0 1px 1px rgba(102, 100, 114, 0);
	box-shadow:inset 0 1px 1px rgba(102, 100, 114, 0);
-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
border:none;
color:#fff !important;}
#nav-bottom .form-control::-moz-placeholder {
color:rgba(255,255,255,.6);
}
#nav-bottom .form-control:-ms-input-placeholder {
color:rgba(255,255,255,.6);
}
#nav-bottom .form-control::-webkit-input-placeholder {
color:rgba(255,255,255,.6);
}
#nav-bottom .fbtn-txt{width:100%; max-width: 1200px; padding: 1rem 4rem 1rem 2rem;}
#nav-bottom  .btn-default{
	padding:1rem 2rem;
	background-color:rgba(0,0,0,.5);  
	color: var(--web-theme-color-white);
	border: none;
	text-transform:uppercase;
}
#nav-bottom  .btn-default:hover{ background-color: var(--web-theme-color);}
.img-replace {
  /* replace text with an image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
}
.cd-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height:150px;
  left: 12rem;
  top:30%;
  margin: 4em auto;
  background:#f7f7f7;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.cd-popup-container .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 14px;
  height: 3px;
  background-color:var(--web-theme-color-black);
}
.cd-popup-container .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}
.cd-popup-container .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}
.is-visible .cd-popup-container {
  -webkit-transform: translateY(-45deg);
  -moz-transform: translateY(-45deg);
  -ms-transform:translateY(-45deg);
  -o-transform:translateY(-45deg);
  transform:translateY(-45deg);
}

/*public code*/
.combg{ background-color:#333;}
.com-line{ width:60px; height:3px; background-color:#242424; margin:3rem 0;}
.page-box-size{
	width:100%;
	min-height:100%;
	padding-left:240px;
}
.page-title h2,.page-title p,.page-title h4{ text-align: center;}
.page-title h4{ padding-bottom: 1.2rem; color: var(--web-theme-color);}
.page-title p{width: max(40%,700px); margin: 0 auto; margin-top: 2rem;}
/*------------------------------------------------------------------ny-page---------------------------------------------------*/
/*-------
nybanner
-------*/
#nybanner{
	position:relative;
    background-position:left ;
	background-repeat:no-repeat;
	overflow:hidden;
}
#nybanner img{width:100%;}
#nybanner .sy-container{
	position:absolute;
	left:0;
	top:0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
/*------------------------------------------------------nypage content--------------------------------------------------------*/
/*product details*/
.productsitem{
	overflow:hidden;
	text-decoration:none;
	 
}
.productsitem .caption{
	margin-top: 1.4rem;
	text-align: center;
	font-weight:600;
	text-decoration:none;
	color:var(--web-theme-color-black);
}
.productsitem .caption span{ font-size:1.4rem; font-weight:500; line-height:1.3em; color:var(--web-theme-color-black);}
.productsitem:hover .caption { color: var(--web-theme-color);}
.productsimg{ overflow:hidden; }
.productsimg img{ width:100%; transition: all .5s ease-in-out; }
.productsitem:hover img{
	transition:1s linear;
	-webkit-transform: scale3d(1.1, 1.1, 1);
              transform: scale3d(1.1, 1.1, 1);
}
.productsitem:hover img{transition:1s linear;-webkit-transform: scale3d(1.1, 1.1, 1);transform: scale3d(1.1, 1.1, 1);border-radius:10px 10px 0 0;}
/*page*/
.pagination {
	display:inline-block;
	padding-left:0;
	margin:40px 0;
	border-radius:0
}
.pagination>li {
	display:inline;
}
.pagination>li>a, .pagination>li>span {
	position:relative;
	float:left;
	padding:6px 12px;
	margin-top:-0.7rem;
	margin-left:-1px;
	line-height:1.42857143;
	color:var(--web-theme-color-black);
	text-decoration:none;
	background-color:#fff;
	border:1px solid #ddd
}
@media screen and (min-width: 768px) and (max-width: 1600px) {	html{font-size:9px;}}
@media screen and (max-width: 1023px) {
	section{ padding: 4rem 0;}
	h1{font-size:3rem;}	
	h2{ font-size:2.5rem; line-height:1.2em;}
	h3{font-size:1.8rem; line-height:1.0em;}
	h4{font-size:1.2em; letter-spacing: 0;} 
	p{font-size:1.1em;}
   .page-title p{width:100%;}
}
@media screen and (max-width: 767px) {html{font-size:9px;}body{font-size:14px;}}