* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.web_displayNone {
	display: none !important;
}

.bgf1 {
	background: #f1f1f1;
}

.annotation {
	color: rgba(0, 0, 0, 0.5);
	font-size: 14px;
	line-height: 20px;
}

.personas, .infoArch {
	padding-top: 100px;
	padding-bottom: 150px;
	background: #f1f1f1;
}

.container {
	padding-bottom: calc(8vh + 150px);
}

.header {
	height: 8vh;
	position: fixed;
	z-index: 99;
}

.header_forPos {
	position: relative;
	height: 8vh;
}

.header_logo {
	width: 80px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.projectIntro {
	padding-top: 8vh;
}

.banner {
	height: 56vh;
	position: relative;
}
.banner_ihearyou {
	background: #3a499d;
}
.banner_light {
	background: #36373a;
}
.banner_POTENTIAL_I {
	background: #464b4e;
}
.banner_waterfrontbakery {
	background: #ffc649;
}
.banner_mantaraysposterdesign {
	background: #8a50a0;
}
.banner_colorgame {
	background: #202237;
}
.banner_patatapclone {
	background: #365462;
}
.banner_todolist {
	background: #b1c29a;
}

.banner_image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.illustration {
	position: absolute;
	height: 100%;
	width: 100%;
}

.illustration_artwork_left, .illustration_artwork_right, .illustration_people_left, .illustration_people_right {
	height: 100%;
	width: auto;
	position: absolute;
}
.illustration_artwork_right {
	right: 0;
}
.illustration_people_left {
	right: 70%;
}
.illustration_people_right {
	left: 70%;
}

.illustration {
	opacity: 0.25;
}
.illustration_mantarays {
	opacity: 0.3;
}

.detail_title {
	font-weight: 700;
	font-size: 32px;
	font-family: clarendon-text-pro,serif;
	font-weight: 700;
	font-style: normal;
}
.detail_title_ihearyou, .personaWords_ihearyou {
	color: #3a499d;
}
.detail_title_light, .personaWords_light {
	color: #36373a;
}
.detail_title_waterfront {
	color: #ffc649;
}
.detail_title_mantaraysposterdesign {
	color: #8a50a0;
}
.detail_title_colorgame {
	color: #202237;
}
.detail_title_patatapclone {
	color: #365462;
}
.detail_title_todolist {
	color: #b1c29a;
}
.detail_title_POTENTIAL_I, .personaWords_POTENTIAL_I {
	color: #464b4e;
}

.title_l3, .title_l3_nomb {
	font-size: 26px;
	font-family: libre-franklin,sans-serif;
	font-weight: 600;
	font-style: normal;
	display: block;
	margin-bottom: 20px;
}
.title_l3_nomb {
	margin-bottom: 0;
}

.overflowAuto {
	overflow: auto;
}

.personaInfo_personal {
	float: left;
}

.personaInfo_story {
	float: right;
	position: relative;
	border: 2px solid black;
	height: 378px;
}

.personaInfo_story div {
	position: absolute;
	width: 84%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.personaInfo_story div.zhongyi {
	width: 78%;
}
.personaInfo_story div.guangli, .personaInfo_story div.yike, .personaInfo_story div.jinmai {
	width: 76%;
}
.personaInfo_story div.kuanlin {
	width: 74%;
}
.congcaiStory div.congcai, .personaInfo_story div.zhenyu {
	width: 72%;
}

.workflow {
	background: rgba(58, 73, 157, 0.1);;
	position: relative;
	/*height: 340px;*/
}
.workflow_POTENTIAL_I {
	background: rgba(70, 75, 78, 0.1);
}

.workflow_ihearyou_1 {
	height: 340px;
}
.workflow_ihearyou_2 {
	height: 370px;
}
.workflow_ihearyou_2_4 {
	height: 350px;
}
.workflow_light {
	height: 500px;
	background: rgba(54, 55, 58, 0.1);
}
.workflow_POTENTIAL_I_1 {
	height: 400px;
	margin-top: 30px;
}
/*.workflow_POTENTIAL_I_1 {
	height: auto;
	padding: 30px;
}*/
.workflow_POTENTIAL_I_2 {
	height: 420px;
}
.workflow_POTENTIAL_I_3 {
	height: 400px;
}


.workflow_image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}
.workflow_image img {
	display: block;
}
.workflow_image::-webkit-scrollbar {
  display: none;
}
.workflow_image {
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

.workflow_image img {
	margin-left: 20px;
	margin-right: 20px;
}
.workflow_ihearyou_persona1 img, .workflow_ihearyou_persona3 img {
	width: 910px; /* 一张图宽440px，间距30px */
}
.workflow_ihearyou_persona2 img, .workflow_ihearyou_persona4 img, .POTENTIAL_I_workflowImage2 img {
	width: 1400px; /* 一张图宽440px，间距40px */
}
.workflow_persona1_light img, .workflow_persona2_light img {
	width: 870px; /* 一张图宽180px，间距50px */
}

.separator {
	height: 2px;
	background: #ccc;
}

.light_colorPalette_box {
	width: 264px;
	height: 100px;
	float: left;
	color: #fff;
	font-size: 32px;
	line-height: 100px;
}
.light_colorPalette_box:nth-child(1) {
	background: #36373a;
}
.light_colorPalette_box:nth-child(2) {
	background: #808080;
}
.light_colorPalette_box:nth-child(3) {
	background: #9a372f;
}
.light_colorPalette_box:nth-child(4) {
	background: #fff;
	border: 1px solid #36373a;
	color: #36373a;
}

.waterfront_colorPalette_box {
	width: 264px;
	height: 160px;
	float: left;
	color: #fff;
	font-size: 32px;
	line-height: 160px;
}
.waterfront_colorPalette_box:nth-child(1) {
	background: #976245;
}
.waterfront_colorPalette_box:nth-child(2) {
	background: #ffc649;
}

.interaction {
	position: relative;
}
.interaction p {
	font-size: 20px;
	display: block;
	position: absolute;
	right: 0;
	bottom: 20px;
	padding: 20px 30px;
	width: 480px;
	border: 2px solid #000;
}

.POTENTIAL_I_workflowImage1 {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	margin: 0;
}

.interface_image, .infoArch_waterfront, .todolist_scrollX1, .POTENTIAL_I_workflowImage1, .infoArch_POTENTIAL_I, .todolist_editFunc {
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */

}
.interface_image::-webkit-scrollbar, .infoArch_waterfront::-webkit-scrollbar, .todolist_scrollX1::-webkit-scrollbar, .POTENTIAL_I_workflowImage1::-webkit-scrollbar, .infoArch_POTENTIAL_I::-webkit-scrollbar, .todolist_editFunc::-webkit-scrollbar {
  display: none;
}

.todolist_editFunc_ol {
	padding-left: 5%;
}
.todolist_editFunc_ol li {
	list-style-type: decimal;list-style-position: outside;margin-left:0%;
}

.interface_image img {
	width: 900px;
	margin-right: 10px;
}
.interface_image img:first-child {
	margin-left: 20px;
}
.interface_image img:last-child {
	margin-right: 20px;
}
img.interface_image_light {
	width: 2000px;
}
img.interface_image_waterfront {
	width: 720px;
}
.POTENTIAL_I_workflowImage1 img {
	width: 2800px;
	margin: 0;
	padding-left: 40px;
	padding-right: 40px;
}
/*.POTENTIAL_I_workflowImage1 img {
	width: 2800px;
}*/

.colorgame_easyMode {
	float: right;
}

.patatapclone_techDiv, .todolist_techDiv {
	position: relative;
}
.patatapclone_techImg, .todolist_feature2_intro, .todolist_tech_rightText, .todolist_tech7_intro {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
}

.todolist_feature2_intro, .todolist_tech7_intro {
	border: 2px solid #000;
	padding: 20px 30px;
	float: right;
}

.todolist_tech7_intro {
	padding: 24px;
}

.footer {
	position: fixed;
	bottom: 0;
}

.previous, .next {
	width: 34%;
	background: #fff;
	height: 8vh;
	border: 2px solid black;
	padding: 6px 6px 0 0;

}
.previous {
	text-align: right;
}
.next {
	padding: 6px 0 0 6px;
}

.footerBtn_bgcolor {
	height: 100%;
	background: #f1f1f1;
	position: relative;
}
.footerBtn_bgcolor.active:hover {
	background: #d9dad4;
}

.top {
	width: 32%;
	height: 8vh;
	position: relative;
}

.btn_top {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	background-image: url(../images/btn_top_f1.png);
	background-size: 100% auto;
	cursor: default;
	opacity: 0.3;
}
.btn_top.active {
	cursor: pointer;
	opacity: 1;
}
.btn_top.active:hover {
	background-image: url(../images/btn_top_f1_hover.png);
}

.footerBtn_bgcolor div {
	cursor: pointer;
}

.previous a, .next a {
	text-decoration: none;
	display: block;
	height: 100%;
	width: 100%;
}
.previous .footerBtn_bgcolor div.btn_unactivated, .todolist_nextBtn.btn_unactivated {
	opacity: 0.3;
	cursor: not-allowed;
}
.todolist_nextBtn.btn_unactivated p {
	cursor: not-allowed;
}

.previous .footerBtn_bgcolor div, .next .footerBtn_bgcolor div {
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translate(0, -50%);
}
.next .footerBtn_bgcolor div {
	left: 3%;
}

.projectType {
	opacity: 50%;
}

.fullCase_web, .greatcolorBtn_web, .patatapcloneBtn_web, .todolistBtn_web {
	position: fixed;
	width: 240px;
	bottom: 16vh;
	right: 0;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
}
.fullCase_web_2 {
	left: 0;
	right: auto;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.greatcolorBtn_web {
	width: 310px;
}
.todolistBtn_web {
	width: 210px;
}

.BillyIntro {
	border: 2px solid #000;
	padding: 38px 40px;
}



/* Responsive ShortToLong Images */

@media (max-width: 1460px) {

.POTENTIAL_I_workflowImage2_responsiveShortToLong img {
	width: 1500px;
	margin: 0;
	padding-left: 40px;
	padding-right: 40px;
}

.POTENTIAL_I_workflowImage2_responsiveShortToLong {
	width: 100%;
}

.workflow_POTENTIAL_I_2_responsiveShortToLong, .workflow_POTENTIAL_I_3_responsiveShortToLong {
	height: 430px;
	margin-top: 30px;
}
.workflow_POTENTIAL_I_3_responsiveShortToLong {
	height: 410px;
}

}

@media (max-width: 1400px) {

.workflow_ihearyou_persona2_responsiveShortToLong img, .workflow_ihearyou_persona4_responsiveShortToLong img {
	width: 1500px;
	margin: 0;
	padding-left: 40px;
	padding-right: 40px;
}

.workflow_ihearyou_persona2_responsiveShortToLong,.workflow_ihearyou_persona4_responsiveShortToLong {
	width: 100%;
}

.workflow_ihearyou_2_responsiveShortToLong {
	height: 370px;
	margin-top: 30px;
}
.workflow_ihearyou_2_4_responsiveShortToLong {
	height: 350px;
}

}




@media (max-width: 1250px) {

	.app_displayNone {
		display: none;
	}
	.web_displayNone {
		display: block !important;
	}
.tablet_displayNone {
	display: none !important;
}
.tablet_undisplayedInApp {
	display: block;
}

	.app_textCenter {
		text-align: center;
	}

	.app_marginAuto {
		margin: auto;
	}

	/* ---------- App Width ----------*/

	.app_wid100 {
		width: 100%;
	}
.app_4col {
	width: 57.552%;
}
.app_6col {
	width: 88.28125%;
}

/*.tablet_wid100 {
	width: 100%;
}
.tablet_3col {
	width: 42.1825%;
}
.tablet_4col {
	width: 57.552%;
}
.tablet_6col {
	width: 88.28125%;
}*/

.tablet_2in6col {
	width: 30.3835%;
}
.tablet_3in6col {
	width: 47.7876%;
}
.tablet_4in6col {
	width: 65.19174%;
}



/* For Tablet Horizontal View 1 -- Start */

.responsive_3in6col_1738 {
	float: left;
	width: 47.7876%;
}
.responsive_3in6col_1738:nth-child(1) {
	margin-right: 4.424%;
}
.responsive_4in6col_1738 {
	width: 65.19174%;
}
.responsive_3in6col_lastPoster_1738 {
	float: none;
}

/* For Tablet Horizontal View 1 -- End */


	/* ---------- App Font Size ----------*/

	.app_fs76 {
		font-size: 76px;
	}
	.app_fs68 {
		font-size: 68px;
	}
	.app_fs64 {
		font-size: 64px;
	}
	.app_fs52 {
		font-size: 52px;
	}
	.app_fs50 {
		font-size: 50px;
	}
	.app_fs48 {
		font-size: 48px;
	}
	.app_fs46 {
		font-size: 46px;
	}
	.app_fs44 {
		font-size: 44px;
	}
	.app_fs40 {
		font-size: 40px;
	}


	/* ---------- App Line Height ----------*/

	.app_lh82 {
		line-height: 82px;
	}
	.app_lh64 {
		line-height: 64px;
	}
	.app_lh58 {
		line-height: 58px;
	}
	.app_lh56 {
		line-height: 58px;
	}
	.app_lh48 {
		line-height: 48px;
	}
	.app_lh44 {
		line-height: 44px;
	}
	.app_lh40 {
		line-height: 40px;
	}


	/* ---------- App Margin Top ----------*/

	.app_mt0 {
		margin-top: 0px;
	}
	.app_mt10 {
		margin-top: 10px;
	}
	.app_mt20 {
		margin-top: 20px;
	}
	.app_mt30 {
		margin-top: 30px;
	}
	.app_mt40 {
		margin-top: 40px;
	}
	.app_mt50 {
		margin-top: 50px;
	}
	.app_mt70 {
		margin-top: 70px;
	}
	.app_mt100 {
		margin-top: 100px;
	}
	.app_mt150 {
		margin-top: 150px;
	}
	.app_mt250 {
		margin-top: 250px;
	}





.annotation {
	font-size: 18px;
	line-height: 28px;
}





	.container {
		padding-bottom: calc(8vh + 250px);
	}

	.personas, .infoArch {
		padding-top: 150px;
		padding-bottom: 250px;
	}

.header, .header_forPos {
	height: 6vh;
}

.header_logo {
	width: 88px;
}

	.banner {
		height: 42vh;
	}

.detail_title {
		font-family: clarendon-text-pro,serif;
		font-weight: 700;
		font-style: normal;
	font-size: 40px;
}

.title_l3, .title_l3_nomb {
	font-size: 32px;
		font-family: libre-franklin,sans-serif;
		font-weight: 600;
		font-style: normal;
		display: block;
		margin-bottom: 30px;
}
	.title_l3_nomb {
		margin-bottom: 0;
	}

.personaInfo_personal_image {
	/*margin-right: 4.425%;*/
}

.personaWords {
	font-size: 56px;
	line-height: 74px;
}

.personaInfo_story {
		float: left;
	border: 3px solid black;
	margin-top: 0;
	margin-left: 4.425%
}
.xiaojunStory {
	height: 540px;
}
.zhijieStory {
	height: 580px;
}
.guangliStory {
	height: 460px;
}
.yikeStory {
	height: 540px;
}
.congcaiStory {
	height: 460px;
}
.zhenyuStory {
	height: 420px;
}
.kuanlinStory {
	height: 420px;
}
.jinmaiStory {
	height: 460px;
}
.zhongyiStory {
	height: 480px;
}

	.personaInfo_story div.guangli, .personaInfo_story div.yike {
		width: 84%;
	}
.congcaiStory div.congcai, .personaInfo_story div.zhenyu, .personaInfo_story div.kuanlin, .personaInfo_story div.jinmai {
	width: 80%;
}

.workflow {
	height: 560px;
}
.workflow_light {
	height: 770px;
}
.workflow_POTENTIAL_I_1 {
	height: 600px;
	/*padding: 100px 40px;*/
}
	/*.workflow_POTENTIAL_I_1 {
		height: auto;
		padding: 100px 40px;
	}*/
.workflow_POTENTIAL_I_2, .workflow_POTENTIAL_I_3 {
	height: 600px;
}

	.workflow_image img {
		margin: 0;
		padding-left: 40px;
		padding-right: 40px;
	}

.workflow_ihearyou_persona1 img, .workflow_ihearyou_persona3 img {
	width: 1300px; /* 一张图宽630px，间距40px */
}
.workflow_ihearyou_persona2 img, .workflow_ihearyou_persona4 img {
	width: 1970px; /* 一张图宽630px，间距40px */
}
.workflow_persona1_light img, .workflow_persona2_light img {
	width: 1350px; /* 一张图宽300px，间距50px */
}
.POTENTIAL_I_workflowImage1 img {
	width: 3260px;
}
.POTENTIAL_I_workflowImage2 img {
	width: 1700px;
}

.separator {
	height: 3px;
}

	.posterRight {
		float: left;
	}

.light_colorPalette_box {
	width: 48%;
		height: 150px;
		font-size: 50px;
		line-height: 150px;
}
.light_colorPalette_box:nth-child(1), .light_colorPalette_box:nth-child(3), .waterfront_colorPalette_box:nth-child(1) {
	margin-right: calc(100% - 48% * 2);
}
.light_colorPalette_box:nth-child(4) {
	border: 3px solid #36373a;
}
	.waterfront_colorPalette_box {
		width: 48%;
		height: 250px;
		float: left;
		color: #fff;
		font-size: 50px;
		line-height: 250px;
	}

	.infoArch_image_waterfront {
		position: relative;
		height: auto;
	}
	.infoArch_image_waterfront div {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.infoArch_image_waterfront div img {
		width: 1600px;
	}

.interaction p {
		font-size: 26px;
		display: block;
		position: relative;
		width: 100%;
		padding: 40px 60px;
	border: 3px solid #000;
}

	.interface_image img {
		width: 880px;
		margin-right: 20px;
	}
	.interface_image img:first-child {
		margin-left: 40px;
	}
	.interface_image img:last-child {
		margin-right: 40px;
	}
img.interface_image_light {
	width: 3500px;
}
	img.interface_image_waterfront {
		width: 860px;
	}

img.infoArch_waterfront_image {
	width: 1100px;
}
img.infoArch_colorgame_image_1 {
	width: 1200px;
}
img.infoArch_colorgame_image_2 {
	width: 1500px;
}
img.infoArch_POTENTIAL_I_image {
	width: 1600px;
}
img.todolist_editFunc_image {
	width: 1400px;
}

img.todolist_scrollX1_image {
	width: 1800px;
}

.todolist_editFunc_ol {
	padding-left: 6%;
}

	.colorgame_easyMode {
		float: none;
	}

.deleteAndEdit_tablet {
	position: relative;

}
.todolist_feature2_intro {
	border: 3px solid #000;
	padding: 24px 36px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0, -50%;);
	margin-top: 0;
}

.patatapclone_techImg {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	margin-top: 0;
}

.previous, .next {
	border: 3px solid black;
}

.btn_top {
		padding: 5px;
	width: 62px;
	height: 62px;
}

	.previous .footerBtn_bgcolor div, .next .footerBtn_bgcolor div {
		right: 20px;
	}

	.next .footerBtn_bgcolor div {
		left: 20px;
	}

.fullCase_app, .greatcolorBtn_app, .patatapcloneBtn_app, .todolistBtn_app {
	width: 340px;
	height: 68px;
	line-height: 68px;
	border: 3px solid black;
		border-radius: 60px;
	font-size: 28px;
}
.fullCase_app_2 {
	margin-top: 20px !important;
}
.greatcolorBtn_app {
	width: 440px;
}
.todolistBtn_app {
	width: 280px;
}

	.waterfront_width_app {
		width: 70%;
	}

	.BillyIntro {
		border: 0;
		padding: 0;
	}

.previous, .next, .top {
	height: 6vh;
}

.tabletPageBtn_big {
	font-size: 28px;
	line-height: 28px;
}

.tabletPageBtn_small {
	font-size: 22px;
	line-height: 22px;
	margin-top: 4px;
}

.projectIntro {
	padding-top: 6vh;
}

.tablet_homeTitle {
	font-size: 46px;
	line-height: 54px;
}

.tablet_homeTitleIntro {
	font-size: 28px;
	line-height: 38px;
	margin-top: 10px;
}

.tablet_homeImg {
	width: 68%;
}

.tablet_homeImg_light {
	width: 40%;
}

.waterfront_width_app {
	width: 62%;
}

.tablet_mantaraysContentWidth {
	width: 76%;
	margin: auto;
}

.tablet_posterName_mt {
	margin-top: 20px;
}

.tablet_posterIntro {
	text-align: center;
}

.paragraph {
	font-size: 26px;
	line-height: 38px;
}



/* Personas in Tablet start... */
/* Step 1: Copy the original code */
/* Step 2: Add the className "tablet_displayNone" to the original part */
/* Step 3: Add the classNames "tablet_undisplayedInApp web_displayNone" to the new one */
/* Step 4: Add the classNames "tablet_personaInfo", "tablet_personaInfo_personal" and "tablet_personaInfo_story" to each part */
/* Step 5: Add the className "tablet_2in6col" to the portrait part */
/* Step 6: Add the className "tablet_4in6col" to the story part */

.tablet_personaInfo {
	position: relative;
	overflow: hidden;
}

.tablet_personaInfo_personal {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}

.tablet_personaInfo_story {
	float: right;
}

/* Personas in Tablet end... */



.patatapclone_techDiv_tablet {
	position: relative;
}

.POTENTIAL_I_resource1_BillyImg_tablet {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}

.BillyIntro_tablet {
	float: right;
}



.POTENTIAL_I_resource1_tablet {
	position: relative;
}

.patatapclone_techDiv_interface_tablet {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: 0;
}
.patatapclone_techImg_tablet {
	float: left;
	margin-top: 0;
}



	/* Responsive in Desktop */

.annotation_980 {
	font-size: 16px;
	line-height: 22px;
}

.container_980 {
	padding-bottom: calc(8vh + 150px);
}

.personas_980, .infoArch_980 {
	padding-top: 100px;
	padding-bottom: 150px;
}

.header_980, .header_forPos_980 {
	height: 8vh;
	min-height: 60px;
	max-height: 75px;
}

.header_logo_980 {
	width: 70px;
}

.detail_title_980 {
	font-size: 28px;
}

.title_l3_980, .title_l3_nomb_980 {
	font-size: 24px;
	margin-bottom: 14px;
}

.title_l3_nomb_980 {
	margin-bottom: 0;
}

.personaWords_980 {
	font-size: 42px;
	line-height: 58px;
}

.personaInfo_story_980 {
	border: 2px solid black;
}
.xiaojunStory_980 {
	height: 320px;
}
.zhijieStory_980 {
	height: 340px;
}
.guangliStory_980 {
	height: 300px;
}
.yikeStory_980 {
	height: 320px;
}
.congcaiStory_980 {
	height: 240px;
}
.zhenyuStory_980 {
	height: 220px;
}
.kuanlinStory_980 {
	height: 260px;
}
.jinmaiStory_980 {
	height: 260px;
}
.zhongyiStory_980 {
	height: 280px;
}

.workflow_980 {
	height: 500px;
}
.workflow_light_980 {
	height: 680px;
}

.workflow_POTENTIAL_I_2_980 {
	height: 520px;
}
.workflow_POTENTIAL_I_3_980 {
	height: 500px;
}

.workflow_ihearyou_persona1_980 img, .workflow_ihearyou_persona3_980 img {
	width: 1040px; /* 一张图宽500px，间距40px */
}
.workflow_ihearyou_persona2_980 img, .workflow_ihearyou_persona4_980 img {
	width: 1580px; /* 一张图宽500px，间距40px */
}
.workflow_persona1_light_980 img, .workflow_persona2_light_980 img {
	width: 1180px; /* 一张图宽250px，间距60px */
}
.POTENTIAL_I_workflowImage1_980 img {
	width: 2800px;
}
.POTENTIAL_I_workflowImage2_980 img {
	width: 1400px;
}

.separator_980 {
	height: 3px;
}

.light_colorPalette_box_1250 {
	width: 49%;
	height: 150px;
	font-size: 28px;
	line-height: 150px;
}
.light_colorPalette_box_1250:nth-child(1), .light_colorPalette_box_1250:nth-child(3), .waterfront_colorPalette_box_1250:nth-child(1) {
	margin-right: calc(100% - 49% * 2);
}
.light_colorPalette_box_980:nth-child(4) {
	border: 3px solid #36373a;
}

.waterfront_colorPalette_box_1250 {
	width: 49%;
	height: 150px;
	font-size: 28px;
	line-height: 150px;
}

.interface_image_980 img {
	width: 110%;
	max-width: 860px;
}
img.interface_image_light_980 {
	width: 2300px;
	max-width: none;
}
img.interface_image_waterfront_980 {
	width: 680px;
}

img.infoArch_waterfront_image_1250 {
	width: 80%;
	margin-left: 10%;
}
img.todolist_editFunc_image_980 {
	width: 1000px;
	min-width: 100%;
}
img.infoArch_colorgame_image_1_1250 {
	width: 100%;
}
img.infoArch_colorgame_image_2_1250 {
	width: 100%;
}
img.infoArch_POTENTIAL_I_image_980 {
	width: 1400px;
}

.todolist_feature2_intro_980 {
	border: 3px solid #000;
	padding: 20px 30px;
}

.previous_980, .next_980 {
	border: 3px solid black;
}

.fullCase_app_980, .greatcolorBtn_app_980, .patatapcloneBtn_app_980, .todolistBtn_app_980 {
	width: 260px;
	height: 54px;
	line-height: 54px;
	font-size: 20px;
}
.greatcolorBtn_app_980 {
	width: 330px;
}
.todolistBtn_app_980 {
	width: 220px;
}

.previous_980, .next_980, .top_980 {
	height: 8vh;
	min-height: 60px;
	max-height: 75px;

}

.tabletPageBtn_big_980 {
	font-size: 24px;
	line-height: 24px;
}

.tabletPageBtn_small_980 {
	font-size: 20px;
	line-height: 20px;
	margin-top: 5px;
}

/*.header, .header_forPos_980 {
	height: 8vh;
}*/

.projectIntro_980 {
	padding-top: 8vh;
}

.tablet_homeTitle_980 {
	font-size: 38px;
	line-height: 48px;
}

.tablet_homeTitleIntro_980 {
	font-size: 24px;
	line-height: 34px;
	margin-top: 0px;
}

.tablet_homeImg_1250 {
	width: 40%;
}
.tablet_homeImg_light_1250 {
	width: 22%;
}
.waterfront_width_app_980 {
	width: 42%;
}

.tablet_mantaraysContentWidth_980 {
	width: 100%;
	display: inline;
	margin: auto;
}

.paragraph_980, .interaction_980 p.paragraph_980, .interaction_980 p {
	font-size: 20px; 
	line-height: 30px;
}
.interaction_980 p {
	border: 2px solid #000;
}

.tablet_personaInfo_personal_980 {
	position: relative;
	top: 0;
	transform: none;
}

.tablet_personaInfo_story_980 {
	float: left;
}

.responsiveMT1_980 {
	margin-top: 150px; /* 下个部分距离上个部分大的距离 */
}
.responsiveMT2_980 {
	margin-top: 100px; /* 下个部分距离上个部分小的距离 */
}
.responsiveMT3_980 {
	margin-top: 50px; /* 大标题跟内容之间的距离 */
}
.responsiveMT4_980 {
	margin-top: 36px; /* 内容里元素之间的大距离 */
}
.responsiveMT5_980 {
	margin-top: 20px; /* 内容里元素之间的小距离 */
}
.responsiveMT6_980 {
	margin-top: 10px; /* 内容里元素之间的小距离 */
}
.overflowHidden_500 {
	overflow: hidden;
}

.tabletPageBtn_big_1250 {
	font-size: 20px;
	line-height: 20px;
}

.tabletPageBtn_small_1250 {
	font-size: 18px;
	line-height: 18px;
	margin-top: 8px;
}

.waterfront_width_app_1250 {
	width: 34%;
}

.btn_top_1250 {
		padding: 5px;
	width: 40px;
	height: 40px;
}

.responsiveSideSide_1250 {
	width: 47.7876%;
}
.responsiveSideSide_1250:nth-child(1) {
	margin-right: calc(100% - 47.7876% * 2);
}
.responsiveSideSide_mt_1250 {
	margin-top: 50px;
}

.POTENTIAL_I_resource1_BillyImg_tablet_1250, .tablet_personaInfo_personal_1250 {
	position: relative;
	transform: none;
}

.BillyIntro_tablet_1250, .tablet_personaInfo_story_1250, .tablet_personaInfo_story_POTENTIAL_I_1250 {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
}

.tablet_personaInfo_1250 {
	margin-top: 36px;
}

.tablet_personaInfo_story_1250 {
	height: 100%;
}
.tablet_personaInfo_story_1250 div.kuanlin {
	width: 68%;
}
.tablet_personaInfo_story_1250 div.jinmai {
	width: 72%;
}
.tablet_personaInfo_story_1250 div.zhongyi {
	width: 70%;
}

img.infoArch_POTENTIAL_I_image_1250 {
	width: 120%;
}

.responsiveOverflowHidden_1250 {
	overflow: hidden;
}

.responsiveAppear_1250 {
	display: block !important;
}
.responsiveDisappear_1250 {
	display: none !important;
}

.responsive_personaWordsMT_1250 {
	margin-top: 36px;
}

.responsive_personaStoryMT_1250 {
	margin: 0;
}

.workflow_ihearyou_persona1_1120 img {
	margin: auto;
}
.workflow_ihearyou_persona3_1120 img {
	margin: auto;
}



/* For Tablet Horizontal View 2 -- Start */

.posterRight_1738 {
	margin-top: 0;
}
.light_colorblocks_1738 {
	margin-top: 20px !important;
}

.congcaiStory div.congcai_1738 {
	width: 72%;
}
.personaInfo_story div.zhenyu_1738 {
	width: 68%;
}

.tabletPageBtn_small_1738 {
	margin-top: 4px;
}

.tablet_homeImg_1738 {
	width: 36% !important;
}
.tablet_homeImg_light_1738 {
	width: 20% !important;
}
.waterfront_width_app_1738 {
	width: 30% !important;
}

.illustration_1738 {
	display: block !important;
}

/* For Tablet Horizontal View 2 -- End */



.todolist_editFunc_ol {
	padding-left: 2.5%;
}

}





@media (max-width: 1130px) {

.tablet_homeImg_1130 {
	width: 44%;
}
.tablet_homeImg_light_1130 {
	width: 24%;
}
.waterfront_width_app_1130 {
	width: 36%;
}
img.infoArch_waterfront_image_1130 {
	width: 100%;
	margin-left: 0;
}

.todolist_editFunc_ol {
	padding-left: 2.5%;
}

}





@media (max-width: 1024px) {

.tablet_homeImg_1024 {
	width: 50%;
}
.tablet_homeImg_light_1024 {
	width: 28%;
}
.waterfront_width_app_1024 {
	width: 38%;
}

.todolist_editFunc_ol {
	padding-left: 3%;
}

.todolist_editFunc_ol_tabletVertical {
	padding-left: 5%;
}

}





@media (max-width: 980px) {

	.app_displayNone {
		display: none;
	}
	.web_displayNone {
		display: block;
	}
.tablet_undisplayedInApp {
	display: none !important;
}
.app_displayBlock {
	display: block !important;
}

	.app_textCenter {
		text-align: center;
	}

	.app_marginAuto {
		margin: auto;
	}

	/* ---------- App Width ----------*/

	.app_wid100 {
		width: 100%;
	}
	.app_4col {
		width: 53.44%;
	}
	.app_6col {
		width: 84.127%;
	}


	/* ---------- App Font Size ----------*/

	.app_fs76 {
		font-size: 76px;
	}
	.app_fs68 {
		font-size: 68px;
	}
	.app_fs64 {
		font-size: 64px;
	}
	.app_fs52 {
		font-size: 52px;
	}
	.app_fs50 {
		font-size: 50px;
	}
	.app_fs48 {
		font-size: 48px;
	}
	.app_fs46 {
		font-size: 46px;
	}
	.app_fs44 {
		font-size: 44px;
	}
	.app_fs40 {
		font-size: 40px;
	}


	/* ---------- App Line Height ----------*/

	.app_lh82 {
		line-height: 82px;
	}
	.app_lh64 {
		line-height: 64px;
	}
	.app_lh58 {
		line-height: 58px;
	}
	.app_lh56 {
		line-height: 58px;
	}
	.app_lh48 {
		line-height: 48px;
	}
	.app_lh44 {
		line-height: 44px;
	}
	.app_lh40 {
		line-height: 40px;
	}


	/* ---------- App Margin Top ----------*/

	.app_mt0 {
		margin-top: 0px;
	}
	.app_mt10 {
		margin-top: 10px;
	}
	.app_mt20 {
		margin-top: 20px;
	}
	.app_mt30 {
		margin-top: 30px;
	}
	.app_mt40 {
		margin-top: 40px;
	}
	.app_mt50 {
		margin-top: 50px;
	}
	.app_mt70 {
		margin-top: 70px;
	}
	.app_mt100 {
		margin-top: 100px;
	}
	.app_mt150 {
		margin-top: 150px;
	}
	.app_mt250 {
		margin-top: 250px;
	}





	.annotation {
		font-size: 32px;
		line-height: 40px;
	}





	.container {
		padding-bottom: calc(8vh + 250px);
	}

	.personas, .infoArch {
		padding-top: 150px;
		padding-bottom: 250px;
	}

.header, .header_forPos {
	height: 8vh;
}

	.header_logo {
		width: 160px;
	}

	.banner {
		height: 42vh;
	}

	.detail_title {
		font-family: clarendon-text-pro,serif;
		font-weight: 700;
		font-style: normal;
		font-size: 54px;
	}

	.title_l3, .title_l3_nomb {
		font-size: 48px;
		font-family: libre-franklin,sans-serif;
		font-weight: 600;
		font-style: normal;
		display: block;
		margin-bottom: 30px;
	}
	.title_l3_nomb {
		margin-bottom: 0;
	}

	.personaInfo_personal_image {
		width: 63.522%;
	}

	.personaWords {
		font-size: 78px;
		line-height: 96px;
	}

.personaInfo_story {
		float: left;
		border: 4px solid black;
		margin-left: 0;
		margin-top: 50px;
}
	.xiaojunStory, .zhijieStory {
		height: 980px;
	}
	.guangliStory {
		height: 800px;
	}
	.yikeStory {
		height: 920px;
	}
	.congcaiStory {
		height: 740px;
	}
	.zhenyuStory {
		height: 560px;
	}
	.kuanlinStory {
		height: 680px;
	}
	.jinmaiStory {
		height: 800px;
	}
.zhongyiStory {
	height: 800px;
}

	.personaInfo_story div.guangli, .personaInfo_story div.yike {
		width: 84%;
	}
	.congcaiStory div.congcai, .personaInfo_story div.zhenyu {
		width: 84%;
	}
	.personaInfo_story div.kuanlin, .personaInfo_story div.jinmai {
		width: 80%;
	}

	.workflow {
		height: 680px;
	}
	.workflow_light {
		height: 1000px;
	}
	.workflow_POTENTIAL_I_1 {
		height: 720px;
	}
	.workflow_POTENTIAL_I_2 {
		height: 820px;
	}
	.workflow_POTENTIAL_I_3 {
		height: 760px;
	}

	.workflow_image img {
		margin: 0;
		padding-left: 40px;
		padding-right: 40px;
	}

	.workflow_ihearyou_persona1 img, .workflow_ihearyou_persona3 img {
		width: 1720px; /* 一张图宽840px，间距40px */
	}
	.workflow_ihearyou_persona2 img, .workflow_ihearyou_persona4 img, .POTENTIAL_I_workflowImage2 img {
		width: 2560px; /* 一张图宽840px，间距40px */
	}
	.workflow_persona1_light img, .workflow_persona2_light img {
		width: 1800px; /* 一张图宽180px，间距50px */
	}
	.POTENTIAL_I_workflowImage1 img {
		width: 4500px;
	}

	.separator {
		height: 4px;
	}

	.posterRight {
		float: left;
	}

	.light_colorPalette_box {
		width: 45.283%;
		height: 150px;
		font-size: 50px;
		line-height: 150px;
	}
	.light_colorPalette_box:nth-child(1), .light_colorPalette_box:nth-child(3), .waterfront_colorPalette_box:nth-child(1) {
		margin-right: calc(100% - 45.283% * 2);
	}
.light_colorPalette_box:nth-child(4) {
	border: 4px solid #36373a;
}

	.waterfront_colorPalette_box {
		width: 45.283%;
		height: 250px;
		float: left;
		color: #fff;
		font-size: 50px;
		line-height: 250px;
	}

	.infoArch_image_waterfront {
		position: relative;
		height: auto;
	}
	.infoArch_image_waterfront div {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.infoArch_image_waterfront div img {
		width: 1600px;
	}

	.interaction p {
		font-size: 44px;
		display: block;
		position: relative;
		width: 100%;
		padding: 40px 60px;
		border: 4px solid #000;
	}

	.interface_image img {
		width: 880px;
		margin-right: 20px;
	}
	.interface_image img:first-child {
		margin-left: 40px;
	}
	.interface_image img:last-child {
		margin-right: 40px;
	}
	img.interface_image_light {
		width: 4500px;
	}
	img.interface_image_waterfront {
		width: 860px;
	}

	img.infoArch_waterfront_image {
		width: 1600px;
	}
	img.todolist_editFunc_image {
		width: 2000px;
	}
img.infoArch_colorgame_image_1 {
	width: 1700px;
}
img.infoArch_colorgame_image_2 {
	width: 2200px;
}
	img.infoArch_POTENTIAL_I_image {
		width: 2200px;
	}
	img.todolist_scrollX1_image {
		width: 2400px;
	}

.todolist_editFunc_ol {
	padding-left: 8%;
}	

	.colorgame_easyMode {
		float: none;
	}

	.todolist_feature2_intro {
		border: 4px solid #000;
		padding: 40px 50px;
	}

	.patatapclone_techImg, .todolist_feature2_intro {
		position: relative;
		transform: none;
	}

	.previous, .next {
		border: 4px solid black;
	}

	.btn_top {
		padding: 5px;
		width: 100px;
		height: 100px;
	}
.btn_top_1250 {
	width: 40px;
	height: 40px;
}

	.previous .footerBtn_bgcolor div, .next .footerBtn_bgcolor div {
		right: 10%;
	}

	.next .footerBtn_bgcolor div {
		left: 10%;
	}

.fullCase_app, .greatcolorBtn_app, .patatapcloneBtn_app, .todolistBtn_app {
		width: 610px;
		height: 120px;
		line-height: 120px;
		border: 4px solid black;
		border-radius: 60px;
		font-size: 50px;
	}
	.greatcolorBtn_app {
		width: 790px;
	}
.todolistBtn_app {
	width: 520px;
}
.fullCase_app_2 {
	margin-top: 40px !important;
}

	.waterfront_width_app {
		width: 70%;
	}

	.BillyIntro {
		border: 0;
		padding: 0;
	}

.previous, .next, .top {
	height: 8vh;
}

.tabletPageBtn_big {
	font-size: 44px;
	line-height: 44px;
}

.tabletPageBtn_small {
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
}

.header, .header_forPos {
	height: 8vh;
}

.projectIntro {
	padding-top: 8vh;
}

.tablet_homeTitle {
	font-size: 64px;
	line-height: 76px;
}

.tablet_homeTitleIntro {
	font-size: 44px;
	line-height: 58px;
	margin-top: 20px;
}

.tablet_homeImg {
	width: 84.127%;
}
.tablet_homeImg_light {
	width: 53.44%;
}

.tablet_mantaraysContentWidth {
	width: 100%;
	display: inline;
	margin: auto;
}

.paragraph, .interaction p.paragraph {
	font-size: 44px; 
	line-height: 58px;
}

.tablet_personaInfo_personal {
	position: relative;
	top: 0;
	transform: none;
}

.tablet_personaInfo_story {
	float: left;
}



	/* Responsive in Desktop */

.annotation_980 {
	font-size: 16px;
	line-height: 22px;
}

.container_980 {
	padding-bottom: calc(8vh + 150px);
}

.personas_980, .infoArch_980 {
	padding-top: 100px;
	padding-bottom: 150px;
}

.header_980, .header_forPos_980 {
	height: 8vh;
	min-height: 60px;
	max-height: 75px;
}

.header_logo_980 {
	width: 70px;
}

.detail_title_980 {
	font-size: 28px;
}

.title_l3_980, .title_l3_nomb_980 {
	font-size: 24px;
	margin-bottom: 14px;
}

.personaWords_980 {
	font-size: 42px;
	line-height: 58px;
}

.personaInfo_story_980 {
	border: 2px solid black;
}
.xiaojunStory_980 {
	height: 320px;
}
.zhijieStory_980 {
	height: 340px;
}
.guangliStory_980 {
	height: 300px;
}
.yikeStory_980 {
	height: 320px;
}
.congcaiStory_980 {
	height: 240px;
}
.zhenyuStory_980 {
	height: 220px;
}
.kuanlinStory_980 {
	height: 260px;
}
.jinmaiStory_980 {
	height: 260px;
}
.zhongyiStory_980 {
	height: 280px;
}

.workflow_980 {
	height: 480px;
}
.workflow_light_980 {
	height: 680px;
}

.workflow_POTENTIAL_I_2_980 {
	height: 520px;
}
.workflow_POTENTIAL_I_3_980 {
	height: 500px;
}

.workflow_ihearyou_persona1_980 img, .workflow_ihearyou_persona3_980 img {
	width: 1040px; /* 一张图宽500px，间距40px */
}
.workflow_ihearyou_persona2_980 img, .workflow_ihearyou_persona4_980 img {
	width: 1580px; /* 一张图宽500px，间距40px */
}
.workflow_persona1_light_980 img, .workflow_persona2_light_980 img {
	width: 1180px; /* 一张图宽250px，间距60px */
}
.POTENTIAL_I_workflowImage1_980 img {
	width: 2800px;
}
.POTENTIAL_I_workflowImage2_980 img {
	width: 1400px;
}

.separator_980 {
	height: 3px;
}

.light_colorPalette_box_980 {
	width: 48%;
	height: 120px;
	font-size: 28px;
	line-height: 120px;
}
.light_colorPalette_box_980:nth-child(1), .light_colorPalette_box_980:nth-child(3), .waterfront_colorPalette_box_980:nth-child(1) {
	margin-right: calc(100% - 48% * 2);
}
.light_colorPalette_box_980:nth-child(4) {
	border: 3px solid #36373a;
}

.waterfront_colorPalette_box_980 {
	width: 48%;
	height: 120px;
	font-size: 28px;
	line-height: 120px;
}

.interface_image_980 img {
	width: 110%;
	max-width: 860px;
}
img.interface_image_light_980 {
	width: 2300px;
	max-width: none;
}
img.interface_image_waterfront_980 {
	width: 110%;
}

img.infoArch_waterfront_image_980 {
	width: 880px;
}
img.todolist_editFunc_image_980 {
	width: 1000px;
}
img.infoArch_colorgame_image_1_980 {
	width: 800px;
}
img.infoArch_colorgame_image_2_980 {
	width: 1100px;
}
img.infoArch_POTENTIAL_I_image_980 {
	width: 1400px;
}

.todolist_feature2_intro_980 {
	border: 3px solid #000;
	padding: 20px 30px;
}

.previous_980, .next_980 {
	border: 3px solid black;
}

.fullCase_app_980, .greatcolorBtn_app_980, .patatapcloneBtn_app_980, .todolistBtn_app_980 {
	width: 260px;
	height: 54px;
	line-height: 54px;
	font-size: 20px;
}
.greatcolorBtn_app_980 {
	width: 330px;
}
.todolistBtn_app_980 {
	width: 220px;
}

.previous_980, .next_980, .top_980 {
	height: 8vh;
	min-height: 60px;
	max-height: 75px;

}

.tabletPageBtn_big_980 {
	font-size: 24px;
	line-height: 24px;
}

.tabletPageBtn_small_980 {
	font-size: 20px;
	line-height: 20px;
	margin-top: 5px;
}

.header, .header_forPos_980 {
	height: 8vh;
}

.projectIntro_980 {
	padding-top: 8vh;
}

.tablet_homeTitle_980 {
	font-size: 38px;
	line-height: 48px;
}

.tablet_homeTitleIntro_980 {
	font-size: 24px;
	line-height: 34px;
	margin-top: 0px;
}

.tablet_homeImg_980 {
	width: 50%;
}
.tablet_homeImg_light_980 {
	width: 26%;
}
.waterfront_width_app_980 {
	width: 42%;
}

.tablet_mantaraysContentWidth_980 {
	width: 100%;
	display: inline;
	margin: auto;
}

.paragraph_980, .interaction_980 p.paragraph_980 {
	font-size: 20px; 
	line-height: 30px;
}

.tablet_personaInfo_personal_980 {
	position: relative;
	top: 0;
	transform: none;
}

.tablet_personaInfo_story_980 {
	float: left;
}

.responsiveMT1_980 {
	margin-top: 150px; /* 下个部分距离上个部分大的距离 */
}
.responsiveMT2_980 {
	margin-top: 100px; /* 下个部分距离上个部分小的距离 */
}
.responsiveMT3_980 {
	margin-top: 50px; /* 大标题跟内容之间的距离 */
}
.responsiveMT4_980 {
	margin-top: 36px; /* 内容里元素之间的大距离 */
}
.responsiveMT5_980 {
	margin-top: 20px; /* 内容里元素之间的小距离 */
}
.responsiveMT6_980 {
	margin-top: 10px; /* 内容里元素之间的小距离 */
}
.overflowHidden_500 {
	overflow: hidden;
}

.previous_980 .footerBtn_bgcolor_980 div, .next_980 .footerBtn_bgcolor_980 div {
	right: 10px;
}

.next_980 .footerBtn_bgcolor_980 div {
	left: 10px;
}

.todolist_editFunc_ol_980 {
	padding-left: 3%;
}

.fullCase_app_2_980 {
	margin-top: 20px !important;
}

}





@media (max-width: 979px) {

.annotation {
	font-size: 16px;
	line-height: 22px;
}

.container {
	padding-bottom: calc(8vh + 150px);
}

.personas, .infoArch {
	padding-top: 100px;
	padding-bottom: 150px;
}

.header, .header_forPos {
	height: 8vh;
	min-height: 60px;
	max-height: 75px;
}

.header_logo {
	width: 70px;
}

.detail_title {
	font-size: 28px;
}

.title_l3, .title_l3_nomb {
	font-size: 24px;
	margin-bottom: 14px;
}
.title_l3_nomb {
	margin-bottom: 0;
}

.personaWords {
	font-size: 42px;
	line-height: 58px;
}

.personaInfo_story {
	border: 2px solid black;
}
.xiaojunStory {
	height: 320px;
}
.zhijieStory {
	height: 340px;
}
.guangliStory {
	height: 300px;
}
.yikeStory {
	height: 320px;
}
.congcaiStory {
	height: 240px;
}
.zhenyuStory {
	height: 220px;
}
.kuanlinStory {
	height: 260px;
}
.jinmaiStory {
	height: 260px;
}
.zhongyiStory {
	height: 280px;
}

/*	.personaInfo_story div.guangli, .personaInfo_story div.yike {
		width: 84%;
	}
	.congcaiStory div.congcai, .personaInfo_story div.zhenyu {
		width: 84%;
	}
	.personaInfo_story div.kuanlin, .personaInfo_story div.jinmai {
		width: 80%;
	}
*/
.workflow {
	height: 480px;
}
.workflow_light {
	height: 680px;
}
.workflow_POTENTIAL_I_1 {
	height: 520px;
}
.workflow_POTENTIAL_I_2 {
	height: 520px;
}
.workflow_POTENTIAL_I_3 {
	height: 500px;
}

/*	.workflow_image img {
		margin: 0;
		padding-left: 40px;
		padding-right: 40px;
	}
*/
.workflow_ihearyou_persona1 img, .workflow_ihearyou_persona3 img {
	width: 1040px; /* 一张图宽500px，间距40px */
}
.workflow_ihearyou_persona2 img, .workflow_ihearyou_persona4 img {
	width: 1580px; /* 一张图宽500px，间距40px */
}
.workflow_persona1_light img, .workflow_persona2_light img {
	width: 1180px; /* 一张图宽250px，间距60px */
}
.POTENTIAL_I_workflowImage1 img {
	width: 2800px;
}
.POTENTIAL_I_workflowImage2 img {
	width: 1400px;
}

.separator {
	height: 3px;
}

.light_colorPalette_box {
	width: 48%;
	height: 120px;
	font-size: 28px;
	line-height: 120px;
}
.light_colorPalette_box:nth-child(1), .light_colorPalette_box:nth-child(3), .waterfront_colorPalette_box:nth-child(1) {
	margin-right: calc(100% - 48% * 2);
}
.light_colorPalette_box:nth-child(4) {
	border: 3px solid #36373a;
}

.waterfront_colorPalette_box {
	width: 48%;
	height: 120px;
/*		float: left;
		color: #fff;
*/	font-size: 28px;
	line-height: 120px;
}

/*	.infoArch_image_waterfront div img {
		width: 1600px;
	}

	.interaction p {
		font-size: 44px;
		display: block;
		position: relative;
		width: 100%;
		padding: 40px 60px;
		border: 4px solid #000;
	}
*/
	/*.interface_image img:first-child {
		margin-left: 40px;
	}
	.interface_image img:last-child {
		margin-right: 40px;
	}*/
img.interface_image_light {
	width: 2300px;
	max-width: none;
}
img.infoArch_waterfront_image {
	width: 880px;
}
img.todolist_editFunc_image {
	width: 1000px;
}
img.infoArch_colorgame_image_1 {
	width: 800px;
}
img.infoArch_colorgame_image_2 {
	width: 1100px;
}
img.infoArch_POTENTIAL_I_image {
	width: 1400px;
}
/*	img.todolist_scrollX1_image {
		width: 2000px;
	}
*/
.todolist_feature2_intro {
	border: 3px solid #000;
	padding: 20px 30px;
}

.previous, .next {
	border: 3px solid black;
}

/*	.btn_top {
		padding: 5px;
		width: 52px;
		height: 52px;
	}
*/
.fullCase_app, .greatcolorBtn_app, .patatapcloneBtn_app, .todolistBtn_app {
	width: 260px;
	height: 54px;
	line-height: 54px;
	font-size: 20px;
	border: 3px solid black;
}
.greatcolorBtn_app {
	width: 330px;
}
.todolistBtn_app {
	width: 220px;
}

/*	.waterfront_width_app {
		width: 70%;
	}
*/
.previous, .next, .top {
	height: 8vh;
	min-height: 60px;
	max-height: 75px;

}

.tabletPageBtn_big {
	font-size: 20px;
	line-height: 20px;
}

.tabletPageBtn_small {
	font-size: 18px;
	line-height: 18px;
	margin-top: 8px;
}

.header, .header_forPos {
	height: 8vh;
}

.projectIntro {
	padding-top: 8vh;
}

.tablet_homeTitle {
	font-size: 38px;
	line-height: 48px;
}

.tablet_homeTitleIntro {
	font-size: 24px;
	line-height: 34px;
	margin-top: 0px;
}

.tablet_homeImg {
	width: 50%;
}
.tablet_homeImg_light {
	width: 28%;
}
.waterfront_width_app {
	width: 42%;
}

.tablet_mantaraysContentWidth {
	width: 100%;
	display: inline;
	margin: auto;
}

.paragraph, .interaction p.paragraph {
	font-size: 20px; 
	line-height: 30px;
}

.tablet_personaInfo_personal {
	position: relative;
	top: 0;
	transform: none;
}

.tablet_personaInfo_story {
	float: left;
}

.responsiveMT1 {
	margin-top: 150px; /* 下个部分距离上个部分大的距离 */
}
.responsiveMT2 {
	margin-top: 100px; /* 下个部分距离上个部分小的距离 */
}
.responsiveMT3 {
	margin-top: 50px; /* 大标题跟内容之间的距离 */
}
.responsiveMT4 {
	margin-top: 36px; /* 内容里元素之间的大距离 */
}
.responsiveMT5 {
	margin-top: 20px; /* 内容里元素之间的小距离 */
}
.responsiveMT6 {
	margin-top: 10px; /* 内容里元素之间的小距离 */
}
.overflowHidden_500 {
	overflow: hidden;
}

.previous .footerBtn_bgcolor div, .next .footerBtn_bgcolor div {
	right: 10px;
}

.next .footerBtn_bgcolor div {
	left: 10px;
}

.todolist_editFunc_ol {
	padding-left: 3%;
}

}





@media (max-width: 900px) {

.tablet_homeImg {
	width: 56%;
}
.tablet_homeImg_light {
	width: 32%;
}
.waterfront_width_app {
	width: 48%;
}

.interface_image img {
	width: 110%;
}
img.interface_image_light {
	width: 2300px;
	max-width: none;
}

}





@media (max-width: 800px) {

.tablet_homeImg {
	width: 64%;
}
.tablet_homeImg_light {
	width: 36%;
}
.waterfront_width_app {
	width: 54%;
}

.xiaojunStory {
	height: 340px;
}
.zhijieStory {
	height: 340px;
}
.guangliStory {
	height: 320px;
}
.yikeStory {
	height: 340px;
}
.congcaiStory {
	height: 280px;
}
.zhenyuStory {
	height: 240px;
}
.kuanlinStory {
	height: 260px;
}
.jinmaiStory {
	height: 300px;
}
.zhongyiStory {
	height: 320px;
}

.todolist_editFunc_ol {
	padding-left: 4%;
}

}






@media (max-width: 700px) {

.waterfront_width_app {
	width: 56%;
}

.tablet_homeImg {
	width: 72%;
}

.tablet_homeImg_light {
	width: 40%;
}

}





@media (max-width: 680px) {

.waterfront_width_app {
	width: 60%;
}

.xiaojunStory {
	height: 360px;
}
.zhijieStory {
	height: 400px;
}
.guangliStory {
	height: 320px;
}
.yikeStory {
	height: 360px;
}
.congcaiStory {
	height: 260px;
}
.zhenyuStory {
	height: 240px;
}
.kuanlinStory {
	height: 280px;
}
.jinmaiStory {
	height: 360px;
}
.zhongyiStory {
	height: 340px;
}

}





@media (max-width: 650px) {

.xiaojunStory {
	height: 400px;
}
.zhijieStory {
	height: 400px;
}
.guangliStory {
	height: 340px;
}
.yikeStory {
	height: 380px;
}
.congcaiStory {
	height: 300px;
}
.zhenyuStory {
	height: 240px;
}
.kuanlinStory {
	height: 300px;
}
.jinmaiStory {
	height: 340px;
}
.zhongyiStory {
	height: 340px;
}

.todolist_editFunc_ol {
	padding-left: 5%;
}

}





@media (max-width: 600px) {

.tablet_homeImg {
	width: 84.127%;
}
.tablet_homeImg_light {
	width: 48%;
}
.waterfront_width_app {
	width: 68%;
}

.xiaojunStory {
	height: 440px;
}
.zhijieStory {
	height: 480px;
}
.guangliStory {
	height: 360px;
}
.yikeStory {
	height: 440px;
}
.congcaiStory {
	height: 320px;
}
.zhenyuStory {
	height: 240px;
}
.kuanlinStory {
	height: 300px;
}
.jinmaiStory {
	height: 340px;
}
.zhongyiStory {
	height: 340px;
}

}




@media (max-width: 560px) {

.waterfront_width_app {
	width: 70%;
}

.xiaojunStory {
	height: 440px;
}
.zhijieStory {
	height: 480px;
}
.guangliStory {
	height: 360px;
}
.yikeStory {
	height: 440px;
}
.congcaiStory {
	height: 300px;
}
.zhenyuStory {
	height: 260px;
}
.kuanlinStory {
	height: 300px;
}
.jinmaiStory {
	height: 340px;
}
.zhongyiStory {
	height: 360px;
}

}





@media (max-width: 540px) {

.tablet_homeImg_light {
	width: 53.4%;
}

.kuanlinStory {
	height: 340px;
}
.jinmaiStory {
	height: 380px;
}
.zhongyiStory {
	height: 420px;
}

}





@media (max-width: 500px) {

.interface_image img {
	width: 560px;
}
img.interface_image_light {
	width: 2000px;
	max-width: none;
}

}