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

/* Text Color Animation */
.pateTitle-H4{
    animation: pateTitle-H4 3s infinite alternate; /*IE*/
    -moz-animation: pateTitle-H4 3s infinite alternate; /*FireFox*/
    -webkit-animation: pateTitle-H4 3s infinite alternate; /*Chrome, Safari*/
}
@keyframes pateTitle-H4{
    from {color: rgba(214,138,125,1.00);}
    to {color: rgba(249,73,50,1.00);}
}
@-moz-keyframes pateTitle-H4{
    from {color: rgba(214,138,125,1.00);}
    to {color: rgba(249,73,50,1.00);}
}
@-webkit-keyframes pateTitle-H4{
    from {color: rgba(214,138,125,1.00);}
    to {color: rgba(249,73,50,1.00);}
}

/* Base */
.contentBox {
	padding: 48px 0;
}
.pageTitle {
	color: #005569;
	font-size: 38px;
	font-weight: bolder;
	line-height: 48px;
	padding: 0 0 24px 0;
}
.pageTitle h4 {
    line-height: 1;
    font-size: 28px;
    color: #D68A7D;
    margin-bottom: 7px;
    -webkit-animation: pateTitle-H4 1.4s 0.5s infinite;
    animation: pateTitle-H4 1.4s 0.5s infinite;
}

/* Cover */
.mainCoverBox {
    background:url("../images/mainCoverBG.jpg") no-repeat left center;
    background-size: cover;
    margin-top: -2px;
	overflow: hidden;
	object-fit: cover;
    width: 100%;
    height: 613px;
}
.mainCoverContainer {
	height: 100%;
	position: relative;
}
.mainCover-trophy {
	bottom: 0px;
	position: absolute;
}
.mainCover-mainSlogan {
	margin-top: 150px;
	margin-left: 203px;
	position: absolute;
	z-index: 2;
}
.mainCover-subSlogan {
	margin-top: 314px;
	margin-left: 281.5px;
	position: absolute;
	z-index: 2;
}
.mainCover-boy, .mainCover-girl {
	bottom: 0px;
	position: absolute;
	right: -95px;
	z-index: 1;
}

/* Numerical Value Box  */
.numericalValueBox {
	margin-top: -78px;
	position: absolute;
	width: 100%;
}
.numericalValueBox-digital {
	font-size: 48px;
	font-weight: bolder;
}
.numericalValueBox-description {
	color: #808080;
	font-size: 19px;
	font-weight: 400;
	margin-top: 12px;
}
.numericalValueBox-digital.list-1 {
	color: #9E005D!important;
}
.numericalValueBox-digital.list-2 {
	color: #0078FF!important;
}
.numericalValueBox-digital.list-3 {
	color: #2E3192!important;
}
.numericalValueBox [class*="col-"] {
	border-right: 1px solid #999999;
}
.numericalValueBox [class*="col-"]:last-child {
	border-right: none;
}

/* Page Description */
.pageDescriptionBox {
	color: #1A1A1A;
	font-size: 21px;
	font-weight: bold;
	line-height: 38px;
}

/* Class Description */
.classDescriptionBox {
	color: #333333;
	line-height: 27px;
}
.classDescription-title {
	color: #005569;
	font-size: 24px;
	font-weight: 600;
}
.classDescription-hours {
	background-color: #E6E6E6;
	border-radius: 24px;
	color: #005569;
	display: inline-block;
	margin: 12px 0;
	padding: 4px 32px;
}

/* Forms Content Box */
.formsContentBox {
	background-color: #E7E5D9;
}
.pageTitle-small {
	color: #D68A7D;
	font-size: 28px;
}

/* 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 #005569;
	border-radius: 0 0;
	color: #005569;
    height: 48px;
    line-height: 48px;
}
.formsBox input:focus, .formsBox select:focus {
	background: none !important;
	border: none;
	border-bottom: 2px solid #005569;
	box-shadow: none;
	color: #005569 !important;
	outline: none;
}
.formsBox input::placeholder {
	color: #005569 !important;
}
.form-check-label, .form-check-label a {
	color: #005569 !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: #005569;
}
.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 2px solid #005569;
    border-radius: .25em;
    width: 1.7em;
    height: 1.7em;
    float: left;
    margin-right: .5em;
    color: red;
}

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

.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: #005569 !important;
}
.checkbox a:hover {
	color: rgba(0,85,105,0.687) !important;
}
.checkBoxDescription {
	display: inline-block;
}
.cr i:before {
    color: #005569 !important
}
.checkBoxBtn, .pageTool {
	background-color: #005569;
	position: relative;
}
.checkBoxBtn i {
	padding-top: 20px;
	position: absolute;
	text-shadow: 0 1px 5px rgba(0,0,0,0.35);
	z-index: 2;
}
.checkBoxBtn p, .pageTool a {
	color: #FFFFFF;
	cursor: pointer;
	font-weight: bolder;
}
.checkBoxBtn p:hover, .pageTool a:hover {
	background: rgba(0,69,86,1);
	color: gold;
	font-weight: bolder;
}

/* Show All Class */
.showAllClassBox {
	background: url("../images/footerCover.jpg") no-repeat bottom center;
	background-size: contain;
	object-fit: contain;
	padding-bottom: 100px;
	width: 100%;
}
.showAllClassBox-girl {
	background: url("../images/footerCover.jpg") no-repeat bottom center;
	background-size: contain;
	object-fit: contain;
	padding-bottom: 240px;
	width: 100%;
}
.showAllClassBox .container {
	position: relative;
}
.allClass-title {
	color: #D68A7D;
	font-size: 24px;
	font-weight: bolder;

}
.allClassCard {
	background-color: #E6E6E6;
	margin: 30px 0;
	padding: 15px 15px;
}
.allClassCard-title {
	color: #005569;
	font-size: 16px;
}
.allClassCard-name {
	color: #333333;
	font-size: 19px;
	font-weight: bold;
	line-height: 24px;
	margin-top: 8px;
}
.showAllClassBox [class*="col-"] {
	border-right: 1px solid #C9CACA;
	min-height: 62px;
}
.showAllClassBox [class*="col-"]:last-child {
	border-right: none;
}
.textBreak {
	padding-left: 15px;
}

/* Show All Class Information */
.classInfoCard {
	background-color: #E7E5D9;
	z-index: 1050;
}
.classInfoCard-cover {
	height: 168px;
	max-height: 168px;
}
.infoCardCover-1 {
	background: url("../images/courses-1.jpg") no-repeat bottom 35% center;
	background-size: cover;
	object-fit: cover;
	width: 100%;
}
.infoCardCover-2 {
	background: url("../images/courses-2.jpg") no-repeat bottom 35% center;
	background-size: cover;
	object-fit: cover;
	width: 100%;
}
.infoCardCover-3 {
	background: url("../images/courses-3.jpg") no-repeat center center;
	background-size: cover;
	object-fit: cover;
	width: 100%;
}
.infoCardCover-4 {
	background: url("../images/courses-4.jpg") no-repeat bottom 35% center;
	background-size: cover;
	object-fit: cover;
	width: 100%;
}
.infoCardCover-5 {
	background: url("../images/courses-5.jpg") no-repeat bottom 35% center;
	background-size: cover;
	object-fit: cover;
	width: 100%;
}
.infoCardCover-6 {
	background: url("../images/courses-6.jpg") no-repeat bottom 35% center;
	background-size: cover;
	object-fit: cover;
	width: 100%;
}
.classInfoCard {
/*	display: none;*/
}
.classInfoCard .infoCard-title {
	display: inline-grid;
}
.classInfoCard .infoCard-title span {
	background: #005569;
	border-radius: 24px;
	color: #FFFFFF;
	padding: 4px 24px;
}
.classInfoCard [class*="col-"] {
	border-right: 1px solid #C9CACA;
}
.classInfoCard [class*="col-"]:last-child {
	border-right: none;
}
.classInfoCard ul {
	margin: 15px;
}
.classInfoCard ul li {
	color: #333333;
	font-weight: bold;
	list-style: decimal;
	line-height: 27px;
}
#reveal1 {
    opacity: 0;
    -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
             -o-transform: scale(0.9);
                    transform: scale(0.9);
    -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
             -o-transition: all 1s ease-in-out;
                    transition: all 1s ease-in-out;
	position: absolute;
}
#reveal2 {
    opacity: 0;
    -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
             -o-transform: scale(0.9);
                    transform: scale(0.9);
    -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
             -o-transition: all 1s ease-in-out;
                    transition: all 1s ease-in-out;
	position: absolute;
}
#reveal3 {
    opacity: 0;
    -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
             -o-transform: scale(0.9);
                    transform: scale(0.9);
    -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
             -o-transition: all 1s ease-in-out;
                    transition: all 1s ease-in-out;
	position: absolute;
}
#reveal4 {
    opacity: 0;
    -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
             -o-transform: scale(0.9);
                    transform: scale(0.9);
    -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
             -o-transition: all 1s ease-in-out;
                    transition: all 1s ease-in-out;
	position: absolute;
}
#reveal5 {
    opacity: 0;
    -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
             -o-transform: scale(0.9);
                    transform: scale(0.9);
    -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
             -o-transition: all 1s ease-in-out;
                    transition: all 1s ease-in-out;
	position: absolute;
}
#reveal6 {
    opacity: 0;
    -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
             -o-transform: scale(0.9);
                    transform: scale(0.9);
    -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
             -o-transition: all 1s ease-in-out;
                    transition: all 1s ease-in-out;
	position: absolute;
}

#reveal1.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
	position: inherit;
	z-index: 6;
}
#reveal2.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
	position: inherit;
	z-index: 5;
}
#reveal3.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
	position: inherit;
	z-index: 4;
}
#reveal4.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
	position: inherit;
	z-index: 3;
}
#reveal5.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
	position: inherit;
	z-index: 2;
}
#reveal6.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
	position: inherit;
	z-index: 1;
}