/*
CSS for landing pages.
Author: Afetiria
*/

/* Skill-Up Page ===================================== */

#skill-up p,
#skill-up ul li,
#skill-up ol li {
	font-size:16px;
}

#skill-up .blue {
	color:#00f;
}

#skill-up .mini {
	font-size:70% !important;
}

#skill-up .leading {
	font-size:24px;
	font-weight:bold;
}

#skill-up .main-title {
	color:#00f;
	font-size:52px;
	font-weight:bold;
	vertical-align:middle;
}

#skill-up .main-title img {
	margin-right:10px;
	vertical-align:middle;
	width:70px;
}

#skill-up .section-title {
	background:#f5e5aa;
	font-size:20px;
	font-weight:bold;
	margin-bottom:50px;
	padding:4px 10px;
}

#skill-up .greeting {
	margin:0 auto;
	width:760px;
}

#skill-up .greeting .picture {
	float:right;
	width:300px;
}

#skill-up .greeting .text {
	margin-right:340px;
}

#skill-up .greeting .text h4 {
	clear:none;
	font-size:32px;
	font-weight:bold;
}

#skill-up .profile {
	margin:0 auto;
	width:760px;
}

#skill-up .introduce,
#skill-up .course li {
	border:solid 2px #00f;
	margin:0 auto;
	padding:30px;
	width:980px;
}

#skill-up .recommend {
	text-align:center;
}

#skill-up .recommend h4,
#skill-up .course li h4 {
	font-size:24px;
}

#skill-up .recommend ul {
	display:inline-block;
}

#skill-up .recommend ul.check-list {
	list-style:none;
}

#skill-up .recommend ul li {
	font-size:20px;
	margin-bottom:10px;
	text-align:left;
}

#skill-up .recommend ul.check-list li {
	background-image:url("./skill-up/lecturer5.png");
	background-position:left top;
	background-repeat:no-repeat;
	padding-left:35px;
}

#skill-up .course {
	list-style:none;
}

@media (max-width:980px) {
	#skill-up .introduce,
	#skill-up .course li {
		margin:0;
		width:auto;
	}
}

@media (max-width:786px) {
	#skill-up .leading {
		font-size:18px;
	}

	#skill-up .main-title {
		font-size:32px;
	}

	#skill-up .main-title img {
		width:55px;
	}

	#skill-up .greeting {
		margin:0;
		width:auto;
	}

	#skill-up .greeting .picture {
		float:none;
		margin:0 auto 30px;
	}

	#skill-up .greeting .text {
		margin-right:0;
		text-align:center;
	}

	#skill-up .greeting .text h4 {
		font-size:24px;
	}

	#skill-up .profile {
		margin:0;
		width:auto;
	}

	#skill-up .introduce,
	#skill-up .course li {
		padding:10px;
	}

	#skill-up .recommend h4 {
		font-size:20px;
	}

	#skill-up .recommend ul li {
		font-size:16px;
	}

	#skill-up .recommend ul.check-list li {
		background-size:24px auto;
		padding-left:25px;
	}
}

/* Net-Adviser Page ===================================== */

#net-adviser p,
#net-adviser ul li,
#net-adviser ol li {
	font-size:16px;
}

#net-adviser .leading {
	color:#044559;
	font-size:24px;
	font-weight:bold;
}

#net-adviser .cover {
	max-width:780px;
}

#net-adviser .greeting {
	margin:0 auto;
	width:980px;
}

#net-adviser .greeting .picture {
	float:right;
	width:300px;
}

#net-adviser .greeting .picture p {
	color:#666;
	font-size:12px;
}

#net-adviser .greeting .text {
	margin-right:340px;
}

#net-adviser .introduce {
	background:#1e80c2;
	border:solid 5px #fff;
	border-radius:20px;
	box-shadow:0 0 5px 5px #dadada;
	color:#fff;
	font-size:20px;
	margin:0 10px;
	padding:10px 30px;
}

#net-adviser a.introduce {
	display:block;
}

#net-adviser a.introduce:hover,
#net-adviser a.introduce:focus {
	opacity:0.7;
	text-decoration:none;
}

#net-adviser .adviser {
	background:#f5e5aa;
	font-size:20px;
	font-weight:bold;
	padding:4px 10px;
}

#net-adviser .problem {
	border:solid 3px #9c6;
	margin:0 auto;
	padding:30px;
	width:780px;
}

#net-adviser .feature {
	list-style:none;
}

#net-adviser .feature > li {
	border:solid 3px #1e80c2;
	border-radius:5px;
	margin:0 0 30px;
	padding:10px;
}

#net-adviser .feature > li:last-child {
	margin:0;
}

#net-adviser .feature.service > li {
	border:solid 3px #4ab5c4;
}

#net-adviser .feature.request > li {
	border:solid 3px #9c6;
}

#net-adviser .feature > li > strong {
	background:#1e80c2;
	border-radius:60px;
	color:#fff;
	display:block;
	float:left;
	font-size:50px;
	height:120px;
	line-height:120px;
	text-align:center;
	width:120px;
}

#net-adviser .feature.service > li > strong {
	background:#4ab5c4;
}

#net-adviser .feature.request > li > strong {
	background:#9c6;
}

#net-adviser .feature > li > h3,
#net-adviser .feature > li > p,
#net-adviser .feature > li > ul {
	clear:none;
	margin-left:160px;
}

#net-adviser .feature > li > h3 {
	color:#1e80c2;
	font-size:20px;
	font-weight:bold;
}

#net-adviser .feature.service > li > h3 {
	color:#4ab5c4;
}

@media (max-width:980px) {
	#net-adviser .greeting {
		margin:0;
		width:auto;
	}
}

@media (max-width:786px) {
	#net-adviser .leading {
		font-size:18px;
	}

	#net-adviser .cover {
		max-width:100%;
	}

	#net-adviser .greeting .picture {
		float:none;
		margin:0 auto 30px;
	}

	#net-adviser .greeting .text {
		margin-right:0;
	}

	#net-adviser .introduce {
		font-size:16px;
		padding:10px;
	}

	#net-adviser .adviser {
		font-size:16px;
	}

	#net-adviser .problem {
		margin:0;
		padding:10px;
		width:auto;
	}

	#net-adviser .feature > li > strong {
		border-radius:35px;
		font-size:30px;
		height:70px;
		line-height:70px;
		width:70px;
	}

	#net-adviser .feature > li > h3,
	#net-adviser .feature > li > p,
	#net-adviser .feature > li > ul {
		margin-left:90px;
	}

	#net-adviser .feature > li > h3 {
		font-size:16px;
	}
}

/* Heartfull Page ===================================== */

#heartfull p,
#heartfull ul li,
#heartfull ol li {
	font-size:16px;
}

#heartfull .mini {
	font-size:70% !important;
}

#heartfull .section-title {
	background:#daf0ff;
	color:#f5358a;
	font-size:22px;
	font-weight:bold;
	margin-bottom:30px;
}

#heartfull .introduce {
	background:#f5ffda;
	border:solid 1px #f5358a;
	margin:0 auto 30px;
	padding:30px;
	width:600px;
}

#heartfull .greeting .picture {
	float:right;
	width:150px;
}

#heartfull .greeting .text {
	margin-right:190px;
}

#heartfull .five-contents {
	display:flex;
	flex-wrap:wrap;
	gap:30px 12px;
	justify-content:center;
	list-style:none;
	margin:0;
}

#heartfull .five-contents > li {
	background-position:top 10px right 10px;
	background-repeat:no-repeat;
	background-size:50px auto;
	border:solid 1px #808080;
	flex-basis:220px;
	margin:0;
	padding:10px;
}

#heartfull .five-contents > li.content1 {
	background-image:url("./heartfull/heartfull3.jpg");
}

#heartfull .five-contents > li.content2 {
	background-image:url("./heartfull/heartfull4.jpg");
}

#heartfull .five-contents > li.content3 {
	background-image:url("./heartfull/heartfull5.jpg");
}

#heartfull .five-contents > li.content4 {
	background-image:url("./heartfull/heartfull6.jpg");
}

#heartfull .five-contents > li.content5 {
	background-image:url("./heartfull/heartfull7.jpg");
}

#heartfull .five-contents > li h3 {
	color:#f5358a;
	font-size:14px;
	font-weight:bold;
	padding-right:60px;
}

#heartfull .five-contents > li p,
#heartfull .five-contents > li ul li {
	font-size:12px;
}

#heartfull .five-contents.company-voice {
	gap:30px 5%;
}

#heartfull .five-contents.company-voice > li {
	flex-basis:30%;
}

#heartfull .five-contents.company-voice > li.voice1 {
	background-image:url("./heartfull/heartfull8.jpg");
	background-size:40px auto;
}

#heartfull .five-contents.company-voice > li.voice2 {
	background-image:url("./heartfull/heartfull9.jpg");
}

#heartfull .five-contents.company-voice > li.voice3 {
	background-image:url("./heartfull/heartfull10.jpg");
}

#heartfull .five-contents.company-voice > li.voice4 {
	background-image:url("./heartfull/heartfull11.jpg");
}

#heartfull .five-contents.company-voice > li.voice5 {
	background-image:url("./heartfull/heartfull12.jpg");
}

#heartfull .five-contents.person > li {
	background-image:url("./heartfull/heartfull13.jpg");
}

#heartfull .feature li {
	font-size:20px;
}

#heartfull .plan-wrap {
	margin:0 auto;
	width:780px;
}

#heartfull .plan-wrap .plan {
	list-style:none;
	margin:0;
}

#heartfull .plan-wrap .plan li {
	margin:0 0 30px;
}

#heartfull .plan-wrap .plan li h3 {
	font-size:20px;
	font-weight:bold;
	margin-bottom:15px;
}

#heartfull .plan-wrap .plan li h3 span {
	background:#f5358a;
	border-radius:20px;
	color:#fff;
	margin-right:10px;
	padding:2px 10px;
}

#heartfull .plan-wrap .plan li p {
	color:#f00;
	font-size:20px;
}

#heartfull .plan-wrap .introduce {
	width:650px;
}

#heartfull .plan-wrap .service {
	color:#f5358a;
	font-size:22px;
	font-weight:bold;
}

#heartfull .plan-description {
	background:url("./heartfull/heartfull14.jpg") no-repeat top 10px right 10px/50px auto;
	border:solid 1px #f5358a;
	color:#f5358a;
	margin:0 0 30px;
	padding:30px;
}

#heartfull .message {
	font-size:22px;
	font-weight:bold;
	margin-bottom:30px;
}

#heartfull .button {
	background:#808080;
	border-bottom:solid 1px #505050;
	border-left:solid 1px #bababa;
	border-top:solid 1px #bababa;
	border-radius:10px;
	border-right:solid 1px #505050;
	color:#fff;
	font-size:22px;
	padding:12px 50px;
}

#heartfull .button:hover,
#heartfull .button:focus {
	opacity:0.7;
	text-decoration:none;
}

@media (max-width:1160px) {
	#heartfull .five-contents {
		gap:30px 5%;
	}

	#heartfull .five-contents > li {
		flex-basis:30%;
	}
}

@media (max-width:786px) {
	#heartfull .section-title {
		font-size:18px;
	}

	#heartfull .introduce {
		margin:0 0 30px;
		width:auto;
	}

	#heartfull .greeting .picture {
		float:none;
		margin:0 auto 30px;
	}

	#heartfull .greeting .text {
		margin-right:0;
	}

	#heartfull .five-contents,
	#heartfull .five-contents.company-voice {
		gap:30px 0;
	}

	#heartfull .five-contents > li,
	#heartfull .five-contents.company-voice > li {
		flex-basis:100%;
	}

	#heartfull .feature li {
		font-size:16px;
	}

	#heartfull .plan-wrap {
		margin:0;
		width:auto;
	}

	#heartfull .plan-wrap .plan li h3 {
		font-size:18px;
	}

	#heartfull .plan-wrap .plan li p {
		font-size:18px;
	}

	#heartfull .plan-wrap .introduce {
		width:auto;
	}

	#heartfull .plan-wrap .service {
		font-size:18px;
	}

	#heartfull .message {
		font-size:18px;
	}

	#heartfull .button {
		display:block;
		font-size:18px;
		padding:10px;
	}
}

@media (max-width:550px) {
	#heartfull .introduce {
		padding:15px;
	}

	#heartfull .plan-description {
		padding:15px;
	}
}

/* PIP-Maker Page ===================================== */

#pip-maker p,
#pip-maker ul li,
#pip-maker ol li {
	font-size:16px;
}

#pip-maker .wine {
	color:#c01b20;
}

#pip-maker .logo {
	max-width:300px;
}

#pip-maker .title {
	border-top:solid 1px #dadada;
	color:#808080;
	font-size:14px;
	letter-spacing:1px;
	padding-top:8px;
}

#pip-maker .leading {
	font-size:42px;
	font-weight:bold;
	line-height:1.4;
}

#pip-maker .point,
#pip-maker .example,
#pip-maker .demo {
	display:flex;
	flex-wrap:wrap;
	gap:30px 5%;
	list-style:none;
	margin:0;
}

#pip-maker .example,
#pip-maker .demo {
	justify-content:center;
}

#pip-maker .point li {
	flex-basis:30%;
	margin:0;
	text-align:center;
}

#pip-maker .example li {
	border:solid 1px #dadada;
	flex-basis:30%;
	margin:0;
	padding:30px;
}

#pip-maker .example li h3 {
	background-image:url("./pip-maker/pip-maker13.png");
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size:120px auto;
	font-size:18px;
	margin-bottom:30px;
	min-height:130px;
	padding:0 0 0 35px;
	text-indent:-35px;
}

#pip-maker .example li h3 strong {
	background:#c01b20;
	border-radius:15px;
	color:#fff;
	margin-right:5px;
	padding:2px 9px;
}

#pip-maker .demo li {
	flex-basis:30%;
	margin:0;
}

#pip-maker .demo li h3 {
	font-size:18px;
	margin-bottom:10px;
	text-align:center;
}

#pip-maker .demo li img {
	border:solid 1px #dadada;
}

#pip-maker .flow {
	list-style:none;
	margin:0;
}

#pip-maker .flow li {
	border:solid 1px #dadada;
	margin:0 0 30px;
	padding:30px;
}

#pip-maker .flow li h3 {
	font-size:24px;
	font-weight:bold;
	margin:0 0 30px 55px;
	text-indent:-55px;
}

#pip-maker .flow li h3 strong {
	background:#c01b20;
	border-radius:20px;
	color:#fff;
	margin-right:10px;
	padding:2px 12px;
}

#pip-maker .button {
	background:#c01b20;
	border-bottom:solid 1px #800a0c;
	border-left:solid 1px #e05060;
	border-top:solid 1px #e05060;
	border-right:solid 1px #800a0c;
	color:#fff;
	display:inline-block;
	font-size:22px;
	font-weight:bold;
	padding:12px 0;
	text-align:center;
	width:750px;
}

#pip-maker .button.green {
	background:#009c40;
	border-bottom:solid 1px #006020;
	border-left:solid 1px #30c070;
	border-top:solid 1px #30c070;
	border-right:solid 1px #006020;
}

#pip-maker .button:hover,
#pip-maker .button:focus {
	opacity:0.7;
	text-decoration:none;
}

@media (max-width:786px) {
	#pip-maker .leading {
		font-size:24px;
	}

	#pip-maker .example {
		gap:30px 0;
	}

	#pip-maker .example li {
		flex-basis:100%;
		padding:15px;
	}

	#pip-maker .example li h3 {
		background-position:right top;
		background-size:80px auto;
		font-size:16px;
		min-height:45px;
		padding:0 90px 0 33px;
		text-indent:-33px;
	}

	#pip-maker .demo {
		gap:30px 10%;
	}

	#pip-maker .demo li {
		flex-basis:45%;
	}

	#pip-maker .flow li {
		padding:15px;
	}

	#pip-maker .flow li h3 {
		font-size:18px;
		margin:0 0 30px 40px;
		text-indent:-40px;
	}

	#pip-maker .flow li h3 strong {
		border-radius:20px;
		padding:2px 10px;
	}

	#pip-maker .button {
		display:block;
		font-size:16px;
		padding:8px 10px;
		width:auto;
	}
}

@media (max-width:550px) {
	#pip-maker .demo {
		gap:30px 0;
	}

	#pip-maker .demo li {
		flex-basis:100%;
	}

	#pip-maker .point {
		gap:30px 0;
	}

	#pip-maker .point li {
		flex-basis:100%;
	}

	#pip-maker .point li img {
		max-width:300px;
	}
}

/* Cycle-Sales and Company-Sales Page ===================================== */

#cycle-sales section,
#company-sales section {
	padding:80px 0;
}

#cycle-sales .blue,
#company-sales .blue {
	color:#00f;
}

#cycle-sales .bg-gray,
#company-sales .bg-gray {
	background:#eaeaea;
}

#cycle-sales .bg-aqua,
#company-sales .bg-aqua {
	background:#e0f0ff;
}

#cycle-sales .bg-yellow,
#company-sales .bg-yellow {
	background:#ffffe5;
}

#cycle-sales a.button,
#company-sales a.button {
	background:#1e80c2;
	border:solid 5px #fff;
	border-radius:20px;
	box-shadow:0 0 5px 5px #dadada;
	color:#fff;
	display:inline-block;
	font-size:20px;
	padding:10px;
	text-decoration:none;
	width:620px;
}

#cycle-sales a.button:hover,
#cycle-sales a.button:focus,
#company-sales a.button:hover,
#company-sales a.button:focus {
	color:#fff;
	opacity:0.7;
	text-decoration:none;
}

#cycle-sales p,
#company-sales p,
#cycle-sales ul li,
#company-sales ul li,
#cycle-sales ol li,
#company-sales ol li {
	font-size:16px;
}

#cycle-sales .title-wrap,
#company-sales .title-wrap {
	background-image:url("./cycle-sales/bg_title.jpg");
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% auto;
}

#cycle-sales .title-wrap .overlay,
#company-sales .title-wrap .overlay {
	background:rgba(128, 128, 128, 0.8);
	padding:30px 0;
}

#cycle-sales .title-wrap.sub .overlay,
#company-sales .title-wrap.sub .overlay {
	background:rgba(128, 128, 128, 0.8);
	padding:15px 0;
}

#cycle-sales .leading,
#company-sales .leading {
	font-size:20px;
	font-weight:bold;
}

#cycle-sales .main-title,
#company-sales .main-title {
	font-size:42px;
	font-weight:bold;
	vertical-align:middle;
}

#cycle-sales .item-title,
#company-sales .item-title {
	background:#eaeaea;
	font-size:20px;
	font-weight:bold;
	padding:4px 10px;
}

#cycle-sales .goal,
#company-sales .goal {
	background:#fff;
	box-shadow:0 0 5px 5px rgba(0, 0, 0, 0.1);
	margin:0 auto;
	padding:30px;
	width:980px;
}

#cycle-sales .goal ul li {
	font-size:20px;
	margin-bottom:15px;
}

#cycle-sales .check-list,
#company-sales .check-list {
	list-style:none;
}

#cycle-sales .check-list li,
#company-sales .check-list li {
	background-image:url("./cycle-sales/check.png");
	background-position:left top 5px;
	background-repeat:no-repeat;
	font-size:20px;
	margin:0 0 20px;
	padding-left:40px;
}

#cycle-sales .seminar-image,
#company-sales .seminar-image {
	background-image:url("./cycle-sales/seminar.jpg");
	background-position:right top;
	background-repeat:no-repeat;
	background-size:450px auto;
	min-height:301px;
	padding:0 480px 0 0;
}

#company-sales .seminar-image {
	background-image:url("./company-sales/meeting.jpg");
}

#cycle-sales .introduce,
#company-sales .introduce {
	background: #e0f0ff;
	border:solid 1px #dadada;
	margin:0 0 50px;
	padding:30px;
}

#cycle-sales .introduce p,
#company-sales .introduce p {
	font-size:20px;
}

#cycle-sales .annotation,
#company-sales .annotation {
	background:#fff;
	box-shadow:0 0 5px 5px rgba(0, 0, 0, 0.1);
	margin:0 auto 50px;
	padding:30px;
	width:786px;
}

#cycle-sales .annotation p,
#company-sales .annotation p,
#cycle-sales .annotation ul li,
#company-sales .annotation ul li,
#cycle-sales .annotation ol li,
#company-sales .annotation ol li {
	font-size:14px;
	margin:0 0 15px;
}

#cycle-sales .image-box,
#company-sales .image-box {
	margin:0 auto;
	width:980px;
}

@media (max-width:980px) {
	#cycle-sales .goal,
	#company-sales .goal {
		margin:0 10px;
		width:auto;
	}

	#cycle-sales .image-box,
	#company-sales .image-box {
		margin:0 10px;
		width:auto;
	}
}

@media (max-width:786px) {
	#cycle-sales a.button,
	#company-sales a.button {
		display:block;
		font-size:16px;
		width:auto;
	}

	#cycle-sales section,
	#company-sales section {
		padding:50px 0;
	}

	#cycle-sales .title-wrap,
	#company-sales .title-wrap {
		background-size:auto;
	}

	#cycle-sales .leading,
	#company-sales .leading {
		font-size:16px;
	}

	#cycle-sales .main-title,
	#company-sales .main-title {
		font-size:24px;
	}

	#cycle-sales .item-title,
	#company-sales .item-title {
		font-size:16px;
	}

	#cycle-sales .goal,
	#company-sales .goal {
		padding:15px;
	}

	#cycle-sales .goal ul li {
		font-size:16px;
	}

	#cycle-sales .check-list li,
	#company-sales .check-list li {
		background-size:24px auto;
		font-size:16px;
		padding-left:34px;
	}

	#cycle-sales .seminar-image,
	#company-sales .seminar-image {
		background-position:center top;
		min-height:auto;
		padding:330px 0 0;
	}

	#cycle-sales .introduce,
	#company-sales .introduce {
		margin:0 0 50px;
		padding:15px;
	}

	#cycle-sales .introduce p,
	#company-sales .introduce p {
		font-size:16px;
	}

	#cycle-sales .annotation,
	#company-sales .annotation {
		margin:0 10px 50px;
		padding:15px;
		width:auto;
	}

	#cycle-sales .annotation p,
	#company-sales .annotation p,
	#cycle-sales .annotation ul li,
	#company-sales .annotation ul li,
	#cycle-sales .annotation ol li,
	#company-sales .annotation ol li {
		font-size:12px;
	}
}

@media (max-width:550px) {
	#cycle-sales .seminar-image,
	#company-sales .seminar-image {
		background-size:300px auto;
		padding:230px 0 0;
	}
}

/* Reuse-PC Page ===================================== */

.reuse-caution {
	width: 786px;
	margin: 0 auto;
	color: #f00;
}

@media (max-width:786px) {
	.reuse-caution {
		width: auto;
		margin: 0 10px;
	}
}