@charset "utf-8";
/* CSS Document */

/* .z-small-content-wrap img {
			box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.05);
		} */

		
		.product-header {
			background: #fff none repeat scroll 0 0;
			overflow: visible;
			z-index: 2;
		}

		.main p {
			font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
			font-size: 18px;
			line-height: 1.6;
			max-width: 600px;
			margin: 0 auto 55px;
		}

		h2 {
			font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
			font-size: 40px;
			line-height: 1.2;
			color: #000;
			margin-bottom: 25px;
			font-weight: 400;
		}

		#banner-section {
			background: #fff none repeat scroll 0 0;
			position: relative;
			text-align: center;
		}

		#banner-section h1 {
			font-size: 40px;
			font-weight: 400;
			line-height: 1.2;
			margin: 0 auto 10px;
			max-width: 770px;
			font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
		}

		.zimage-slider {
			width: 100%;
			margin-top: 40px;
		}

		.zimage-slider-inner {
			width: 100%;
			max-width: 900px;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
			height: 400px;
			box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.05);
		}

		.zimage-slider-inner img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			opacity: 0;
			transition: all 0.5s ease;
			border: 1px solid rgba(0, 0, 0, 0.05);
		}

		.no-border {
			border: none !important;
		}

		.zimage-slider-inner img.active {
			opacity: 1;
			z-index: 9;
		}

		.slider-nav {
			margin: 25px auto 0;
			display: inline-block;
			padding: 0;
		}

		.slider-nav li {
			width: 10px;
			height: 10px;
			border-radius: 100%;
			background: #e5e5e5;
			margin: 0 7px;
			cursor: pointer;
			list-style: none;
			display: inline-block;
		}

		.slider-nav li.active {
			background: #0E94FF;
		}

		.footer {
			padding: 15px 0;
		}

		.copy {
			font-size: 12px;
			margin: 0 auto;
			line-height: 1.4;
		}

		.product-menu .selected a {
			color: #00add5;
		}

		.watch-icon {
			color: #000;
			display: inline-block;
			margin: 0 25px 0 auto;
			padding-left: 28px;
			position: relative;
			text-decoration: none;
			vertical-align: middle;
		}

		.watch-icon::after {
			border: 1px solid #000;
			border-radius: 100%;
			content: "";
			display: inline-block;
			height: 16px;
			left: 5px;
			position: absolute;
			top: 2px;
			width: 16px;
		}

		.watch-icon::before {
			border-color: transparent transparent transparent #000;
			border-style: solid none solid solid;
			border-width: 5px 0 5px 5px;
			content: "";
			display: inline-block;
			height: 0;
			left: 12px;
			position: absolute;
			top: 6px;
			width: 0;
		}

		.download-now-app {
			text-indent: -999px;
			display: inline-block;
			position: relative;
			width: 165px;
			height: 40px;
			background-image: url('../images/macappstoreicon.png');
			background-repeat: no-repeat;
			background-position: 0 0;
			overflow: hidden;
			vertical-align: middle;
		}

		.web-clipper .download-now {
			border: 1px solid #fff;
			color: #fff;
			display: inline-block;
			font-size: 16px;
			padding: 10px 35px;
			position: relative;
			
		}

		.web-clipper {
			background: #f44336 none repeat scroll 0 0;
			color: #fff;
		}

		.web-clipper h2 {
			color: #fff;
		}

		#price {
			text-align: center;
		}

		#price h2 {
			font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
			font-size: 35px;
			margin-bottom: 20px;
			
		}

		#price a {
			display: inline-block;
			font-family: "proxima_novasemibold";
			text-decoration: underline;
		}

		#price .z-small-content-wrap h2:first-child {
			margin-bottom: 15px;
		}

		#price .strike-container {
			position: relative;
		}

		#price .strike-container span {
			content: "";
			height: 10px;
			left: -12%;
			position: absolute;
			top: 20px;
			transform: rotate(11deg);
			transition: all 1s ease 0s;
			width: 110%;
		}

		#price .strike-container span>em {
			background: #f44336 none repeat scroll 0 0;
			content: "";
			height: 3px;
			left: 0;
			position: absolute;
			top: 0;
			transition: all 0.3s ease 0s;
			width: 0;
		}

		#price .strike-animate {
			width: 110% !important;
		}

		.price-inner {
			text-align: center;
		}

		.price-inner p {
			margin: 0 auto 20px;
			max-width: 670px;
		}

		#cloud-sync {
			background: #eceff1 none repeat scroll 0 0;
		}

		.touch-bar-slider-container .zimage-slider-inner {
			box-shadow: none;
			max-width: 650px;
		}

		.touch-bar-slider-container img {
			border: 0;
			box-shadow: none;
		}

		.touch-bar-slider-container .slider-nav {
			margin-top: 0;
		}
		/****** Popup Video ******/

		.z-pouup-wrap,
		.z-popup-overlay {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			position: fixed;
			outline: 0!important;
			-webkit-backface-visibility: hidden;
			z-index: 101;
		}

		.z-pouup-wrap {
			display: none;
		}

		.z-pouup-wrap-inner {
			display: none;
			text-align: center;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			padding: 0;
			overflow: auto;
			z-index: 102;
		}

		.z-pouup-wrap-inner:before {
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
			margin-left: -5px;
		}

		.z-popup-content-inner .popup-data {
			display: block;
		}

		.z-popup-overlay {
			background: #fff no-repeat center center;
			background: rgba(255, 255, 255, 0.95) url(/crm/images/popup-preloader.gif)no-repeat center center;
			cursor: pointer;
			display: none;
		}

		.z-popup-content-wrap {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			margin: 0 auto;
			text-align: left;
			width: 100%;
		}

		.z-popup-content {
			margin: 20px auto;
			max-width: 800px;
			background: #fff;
			z-index: 6;
			position: relative;
			text-align: initial;
			width: 90%;
			transition: height 0.5s ease;
		}

		.z-video-wrap .z-popup-content {
			padding: 0px;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			max-width: 70%;
		}

		.popup-data {
			display: none;
		}

		.popup-data-inner {
			padding: 30px;
		}

		.z-popup-close {
			display: block;
			position: fixed;
			top: 20px;
			right: 20px;
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-style: normal;
			font-size: 28px;
			font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
			text-align: center;
			color: #000;
			text-decoration: none;
			z-index: 2;
			background: url('https://www.zoho.com/creator/images/e-p-sprite.png') no-repeat 10px -6px;
			text-indent: -1000;
			overflow: hidden;
			z-index: 1001;
		}

		.popup-data {
			display: none;
		}
		/* single img section */

		.zimg-container {
			max-width: 300px;
			width: 100%;
			margin: 0 auto;
			position: relative;
		}

		img.zimg-skin {
			box-shadow: initial;
		}

		img.zimg-screen,
		video.zimg-screen {
			position: absolute;
			z-index: 1;
			top: 12%;
			left: 4.8%;
			width: 90%;
			box-shadow: initial;
			border: 1px solid #d7d7d7;
		}
		/* banner */

		.zimgbanner-container {
			position: relative;
		}

		/* img.zimgbanner-lap {
			-webkit-box-shadow: 8px 7px 15px #d7d7d7;
			-moz-box-shadow: 8px 7px 15px #d7d7d7;
			box-shadow: 8px 7px 15px #d7d7d7;
		} */

		img.zcstm-shadow {
    -webkit-box-shadow:  5px 6px 37px #eaeaea;
    -moz-box-shadow:  5px 6px 37px #eaeaea;
    box-shadow: 5px 6px 37px #eaeaea;
}
		img.zimgbanner-mobile {
			position: absolute;
			width: 230px;
			bottom: -65px;
			right: -40px;
			top: auto;
			box-shadow: initial;
		}
		/* more card  */

		.zmore-card ul li {
			display: inline-block;
			width: 12%;
			margin-right: 3%;
			text-align: center;
		}

		.zmore-card ul li:last-child {
			margin-right: 0;
		}

		.zmore-card ul li span {
			display: block;
			line-height: 16px;
			font-size: 14px;
			margin-top: 12px;
			color: #000;
		}

		.zmore-card ul li a img {
			border: 1px solid #f4f4f4;
		}

		.zmore-card {
			padding: 50px 0 30px 0;
			text-align: center;
		}

		.zmore-card h3 {
			margin-bottom: 40px;
		}

		.zmore-card ul li.active {
			opacity: .4;
		}

		.zmore-card ul li {
			transition: all .4s ease-in-out;
		}

		.zmore-card ul li:hover {
			transform: scale(1.08);
		}

			.product-menu-sub li{
			width:130px;
			right:20px;
		}

		.product-menu-sub li a {
			background: #f3f3f3;
			border:1px solid transparent;
		}

		.product-menu-sub li a:hover {
			background: #fff;
			border:1px solid #f3f3f3;
			border-bottom:transparent;
		}
		.product-menu-sub li:nth-child(2) a:hover{
				border:1px solid #f3f3f3;
				border-top:0;
		}

		.product-header-top .product-menu-sub-container::after,
		.product-header-top .product-menu-sub-container::before {
			top: 26px;
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min--moz-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 240dpi) {
			.download-now-app {
				background-image: url('../images/macappstoreicon@2x.png');
				background-size: 165px 40px;
			}
		}

		@media only screen and (max-width: 959px) and (min-width: 768px) {
			.z-small-content-wrap {
				max-width: 90%;
				margin: 0 auto;
			}
		}

		@media only screen and (max-width: 992px) {
			img.zimgbanner-mobile {
				display: none;
			}
		}

		@media only screen and (max-width: 767px) {
			.zimage-slider-inner {
				height: 200px;
			}
			h2,
			#price h2 {
				font-size: 22px;
				text-align: left;
				margin-bottom: 10px;
			}
			.main p {
				font-size: 16px;
				text-align: left;
			}
			#price h2,
			#price p,
			.web-clipper h2,
			#banner-section p {
				text-align: center;
			}
			.web-clipper h2 {
				margin-bottom: 25px;
			}
			#banner-section h1 {
				font-size: 30px;
				max-width: 250px;
			}
			#price .strike-container span {
				top: 11px;
			}
			.main p {
				max-width: 100% !important;
			}

			/* more card */
			.zmore-card ul li {
				width: 24%;
			}
			.zmore-card ul li span {
				min-height: 34px;
			}
			.zmore-card ul {
				padding-left: 0;
			}
			.zmore-card ul li:nth-child(3) {
				margin-right: 0;
			}

			.zimg-container {
				position: static;
			}

			img.zimg-skin {
				display: none;
			}
			img.zimg-screen,
			video.zimg-screen {
				position: static;
			}
			.zmore-card h3{
				font-size: 25px;
			}
		}