/* Base */
html,
body {
	font-family: "Microsoft JhengHei", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
	font-size: 16px;
}

/* Base */
.contentBox {
	padding: 88px 0;
}

.pageTitle {
	color: #39cd00;
	font-size: 48px;
	font-weight: bolder;
	line-height: 57px;
	padding: 0 0 48px 0;
}

.pageDescription {
	text-align: center;
}

.pageDescription p {
	color: #333333;
	font-size: 15px;
	font-weight: inherit;
	line-height: 19px;
	padding-bottom: 12px;
	text-align: left;
}

.pageDescription img {
	padding-bottom: 12px;
}

.pageDescriptionUdnLink a {
	color: #0635c9;
	font-size: 15px;
	font-weight: inherit;
	line-height: 19px;
	padding-bottom: 12px;
	text-align: left;
	text-decoration: none;
	word-wrap: break-word;
}

.udnTitle {
	color: #333333;
	font-size: 24px;
	font-weight: bolder;
	line-height: 32px;
	text-align: left;
	padding-bottom: 12px;
}

.btn-rounded {
	border-radius: 24px 24px;
}

/* Cover */
.mainCoverBox {
	background: url("../images/mainCover-bg.jpg") no-repeat top center;
	background-attachment: fixed;
	background-size: cover;
	overflow: hidden;
	width: 100%;
	height: 600px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.top {
	width: 100%;
	height: 100vh;
	max-width: 1140px;
	position: relative;
	margin: 0 auto;
}

.mainCoverContainer {
	height: 100%;
	position: relative;
}

.mainCover-grandmother {
	left: 0;
	width: 36%;
	position: absolute;
	margin-top: 30px;
	animation-name: shake;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.mainCover-grandmother img {
	width: 100%;
}

.mainCover-slogan {
	margin-top: 50px;
	position: absolute;
	/* overflow: hidden; */
	right: 0;
	animation-name: falling;
	animation-duration: 2.2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.mainCover-rale {
	position: absolute;
	top: 0;
	right: -17px;
}

.mainCover-rale img {
	width: 81%;
	height: auto;
}

.mainCover-meter {
	position: absolute;
	width: 5%;
	height: auto;
	top: 0;
	right: 10px;
	animation-name: meter;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.meter-size {
	transform: scale(1.0);
	margin-top: 80px;
}

.mainCover-talk {
	background: url(../images/talk.png) no-repeat top center;
	background-size: 100% 100%;
	padding: 25px;
	overflow: hidden;
	margin-top: 15px;
	margin-bottom: 15px;
}

.mainCover-talk .left {
	float: left;
	width: 20%;
	text-align: center;
}

.mainCover-talk .left img {
	width: 80%;
	padding-left: 30px;
}

.mainCover-talk .right {
	float: left;
	font-size: 21px;
	line-height: 1.5;
	width: 80%;
}

.mainCover-talk .right span {
	color: #39cd00;
}

.mainCover-ai {
	overflow: hidden;
	width: 95%;
	height: auto;
	background: #0635c9;
	padding: 25px;
	border-radius: 15px;
	margin-left: 40px;
}

.mainCover-ai .left {
	float: left;
	width: 20%;
	text-align: center;
}

.mainCover-ai .left img {
	width: 90%;
	padding-left: 15px;
}

.mainCover-ai .right {
	float: left;
	width: 80%;
	font-size: 21px;
	line-height: 1.5;
	color: #fff;
	text-align: center;
}

.mainCover-ai .right span {
	color: #f0c419;
	font-weight: bold;
}

/* 動態 */

.speed-container {
	display: flex;
	justify-content: space-around;
	width: 100px;
	margin: 0 auto;
	padding-left: 50px;
}

.speed {
	width: 5px;
	height: 50px;
	background: white;
	border-radius: 5px;
	z-index: 100;
	animation-name: speed;
	animation-duration: 0.1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.speed-left {
	margin-top: 3px;
}

@keyframes speed {
	0% {
		margin-top: 0px;
	}

	50%% {
		margin-top: 1px;
	}

	0% {
		margin-top: 0px;
	}
}

@keyframes falling {
	0% {
		transform: rotate(2deg);
	}

	100% {
		transform: rotate(-2deg);
	}
}

@keyframes shake {
	0% {
		transform: rotate(0.1deg);
	}

	100% {
		transform: rotate(-0.1deg);
	}
}

@keyframes meter {
	0% {
		top: 150vh;
	}

	100% {
		top: -151vh;
	}
}

.cloud {
	position: absolute;
	display: block;
	top: 50px;
}

.cloud:after {
	content: '';
	display: block;
	background: var(--sky);
	width: 250px;
	height: 60px;
	position: relative;
	top: 36px;
}

.cloud-segment {
	background: white;
	border-radius: 50%;
	position: absolute;
}

.cloud-left {
	width: 70px;
	height: 70px;
}

.cloud-middle {
	width: 90px;
	height: 90px;
	top: -20px;
	left: 40px;
}

.cloud-bottom {
	width: 150px;
	height: 150px;
	left: 100px;
	top: -60px;
}

.cloud-1 {
	left: 0;
	top: 50vh;
	animation-name: cloud-1;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.cloud-far {
	transform: scale(0.2);
}

.cloud-close {
	transform: scale(-4, 4);
	animation-name: cloud-3;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-direction: forwards;
	animation-iteration-count: infinite;
}

.cloud-2 {
	left: 70vw;
	top: 15vh;
	animation-name: cloud-2;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.cloud-3 {
	top: 50vh;
	right: -10vw;
}

.cloud-4 {
	transform: scale(4, 4);
	top: -100vh;
	left: 0vw;
	animation-duration: 3s;
	animation-delay: 1s;
}

.cloud-close:after {
	display: none;
}


@keyframes cloud-1 {
	0% {
		top: 50vh;
	}

	49% {
		left: 10vw;
	}

	50% {
		top: -300px;
		left: -100vw;
	}

	51% {
		top: 110vh;
		left: 10vw;
	}

	100% {
		top: 0;
	}
}

@keyframes cloud-2 {
	0% {
		top: 15vh;
	}

	49% {
		left: 70vw;
	}

	50% {
		top: -400px;
		left: -400vw;
	}

	51% {
		top: 140vh;
		left: 70vw;
	}

	100% {
		top: 15vh;
	}
}

@keyframes cloud-3 {
	0% {
		top: 150vh;
	}

	20% {
		top: -150vh;
	}

	100% {
		top: -151vh;
	}
}

/* Media */
.mediaContentBox,
.lineContentBox {
	background: #fafafa;
	text-align: center;
}

.mediaContentBox .pageTitle .text-list {
	display: inline-block;
}

/* Features Cards */
.featuresCardBox,
.formsContentBox,
.chatbotBox {
	background: #bbfff2;
	text-align: center;
}

.featuresCardBox .card,
.lineContentBox .card,
.heroContentBox .card {
	max-height: 253px;
	min-height: 253px;
	overflow: hidden;
	width: 100%;
}

.featuresCardBox .card-info,
.lineContentBox .card-info,
.heroContentBox .card-info {
	cursor: pointer;
	margin-top: 25px;
	margin-bottom: 20px;
	-webkit-transition: all .4s linear;
	transition: all .4s linear;
	line-height: 1.3;
}

.featuresCardBox .card-info:hover {
	margin-top: -28px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out
}

.featuresCardBox .card h3,
.lineContentBox .card h3,
.heroContentBox .card h3 {
	color: #0635c9;
	font-size: 17px;
	font-weight: bolder;
}

.card-description {
	color: #0635c9;
	display: none;
	font-size: 15px;
	font-weight: inherit;
	line-height: 19px;
	margin-top: 12px;
	text-align: left;
}

.featuresCardBox .card-info:hover>.card-description {
	display: block
}

.featuresCardBox .pageTitle .text-list {
	display: inline-block;
}

/* Class Description Cards */
.classDescriptionBox {
	background: #fafafa;
	text-align: center;
}

.heroContentBox {
	background: url(../images/mainCover-bg2.jpg) no-repeat top center;
	background-size: cover;
	background-attachment: fixed;
	background-color: #fafafa;
	text-align: center;
}

.classDescriptionBox .card {
	border: 1px solid #0635c9;
}

.classDescriptionBox .card-header {
	background: #0635c9;
	color: #FFFFFF;
	font-size: 24px;
	font-weight: bolder;
	line-height: 32px;
}

.classDescriptionCardTitle {
	color: #0635c9;
	font-size: 21px;
	font-weight: bold;
	margin-bottom: 12px;
}

.classDescriptionBox .card-body {
	text-align: left;
}

.classDescriptionBox ol li {
	color: #333333;
	line-height: 27px;
	list-style: decimal;
	margin-left: 25px;
}

.classDescriptionBox .btn,
.formsContentBox .btn {
	background: #0635c9;
	color: #FFFFFF;
	font-size: 24px;
	font-weight: bolder;
}

.classDescriptionBox .btn:hover,
.formsContentBox .btn:hover {
	background: #0936a8;
}

.classDescriptionBox .pageTitle .text-list {
	display: inline-block;
	padding: 0 10px;
}

.subText {
	font-size: 24px;
}

.subText2 {
	color: #333333;
	padding-top: 12px;
	font-size: 24px;
	font-weight: inherit;
	line-height: 32px;
}

/* Forms */
.formCheck,
.cardCheck {
	cursor: pointer;
	min-height: 20px;
	min-width: 20px;
	margin-right: 5px;
}

.formsBox input,
.formsBox select {
	background: none !important;
	border: none;
	border-bottom: 2px solid #0635c9;
	border-radius: 0 0;
	color: #0635c9;
	height: 48px;
	line-height: 48px;
}

.formsBox input:focus,
.formsBox select:focus {
	background: none !important;
	border: none;
	border-bottom: 2px solid #0635c9;
	box-shadow: none;
	color: #0635c9 !important;
	outline: none;
}

.formsBox input::placeholder {
	color: #0635c9 !important;
}

.form-check-label,
.form-check-label a {
	color: #0635c9 !important;
}

.form-check-label a:hover {
	color: rgba(6, 53, 201, 0.687) !important;
}

.formsBox select:optional {
	padding-left: 7px !important;
}

/*Check box*/
.checkbox label:after,
.radio label:after {
	content: '';
	display: table;
	clear: both;
	color: #0635c9;
}

.checkbox .cr,
.radio .cr {
	position: relative;
	display: inline-block;
	border: 2px solid #0635c9;
	border-radius: .25em;
	width: 1.7em;
	height: 1.7em;
	float: left;
	margin-right: .5em;
	color: red;
}

.radio .cr {
	border-radius: 75%;
	border-color: #0635c9;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
	position: absolute;
	font-size: .8em;
	line-height: 0;
	top: 50%;
	left: 20%;
}

.radio .cr .cr-icon {
	margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
	display: none;
}

.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
	transform: scale(3) rotateZ(-220deg);
	opacity: 0;
	transition: all .7s ease-in;
}

.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
	transform: scale(1) rotateZ(0deg);
	opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]:disabled+.cr {
	opacity: .5;
}

.checkbox label,
.checkbox a {
	color: #0635c9 !important;
}

.checkbox a:hover {
	color: rgba(6, 53, 201, 0.687) !important;
}

.checkBoxDescription {
	display: inline-block;
}

/* More Information Box */
.moreInfoBox {
	background: url("../images/moreInfo-1.png");
	background-color: #fafafa;
	min-height: 793px;
	max-height: 793px;
	position: relative;
	text-align: center;
	z-index: 1;
}

.moreInfo-city {
	bottom: 0;
	position: absolute;
	z-index: 2;
}

.moreInfo-info {
	position: absolute;
	width: 100%;
	z-index: 3;
}

/* More Information Button */
.moreInfoBtn_frame {
	background: #fff;
	border-radius: 56px;
	color: #0635c9;
	cursor: pointer;
	font-size: 21px;
	height: 80px;
	line-height: 80px;
	margin-top: 280px;
	margin-left: 2%;
	margin-right: 2%;
	position: relative;
	text-align: center;
	width: 80px;
	z-index: 1;
}

/* Arrow Down */
.moreInfoBtn_frame .arrow_b_int {
	border-width: 10px;
	border-style: solid;
	border-color: #fff transparent transparent transparent;
	bottom: -17px;
	height: 0px;
	position: absolute;
	right: 32px;
	width: 0px;
}

.moreInfoBtn_frame:hover {
	display: none;
}

/* More Information More Button */
.moreInfoBtn_frame-more {
	background: #1ae5be;
	border-radius: 8px;
	color: #333333;
	cursor: pointer;
	display: none;
	font-size: 16px;
	line-height: 27px;
	left: -75px;
	margin-top: 160px;
	max-width: 230px;
	padding: 15px 15px;
	position: relative;
	text-align: left;
	z-index: 2;
}

/* Arrow Down */
.moreInfoBtn_frame-more .arrow_b_int {
	border-width: 10px;
	border-style: solid;
	border-color: #1ae5be transparent transparent transparent;
	bottom: -17px;
	height: 0px;
	position: absolute;
	right: 50%;
	width: 0px;
}

.moreInfoBtn_frame-more-title {
	color: #0635c9;
	font-size: 21px;
	font-weight: bold;
	margin-bottom: 12px;
	text-align: center;
}

/* List */
.list-1 {
	left: 5%;
	position: absolute;
	top: 80px;
}

.list-2 {
	left: 16.75%;
	position: absolute;
	top: -20px;
}

.list-3 {
	left: 36%;
	position: absolute;
	top: -35px;
}

.list-4 {
	left: 46%;
	position: absolute;
	top: -80px;
}

.list-5 {
	left: 62%;
	position: absolute;
	top: -10px;
}

.list-6 {
	left: 77%;
	position: absolute;
	top: -60px;
}

.moreInfoBoxTool {
	bottom: 15px;
	position: absolute;
	z-index: 10;
}

.moreInfoBoxTool a {
	border: none;
	color: #0635c9;
	font-size: 24px;
	font-weight: bolder;
}

.moreInfoBoxTool a:hover {
	background: #0635c9;
	color: #FFFFFF;
}

.moreInfoBox .card {
	background: rgba(255, 255, 255, 0.375);
}

.moreInfoBox .card-header {
	background: rgba(26, 229, 190, 0.687);
	padding: 0.5rem 1.25rem;
	text-align: center;
}

.moreInfoBox .card-header .btn-link {
	color: #333333;
}

.moreInfoBox .card-body {
	background: rgba(255, 255, 255, 1.0);
	line-height: 27px;
	text-align: left;
}

#loading {
	background: #000;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.load {
	position: absolute;
	width: 600px;
	height: 36px;
	font-size: 28px;
	left: 50%;
	top: 40%;
	margin-left: -300px;
	overflow: visible;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

.load div {
	position: absolute;
	width: 20px;
	height: 36px;
	opacity: 0;
	font-family: Helvetica, Arial, sans-serif;
	animation: move 2s linear infinite;
	-o-animation: move 2s linear infinite;
	-moz-animation: move 2s linear infinite;
	-webkit-animation: move 2s linear infinite;
	transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	color: #35C4F0;
}

.load div:nth-child(2) {
	animation-delay: 0.2s;
	-o-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
}

.load div:nth-child(3) {
	animation-delay: 0.4s;
	-o-animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
}

.load div:nth-child(4) {
	animation-delay: 0.6s;
	-o-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
}

.load div:nth-child(5) {
	animation-delay: 0.8s;
	-o-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;
}

.load div:nth-child(6) {
	animation-delay: 1s;
	-o-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-webkit-animation-delay: 1s;
}

.load div:nth-child(7) {
	animation-delay: 1.2s;
	-o-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s;
}

@keyframes move {
	0% {
		right: 0;
		opacity: 0;
	}

	35% {
		right: 41%;
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}

	65% {
		right: 59%;
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}

	100% {
		right: 100%;
		-moz-transform: rotate(-180deg);
		-webkit-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
		opacity: 0;
	}
}

@-moz-keyframes move {
	0% {
		right: 0;
		opacity: 0;
	}

	35% {
		right: 41%;
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}

	65% {
		right: 59%;
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}

	100% {
		right: 100%;
		-moz-transform: rotate(-180deg);
		transform: rotate(-180deg);
		opacity: 0;
	}
}

@-webkit-keyframes move {
	0% {
		right: 0;
		opacity: 0;
	}

	35% {
		right: 41%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}

	65% {
		right: 59%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}

	100% {
		right: 100%;
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
		opacity: 0;
	}
}

@-o-keyframes move {
	0% {
		right: 0;
		opacity: 0;
	}

	35% {
		right: 41%;
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}

	65% {
		right: 59%;
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	}

	100% {
		right: 100%;
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
		opacity: 0;
	}
}