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

html{scroll-behavior: smooth;}

*{margin: 0;padding: 0;}
p{margin-bottom: 0;}
body{background: #fff;}
ul li{list-style: none;}
ul{padding-left: 0;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,ul,ol{margin-bottom: 0;}
img,video{max-width: 100%;height: auto;vertical-align: middle;}

a{ color: #03a3ff; text-decoration: none; }
a:hover { text-decoration: underline; }
figure{ margin-block-start: 20px; margin-block-end:20px;margin-inline-start:0;margin-inline-end:0; text-align: center;display:block;}
.video_box{ padding: 20px 0; text-align: center;width: 100%;height: 380px;}
.video_box iframe{width: 100%;height: 100%; }
.hide-content{display: none;}

.pl-15{padding-left:15px;}
.no-left,ul.no-left{padding-left:0!important;}
.fw-bold{font-weight: bold;}
.align-left{justify-content: flex-start!important;}
.line{border-top: 1px solid #b2b2b2;padding-bottom: 10px;margin-top: 15px;display: inline-block;width: 100%;}
.line2{border-top: 1px solid #e2e0ed;padding-bottom: 10px;margin-top: 15px;display: inline-block;width: 100%;}
/* .skyBlue{background: #f5f9ff;} */
.lightGray{background: #fafafa;}
.color-green{color:#26BC6F;}
.margBtomNo{padding-bottom: 0!important;}
ul.circle{padding:10px 0 10px 35px;}
ul.circle li{list-style: disc; padding: 2px 0;}
ul.no-circle{padding:10px 0 10px 35px;}
ul.no-circle li{list-style: none; padding: 2px 0;}
ol{padding:10px 0 10px 35px;}
ol li{padding: 2px 0;}
ol li a{/* color: currentColor; *//* text-decoration: underline; */}
ul.tick{padding-top: 20px;}
ul.tick li{position: relative;padding: 3px 0;display: flex;gap: 5px;}
ul.tick li::before{content: "";width: 16px;height: 16px;border-radius: 8px;background: #94d03b;display: inline-block;flex-shrink: 0;margin-top: 5px;}
ul.tick li::after{content: "";width: 4px;height: 7px;color: #fff;border-right: 1px solid currentColor;border-bottom: 1px solid currentColor;transform: rotate(45deg);position: absolute;left: 5px;top: 11px;}
.curColor{color: currentColor;}
.probar-box{border: 1px solid #019aff;height: 15px;border-radius: 8px;width: 100%;}
.probar-box span{display: block;width: 80%;height: 100%;background: #019aff;border-radius: 7px;}


/* .alignCenter{text-align: center;} */
 /* 下载按钮 */
.link-btn-box{padding: 20px 0;display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}
.link-btn-box a{display: inline-flex;padding:0 20px;gap: 5px;line-height: 48px;background-color: #78c443;border-radius: 5px;font-weight: bold;color: #fff;align-items: center;font-size: 21px;}
.link-btn-box a:hover{text-decoration: none;}
.link-btn-box a::before{width: 25px;height: 22px;}
.down-btn-box a img{vertical-align: baseline; padding-right: 5px;}

.seo-icon-win-mac::before {content: "";display: inline-block;background: url(../images/ai-image-enhancer/seo-icon/win-mac.svg) no-repeat center;}
/*
.seo-icon-win::before{content: "";display:inline-block;width:36px;height: 30px;background: url(../images/svg-icons/icon-win.svg) no-repeat center;}
.seo-icon-mac::before{content: "";display:inline-block;width:36px;height: 30px;background: url(../images/svg-icons/icon-mac.svg) no-repeat center;}
.btn-winmac{padding: 10px 0;}
.btn-winmac a{ color: #fff;text-decoration: none;background: #78c443;border-radius: 5px;line-height: 48px;display: inline-flex; align-items: center; padding: 0 15px;}
.btn-winmac a::after{content: "";width: 60px;height: 30px;display: inline-block;background: url(../images/svg-icons/win-mac.svg) no-repeat center; margin-left: 10px;}
*/
/* 下载按钮 end*/

/* more 按钮 */
.more-btn-box{ padding: 20px 0;}
.more-btn-box a{font-size: 21px;color: #4c4c4c;display: inline-block;border-radius: 5px;border: 1px solid #4c4c4c;line-height: 44px;padding: 0 40px;}
.more-btn-box a:hover{text-decoration: none;}
/* more 按钮 end*/

.Top { width: 90px; height: 90px; position: fixed; bottom:10%; right: 5%; cursor: pointer; display: none; }

/*  article主内容滑动对比图片部分*/
.article-drag-container{display: flex;justify-content: center;padding: 10px 0;}
.article-drag-item{position: relative;}
.article-drag-item .main-drag-line{left: calc(var(--wid, .5)* 100%);position: absolute;top: 0;bottom: 0;pointer-events: none;display: flex;flex-flow: column;align-items: center;width: 1px;}
.main-drag-line::before, .main-drag-line::after { content: ''; flex: 1; width: 100%; background-color: #fff; }
.main-drag-line >img{max-width: none;}
.article-drag-item .main-drag{position: absolute;left: 0;right:0;top: 0;bottom: 0;opacity: 0;cursor: ew-resize;-webkit-appearance: none;appearance: none;}
.article-drag-img{position: absolute;width: calc(var(--wid, .5)* 100%);object-fit: cover;object-position: 0;height: 100%;}	

/* ------------------ */
/* article{width: 900px;margin: 0 auto;display: inline-block;} */
.page-table{position: sticky;top: 0;}
.article-content h2{color: #000;line-height: 1.4;font-weight: bold;padding: 20px 0 10px;}
.article-content h3{color: #000;font-weight: bold;margin: 25px 0 15px 0;line-height: 30px;position: relative;padding-left: 25px;box-sizing: content-box;}
.article-content h3::before{content: "";position: absolute;top: 0;width: 10px;background: #0096ff;bottom: 0;left: 0;}
/* .main-container{padding-top: 60px;}
.article-content h1{text-align: center;color: #000;line-height: 1.4;font-weight: bold;margin-top: -10px;padding-bottom: 10px;}
.article-content{max-width: 900px;margin: 0 auto;color: #4c4c4c;width: 92%;}
.article-content > p,.article-content section > p{padding: 10px 0;} */
/*.main-content{display: flex;padding: 50px 5px 0; width: 1550px;margin: 0 auto; justify-content: space-between;align-items: flex-start;}*/


/* .box-radius{border-radius: 7px;padding: 25px 10px;margin: 15px 0;display: inline-block;width: 100%;box-sizing: border-box;} */
.box-radius .box-t{font-weight: bold;color: #000; line-height: 1;padding: 10px 0;}
.box-radius .title{padding: 15px 0 5px;}
.box-radius .title+p{/* padding-left:15px; */}
.box-radius p{padding-bottom: 5px;padding-top: 5px;}
.box-radius p a{color: #03a3ff;/* border-bottom: 1px dashed #7a7c7f; */}
.box-radius p a:hover{text-decoration: none;}
.box-radius ul li{padding: 5px 0;}
.box-radius ul li a{/* color:currentColor; */}
.expand-box{text-align: center;margin-bottom: -25px;}
.expand-box span{display: inline-flex;align-items: center;gap: 15px;padding: 0 40px;line-height: 40px;background: #e6eefa;border-radius: 10px 10px 0 0;cursor: pointer;}
.expand-box span::before{content: "";display: inline-block;width: 10px;height: 10px;color: #767e8b;border-left: 1px solid currentColor;border-bottom: 1px solid currentColor;transform: rotate(-45deg) translateY(-2px);}
.expand-box span.hide::before{transform: rotate(135deg) translateY(-4px);}

.blue-box{	border-radius: 3px;	padding: 25px;	margin: 15px 0;	display: inline-block;	width: 100%;	box-sizing: border-box;	border: 1px solid #0684ff;}
.blue-box p{padding-bottom: 5px;padding-top: 5px;}
/* ------------------ */
.box-prod{background: #e0edfa;margin: 15px 0;padding: 20px 0;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 10px;}
.box-prod .prod-content{padding-left: 10px;}
.prod-content .box-t{font-weight: bold;color: #000; padding: 10px 0 5px;}
.prod-content p{padding: 3px 0;}
.prod-content ul{padding: 10px 0 10px 20px;}
.prod-content ul li{ padding: 2px 0;}
/* ------------------ */
.pros ul{padding-bottom: 10px;}
.pros .t{color: #4c4c4c;font-weight: bold;padding: 5px 0;}
ul.rt li{background: url(../images/ai-image-enhancer/seo-icon/rt.png) no-repeat left 11px;padding-left: 25px;}
ul.wr li{ background: url(../images/ai-image-enhancer/seo-icon/wr.png) no-repeat left 11px;padding-left: 25px;}
.pros-two{display: flex;justify-content: space-between;position: relative;flex-wrap: wrap;}
.pros-two ul li{margin: 10px 0;}
/* ------------------ */
.table-box{text-align: left;padding: 20px 0;overflow-x: scroll;  width: 100%;}
.table-box table{width: 200%;max-width: 750px; border-spacing: 0;border-collapse: collapse;table-layout: fixed;}
.table-box table th{font-weight: bold;background: #f5f9ff;}
.table-down a{border-bottom: 1px dashed currentColor;}
.table-down a:hover,.table-more a{text-decoration: none;}
.table-box table th,.table-box table td{padding: 11px;}
.table-more a{display: inline-block;border-radius: 7px;line-height: 38px;border: 1px solid #a5a5a5; width: 168px;text-align: center;font-weight: bold;color: currentColor;}
.table-box table tr:nth-child(odd){background: #f7f7f7;}
.table-down a::before{width: 21px;height: 19px;}

.table-bg-gradient{text-align: left;padding: 20px 0;overflow-x: scroll;  width: 100%;}
.table-bg-gradient table{width: 200%;max-width: 750px; border-spacing: 0;border-collapse: collapse;table-layout: fixed;}
.table-bg-gradient table th{font-weight: bold;text-align: center;}
.table-bg-gradient table th,.table-bg-gradient table td{padding: 11px;}
.table-bg-gradient table th:nth-child(1),.table-bg-gradient table tr td:nth-child(1){background:#f5f9ff;}
.table-bg-gradient table th:nth-child(n+2),.table-bg-gradient table tr td:nth-child(n+2){background: linear-gradient(to right,#fefefe,#f8f8f8);}
.table-slide-btn{border-top: 1px solid #e7e9ed;text-align: center;}
.table-slide-btn span{display: inline-flex;padding: 10px 30px;background: #e6eefa;border-radius:0 0 10px 10px;cursor: pointer;align-items: center;}
.table-slide-btn span::before{content: "";display: inline-block;width: 10px;height: 10px;color: #767e8b;border-left: 1px solid currentColor; border-bottom: 1px solid currentColor;transform: rotate(-45deg) translateY(-2px);}
.table-slide-btn span.fold::before{transform: rotate(135deg) translateY(-4px);}
.extra-rows{display: none;}
/* ------------------ */
.box-leftBlue{box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);border-left:4px solid #0096ff;align-items: center;justify-content: space-around;margin: 20px 0;display: flex;padding: 10px 0;flex-wrap: wrap;}
.box-leftBlue .leftBlue-txt{padding: 0 20px;}
.box-leftBlue .leftBlue-txt p{padding: 2px 0;}
.box-leftBlue .leftBlue-txt a{ color: #04a3ff;}
.box-leftBlue > img{padding-left: 20px;}
/* ------------------ */
/* .tips-radius{border-radius: 7px;padding: 25px 15px;margin: 15px 0;display: inline-block;width: 100%;box-sizing: border-box;} */
.tips-radius .title{padding: 10px 0; color: #000;}
.tips-radius p{padding: 5px 0; margin-bottom: 0;}
p.lamp{background: url(../images/ai-image-enhancer/seo-icon/lamp.png) no-repeat left 8px;padding-left: 20px;}
/* ------------------ */
.faq-content{padding: 10px 0 20px;}
.faq-content h3{padding-left: 0;}
.faq-content h3::before{display: none;}
.faq-content h3 img{vertical-align: text-top;}
.faq-content .faq-one .t,.faq-content .faq-item .t{/* font-size: 19px; */font-weight: bold;color: #000;padding: 20px 0 7px;position: relative;cursor: pointer;margin: 0;line-height: 1.1;}
.faq-content .faq-one .t::after,.faq-content .faq-item .t::after{content: "";display: inline-block;width: 13px;height: 13px;right: 10px; top:22px; position: absolute; border-bottom:2px solid #333; border-right:2px solid #333;transform:rotate(45deg);transition: all 0.2s;}
.faq-content .faq-one.active .t::after,.faq-content .faq-item.active .t::after{content: "";display: inline-block;width: 13px;height: 13px;right: 10px; top:29px; position: absolute; border-bottom:2px solid #333; border-right:2px solid #333;transform:rotate(-135deg);}
.faq-content .faq-one .faq-txt,.faq-content .faq-item .faq-txt{display: none;}
/* .faq-content .faq-one.active .faq-txt{display: block;} */
.faq-content .faq-one,.faq-content .faq-item{border-bottom:1px solid #ededed; padding-bottom: 13px;}
.faq-content .faq-one:last-child,.faq-content .faq-item:last-child{border-bottom: none;}
.faq-content .faq-txt p{padding: 5px 0;}
/* ------------------ */
.recomd-article{border-radius: 10px;border: 1px solid #e4e4e4;padding: 20px 10px;margin: 20px 0;}
.recomd-article h4{font-weight: bold;color: #000; padding: 10px 0;}
/* .recomd-article ul {display: flex;flex-wrap: wrap; padding-left: 0;} */
.recomd-article ul li{/* width: 50%; */ padding: 7px 0;}
.recomd-article ul li a{color: currentColor;}
/* ------------------ */
.bottom-author{padding: 20px 0;}
.bottom-author .crumb{color: #4e4e4e; padding-bottom: 20px;}
.bottom-author .crumb a{color: currentColor;}
.bottom-author-mess > img{width: 40px;height: 40px;border-radius: 20px;}
.bottom-author-mess a{font-weight: bold;color: #000;margin: 0 5px 0 0;display: inline-flex;align-items: center;gap: 5px;}
.article-content .bottom-author p{padding:10px 0 10px;}
.article-content .bottom-author p a{color: inherit;}
/* ------------------ */
.fixed-nav{position: fixed;width: 100%;background: #f5f9ff;top: 0;padding: 14px 0;box-shadow: 0px 0px 15px 0px rgba(3, 101, 248, 0.15);display: none;z-index: 3;}
.fixed-nav-box{/* width: 900px;margin: 0 auto; */display: flex;justify-content: space-between;align-items: center; /* padding-right: 100px; */}
/* .fixed-nav-box p{margin-left: -50px;} */
.fixed-btn{position: relative;}
.fixed-btn a{display: inline-flex;align-items: center;border-radius: 3px;background: #78c443;color: #fff;line-height: 30px;padding: 0 10px; margin: 0 3px;}
.fixed-btn a::before{width: 19px;height: 15px;}
.fixed-btn a:hover{text-decoration: none;}
.fixed-btn a img{width: 10%;}
.fixed-btn .close{position: absolute;right: -20px;top: -10px; cursor: pointer;font-size: 25px;}
/* ------------------ */

/* ----------------------------------------------------- */
.aside-left{position: sticky;top: 0;display:none;z-index: 2;}
.sidebar-box{overflow: hidden;transition: 0.4s;width: 260px;}
.sidebar-content{transition: 0.4s;}
.aside-left.active .sidebar-content{margin-left: -260px;width: 100%;}
.aside-left .page-table{border: 1px solid #eee;padding: 0 10px 20px 13px;position: relative;background: #fff;}
.page-table .button{height: 0;position: relative;}
.page-table .button span{display: inline-block;background: #e3edfc;width: 24px;height: 30px;cursor: pointer; z-index: 6;position: absolute;top: 17px;} 
.page-table .button span.fold{border-radius: 5px 0 0 5px;right: -13px;}
.page-table .button span.expand{border-radius:0 5px 5px 0; /* right: -39px; */ left: -50px;}
.page-table .button span.expand::after{content: "";display: inline-block;position: absolute;left: 0;top:-13px;border-left: 1px solid #eee; height: 57px;}
.aside-left.active  span.expand{left: 250px;}
.page-table .button span::before{content: "";display: inline-block;width: 11px;height: 11px;border-top:1px solid #1d8eff;border-right:1px solid #1d8eff;transform: rotate(45deg) translate(3px,0);}
.page-table .button span.fold::before{transform: rotate(-135deg) translate(-9px,6px);}
.page-table .t{color: #000;font-weight: bold;line-height: 60px;border-bottom: 1px solid #eee;position: relative;z-index: 5;}
.page-table .t::before{content: "";display: inline-block;width: 6px;height: 32px;background: #0a85ff;position: absolute;top: 14px;left: -13px;}
.page-table .tab-one{padding: 16px 0 0; /* color: #7a7a7a; */}
.page-table .tab-one .tt{position: relative;padding:0 0 0 15px;cursor: pointer;display: flex;}
.page-table .tab-one .tt::before{content: "";display: inline-block;width: 7px;height: 7px; left: 0;right: 10px; top:5px; position: absolute; border-bottom:1px solid #7a7a7a; border-right:1px solid #7a7a7a;transform:rotate(-45deg) translate(-5px,1px);transition: all 0.2s;}
.page-table .tab-one .tt.fold-item.active::before{ top:9px; position: absolute; transform:rotate(45deg) translate(-5px,1px);}
/*.page-table .tab-one .tt.no-fold.active::before{}*/
.page-table .tab-one .tt a{ color: currentColor;}
.tab-one ol{display: none;}
.tab-one ol li{ padding:8px 0 8px 0;}
.tab-one ol li a{ color: currentColor;text-decoration: none;}
.tab-one ol li a:hover{color: #04a3ff;text-decoration: underline;}

.share-box{text-align: center;display: none; }
.share-box p{color: #4c4c4c;padding: 15px 0 5px;}
.share-box .share a{margin: 0 3px;}

/* ------------------ */
.aside-right{width: 260px;position: sticky;top: 50px;display: none;}
.article-recommend{overflow: hidden;}
.article-recommend .recmd-box{background:url(../images/ai-image-enhancer/seo-icon/box-bg.jpg)no-repeat center;width: 260px;height: 270px;overflow: hidden;/* margin-top: 100px; */}
.article-recommend .box-txt{background: rgba(5, 11, 30, 0.85);margin-top: 100px;color: #fff;padding: 0 10px;}
.article-recommend .box-txt .t{ color: #0a8fff;font-weight: bold; padding: 15px 0 8px;}
.article-recommend .box-txt p{line-height: 1.5;}
.article-recommend .box-txt .btn{padding: 15px 0 17px;display: block;}
.article-recommend .box-txt .btn a{display: inline-block;border-radius: 5px;color: #fff;font-weight: bold;line-height: 44px;padding: 0 20px;background: #78c443;}
.article-recommend .box-txt .btn a:hover{text-decoration: none;}
.article-recommend ul li{display: flex; align-items:flex-start;border-bottom: 2px dotted #d1d1d1;padding: 15px 0;}
.article-recommend ul li a{ color: currentColor;}
.article-recommend ul li span{font-size: 25px;display: block;width: 40px;text-align: center;flex-shrink: 0;}
/* ------------------- */
.stop{pointer-events: none; }
/* ------------------- */
.copy-container{position: relative;padding: 20px;}
.copy-container .copy-btn{position: absolute;right: 5px;top: 5px;border-radius: 5px;padding: 1px 5px;background: #9e9e9e42;font-size: 15px;cursor: pointer;}


@media(min-width:576px){
	
	.mobile-btn-banner{text-align: left;}

	.video_box{height: 480px; max-width:850px; margin: 0 auto;}
	
}
@media(min-width:768px){
	.video_box{height: 567px;}

	/* ------------ */
	.box-leftBlue{flex-wrap: nowrap;}

	.pros-two .pros{width: 45%;}
	.pros-two::after{content: "";display: inline-block;height: 100%;border-left: 1px dashed #d1e1f4;position: absolute; left: 50%;}

	.table-box table,.table-bg-gradient table{width: 100%; max-width: none;}

	.recomd-article ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
	.recomd-article ul li{width: 49%;}
	
}
@media(min-width:992px){
	.main-banner{position: relative; }
	.banner-bg{width: 50%;position: absolute;right: 0;top: 0; height: 100%;display: flex;justify-content: center;align-items: center;}
	.banner-bg img{object-fit:cover;}
	.banner-bg::before{
		content: '';
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		background: linear-gradient(to right, rgba(0, 0, 0, 1), transparent, transparent, transparent)
	}

	.share-box{display: block;}
	.aside-right{display: inline-block;}
	
	.recomd-article{padding: 20px 30px;}
	
	.tips-radius{padding: 25px 30px;}
	
	.box-radius{padding: 25px 30px;}

}


@media(min-width:1200px){
	.banner-content .seo-optimize-content{display: block;}
	.banner-bg img{ height: 100%;}

	/* ----------- */
	.prod-content{width: 56%;}

	.table-box,.table-bg-gradient{overflow-x: auto;}
	
}
@media(min-width:1400px){
	
	.aside-container {position: absolute;left: 50%;height: calc(100% - 80px);margin-left: -800px;width: 275px;color: #161817;z-index: 100;}

	.main-banner.banner2 .banner-content {padding-left: 40px;box-sizing: border-box;}
	
	/*	---------------------*/
}

@media(min-width:1600px){
	.aside-left{width: 260px;display: inline-block;}
}

.aside-left ol {
    list-style: none;
    counter-reset: my-counter;
}
.aside-left ol li {
	counter-increment: my-counter;
	position: relative;
	display: flex;
}
.aside-left ol li::before {
	content: counter(my-counter);
	background: #ffffff;
	color: #4e4e4e;
	border: 1px solid #e2eaf5;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: -30px;
	font-weight: normal;
}

.aside-left ol li:has(a.highlight)::before {
	background: #0684ff;
	color: #fff;
	border-color: #0684ff;
}
.aside-left ol li a.highlight {
	color: #000000;
}

.aside-left .aside-new {
	display: inline-block;
	padding: 2px 3px;
	line-height: 1;
	background:#0dc07a;
	border-radius: 3px;
	font-size: 12px;
	color:#fff;
	transform: translateY(3px);
	font-style: normal;
	text-align: center;
	align-self: flex-start;
	margin-left: auto;
}
.aside-left .aside-hot {
	display: inline-block;
	padding: 2px 3px;
	line-height: 1;
	background:#ff4b4b;
	transform: translateY(3px);
	font-style: normal;
	font-size: 12px;
	color: #fff;
	border-radius: 3px;
	text-align: center;
	margin-left: auto;
	align-self: flex-start;
}
.aside-left .aside-zan {
	display: inline-block;
	width: 21px;
	height: 20px;
	background: url(../images/ai-image-enhancer/seo-icon/icon-zan.png) no-repeat;
	position: absolute;
	right: 3px;
	top: 0;
	transform: translateY(8px);
}
/*	---------------------*/
/*放大弹出层 stat*/
.enlarge-screenshot-content{text-align: center;}
.enlarge-screenshot-content span{cursor: pointer;color: #03a3ff;display: inline-block;padding-top: 5px;}
.popContent{position:fixed;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0,0,0,0.6);z-index: 1000;display: flex;align-items: center;justify-content: center;}
.popImg{display: inline-block;padding: 20px;background: #fff;position: relative;}
.popImg img{width: auto;height: auto;}
.popImg .close{position: absolute;right:0;top: -20px; background: #c1bfbd;width: 40px;height: 40px;line-height: 32px; color: #fff;cursor: pointer; border-radius: 50%;font-size: 40px; text-align: center;}
@media(min-width:1200px){
	.popImg .close{right: -20px;}
}
/*放大弹出层 end*/



/* ``````````````` effect-drag-model ``````````````` */
.effect-drag-model {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	padding: 30px 0;
	flex-wrap: wrap;
}
.effect-model {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #313131;
	border-radius: 5px 5px 0 0;
	height: 30px;
	color: #ffffff;
	padding: 0 10px;
	font-size: 17px;
	line-height: 1;
}
.effect-drag-container {
	position: relative;
	overflow: hidden;
}
.effect-drag-before {
	position: absolute;
    width: calc(var(--wid, .5) * 100%);
    object-fit: cover;
    object-position: 0;
    height: 100%;
	z-index: 1;
	overflow: hidden;
}
.effect-drag-before img {
	height: 100%;
	width: auto;     
	display: block;
	object-fit: cover;
	object-position: left center;
	user-select: none;
	-webkit-user-drag: none;
}
.effect-tips-before {
	position: absolute;
	left: 0;
	bottom: 10px;
	white-space: nowrap;
	padding: 8px 5px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	border-radius: 0 5px 5px 0;
	max-width: 195px;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}
.effect-tips-before:empty {
	padding: 0;
}
.effect-drag-after {
	position: relative;
	z-index: 0;
}
.effect-tips-after {
	position: absolute;
	right: 0;
	bottom: 10px;
	white-space: nowrap;
	padding: 8px 5px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	border-radius: 5px 0 0 5px;
	max-width: 195px;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}
.effect-tips-after:empty {
	padding: 0;
}

.effect-drag {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	z-index: 2;
}
.effect-image-before-after-handle {
    height: 30px;
    width: 30px;
    position: absolute;
    left: calc(var(--wid, .5) * 100%);
    top: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid #ffffff;
    border-radius: 1000px;
    box-shadow: 0 0 12px rgba(51,51,51,.5);
    z-index: 40;
    background: rgba(255, 255, 255, 0);
    cursor: pointer;
}
.effect-image-before-after-handle:before {
    content: " ";
    display: block;
    background: #ffffff;
    position: absolute;
    z-index: 30;
    width: 1px;
    height: 9999px;
    left: 50%;
    margin-left: -0.5px;
    bottom: 50%;
    margin-bottom: 17px;
    box-shadow: 0 1px 0 #ffffff,0 0 12px rgba(51,51,51,.5);
}
.effect-image-before-after-handle:after {
    content: " ";
    display: block;
    background: #ffffff;
    position: absolute;
    z-index: 30;
    width: 1px;
    height: 9999px;
    left: 50%;
    margin-left: -0.5px;
    top: 50%;
    margin-top: 17px;
    box-shadow: 0 -1px 0 #ffffff,0 0 12px rgba(51,51,51,.5);
}

.effect-image-before-after-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    transition-duration: .5s;
    transition-property: background;
    background: 0 0;
    z-index: 25;
}
.effect-image-before-after-left-arrow {
    width: 0;
    height: 0;
    border: 5px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    border-right: 6px solid #ffffff;
    left: 50%;
    margin-left: -14px;
}
.effect-image-before-after-right-arrow {
    width: 0;
    height: 0;
    border: 5px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    border-left: 6px solid #ffffff;
    right: 50%;
    margin-right: -14px;
}