* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		i {
			/*
			opacity: 0;
			font-size: 18px;
			color: #fff;
			will-change: transform;
			transform: scale(0.1);
			-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
			*/
		}

		h2 {
			pointer-events: none;
		}

		body {
			background-color: #e6e5e1;
			width: 100vw;
			height: 100vh;
		}

		.ccontainer {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.ccontainer .card {
			position: relative;
			background-color: #fff;
			overflow: hidden;
			margin-bottom: 4px;
			width: 500px;
			height: 200px;
		}
		.ii {
			opacity: 0;
			font-size: 18px;
			color: #fff;
			will-change: transform;
			transform: scale(0.1);
			-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
		}


/*
		.ccontainer .card:before {
			content: "";
			z-index: 99;
			position: absolute;
			top: -10px;
			left: 32px;
			display: block;
			width: 16px;
			height: 16px;
			border-radius: 16px;
			background-color: #e6e5e1;
		}
		.ccontainer .card:after {
			content: "";
			z-index: 99;
			position: absolute;
			bottom: -10px;
			left: 32px;
			display: block;
			width: 16px;
			height: 16px;
			border-radius: 16px;
			background-color: #e6e5e1;
		}
		*/
		.ccontainer .card ul {
			z-index: 99;
			position: absolute;
			left: 39px;
			top: 5px;
			list-style-type: none;
		}
		.ccontainer .card ul li {
			width: 2px;
			height: 2px;
			border-radius: 2px;
			margin: 6px 0;
			background-color: #e6e5e1;
		}
		.ccontainer .card h2 {
			z-index: 99;
			font-family: "Poppins", sans-serif;
			position: absolute;
			bottom: 0;
			right: 140px;
			font-size: 35px;
			font-weight: 700;
			color: #fff;
		}
		.ccontainer .card .fa-arrow-right {
			z-index: 100;
			position: absolute;
			right: 75px;
			bottom: 25px;
			font-size: 40px;
			cursor: pointer;
		}
		.ccontainer .card p {
			z-index: 99;
			position: absolute;
			top: 20px;
			right: 70px;
			color: #333;
			opacity: 0.7;
			font-size: 12px;
			letter-spacing: 1px;
			writing-mode: vertical-lr;
			-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
		}
		.ccontainer .card .pic {
			z-index: 100;
			width: 400px;
			height: 200px;
			background-image: url("../../images/pic15.jpg");
			background-size: 100% 100%;
			filter: grayscale(100%);
		}
		.ccontainer .card .social {
			color: #fff;
			position: absolute;
			left: 20px;
			top: 20px;
			display: -webkit-box;
			display: -ms-flexbox;
			-ms-flex-pack: distribute;
			justify-content: space-around;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 400px;
			height: 80px;
			border-radius: 80px;
			text-shadow :
			1px   1px 1px #999999,
			-1px   1px 1px #999999,
			1px  -1px 1px #999999,
			-1px  -1px 1px #999999,
			1px   0px 1px #999999,
			0px   1px 1px #999999,
			-1px   0px 1px #999999,
			0px  -1px 1px #999999;
		}
		.ccontainer .card .social a{
			color: #fff;
			font-weight: 700;
		}
		.ccontainer .card .social i:nth-of-type(4) {
			-webkit-transition-delay: 0.4s;
			transition-delay: 0.4s;
		}
		.ccontainer .card .social i:nth-of-type(3) {
			-webkit-transition-delay: 0.3s;
			transition-delay: 0.3s;
		}
		.ccontainer .card .social i:nth-of-type(2) {
			-webkit-transition-delay: 0.2s;
			transition-delay: 0.2s;
		}
		.ccontainer .card .social i:nth-of-type(1) {
			-webkit-transition-delay: 0.1s;
			transition-delay: 0.1s;
		}
		.ccontainer .card:hover i {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
		.ccontainer .card button {
			position: absolute;
			right: 14px;
			bottom: 14px;
			width: 30px;
			height: 30px;
			background-color: #da4d1d;
			border: none;
			border-radius: 30px;
			cursor: pointer;
			outline: none;
			transition: all 0.3s ease;
			mix-blend-mode: hard-light;
			padding: 0;
		}
		.ccontainer .card button i {
			font-size: 3rem;
		}
		.ccontainer .card:hover button {
			transform: scale(18);
		}
		.ccontainer .card:hover p {
			color: #fff;
		}
		.ccontainer .card:hover .pic {
			filter: grayscale(0);
		}
		.ccontainer .card2 .pic {
			background-image: url("../../images/pic16.jpg");
		}
		.ccontainer .card2 button {
			background-color: #2b26c3;
		}
		.ccontainer .card3 .pic {
			background-image: url("../../images/pic17.jpg");
		}
		.ccontainer .card3 button {
			background-color: #2b26c3;
		}
		.ccontainer .card4 .pic {
			background-image: url("../../images/pic18.jpg");
		}

		@media screen and (max-width: 1680px) {

			#banner {
				padding: 10em 0 8em 0;
			}
			.ccontainer .card {
				width: 500px;
				height: 200px;
			}
		}

		@media screen and (max-width: 1280px) {

			#banner {
				padding: 8em 0 6em 0;
			}
			.ccontainer .card {
				width: 500px;
				height: 200px;
			}
		}

		@media screen and (max-width: 980px) {

			#banner {
				padding: 12em 0 10em 0;
			}

			#banner br {
				display: none;
			}
			.ccontainer .card {
				width: 500px;
				height: 200px;
			}

		}

		@media screen and (max-width: 736px) {

			#banner {
				padding: 4em 0 2em 0;
			}

			#banner h1 {
				font-size: 1.75em;
			}
			.ccontainer .card {
				width: 400px;
				height: 200px;
			}
			.ccontainer .card:hover button {
				transform: scale(13);
			}
		}

		@media screen and (max-width: 480px) {

			#banner {
				padding: 5em 0 3em 0;
			}

			#banner ul {
				margin-top: 1em;
			}
			.ccontainer .card {
				width: 350px;
				height: 200px;
			}
			.ccontainer .card:hover button {
				transform: scale(11);
			}
		}