.fix-frame {
			opacity: 0;
		}
		.main-frame, .sub-frame {
			position: relative;
			overflow: hidden;
		}

		.my-arrow {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			position: absolute;
			width: 30px;
			height: 30px;
			color: #444444;
			font-size: 18px;
			top: 50%;
			transform: translateY(-50%);
			background-color: rgba(0,0,0,0.1);
			transition: all 0.4s;
			-webkit-transition: all 0.4s;
		    -o-transition: all 0.4s;
		    -moz-transition: all 0.4s;
		}

		.my-arrow:hover {
			cursor: pointer;
			color: white;
			background-color: rgba(0,0,0,0.5);
		}

		.my-arrow.back {left: 30px;}
		.my-arrow.next {right: 30px;}

		@media (max-width: 576px) {
			.my-arrow.back {left: 10px;}
			.my-arrow.next {right: 10px;}
		}

		
		.wrap-main-pic {
			display: flex;
			justify-content: center;
			position: absolute;
			top: 0;
		}
		

		.btn-sub-frame {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: black;
			opacity: 0;
			transition: all 0.4s;
			-webkit-transition: all 0.4s;
		    -o-transition: all 0.4s;
		    -moz-transition: all 0.4s;
		}
		
		.btn-sub-frame:hover {
			opacity: 0.3;
			cursor: pointer;
		}