@charset "utf-8";
html,body{scroll-behavior:smooth;}
body{color:#504f4f;min-width:1200px;}
a{color:inherit;text-decoration:none;}
a:hover {text-decoration: underline;}
img{max-width:100%;}
ol,ul{list-style:none;}
.details{width:1200px;margin:0 auto;}
a[name] {scroll-margin-top: 100px;}
/* ````````````````````````````common````````````````````````````````````````` */

.main01 {padding: 38px 0;background: radial-gradient(circle at 30% 200px, #f9efd2, #fafafa 250px, transparent 0), radial-gradient(circle at 70% 100px, #f9f3e2, #fafafa 300px);}
.main01-top {display: flex;align-items: flex-start;flex-wrap: wrap;}
.main01-left {width: 500px;margin-right: 120px;padding-top: 30px;}
h1 {font-size: 31px;color: #181818;line-height: 1.4;padding-bottom: 35px;font-weight: 600;}
h1+p {font-size: 19px;color: #414141;line-height: 1.5;}
.main01-links {display: flex;flex-wrap: wrap;margin-bottom: 70px;}
.left-links {width: 330px;box-sizing: border-box;border-radius: 10px 0 0 10px;overflow: hidden;background-color: #ffd385;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px 10px 20px 20px;}
.ai-link-icon {font-size: 27px;color: #fff;line-height: 1;text-align: center;padding-bottom: 28px;}
.ai-link-icon::before {content: "";display: block;width: 57px;height: 50px;background: url(../images/index/icons.png) no-repeat left top;margin: 0 auto 18px;}
.inner-link {font-size: 17px;color: #131313;line-height: 1;margin-bottom: 32px;padding-left: 12px;position: relative;}
.inner-link:last-child {margin-bottom: 0;}
.inner-link::before {content: "";border-top: 4px solid transparent;border-left: 6px solid #131313;border-bottom: 4px solid transparent;position: absolute;top: 5px;left: 0;}
.inner-link>a {text-decoration: underline;}
.inner-link>a:hover {color: #3992ff;}
.right-links {width: 870px;box-sizing: border-box;border: 1px solid #dcdcdc;border-radius: 0 10px 10px 0;border-left: none;display: flex;flex-wrap: wrap;}
.right-link {width: 33.33%;min-height: 164px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;padding: 26px;}
.right-link+.right-link {border-left: 1px solid #dcdcdc;}
.right-link:nth-child(n+3) {border-top: 1px solid #dcdcdc;}
.right-link:nth-child(4) {border-left: none;}
.right-link>a {font-size: 21px;color: #000;line-height: 1;text-align: center;text-decoration: underline;text-decoration-skip-ink: none;}
.right-link>a:hover {color: #3992ff;}
.right-link>a::before {content: "";display: inline-block;vertical-align: middle;margin-right: 20px;background: url(../images/index/icons.png) no-repeat left top;}
.download-link>a::before {width: 45px;height: 37px;background-position-x: -86px;}
.convert-link>a::before {width: 44px;height: 40px;background-position-x: -160px;}
.compress-link>a::before {width: 36px;height: 39px;background-position-x: -233px;}
.edit-link>a::before {width: 37px;height: 38px;background-position-x: -298px;}
.record-link>a::before {width: 55px;height: 34px;background-position-x: -364px;}
.other-link>a::before {width: 40px;height: 42px;background-position-x: right;}
.right-link>p {font-size: 17px;color: #393939;line-height: 1.4;padding-top: 20px;}

.pages-wrap {margin-bottom: 12px;}
.page-title {border-top: 2px solid #0d9bff;background-color: #f3f6f9;padding: 6px 90px 6px 23px;box-sizing: border-box;min-height: 55px;display: flex;align-items: center;font-size: 21px;color: #000;line-height: 1;font-weight: 600;position: relative;cursor: pointer;}
.page-title>span {width: 44px;margin-right: 18px;text-align: center;flex-shrink: 0;}
.page-title::after {content: "";width: 17px;height: 17px;border-right: 2px solid #000;border-bottom: 2px solid #000;border-radius: 2px;transform: rotate(45deg);position: absolute;right: 35px;top: 12px;}
.page-title.active::after {transform: rotate(-135deg);top: 22px;}
.pages-con {display: none;padding: 12px 20px 44px;background-color: #fff;border-radius: 0 0 6px 6px;}
.the-pages>li {display: none;padding: 25px 5px 22px;border-bottom: 1px solid #e5e5e5;}
.the-pages>li>a {font-size: 21px;color: #000;line-height: 1.1;display: inline-block;}
.the-pages>li>a.win-mac::before,.the-pages>li>a.win::before,.the-pages>li>a.mac::before {content: "";width: 37px;height: 20px;background: url(../images/index/win-mac.png) no-repeat left center;display: inline-block;vertical-align: middle;margin-right: 8px;margin-top: -5px;}
.the-pages>li>a.win::before {width: 16px;}
.the-pages>li>a.mac::before {width: 16px;background-position-x: -21px;}
.the-pages>li>a:hover {text-decoration: underline;color: #3992ff;text-decoration-skip-ink: none;}
.the-pages>li>p {font-size: 17px;color: #3f3f3f;line-height: 1.3;padding-top: 10px;}
.the-items {display: flex;justify-content: center;flex-wrap: wrap;padding-top: 40px;}
.the-items>li {width: 25px;height: 25px;text-align: center;line-height: 25px;border-radius: 50%;font-size: 15px;color: #a1a1a1;margin: 0 5px;cursor: pointer;}
.the-items>li[data-page] {background-color: #ebebeb;}
.the-items>li[data-page].active {background-color: #ffbd00;color: #fff;}
.the-items>li.left.inactive::before,.the-items>li.right.inactive::before {border-color: #a1a1a1;}
.the-items>li.left::before,.the-items>li.right::before {content: "";display: inline-block;width: 8px;height: 8px;border-left: 2px solid #626262;border-bottom: 2px solid #626262;transform: rotate(45deg);}
.the-items>li.right::before {transform: rotate(-135deg);}

@media (max-width:979px){
	body{min-width:100%;}
	.details{width:96%;}
	img:not([src$='svg']){height:auto;width: auto;}

	.main01 {background: radial-gradient(circle at 30% 200px, #f9efd2, #fafafa 250px);}
	.main01-top {justify-content: center;}
	.main01-left {width: 100%;text-align: center;padding-bottom: 30px;margin-right: 0;}
	.main01-top .img-wrap {display: none;}
	.main01-links {justify-content: center;}
	.left-links {border-radius: 10px;margin: 10px;}
	.right-links {width: 100%;border: none;border-radius: 0;justify-content: center;}
	.right-link,.right-link:nth-child(4) {width: 330px;border: 1px solid #dcdcdc;margin: 10px;border-radius: 10px;}

}
@media (max-width:767px){

	.left-links {padding: 20px 10px;}
	.right-link, .right-link:nth-child(4) {width: 100%;text-align: center;}
	.page-title {padding: 0 40px 0 20px;font-size: 19px;}
	.page-title::after {right: 10px;}
	.the-pages>li>a {font-size: 17px;}
}
@media (max-width:479px){
}