@charset "utf-8";
/* CSS Document */


/******************************

1. basic
2. banner
3. lottery
4. studyTour
5. speakEnglish
6. englishTeacher
7. advantage
8. features
9. level
10.testimony
11.globalization
12.trial
13.footer & copyright
14.tool

******************************/





/*********************************
$1. basic
*********************************/

/*fadein*/
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

* {
	box-sizing: border-box;
}

.u-cf:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.u-link {
	color: #2E2D2D;
	text-decoration: none;
	display: block;
}

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

.u-horizontalCenter {
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	z-index: 9;
}

.basic-btn--primary {
	display: inline-block;
	border: 2px solid #2E2D2D;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	text-decoration: none;
	color: #2E2D2D;
	transition: background-color 0.2s ease-in-out;
}

.basic-btn--primary:hover {
	background-color: #2E2D2D;
	color: #fff;
}

.basic-btn--secondary {
	display: inline-block;
	border: 2px solid #2E2D2D;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	text-decoration: none;
	color: #2E2D2D;
	transition: background-color 0.2s ease-in-out;
}

.basic-btn--secondary:hover {
	background-color: #2E2D2D;
	color: #fff;
}

@media only screen and (min-width: 1px) and (max-width: 1100px) {
	
.main {
	padding-top: 50px;
}
	
}

@media only screen and (min-width: 1101px) {
	
.main {
	padding-top: 75px;
}
	
}

.disabled {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}

.article {
	display: block;
}

@media only screen and (min-width: 1px) and (max-width: 1100px) {
	
.article .title {
	width: 100%;
	text-align: center;
	color: #000000;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.3;
}

.article .subtitle {
	text-align: center;
	margin-bottom: 40px;
}

.article .subtitle strong {
	line-height: 1.3;
	display: inline-block;
	/*background-image: url("../images/subtitle.png");
	background-repeat: repeat-x;
	background-position: bottom;*/
	background-color: #ebedb4;
	color: #000000;
	font-weight: 700;
	font-size: 1.2rem;
}
	
.article .desc {
	text-align: center;
	margin-bottom: 40px;
	font-size: 1rem;
}	
	
}

@media only screen and (min-width: 1101px) {
	
.article .title {
	width: 100%;
	text-align: center;
	color: #000000;
	font-weight: 700;
	font-size: 2.7rem;
	line-height: 1.5;
}

.article .subtitle {
	text-align: center;
	margin-bottom: 40px;
}

.article .subtitle strong {
	line-height: 1.5;
	display: inline-block;
	background-image: url("../images/subtitle.png");
	background-repeat: repeat-x;
	background-position: bottom;
	color: #000000;
	font-weight: 700;
	font-size: 1.7rem;
}
	
.article .desc {
	text-align: center;
	margin-bottom: 40px;
	font-size: 1.5rem;
}	
	
}

/*********************************
$2. banner
*********************************/

.banner {
}

.banner picture {
	display: block;
	padding: 0;
	margin: 0;
	border: none;
}

.banner img {
	width: 100%;
}

/*********************************
$3. lottery
*********************************/

.lottery {
	background-color: #cfdc7e;
	background-image: url("../images/lottery_bg.png");
	background-repeat: repeat-x;
	position: relative;
	margin-bottom: 45px;
}

.lottery img {
	width: 100%;
}

@media only screen and (min-width: 1px) and (max-width: 1100px) {
	
.lottery .lottery-btn {
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translate(-50%,0);
}
	
}

@media only screen and (min-width: 1101px) {
	
.lottery .lottery-btn {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translate(-50%,0);
}

}

/*********************************
$4. studyTour
*********************************/

@media only screen and (min-width: 1px) and (max-width: 1100px) {
	
.studyTour {
	padding-top: 20px;
	padding-bottom: 40px;
}
	
}

@media only screen and (min-width: 1101px) {
	
.studyTour {
	padding-top: 45px;
	padding-bottom: 45px;
}

}

/*********************************
$5. speakEnglish
*********************************/

@media only screen and (min-width: 1px) and (max-width: 1100px) {
	
.speakEnglish {
	padding-top: 20px;
	padding-bottom: 40px;
}
	
}

@media only screen and (min-width: 1101px) {
	
.speakEnglish {
	padding-top: 45px;
	padding-bottom: 45px;
}

}

/*********************************
$6. englishTeacher
*********************************/

@media only screen and (min-width: 1px) and (max-width: 1100px) {
	
.englishTeacher {
	padding-top: 20px;
	padding-bottom: 80px;
}
	
}

@media only screen and (min-width: 1101px) {
	
.englishTeacher {
	padding-top: 45px;
	padding-bottom: 45px;
}

}

/*********************************
$7. advantage
*********************************/

.advantage {
	background-color: #f1f1f1;
	padding-bottom: 50px;
	padding-top: 50px;
}

.advantage__text img {
	margin: auto;
}

.advantage__text p {
	font-size: 1.4rem;
	font-weight: 700;
	display: block;
	text-align: center;
	padding-bottom: 20px;
}

@media only screen and (max-width: 991px) {
	
.advantage__text p {
	font-size: 1.2rem;
}

}

/*********************************
$8. features
*********************************/

.features {
	padding-bottom: 50px;
	padding-top: 50px;
}

.features .features__table  {
	max-width: 900px;
	margin: auto;
	border-spacing: 0;
	border: 1px solid #D8D8D8;
}

@media only screen and (min-width: 1px) and (max-width: 800px) {
	
.features .features__table th  {
	width: 100%;
	float: left;
	display: block;
	border: 1px solid #D8D8D8;
	padding: 20px;
	border-bottom: none;
	padding-bottom: 0px;
}

.features .features__table th img  {
	margin: auto;
}

.features .features__table th p  {
	float: left;
	width: 100%;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 700;
}

.features .features__table td  {
	float: left;
	width: 100%;
	text-align: center;
	display: block;
	border: 1px solid #D8D8D8;
	padding: 20px;
	padding-top: 0px;
	border-top: none;
}
	
}

@media only screen and (min-width: 801px) and (max-width: 1100px) {
	
.features .features__table th  {
	border: 1px solid #D8D8D8;
	width: 30%;
	padding: 20px;
}

.features .features__table th img  {
	float: left;
}

.features .features__table th p  {
	float: left;
	font-size: 1.6rem;
	line-height: 67px;
	padding-left: 10px;
	font-weight: 700;
}

.features .features__table td  {
	border: 1px solid #D8D8D8;
	width: 70%;
	padding: 20px;
	font-size: 1.1rem;
}
	
}

@media only screen and (min-width: 1101px) {
	
.features .features__table th  {
	border: 1px solid #D8D8D8;
	width: 30%;
	padding: 20px;
	padding-left: 45px;
}

.features .features__table th img  {
	float: left;
}

.features .features__table th p  {
	float: left;
	font-size: 2rem;
	line-height: 67px;
	padding-left: 10px;
	font-weight: 700;
}

.features .features__table td  {
	border: 1px solid #D8D8D8;
	width: 70%;
	padding: 20px;
	font-size: 1.5rem;
}

}

/*********************************
$9. level
*********************************/

.level {
}

@media only screen and (min-width: 1px) and (max-width: 450px) {
	
.level {
	background-color: #dbdbe3;
	padding-bottom: 50px;
	padding-top: 50px;
	min-height: 550px;
	position: relative;
}	
	
}

@media only screen and (min-width: 451px) and (max-width: 590px) {
	
.level {
	background-color: #dbdbe3;
	padding-bottom: 50px;
	padding-top: 50px;
	min-height: 600px;
	position: relative;
}	
	
}

@media only screen and (min-width: 591px) and (max-width: 770px) {
	
.level {
	background-color: #dbdbe3;
	padding-bottom: 50px;
	padding-top: 50px;
	min-height: 750px;
	position: relative;
}

.level .level__chart {
	max-width: 100%;
	margin: auto;
}
	
.level .level__chart {
}
	
.level .level__chart img {
	width: 100%;
	float: right;
}
	
.level .desc {
	text-align: center;
	margin-bottom: 0;
}	
	
}

@media only screen and (min-width: 771px) and (max-width: 1231px) {
	
.level {
	background-color: #dbdbe3;
	padding-bottom: 50px;
	padding-top: 50px;
	min-height: 650px;
	position: relative;
}

.level .level__chart {
	position: absolute;
	bottom: 10px;
}
	
.level .level__chart {
	right: 10%;
}
	
.level .level__chart img {
	width: 100%;
	float: right;
}
	
.level .desc {
	text-align: left;
}	
	
}

@media only screen and (min-width: 1230px) and (max-width: 1500px) {
	
.level {
	background-color: #dbdbe3;
	padding-bottom: 50px;
	padding-top: 50px;
	background-image: url("../images/level_bg.jpg");
	background-position: bottom;
	background-size: contain;
	background-repeat: no-repeat;
	height: 550px;
	position: relative;
}

.level .level__chart {
	position: absolute;
	bottom: 10px;
}
	
.level .level__chart {
	right: 5%;
}
	
.level .level__chart img {
	width: 80%;
	float: right;
}
	
}

@media only screen and (min-width: 1501px) and (max-width: 1750px) {
	
.level {
	background-color: #dbdbe3;
	padding-bottom: 50px;
	padding-top: 50px;
	background-image: url("../images/level_bg.jpg");
	background-position: bottom;
	background-size: contain;
	background-repeat: no-repeat;
	height: 550px;
	position: relative;
}

.level .level__chart {
	position: absolute;
	bottom: 10px;
}
	
.level .level__chart {
	right: 4%;
}
	
.level .level__chart img {
	width: 80%
}
	
}

@media only screen and (min-width: 1751px) {
	
.level {
	background-color: #dbdbe3;
	padding-bottom: 50px;
	padding-top: 50px;
	background-image: url("../images/level_bg.jpg");
	background-position: bottom;
	background-size: contain;
	background-repeat: no-repeat;
	height: 550px;
	position: relative;
}

.level .level__chart {
	position: absolute;
	bottom: 10px;
}
	
.level .level__chart {
	right: 10%;
}
	
.level .level__chart img {
	width: 100%
}
	
}

@media only screen and (min-width: 1px) and (max-width: 1100px) {

.level.article .desc {
	font-size: 1.3rem!important;
}	
	
}

/*********************************
$10. testimony
*********************************/

.testimony {
	padding-bottom: 50px;
	padding-top: 50px;
	background-color: #faf2e9;
}

.testimony__item {
	padding: 20px;
	display: block;
	background-color: #fff;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
	margin-bottom: 20px;
}

.testimony__item__photo {
	float: left;
	width: 20%;
}

.testimony__item__photo img {
	width: 100%;
}

.testimony__item__text {
	float: left;
	width: 80%;
	padding-left: 20px;
	font-size: 1.15rem;
}

.testimony__item__text h3 {
	color: #4093a5;
	font-size: 1.55rem;
}

@media only screen and (min-width: 1px) and (max-width: 600px) {

.testimony__item__photo {
	width: 100%;
}
	
.testimony__item__photo img {
	padding-left: 25%;
	padding-right: 25%;
	padding-bottom: 20px;
}
	
.testimony__item__text {
	width: 100%;
	padding-left: 0px;
	font-size: 1.05rem;
}

.testimony__item__text h3 {
	font-size: 1.25rem;
}
	
}

/*********************************
$11. globalization
*********************************/

.globalization {
	padding-bottom: 80px;
	padding-top: 80px;
	background-image: url("../images/globalization.png");
	background-position: center -200px;
	background-repeat: no-repeat;
	background-size: 1000px;
	text-align: center;
}
	
.globalization .title {
	font-size: 2.5rem;
	color: #D5191C;
	line-height: 1.2;
	padding-bottom: 10px;
}
	
.globalization .subtitle {
	font-size: 1.3rem;
	line-height: 1.4;
}	

/*********************************
$12. trial
*********************************/

.trial {
	padding-bottom: 50px;
	padding-top: 50px;
	border-top: 1px solid #E0E0E0;
	background-image: url("../images/boylayer.png");
	background-position: left 350px;
	background-repeat: no-repeat;
	background-size: 900px;
	background-color: #f5f5f4;
}

.trial__photo {
	float: left;
	width: 50%;
}

.trial__item {
	float: left;
	width: 50%;
}

.trial__item iframe {
	width: 100%;
	border: none;
	overflow: hidden;
}

@media only screen and (min-width: 1px) and (max-width: 1200px) {

.trial {
	background-image: none;
}
	
.trial__photo {
	width: 0%;
}

.trial__item {
	width: 100%;
}
	
}

@media only screen and (min-width: 1201px) and (max-width: 1600px) {

.trial {
	background-position: -200px 350px;

}
	
}

/*********************************
$13. footer & copyright
*********************************/

.footer {
	padding-bottom: 20px;
	padding-top: 20px;
	background-color: #008398;
	border-top: 1px solid #E0E0E0;
}

.footerMap__list {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

.footerMap__list li {
	display: inline-block;
}

.footerMap__list li a {
	display: block;
	color: #fff;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1rem;
	transition: 0.2s;
}

.footerMap__list li a:hover {
	color: #D3D3D3;
}

.copyright {
	padding-top: 20px;
	color: #D3D3D3;
	font-size: 0.95rem;
	text-align: center;
}

.copyright a {
	color: #D3D3D3;
	text-align: center;
}

/*********************************
$14. tool
*********************************/

.tool {
	display: block;
}

.tool__list li {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
	box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
}

.tool__list li:nth-child(1):hover {
	background-color: #23616E;
}

.tool__list li:nth-child(2):hover {
	background-color: #23616E;
}

.tool__list li:nth-child(4):hover {
	background-color: #23616E;
}

.tool__list li:nth-child(5):hover {
	background-color: #23616E;
}

.tool__list li:nth-child(6) {
	background-color: #D42427;
}
	
@media only screen and (min-width: 1px) and (max-width: 1100px) {
	
.tool {
	width: 50px;
	float: left;
	position: fixed;
	right: 5px;
	bottom: 10px;
	z-index: 1;
}

.tool__list {
	display: inline-block;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tool__list li {
	background-color: #3a8c9d;
	border-radius: 50%;
	margin-bottom: 5px;
	transition: background-color 0.2s;
}
	
.tool__list li a {
	width: 50px;
	height: 50px;
	display: block;
	color: #fff;
	overflow: hidden;
}

.tool__list li:nth-child(1) {
	background-image: url("../images/tool1.png");
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -999px;
	background-size: 20px;
}

.tool__list li:nth-child(2) {
	background-image: url("../images/tool2.png");
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -999px;
	background-size: 20px;
	background-size: contain;
}

.tool__list li:nth-child(3) {
	background-color: #4369b0;
	background-image: url("../images/tool3.png");
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -999px;
	background-size: 12px;
}

.tool__list li:nth-child(4) {
	background-image: url("../images/tool4.png");
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -999px;
	background-size: 12px;
	background-size: contain;
}
	
.tool__list li:nth-child(5) {
}

.tool__list li:nth-child(5) a {
	padding-top: 7px;
	padding-left: 11px;
	line-height: 1.3;
	font-size: 0.9rem;
}

.tool__list li:nth-child(6) {
}

.tool__list li:nth-child(6) a {
	padding-top: 7px;
	padding-left: 11px;
	line-height: 1.3;
	font-size: 0.9rem;
}
	
}

@media only screen and (min-width: 1101px) {
	
.tool {
	width: 65px;
	float: left;
	position: fixed;
	right: 5px;
	bottom: 50px;
	z-index: 1;
}

.tool__list {
	display: inline-block;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tool__list li {
	background-color: #3a8c9d;
	border-radius: 50%;
	margin-bottom: 5px;
	transition: background-color 0.2s;
}
	
.tool__list li a {
	width: 65px;
	height: 65px;
	display: block;
	color: #fff;
	overflow: hidden;
}

.tool__list li:nth-child(1) {
	background-image: url("../images/tool1.png");
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -999px;
}

.tool__list li:nth-child(2) {
	background-image: url("../images/tool2.png");
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -999px;
	background-size: contain;
}

.tool__list li:nth-child(3) {
	background-color: #4369b0;
	background-image: url("../images/tool3.png");
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -999px;
}

.tool__list li:nth-child(4) {
	background-image: url("../images/tool4.png");
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -999px;
	background-size: contain;
}
	
.tool__list li:nth-child(5) {
}

.tool__list li:nth-child(5) a {
	padding-top: 12px;
	padding-left: 15px;
	line-height: 1.3;
}

.tool__list li:nth-child(6) {
}

.tool__list li:nth-child(6) a {
	padding-top: 12px;
	padding-left: 15px;
	line-height: 1.3;
}

}