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

		.my-arrow {
			display: block;
			position: absolute;
			width: 50px;
			height: 50px;
			color: #444444;
			font-size: 14px;
			line-height: 50px;
			top: 50%;
			transform: translateY(-50%);
			text-align: center;
			opacity: 0;
			visibility: hidden;
			transition: all 0.4s;
			-webkit-transition: all 0.4s;
		    -o-transition: all 0.4s;
		    -moz-transition: all 0.4s;
		}
		.main-frame:hover .my-arrow {visibility: visible; opacity: 1;}
		.my-arrow:hover {
			opacity: 0.3 !important;
			cursor: pointer;
			color: white;
			background-color: black;

		}

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

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

		.my-frame img{width: 100%;}

		.fix-frame img {width: 100%; opacity: 0;}
		
		.main-pic img {width: 100%;}
		
		.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;
		}