@font-face {
font-family: "Gotham-Medium";
src: url("../images/fonts/Gotham-Medium.woff2") format('woff2');
}
@font-face {
font-family: "Gotham-Book";
src: url("../images/fonts/Gotham-Book-325.woff2") format('woff2');
}
html, body { font-family: "Gotham-Book"; color:#fff; font-size: 20px; letter-spacing: 0.1em; line-height: 31px;background:#000; height: 100%; margin: 0; -webkit-text-size-adjust: none;}
a { text-decoration: underline!important; color: #fff !important; font-size:inherit}
img {filter: contrast(1.05);}
div, button,input,select,textarea,label { font-family: "TradeGothicW01-BoldCn20_675334","Microsoft Yahei","微软雅黑","PingFang TC",Helvetica,Arial,sans-serif !important;}
#CustomView { display:block; width: 100%; height: 100%}
#WebformHtmlView {display:inline}

.radius {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
.shadow {-webkit-box-shadow:0px 1px 5px 3px rgba(50, 50, 50, 0.2);-moz-box-shadow:0px 1px 5px 3px rgba(50, 50, 50, 0.2);box-shadow:0px 1px 5px 3px rgba(50, 50, 50, 0.2);}
.gradient {background: linear-gradient( to bottom, #838383, #9c9c9c, #cecece, #e6e6e6 )}
.bgtransparent {background: rgba(255, 255, 255, 0.5);}
.flash {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}

sup {vertical-align: super;font-size: smaller;}
.desktop {display: block;}
.mobile {display: none;}
.invisible {visibility: hidden;}
.clearfix:before, .clearfix:after {content: " ";display: table;}
.clearfix:after { clear: both}
.clearfix {*zoom: 1;}

.txt-lang {color: #fff; font-size: 15px; line-height:30px; text-align: right; text-decoration: none}
.txt-title {color: #000; font-size: 15px; line-height:30px; text-align: center}
.txt-name {color: #000; font-size: 19px; line-height:22px; text-align: left; font-weight: 400; padding-bottom: 10px; padding-top: 15px;text-transform: uppercase; min-height: 70px;}
.txt-desc {color: #000; font-size: 12px; line-height:16px; text-align: left; min-height: 33px}
.txt-price {color: #000; font-size: 19px; line-height:30px; text-align: left}


.line2 { background: #cdcdcd; width:100%; height:1px; }

/* = kv */
.lang {position: relative;width: 100%; background: #000;padding: 5px 10px}
.kv-wrapper {position: relative;overflow: hidden;z-index: 99; margin-top: 60px;}
.pd-wrapper {position: relative;overflow: hidden;z-index: 99; margin-top: 0;}
.kv-container img{ width:100%; float: left} 
.kv-container {position: relative;float: left;width: 100%;}

/* title*/
.special-wrapper {position: relative;width: 100%;}
.special-container {padding: 15px; width: 100%!important;max-width: 1230px;  margin: 0 auto;}

/* list*/
.list-wrapper {position: relative; width: 1230px;margin: auto;}
.list {width: 25%; padding: 20px; text-align: center; display: table-cell;}


.list-img img { max-width: 360px;width: 100%;margin: auto;}
.list-content img { max-width: 360px;width: 100%;margin: auto;}

/* Video*/
.video-wrapper {position: relative; width: 1230px;margin: 0px auto; padding: 15px 0px;}
.video-container { cursor: pointer; }
.video-container img { width: 100%; }

/* IG*/
.ig-wrapper {position: relative; width: 1230px;margin: 0px auto; padding: 15px 0px;}
.ig-container img { width: 100%;}

/* Store*/
.store-wrapper {position: relative; width: 1230px;margin: 0px auto; padding: 15px 0px;}
.store-container img { width: 100%;}


/* =product*/

.product img {
	max-width: 800px;
	width: 100%;
	margin: auto;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.product-wrapper {width: 100%;max-width: 800px;margin: 0px auto; padding: 15px}

.product {width: 100%;text-align: center;display: inline-block;}
.product-img {width: 36.5%;text-align: left;float: left}
.product-txt {width: 63.5%;text-align: left;float: right; padding-top: 5%;}
.productc {width: 55px; height: 55px; margin-right: 3px; margin-bottom: 3px;float: left;}
.add-border {border: solid 3px #000}
.c1 {background-color: #ad382e}
.c2 {background-color: #cf1628}
.c3 {background-color: #bd4755}
.c4 {background-color: #e13c43}
.c5 {background-color: #91384e}
.c6 {background-color: #c52c1e}
.c7 {background-color: #b11a3d}
.c8 {background-color: #f61f48}
.c9 {background-color: #c1625e}
.c10 {background-color: #ba6471}
.c11 {background-color: #ce7764}
.c12 {background-color: #a76449}
.c13 {background-color: #cd6967}
.c14 {background-color: #c66e64}
.c15 {background-color: #e4a68f}
.c16 {background-color: #ce8e82}

/* =footer */
.footer-wrapper {position: relative; float: left;width: 100%;}
.footer-black {width: 100%;font-size: 13px; line-height: 18px; color: #4d4d4d;text-align: center;padding: 20px;background: #000; text-transform: uppercase}

/* fix footer */
.bottombox {position: fixed;bottom: 0;width: 100%;max-width: 1230px;text-align: center;z-index: 9999;font-size: 120%; }
.bottombox .left {float: left;}
.bottombox .right {float: right;}
.bottombox .left, .bottombox .right {width: 49.5%;background-color: black;text-align: center;display: inline-block;color: white;height: 70px;line-height: 70px;cursor: pointer;}

/* Video overlay */
.video-overlay-bg {
  display: none;
  position: fixed;
  background: #000;
  height: 100%;
  width: 100%;
  z-index: 1000;
  opacity: 0.8;
}

.video-overlay .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1200;
  margin-top: -10px;
  cursor: pointer;
}

.video-overlay .btn-close::after {
  display: inline-block;
  content: "\00d7";
  font-size: 60px;
  color: #FFF;    
  font-weight: 100;
}

.video-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  display: none;
}

#yt-video {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1100;
  display: none;
}

.video-overlay.active {
  bottom: 0;
}


@media (max-width: 1230px) {
.list-wrapper {width: 100%; padding: 0;}
}

@media (max-width: 800px) {

	
.txt-title {font-size: 14px; line-height:24px;}

.txt-desc {min-height: 50px}
}

@media (max-width: 480px) {
.txt-title {font-size: 14px; line-height:20px}
.special-container {padding: 15px; width: 100%!important;}
.list-wrapper {padding: 0px;}
.list {width: 100%; padding: 0px; text-align: center; display: block; }
.list-img img{width: 100%;}
.list-content img{width: 100%;}
.product-img img{width: 180px;}
.product-img {width: 100%;text-align: center;float: left; padding-top: 10px;}
.product-txt {width: 100%;text-align: center;float: left; padding-top: 0px;}
.productc {width: 11.6%; height: 40px }
.txt-desc {min-height: auto;font-size: 13px; line-height:16px}
.txt-name {padding-bottom: 5px; padding-top: 15px;min-height: auto}
.store-wrapper {padding: 15px 0}
}



/* form setting - none question 
label.desc {float: none; display: none;}*/

/* form setting - with question */
label.desc {float: left; display: block; width: 100%!important }
.cstm_frmanswer { width: 100%} 

/*  form setting - with question in single line
label.desc {float: left; display: block; width: 150px!important }
.cstm_frmanswer { width: auto} */

/* form text*/
.txt-form-title { color: #333333; font-size: 25px; line-height:35px; }
.txt-form-desc { color: #333333; font-size: 15px; line-height:25px; }
.txt-form-ps { color: #000000; font-size: 13px; line-height:18px; padding: 2% 0px; text-align:left}
.txt-thx-title  { color: #333333; font-size: 20px; line-height:30px; text-align: center;	}
.txt-thx-desc  { color: #333333; font-size: 15px; line-height:25px; text-align: center; }

.txt-copy { color: #000000; font-size: 11px; line-height:18px;}
.txt-pop { color: #000000; font-size: 15px; line-height:22px;}
.txt-pop-finish { color: #000000; font-size: 15px; line-height:22px;}
.txt-po.p-confirm { color: #000000; font-size: 15px; line-height:22px;}
.txt-pop-noquot { color: #000000; font-size: 15px; line-height:22px;}
.txt-tc strong{ color: #000000; font-size: 15px; line-height:22px;}
.txt-tc { color: #000000; font-size: 12px; line-height:18px;}
.txt-tc li{ list-style:outside disc; font-size: 12px; line-height:18px; margin-left:20px}

/* form layout*/
.main{ display: table; width:100%; background: #f1f1f1}
.wrap{ width:100%; margin:0; padding:0;}
.broad { display: table; width:700px; height: 100%; margin: 0% auto; border: solid 0px #f1f1f1; }
.form-banner { margin:0px}
.form-bannerm { display:none}
.form-banner img{width:100%;}
.banner { display: table-cell; float:left; width:100%;}
.middlecontent { width:100%; margin: 0%; display: table; }
.content{ display: table; width: 100%;text-align: center; }
.formmain{ width: 80%; height: 100%; text-align: left; vertical-align: middle;; margin: auto}
.formInfo { width:100%; float:left; text-align:center; padding: 20px 0px  }
.foot{ width:100%; text-align:center; padding: 10px;}
.form-pop-error { text-align:center;}
.thx { width:100%;margin:10% auto;text-align: left; float:left}
.mbr { display: none}
.wbr { display: block}
.slider {text-align: center}
.slide {cursor: pointer}


@media (max-width: 800px) {
.main {padding-top: 0}
.form-banner { display:none}	
.form-bannerm{ display:block; margin:0px}
.form-bannerm img{width:100%!important;}
.broad { width:100%; border: solid 0px #f1f1f1;}
.banner { width:100% }	
.middlecontent { display: inline-block; width:100%}
.content{ display: inherit; padding: 20px 10%}
.formmain{ width: 100%;}
#showLeftPush {display: block; position: absolute; color: #fff; left: 10px; border:none;}	

}

@media (max-width: 480px) { 
.mbr {display: block}
.wbr {display: none}
.content{padding: 20px}

}


/* iCheck */
.icheckbox_square,.iradio_square {display: inline-block; *display: inline;vertical-align: middle;margin: 0;padding: 0;width: 22px;height: 22px;background: url(https://web.mailer08.net/info/web/include/images/icheck.png) no-repeat;border: none;cursor: pointer; }
.icheckbox_square {background-position: 0 0;}
.icheckbox_square.hover {background-position: -24px 0;}
.icheckbox_square.checked {background-position: -48px 0;}
.icheckbox_square.disabled {background-position: -72px 0;cursor: default;}
.icheckbox_square.checked.disabled {background-position: -96px 0;}

.iradio_square {background-position: -120px 0}
.iradio_square.hover {background-position: -144px 0;}
.iradio_square.checked {background-position: -168px 0;}
.iradio_square.disabled {background-position: -192px 0;cursor: default;}
.iradio_square.checked.disabled {background-position: -216px 0;}


/* Float Shadow */
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}


/* Icon Push */
@-webkit-keyframes hvr-icon-push {
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@keyframes hvr-icon-push {
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

.hvr-icon-push {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  padding-right: 2.2em;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-icon-push:before {
  content: "\f138";
  position: absolute;
  right: 1em;
  padding:3px  1px;
  font-family: FontAwesome !important ;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-push:hover:before, .hvr-icon-push:focus:before, .hvr-icon-push:active:before {
  -webkit-animation-name: hvr-icon-push;
  animation-name: hvr-icon-push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

.slick-dots,.slick-next,.slick-prev{position:absolute;display:block;padding:0}
.slick-dots li button:before,.slick-next:before,.slick-prev:before{font-family:FontAwesome !important ;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-loading .slick-list{background:url(ajax-loader.gif) center center no-repeat #fff}
@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg')}
.slick-next,.slick-prev{font-size:0;line-height:0;top:50%;width:20px;height:20px;margin-top:-10px;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}
.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}
.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}
.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}
.slick-next:before,.slick-prev:before{font-size:20px;line-height:1;opacity:.75;color:#fff}
.slick-prev{left:-25px}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←'}
.slick-next:before,[dir=rtl] .slick-prev:before{content:'→'}
.slick-next{right:-25px}[dir=rtl] 
.slick-next{right:auto;left:-25px}[dir=rtl] 
.slick-next:before{content:'←'}
.slick-slider{margin-bottom:5px}.slick-dots{bottom:-45px;width:100%;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-size:11px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:"\F111";text-align:center;opacity:.25;color:rgb(255, 255, 255)}.slick-dots li.slick-active button:before{opacity:.75;color:rgb(255, 255, 255)}


.cd-top {
  display: inline-block;
  height: 50px;
  width: 50px;
  position: fixed;
  bottom: 75px;
  right: 0px;
  overflow: hidden;
  white-space: nowrap;
  color: #fff!important;
  visibility: hidden;
  background-color: #000;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
  content: "\f106";
  font-family: FontAwesome!important ;
}
.topicon {padding: 30% 39%!important; font-size: 20px!important;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 0.5;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: 0.5;
}
.no-touch .cd-top:hover {
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 0px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 0px;
    bottom: 70px;
  }
}


/* General styles for all menus */
.cbp-spmenu {position: fixed; background-color: #fff}
.cbp-spmenu-vertical {
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1000;
}

.cbp-spmenu-vertical a {
	
	padding: 1em;
}


.cbp-spmenu-left {
	left: -240px;
}


.cbp-spmenu-left.cbp-spmenu-open {
	left: 0px;
}

.over {overflow: hidden!important}

/* Push classes applied to the body */

.cbp-spmenu-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.cbp-spmenu-push-toright {
	left: 240px;
}

.cbp-spmenu-push-toleft {
	left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

	.cbp-spmenu-horizontal {
		font-size: 75%;
		height: 110px;
	}

	.cbp-spmenu-top {
		top: -110px;
	}

	.cbp-spmenu-bottom {
		bottom: -110px;
	}

}

@media screen and (max-height: 26.375em){

	.cbp-spmenu-vertical {
		font-size: 90%;
		width: 190px;
	}

	.cbp-spmenu-left,
	.cbp-spmenu-push-toleft {
		left: -190px;
	}

	.cbp-spmenu-right {
		right: -190px;
	}

	.cbp-spmenu-push-toright {
		left: 190px;
	}
}