@charset "utf-8";
.details a {text-decoration: none;color: inherit;}
.details a:hover {text-decoration: underline}
.clear {display: block;clear: both;}
.details {width:1200px; padding:0; margin:0 auto;}
h2 {
	font-weight: 600;
	color: #333333;
	text-align: center;
}


/* ```````````````````````````````````      main01       ``````````````````````````````````````````````` */
.main01 {
	height: 362px;
	background: url("../images/videoproc-guide/main01-bg.jpg")no-repeat center;
	text-align: center;
	background-size: cover;
	padding: 30px 0;
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
}
.main01 .details{position: relative;}
.sys-link.sys-link{color: #32b0ff;text-decoration: underline; position:absolute; left:0; top:-20px;}
.main01 h1 {
	color: #ffffff;
	font-weight: 600;
}
.main01 p {
	color: #999999;
	margin: 30px 0;
}
.main01 .system a{
	color: #ffffff;
	display: inline-block;
	font-weight: 600;
	padding: 15px 25px 15px 70px;
	border-radius: 5px;
}
.main01 .system a:hover{
	text-decoration: none;
}
.main01 .system.window a{
	background: url("../images/videoproc-guide/window-icon.png")no-repeat 25px #0fb4ff;
}
.main01 .system.mac a{
	background: url("../images/videoproc-guide/mac-icon.png")no-repeat 25px #0fb4ff;
}
.main01 .more-system {
	margin-top: 10px;
	color: #fff;
}
.main01 .more-system a{
	color: #3d9f42;
	text-decoration: underline;
}
/* ```````````````````````````````````      main02       ``````````````````````````````````````````````` */
.main02 {
	padding: 50px 0;
	background-color: #ffffff;
}
.main02 .main02-guide {
	margin-top: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.main02 .main02-guide .guide-left,.guide-mid,.guide-right{
	width: 380px;
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
}
.main02 .main02-guide img{
	vertical-align: bottom;
	margin-right: 10px;
}
.main02 .main02-guide h3,h4 {
	font-weight: 600;
	color: #000000;
}
.main02 .main02-guide .guide-box{
	min-height: 350px;
	padding-top:50px;
	padding-left: 50px;
	border: 1px solid #e1e1e1;
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
}
.main02 .main02-guide .guide-box:last-of-type{
	position: relative;
	top: -1px;
}
.main02 .main02-guide .guide-box:hover{
	z-index: 9;
	transform: scale(1.005, 1.005);
	box-shadow: 0 0 35px rgba(212, 222, 234, .5);
	border: 1px solid #ffffff;
}
.main02 .main02-guide .guide-box ul{
	margin-top: 15px;
	width: 260px;
}
.main02 .main02-guide .guide-mid{
	width: 440px;
	background-color: #1a9ce7;
	color: #fff;
	padding: 50px;
	margin-top: 0;
	position: relative;
	z-index: 10;
}
.main02 .main02-guide .guide-mid:hover {
	transform: scale(1.005, 1.005);
	box-shadow: 0 0 35px rgba(212, 222, 234, .5);
}
.main02 .main02-guide .guide-mid ul> h4{
	color: #ffffff;
	margin: 20px 0 5px;
}
.main02 .main02-guide .guide-mid .tips-new{
	background-color: #ffba2b;color: #fff;padding: 0px 5px 1px;margin-left: 10px;font-size: 13px;border-radius: 2px;
}
.main02 .main02-guide .guide-mid> p{
	margin-top: 20px;
}
/* ```````````````````````````````````      main03       ``````````````````````````````````````````````` */
.main03 {
	padding: 50px 0;
	background-color: #ffffff;
	text-align: center;
}
.main03 ul {
	margin: 30px 0;
}
.main03 ul li {
	width: 365px;
	float: left;
	margin: 20px 17px;
	min-height: 242px;
}
.main03 ul li p {
	margin-top: 15px;
}
.main03 .more a{
	color: #2782ff;
	text-decoration: underline;
}
/* ```````````````````````````````````      main04       ``````````````````````````````````````````````` */
.main04 {
	background-color: #f5f5f5;
	padding: 50px 0;
}
.main04 ul {
	margin: 30px 0;
	padding-left: 150px;
}
.main04 ul li {
	width: 350px;
	float: left;
}
.main04 ul li a{
	color: #249bff;
	text-decoration: underline;
}
.main04 ul li p{
	margin: 20px 0;
}
.main04 ul li a{
	color: #249bff;
	text-decoration: underline;
}
.main04 ul li img{
	vertical-align: middle;
	margin-right: 10px;
}

/* ```````````````````````````````````      mobile       ``````````````````````````````````````````````` */
@media (max-width:979px) {
	body { font-size: 15px; line-height: 24px; }
	.details {
		width: 100%;
		padding: 0 15px;
		box-sizing:border-box;
		-moz-box-sizing:border-box; /* Firefox */
		-webkit-box-sizing:border-box; /* Safari */
	}
	.main01 {
		height: auto;
		background: #0c0c0c;
	}
	.main02 {
		padding: 30px 0;
	}
	.main02 .main02-guide {
		margin-top: 30px;
	}
	.main02 .main02-guide .guide-left,.guide-mid,.guide-right{
		float: none;
		max-width: 380px;
		width: 100%;
		margin: 0 auto;
	}
	.main02 .main02-guide .guide-mid{
		max-width: 440px;
		width: 100%;
	}
	.main02 .main02-guide .guide-box{
		margin: 15px 0;
	}
	.main03 {
		padding: 30px 0;
	}
	.main03 ul li {
		width: 100%;
		float: none;
		margin: 15px 0;
		text-align: center;
	}

	.main04 {
		padding: 30px 0;
	}
	.main04 ul {
		margin: 30px 0 0;
		padding-left: 15%;
	}
	.main04 ul li {
		width: 100%;
		max-width: 350px;
		float: none;
		margin: 15px auto 0;
	}
}

@media (max-width:767px) {

}

@media (max-width:479px) {

}


/* ```````  add 20230727 youtube  ``````````` */
.ytb-container {
	padding: 30px 0;
}
.ytb-container .iframe-wrap {
	padding: 50px 0;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.ytb-container .iframe-wrap .iframe-box {
	flex: 1;
}
.ytb-container .iframe-wrap .iframe-box iframe {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16/9;
}
.ytb-container .iframe-wrap .list-ytb {
	width: 390px;
	margin-left: 30px;
	text-align: center;
}
.ytb-container .iframe-wrap .list-ytb .item-ytb {
	margin-bottom: 25px;
	padding: 25px 50px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.ytb-container .iframe-wrap .list-ytb .ai-tips-new::after {
	content: 'New';
	display: block;
	width: 100px;
	height: 25px;
	line-height: 25px;
	background-color: #ff513f;
	color: #ffffff;
	position: absolute;
	right: 0;
	top: 0;
	font-size: 19px;
	transform: rotate(45deg) translate(30%, -50%);
}
.ytb-container .iframe-wrap .list-ytb .item-copy {
	text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	font-size: 19px;
	line-height: 1.4;
	flex: 1;
	text-align: left;
}
.ytb-container .iframe-wrap .list-ytb .item-box {
	width: 55px;
	margin-right: 20px;
}
.ytb-container .iframe-wrap .list-ytb .item-box img {
	filter: grayscale(1);
}
.ytb-container .iframe-wrap .list-ytb .active {
	background-color: #d1eaff;
	border-left: 5px solid #48a9ee;
}
.ytb-container .iframe-wrap .list-ytb .active .item-copy {
	color: #2f93ff;
}
.ytb-container .iframe-wrap .list-ytb .active .item-box img {
	filter: grayscale(0);
}
.ytb-container .iframe-wrap .list-ytb .show-more a {
	display: inline-block;
	font-size: 17px;
	color: #32b0ff;
	border: 1px solid #32b0ff;
	border-radius: 5px;
	padding: 12px 45px;
}
.ytb-container .feature-wrap {
	text-align: center;
}
.ytb-container .feature-wrap .sort-list {
	display: inline-block;
	padding: 13px 50px;
	border-radius: 25px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	margin-bottom: 50px;
}
.ytb-container .feature-wrap .flex-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}
.ytb-container .feature-wrap .sort-list .list-feature {
	display: flex;
	justify-content: center;
	align-items: center;
}
.ytb-container .feature-wrap .sort-list .title-sort {
	font-size: 19px;
	margin: 0 20px;
	color: #777777;
}
.ytb-container .feature-wrap .sort-list .item-feature {
	font-size: 19px;
	color: #262626;
	margin: 0 20px;
	cursor: pointer;
}
.ytb-container .feature-wrap .sort-list .item-feature.active {
	font-weight: 700;
	position: relative;
}
.ytb-container .feature-wrap .sort-list .item-feature.active::after {
	content: '';
	display: block;
	width: calc(100% + 10px);
	height: 8px;
	background-color: #f5a647;
	position: absolute;
	z-index: -1;
	bottom: 0;
	transform: translateX(-50%);
	left: 50%;
}
.ytb-container .feature-wrap .ytb-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-row-gap: 20px;
	grid-column-gap: 20px;
	margin-bottom: 50px;
}

.ytb-container .feature-wrap .ytb-list .item-video .item-cover iframe {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16/9;
}

.ytb-container .feature-wrap .ytb-list .item-video .item-copy {
    font-size: 17px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    color: #000000;
    box-sizing: border-box;
}
.ytb-container .feature-wrap .show-more a {
	display: inline-block;
	font-size: 17px;
	background-color: #32b0ff;
	color: #ffffff;
	border-radius: 5px;
	padding: 13px 45px;
}





@media (max-width:979px) {
	.ytb-container .feature-wrap .ytb-list {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width:767px) {
	.ytb-container .feature-wrap .ytb-list .item-video .item-copy {
		font-size: .8125rem;
	}
	.ytb-container .feature-wrap .sort-list .list-feature {
		flex-wrap: wrap;
	}
	.ytb-container .feature-wrap .sort-list .title-sort {
		white-space: nowrap;
	}
	.ytb-container .feature-wrap .sort-list {
		padding: 10px;
	}
	.ytb-container .iframe-wrap {
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.ytb-container .iframe-wrap .list-ytb {
		margin-left: 0;
	}
	.ytb-container .feature-wrap .flex-wrap {
		flex-wrap: wrap;
	}
	.ytb-container .iframe-wrap .list-ytb .item-copy {
		font-size: .9375rem;
	}
	.ytb-container .iframe-wrap .iframe-box {
		margin-bottom: 10px;
		width: 100%;
		flex: auto;
	}
	.ytb-container .iframe-wrap {
		padding: 30px 0;
	}

	.ytb-container .feature-wrap .ytb-list {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width:479px) {
	.ytb-container .feature-wrap .ytb-list {
		grid-template-columns: repeat(1, 1fr);
	}
}