/* 
	Blue: #CBE9EB
	White: #F5F5F5
	Blue Hover: #72CCE6
*/

/*-------------------/
		Global
/-------------------*/
html, body{ width: 100%;  min-height: 100%}
body{ font-family: 'Conv_Biko_Regular', 'Hiragino Kaku Gothic Pro','Microsoft JhengHei', sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; font-weight: normal; font-style: normal; color:#5A5045}
body.page-template-page-view-tips-php, body.page-template-page-share-php,body.page-template-page-project-php{ background:#C3E6EB}
/* .page-greentip .container{ height: 400px; margin-bottom: 46px; position: relative} */
.container{ width: 90%;  max-width: 1200px; margin: 0 auto; overflow: visible}/* height: 40%; */
#content{ position: relative; width: 100%}
/* .page-template-page-greentip-php #inner{ height: 100%} */
.inner{ margin: 0 0; position: relative}


img{ width: 100%; height: auto; margin: auto}

.f-left{ float: left}
.f-right{ float: right}

.align-center{ margin: 0 auto; text-align: center}
.grid_3{ width:33.3%}
.grid_2_3{ width:33.3%}
.grid_2_7{ width: 66.7%}
.grid_3_5{ width:50%}
.grid_3_25{ width:25%}
.grid_4{ width:25%}
.grid_5{ width: 50%}

.position-relative{ position: relative}
.center{ margin: auto; text-align: center}
.hidden{ display: none}
input[type='file'] {
  opacity:0    
}

h1{ font-family:'Conv_Biko_Regular',  'Hiragino Kaku Gothic Pro','Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #594F44; font-size: 54px;}
h2{ font-size: 34px; color:#999999;line-height: 1.8em }
h3{ font-size: 24px; line-height: 29px;  font-weight:  bold;}
h4{ font-size: 17px; line-height: 26px; }
h5{ font-size: 22px; line-height: 1.5em; }
h6{ font-size: 20px; line-height: 1.5em; }
h7{ font-size: 18px; line-height: 1.5em; }
p{  font-size: 16px; line-height: 1.5em; color: #999999}
a{ color: #5A5045; text-decoration: none; -moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;-webkit-transition:all .3s ease-out; transition:all .3s ease-out; outline: none }
a:visited{ color: #5A5045}
a:active{ color: #5A5045}
a:hover{ color: #72CCE6}

input, textarea{ border: none; outline: none; font-family: 'Conv_Biko_Regular',  'Hiragino Kaku Gothic Pro'; resize: none; }
input[type="button"]{ -webkit-appearance: none; -moz-appearance: none; appearance: none}

.tips_popup input,.tips_popup textarea{ background: #F1F1F2; color: #5A5045; padding: 5px 20px; font-size: 20px; height: 40px; width: 95.8%}
.tips_popup textarea{ width: 95.8%; height: auto; padding: 10px 20px}

.page-template-page-share-php input,.page-template-page-share-php textarea{ background: #F1F1F2; color: #5A5045; padding: 5px 20px; font-size: 20px; height: 40px; width: 91%}
.page-template-page-share-php textarea{ width: 93%; height: auto; padding: 10px 20px}

.color-gray{ color:#999999}
.color-brown{ color:#594F44}
.color-green{ color:#89C765}
.color-grass{ color: #7FC243}
.color-blue{ color: #72CCE6}
.color-dark-brown{ color: #5A5045}

.bold{ font-weight: bold}

.wp-pagenavi{ text-align: center}
.wp-pagenavi a, .wp-pagenavi span{ margin: 0 5px; font-family: 'Conv_Biko_Regular'; font-size: 14px}

.pagination{ font-size: 14px; margin-bottom: 5px}
.pagination a{ display: inline-block; margin:20px 15px}
.pagination .current{ margin:20px 15px; font-weight: bold}
/* .pagination .nextpostslink{ margin:22px 0} */
.pagination .previouspostslink{ margin-right:30px}
.pagination .nextpostslink{ margin-right: 30px}
.pagination .left-arrow { width:22px; height:6px; background: url('../images/arrow-left.png') center center no-repeat; position: absolute; bottom: 29px}
.pagination .right-arrow { width:22px; height:6px; background: url('../images/arrow-right.png') center center no-repeat; position: absolute; bottom: 29px}

#popup { width: 100%; height: 100%; position: fixed; z-index: 9999;visibility: hidden; opacity: 0; left:0; top:0 }
#popup .popup-bg{background: #FFF; opacity: .9; position: absolute; width:100%; height: 100%; cursor: pointer}
#popup .popup-wrapper { margin: auto;  background: #FFF; display: block; left: 0; right: 0; top:0; bottom: 0; position: absolute; padding: 15px 15px 80px 15px; box-shadow: 0 0 5px #ddd; /* min-width: 850px; min-height: 520px */}
#popup .popup-wrapper img{}
#popup .popup-wrapper .detail{ padding: 10px 0 0 0}
.btn-close{ display: block; position: absolute; background: url('../images/page/gallery/closebutton.png') center right no-repeat; right:-20px; top: -20px; z-index: 9999; width: 61px; height: 61px; cursor: pointer;}
.btn-right { display:inline-block; background: url('../images/page/gallery/arrow-photogallery-01-1.png') center center no-repeat; position: absolute; top: 40%; right: -120px; z-index: 9999; width: 70px; height: 70px; cursor: pointer; padding: 25px 25px}
.btn-left{ display:inline-block; background: url('../images/page/gallery/arrow-photogallery-02-1.png') center center no-repeat; position: absolute; top: 40%; left: -120px; z-index: 9999; width: 70px; height: 70px; cursor: pointer; padding: 25px 25px}

.tips_popup{ width: 100%; height: 100%; position: fixed; z-index: 9999;visibility: hidden; opacity: 0; left:0; top:0 }
.tips_popup .tips_popup_bg {background: #CBE9EB; opacity: .9; position: absolute; width:100%; height: 100%; cursor: pointer}
.tips_popup .tips_popup_wrapper{ margin: auto;  background: #FFF; display: block; left: 0; right: 0; top:0; bottom: 0; position: absolute; padding: 3em; border: 7px solid #F2F5D5; width: 65%; height: 72%; border-radius: 1% ;overflow: visible}
.tips_popup .tips_popup_content{ position: relative; overflow: scroll}
.tips_popup .tips_close{ position: absolute; width: 41px; height: 41px; right: -25px; top: -25px; cursor: pointer; z-index: 9; display: block; background: url('../images/page/tips/tipps_close2.png') center center no-repeat}

.page-template-page-share-php .tips_popup_wrapper{ margin: 2em auto;  background: #FFF; display: block; left: 0; right: 0; top:0; bottom: 0; padding: 2em; width: 79%; }
.page-template-page-share-php .tips_popup_content{ position: relative}
.page-template-page-share-php .tips_close{ position: absolute; width: 41px; height: 41px; right: -25px; top: -25px; cursor: pointer; z-index: 9; display: block; background: url('../images/page/tips/tipps_close2.png') center center no-repeat}

.comments_{ margin: 0 0 0.5em 0}
.comment-reply-title{ display: none}
.logged-in-as{ display: none}
span.required{ display: none}
.comment-notes{ display: none}
form.comment-form{ position: relative}
form.comment-form p{ margin: 0.5em 0}
form.comment-form label{ font-weight: bold; color: #5A5045; font-size: 18px; display: block; padding: 0.2em 0 0.5em 0}
form.comment-form p.comment-tips_form_name,form.comment-form p.comment-tips_form_school{ width:48%; display: inline-block; overflow: hidden; margin-bottom: 0}
form.comment-form p.comment-tips_form_name{ margin-right: 3%}
form.comment-form p.form-submit{ max-width: 140px; border-radius: 7px}
form.comment-form p.form-submit input#submit{ background: #7FC243; color: #FFF; font-size: 20px; border-radius: 7px; font-weight: bold}
h3.tips-share-title{ color: #7FC243; font-size: 24px; margin:0 0 1em 0}
.tips_share_content h2.comments-title{ display: none}
.tips_share_content .comment-list{ display: none}


.comment-tips_form_default, .comment-tips_form_custom{ width: 48%; display: inline-block; background: #F1F1F2; }
.comment-tips_form_default{ margin-right: 3%}
.comment-tips_form_default_wrapper{ width: 55%; height: 270px; position: relative; margin: auto} /* height: 210px */
.comment-tips_form_default_wrapper.is_mobile .select-avatar input{ padding: 0 0 0 10px; width: 20px; position: relative; bottom: 2px; border-radius: 0}
.comment-tips_form_default_wrapper.is_mobile .select-avatar label{ position: relative; bottom: 2px}
.comment-tips_form_default_wrapper.is_mobile .select-avatar label, .comment-tips_form_default_wrapper.is_mobile .select-avatar input{ float: left}
.default-avatar-wrapper{ position: relative; padding-top: 35px}
.comment-tips_form_default_wrapper a{ position: absolute; top: 30px; bottom: 0; margin: auto; z-index: 9}

.comment-tips_form_default .default-avatar-wrapper li{ display: none; position: relative; height: 90px}
.comment-tips_form_default .default-avatar-wrapper li.active{ display: block}
.comment-tips_form_default .default-avatar-wrapper li img{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: auto; height: 100%}

.comment-tips_left{ background: url('../images/page/tips/comment-left.png') center center no-repeat; width: 17px; height: 33px; left: 0}
.comment-tips_right{ background: url('../images/page/tips/comment-right.png') center center no-repeat; width: 17px; height: 33px; right: 0}
.comment_or_button{ position: absolute; width: 50px; height: 50px; left: -10px; right: 0; margin: auto; top: 20%}
.page-template-page-share-php .comment_or_button{ left: -12px; top: 19%}
.tips_popup .comment_or_button{ left: -9px}


.select-avatar{ background: #7FC243; border-radius: 14px; position: absolute; left: 0; right: 0; bottom: 35px; margin: auto; text-align: center; padding: 6px 0; width: 105px; height: 21px}
form.comment-form .select-avatar label{ color: #FFF; font-size: 15px; }
.select-avatar input{ width: auto; height: auto; margin-left: 21px}
.select-avatar input,form.comment-form .select-avatar label{ display: inline-block; line-height: 19px; height: 15px; float: left}
.select-avatar.ie_fix .comments-default-avatar{ padding: 0; margin-top: 1.5px; margin-right: 5px}
form.comment-form .select-avatar.ie_fix label{ padding-top: 0}

form.comment-form .comment-tips_form_custom_wrapper{ position: relative}
form.comment-form .comment-tips_form_custom_wrapper input[type="file"]{ position: absolute; width: 120px; height: 33px; padding: 0; left: 0; right: 0; bottom: 0; margin: auto}
form.comment-form .comment-tips_form_custom_wrapper label{ position: absolute; width: 120px; left: 0; right: 0; bottom: 0; margin: auto; text-align: center; color: #FFF; background: #7FC243; border-radius: 14px; padding: 8px 0; font-size: 15px; height: 18px; line-height: 20px}

.qq-upload-success{ display: none}
.qq-upload-button{ width: 100%; height: 34px; bottom: 25px}
.ie_fix .qq-upload-button{ height: 35px}
.default_image{ position: relative; width: auto; height: 100%; left: 0; right: 0; top: 0; bottom: 0; margin: auto}
.view_image_content{ position: relative;  width: 150px; height: 135px; padding-top: 35px; margin: auto}
.view_image{ display: none}
#UL_g_image1{ position: absolute; left: 0; right: 0; bottom: 5px; height: 38px; margin: auto}
.comments-default-avatar, input[type="file"], #submit,.comment-tips_right,.comment-tips_left{ cursor: pointer}
.file-size{ padding-top: 5px; font-size: 14px}
.qq-upload-list{ display: none}

@-webkit-keyframes shakeshake {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.btn-left:hover,.btn-left:focus,
.btn-right:hover,.btn-right:focus {
	-webkit-animation-name: shakeshake;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

/*-------------------/
		header
/-------------------*/

.page-template-page-gallery-php #header{ background: #84D2E2}
.page-template-page-view-tips-php #header .nav-menu li.li-tips a{ color: #72CCE6}
.page-template-page-view-tips-php #header .nav-menu2 li.li-tips a{ color: #72CCE6}
#header{  width: 100%; height:100px; background: #C3E6EB; padding: 26px 0 0 0; font-size:16px; line-height: 19px; z-index: 9}
#header .header-container{ width:90%;height: 100%; margin: 0 auto;font-weight: bold; position: relative}
#header .header-container #logo{ z-index:999; position: absolute; display: block; left: 0; top: 0; height: auto; width: 160px; /* background: url('../images/greenangel-logo.png')center center; width:135px;height:122px */}
/* #header .header-container #logo img{ position: absolute; top: 0; left: 0; width: auto; height: 120px} */
#header .nav-menu{ margin:0 auto; z-index: 999; display: block; position: relative; text-align:center;/* background:url('../images/cloud02.png')center center no-repeat;  */ /* min-width: 806px; */  /* width:100%; height: 45px; */}
#header .nav-menu li{ padding:10px 5px; position:relative; display: inline-block; margin:0 2px; border-radius:17px; background: #FFFFFF; width: 105px; vertical-align: center;}
#header .nav-menu.safari_fix li{ width: 107px}
#header .nav-menu.safari_fix .sub-menu li{ width: 290px}
/* #header .nav-contanier .navigation li:first-child{  margin-left:50px;} */
/* #header .nav-contanier .navigation li:nth-child(2){ margin-left:50px} */
/* #header .menu-menu-1-container .nav-menu li:last-child{ right: -4px} */
#header .nav-menu li a{ color: #808285; font-weight: bold; font-family: 'Conv_Biko_Regular','Hiragino Kaku Gothic Pro'; height: 16px; line-height: 16px; display: block; vertical-align: center}
#header .nav-menu.firefox_mac_fix li a{ line-height: 17px}
.page-template-page-greentip-php #header .nav-menu li.li-tips a, .page-template-page-gallery-php #header .nav-menu li.li-gallery a, .page-template-page-contact-php #header .nav-menu li.li-contact a, .page-template-page-dictionary-php #header .nav-menu li.li-dictionary a, .page-template-page-greentip-php #header .nav-menu2 li.li-tips a,.page-template-page-contact-php #header .nav-menu2 li.li-contact a, .page-template-page-gallery-php #header .nav-menu2 li.li-gallery a,.page-template-page-dictionary-php #header .nav-menu li.li-game a{ color: #72CCE6}
#header .nav-menu li.current-menu-item a, #header .nav-menu li a:hover{ color: #72CCE6}
#header .header-container .nav-quick{ position:absolute; right:70px; top: 8px;z-index: 1000; }
#header .header-container .nav-quick #lang_sel_list{  float: left;/*  margin-right: 10px; */}
/* #header .header-container .nav-quick li.facebook{ position: relative;} */
#header .header-container .nav-quick #lang_sel_list ul{line-height: 21px;  padding: 0 11px; font-size: 12px;-webkit-border-radius: 17px;-moz-border-radius: 17px; border-radius: 17px; color: #FFF; overflow: hidden}
#header .header-container .nav-quick #lang_sel_list ul li{padding: 0 6px; margin: 2px 1px; float: left; line-height: 14px }
#header .header-container .nav-quick #lang_sel_list ul li.icl-en { padding-right: 8px; border-right: 1px solid #FFF}
#header .header-container .nav-quick #lang_sel_list ul li a{color: #FFF}
#header .header-container .nav-quick #lang_sel_list ul li a.lang_sel_sel{ color:#5A5045; cursor: default}
#header .header-container .nav-quick #lang_sel_list ul li a:hover{ color: #5A5045}
#header .header-container .nav-quick .ie_fix #lang_sel_list ul li.icl-en a{ font-size: 10px}
/* #header .header-container .nav-quick .lang-select li{ top:-23px; position:relative} */

#header .header-container .nav-quick .iphone_menu{ width: 35px; height: 21px; display: none; float: left; position: relative; top: -1px; cursor: pointer; background: url('../images/iphone_menu_new.svg') top center no-repeat; transition: none;}
#header .header-container .nav-quick .iphone_menu.active{ background: url('../images/iphone_menu_new.svg') bottom center no-repeat;}

#header .nav-menu2{ display: none; text-align: center; font-weight: normal; height: 83px; position: relative}
#header .nav-menu2 li{ display: inline-block; background: #FFF; border-radius: 17px; position: relative }
#header .nav-menu2 li a{ display: block; padding: 10px 5px 6px 5px; color: #808285; font-weight: bold; font-family: 'Conv_Biko_Regular','Hiragino Kaku Gothic Pro'; font-size: 15px}
#header .nav-menu2.firefox_mac_fix li a{  padding: 9px 5px 7px 5px}
#header .nav-menu2.ie_fix li a{ padding: 9px 5px 7px 5px}
#header .nav-menu2 li:hover a{ color: #72CCE6}
#header .nav-menu2 li.current-menu-item a{ color: #72CCE6}
#header .nav-menu2 li .sub-menu a{ color: #BBBDBF}
#header .nav-menu2 li.li-about,#header .nav-menu2 li.li-lesson,#header .nav-menu2 li.li-game, #header .nav-menu2 li.li-tips{  margin-left: 2%}
#header .nav-menu2 li.li-gallery, #header .nav-menu2 li.li-contact, #header .nav-menu2 li:nth-child(6){ background: none; position: absolute; bottom: 0; }
#header .nav-menu2 li.li-gallery{ right: 58%}
#header .nav-menu2 li.li-contact{ left: 62%}
#header .nav-menu2 li:nth-child(6){ left:44%; width: 120px; }
#header .nav-menu2 li.li-gallery a, #header .nav-menu2 li.li-contact a, #header .nav-menu2 li:nth-child(6) a{ border-radius: 25px; background: #FFF; margin: auto}

#header .nav-menu li.li-lesson:hover{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 20px}
#header .nav-menu2 li.li-lesson:hover{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 10px}

#header .sub-menu{ display: none; position: absolute; width: 300px; left: 0; padding: 13px 0 10px 15px; text-align: left; background: #FFF; border-bottom-left-radius: 17px; border-bottom-right-radius: 17px; border-top-right-radius: 12px; top: 100%}
#header .sub-menu li{ display: block; width: 285px; padding: 0; border-radius: 0; top: -3px; margin: 0}
#header .nav-menu2.safari_fix .sub-menu{ width: 295px}
#header .nav-menu2.safari_fix .sub-menu li{ width: 290px}
#header .nav-menu2.ie_fix .sub-menu{ width: 295px}
#header .nav-menu2.ie_fix .sub-menu li{ width: 290px}
#header .nav-menu2.firefox_win_fix .sub-menu{ width: 280px}
#header .nav-menu2.firefox_win_fix .sub-menu li{ width: 275px}
#header .nav-menu2.firefox_mac_fix .sub-menu{ width: 290px}
#header .nav-menu2.firefox_mac_fix .sub-menu li{ width: 280px}
/* #header .sub-menu li:first-child{ padding: 10px 0 0 0} */
#header .sub-menu li:first-child a{ border:none}
#header .sub-menu li a{ margin:0 10px; display: block; font-size: 15px; font-weight: bold; letter-spacing: 0px; color: #BBBDBF; border-top: 1px solid #CBE9EB; padding: 10px 0 8px 0; line-height: 16px; height: 14px}
#header .sub-menu li a:hover{ color: #7FC243}

.visitors{ width:94px; height:110px; position:absolute; right:30px; top:0px; z-index:1000; }
.visitors .visitors_hand{ width:43px; position:absolute; top:-6px; left:0px; right:2px; margin:auto; z-index:2; }
.visitors .visitors_wrap{ width:100%; position:absolute; top:25px; left:0px; z-index:-1; }
.visitors .visitors_count{ width:100%; height:96px; line-height:96px; font-family:'dinbold_ufonts'; text-align:center; position:absolute; z-index:3; top:28px; color: #fff; }
.visitors .visitors_word{ width:100%; text-align:center; position:absolute; z-index:3; top:120px; color: #1979a9; }

.mobile_menu{ position: fixed; top: 0; right: 0; z-index: 1000; background: #FFF; margin-right: -240px; width: 230px; height: 100%; padding: 50px 0 0 0; box-shadow: 0 0 1px #D8D8D8; overflow: hidden}
.mobile_menu li{ border-bottom: #D8D8D8 solid 1px}
.mobile_menu li:first-child{ border-top: #D8D8D8 solid 1px; position: relative}
.mobile_menu li a{ display: block; padding: 10px 5px 6px 25px; color: #808285; font-weight: bold; font-family:'Conv_Biko_Regular'}
.mobile_menu li.li-lesson{ cursor: pointer}
.mobile_menu li.li-lesson a{ position: relative; width: 72%}
.mobile_menu li.li-lesson a:after {
	font-family: 'icomoon';
	content: "\ea1c";
	position: absolute;
	right: -15px;
	top: 9px;
}
.mobile_menu li:hover a{ color: #72CCE6}
.mobile_menu .header_close{ background: url('../images/mobile-menu-close2.png') center center no-repeat; width: 18px; height: 17px; position: absolute; top: 16px; right: 18px; cursor: pointer}

.page-template-page-about-php .mobile_menu li.li-about a,.page-template-page-lesson-php .mobile_menu li.li-lesson a,.page-template-page-dictionary-php .mobile_menu li.li-game a,.page-template-page-greentip-php .mobile_menu li.li-tips a,.page-template-page-gallery-php .mobile_menu li.li-gallery a,.page-template-page-contact-php .mobile_menu li.li-contact a, .page-id-812 .mobile_menu li.li-lesson a, .page-id-820 .mobile_menu li.li-lesson a, .page-id-809 .mobile_menu li.li-lesson a, .page-id-790 .mobile_menu li.li-lesson a, .page-id-825 .mobile_menu li.li-lesson a, .page-id-815 .mobile_menu li.li-lesson a, .page-id-823 .mobile_menu li.li-lesson a, .page-id-818 .mobile_menu li.li-lesson a, .page-id-812 .mobile_menu ul.mobile_sub_menu li.li-small-talk a, .page-id-820 .mobile_menu ul.mobile_sub_menu li.li-small-lesson a, .page-id-809 .mobile_menu ul.mobile_sub_menu li.li-small-award a, .page-id-790 .mobile_menu ul.mobile_sub_menu li.li-small-lunch a, .page-id-825 .mobile_menu ul.mobile_sub_menu li.li-small-workshop a, .page-id-815 .mobile_menu ul.mobile_sub_menu li.li-small-trips a, .page-id-823 .mobile_menu ul.mobile_sub_menu li.li-small-contest a, .page-id-818 .mobile_menu ul.mobile_sub_menu li.li-small-canivals a{ color: #72CCE6}

.page-template-page-project-php .mobile_menu .big_menu .li-lesson a{ color: #72CCE6}

.mobile_menu .sub-menu{ display: none}

.view_all_programmes{ display: none; text-align: center; margin: 0 0 20px 0}
.view_all_programmes a{ cursor: pointer; display: inline-block; font-weight: bold}
.view_all_programmes a:hover{ color: #FFF}
.view_all_programmes.active a{ color: #FFF}

.big_menu{ position: absolute; width: 100%; height: 100%; right: 0; top: 50px; -moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;-webkit-transition:all .3s ease-out; transition:all .3s ease-out;}
.mobile_sub_menu{ position: absolute; width: 100%; height: 100%; right: -240px; top: 50px; -moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;-webkit-transition:all .3s ease-out; transition:all .3s ease-out;}
.mobile_sub_menu li{ position: relative}
.mobile_sub_menu li a{ position: relative}
.mobile_sub_menu li.back_sub_menu{ cursor: pointer}
.mobile_sub_menu li.back_sub_menu a{ padding: 8px 5px 8px 50px; text-align: left; font-family: 'icomoon2', 'Conv_Biko_Regular','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Microsoft JhengHei';}
.mobile_sub_menu li.back_sub_menu a:before{ position: absolute; content: "\ea1c";
	position: absolute;
	left: 25px;
	top: 10px}
/*
.mobile_sub_menu{ background: #FFF; position: absolute; top: 135px; z-index: 999; height: 0; overflow: hidden; width: 100%; margin: auto; left:0; right: 0; -webkit-transform: translateZ(0);
  transform: translateZ(0);   -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;}
.mobile_sub_menu:before{
    -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  }
.mobile_sub_menu ul{ border-top: #C9C9C9 solid 1px; width: 100%; height: 100%; margin: auto}
.mobile_sub_menu ul li{ width: 100%; text-align: left; margin: 1em 0}
 .mobile_sub_menu ul li.margin-left-1{ margin-left: 1%} 
.mobile_sub_menu ul li.width24{ width: 25%}
.mobile_sub_menu ul li.width25{ width: 34%}
.mobile_sub_menu ul li a{ display: block; font-size: 16px; font-weight: bold; line-height: 50px; height: 50px; text-align: center; background: #eaeaea}
.mobile_sub_menu ul li.no-bottom a{  border:none}
/* .mobile_sub_menu ul li.haveTomargin a{ margin-top: 5px} */

#header .nav-menu li.li-lesson:hover .sub-menu, #header .nav-menu2 li.li-lesson:hover .sub-menu{ display: block}

#header .nav-menu2 .sub-menu{ width: 270px; padding-left: 5px; z-index: 800}
#header .nav-menu2 .sub-menu li{ width: 265px}

#header .nav-menu li.current_page_parent a, #header .nav-menu2 li.current_page_parent a{ color: #72CCE6}
#header .nav-menu li.current_page_parent .sub-menu li a, #header .nav-menu2 li.current_page_parent .sub-menu li a{ color: #BBBDBF}
#header .nav-menu li.current_page_parent .sub-menu li a:hover, #header .nav-menu2 li.current_page_parent .sub-menu li a:hover{ color: #7FC243}
#header .nav-menu li .sub-menu li.current-menu-item a,#header .nav-menu2 li .sub-menu li.current-menu-item a { color: #7FC243}
#header .nav-menu li.current-menu-item .sub-menu li a, #header .nav-menu2 li.current-menu-item .sub-menu li a { color: #BBBDBF}
#header .nav-menu li.current-menu-item .sub-menu li a:hover, #header .nav-menu2 li.current-menu-item .sub-menu li a:hover{ color: #7FC243}

#header .nav-menu.ie_fix li .sub-menu{ width: 285px}
#header .nav-menu.ie_fix li .sub-menu li{ width: 270px}
/*-------------------/
		Page
/-------------------*/

.home .page-banner{ height: 500px}
.page-banner{ width: 100%; height: 60%; text-align: center; background: #C3E6EB; position: relative; box-sizing: border-box; min-height: 300px}
.page-banner .banner-container{ width: 93%; margin: 0 auto}
.page-banner .banner-circle{ bottom:0; height: 80%; overflow: hidden; width: 100%; position: absolute}
.page-banner .banner-circle img{ width: auto; height: 100%; margin: auto}
.page-banner .banner-image{ z-index: 799; position: absolute; width: 100%; height: 0; bottom: -4px; height: 52%}
.page-banner .banner-image img{ height: 100%; width: auto}
.page-banner .banner-title{ position: absolute; top: 0; width: 100%; margin: auto; z-index: 99}
.page-banner .banner-title h2{ padding-top: 78px; font-size: 29px;}
.page-banner .banner-title h1{ padding: 18px; text-transform:uppercase}

.page-banner .cloud{ width:167px; position: absolute; top: 0; z-index: 10}
.page-banner .cloud svg{ width:100%; }
.page-banner .cloud div{ width:100%; }
.page-banner #cloud_01{ top:14%; left:75%; }
.page-banner #cloud_02{ top:33%; left:15%; }
.page-banner #cloud_03{ top:20%; left:90%; }
/*
.page-banner .cloud-item1{background: url('../images/page/cloud01.png') center center no-repeat; position: absolute; z-index: 798; top:186px; right:0;/* left:700px; */ width: 134px; height:75px }
.page-banner .cloud-item2{background: url('../images/page/cloud02.png') center center no-repeat; position: absolute; z-index: 798; top:276px; left:0px; width: 160px; height:75px}
.page-banner .cloud-item3{background: url('../images/page/cloud03.png') center center no-repeat; position: absolute; z-index: 798; top:80px; left:0px; width: 120px; height:75px}
*/

.page-about .page-banner .banner-image{ height: 41%}
.page-about .description{ background:#FFFFFF; padding: 6em 0; position: relative;}

.page-about .btn-arrow-down{ width: 50px; height: 50px; background: url('../images/page/about/scrolldown.png') center center no-repeat; margin: 0 auto ; position: relative; bottom: -50px; cursor: pointer}
.page-about .btn-arrow-down:hover{ background: url('../images/page/about/scrolldown-02.png') center center no-repeat;}
.page-about .content-about{ padding: 76px 0; overflow: hidden}
.page-about .content-about li{ float:left; color: #594F44; margin-top:67px }
.page-about .content-about li .block-title{ border:1px solid #89C765; margin: 50px 0 30px 0; padding: 10px 20px 6px 20px; display: inline-block;}
.page-about .content-about li p{ text-align: center; margin:0 auto; width: 75%; height:100px}

.page-lesson{ background: #F5F5F5}
.page-lesson .page-banner{ border-bottom: 10px solid #FFF}
.page-lesson .page-banner .banner-image{ height: 41%}
.page-lesson .content-lesson{ padding: 4% 0; position: relative}
.page-lesson .content-lesson li{ float: left; padding: 4% 0}
/* .page-lesson .content-lesson li .lesson_content{ padding: 0 20%} */
.page-lesson .content-lesson li .lesson_content a{ display: block; position: relative; width: 100%; height: 240px; margin-bottom: 2em}
.page-lesson .content-lesson li .lesson_content img{ height: 71%; margin-bottom: 2.5em;  margin: auto; display: block; cursor: pointer; position: absolute; left: 0; right: 0; bottom:20px; width: auto}
.page-lesson .content-lesson li .lesson_content img.deeper{ bottom: 0}
.page-lesson .content-lesson li .lesson_content img.last_two_icon{ height: 60%}
.page-lesson .content-lesson li .lesson_content img.last_icon{ height: 80%}
.page-lesson .content-lesson li .lesson_content img.white_circle{ width: auto; height: 100%; top: 0; bottom: 0}
.page-lesson .content-lesson li .lesson_content span{ font-size: 19px; border: 1px solid #89C765; display: inline-block; line-height: 27px}
.page-lesson .content-lesson.ie_fix li .lesson_content span{ font-size: 18px}
.page-lesson .content-lesson li.this_reward span{ max-width: 215px}
.page-lesson .content-lesson li.this_workshop span{ max-width: 185px}
.page-lesson .content-lesson li .lesson_content span a{ display: block;  height: auto; padding: 6px 20px 4px 20px; color: #5A5045; line-height: 29px; width: auto; margin-bottom: 0}
.page-lesson .content-lesson li .lesson_content:hover span a{ color: #FFF}
.page-lesson .content-lesson li .lesson_content:hover span{ background: #89C765}

.content-image-wrapper li{ position: relative;}
.content-image-wrapper li .caption{ width: 47%; margin-right: 3%}
.content-image-wrapper li .content-image{ width: 50%; height: 305px; position: relative}
.content-image-wrapper li .content-image-bg{ position: relative; height: 285px; width: 100%; background: #FFF}
.content-image-wrapper li .content-image img{ position: absolute; left: 20px; top: 5px; height: 100%; width: auto}

.page-project{ background: #C3E6EB; padding: 4.5em 0 6em 0}
.page-project .page-project-wrapper{ background: #FFF; width: 90%; margin: auto}
.page-project .page-project-wrapper .page-project-content{ padding: 5em 6em 7em 6em; position: relative}
.page-project .page-project-wrapper .page-project-content .project-icon{ width: auto; height: 100px; position: absolute; left: 0; right: 0; margin: auto; top: -50px; border-radius: 50%; border: 7px solid #fff} 
.page-project .page-project-wrapper .page-project-content .project-top h4{ padding: 1em 0 0 0}
.page-project .page-project-wrapper .page-project-content .project-top h1{ color: #7FC243; font-size: 42px; line-height: 1.5em}

.page-project .page-project-wrapper .page-project-content .project-middle{ margin: 3em 0 2.5em 0;  background: url('../images/page/project/line_new2.png') 0 0 repeat;}
.page-project .page-project-wrapper .page-project-content .project-middle p{ color: #5A5045; font-size: 17px; font-family: 'Conv_Biko_Regular','Hiragino Kaku Gothic Pro'; line-height: 51px; padding-bottom: 1px }
.page-project .page-project-wrapper .page-project-content .project-middle p span{ font-size: 15px}
.page-project .page-project-wrapper .page-project-content .project-middle h6{   line-height: 54px; height: 51px; font-size: 17px}
.page-project .page-project-wrapper .page-project-content .project-middle ul{ line-height: 54px;}
.page-project .page-project-wrapper .page-project-content .project-middle div{ line-height: 54px}
.page-project .page-project-wrapper .page-project-content .project-middle ul li{ font-size: 17px; line-height: 51px; font-family:'Conv_Biko_Regular','Hiragino Kaku Gothic Pro'}
.page-project .page-project-wrapper .page-project-content .project-middle div .reserve{ margin-left: 25px; background: #89C765; border-radius: 17px; padding: 10px 18px 8px 18px; cursor: pointer}
.page-project .page-project-wrapper .page-project-content .project-middle div .reserve .reserve_icon{ background: url('../images/page/project/reserve.png') center center; width: 19px; height: 14px; margin-right: 5px; position: relative; top: 1px}
.page-project .page-project-wrapper .page-project-content .project-middle div .reserve .reserve_word{ height: 14px; line-height: 19px; font-size: 16px; color: #FFF}
.page-project .page-project-wrapper .page-project-content .project-middle div .reserve span{ display: inline-block}

.page-project .page-project-wrapper .page-project-content .project-middle .middle-col-l{ width: 15%}
.page-project .page-project-wrapper .page-project-content .project-middle .middle-col-r{ width: 85%}

.page-project .page-project-wrapper .page-project-content .project-middle2{ display: none; margin: 3em 0 2.5em 0;  background: url('../images/page/project/line_new2.png') 0 0 repeat;}
.page-project .page-project-wrapper .page-project-content .project-middle2 p{ color: #5A5045; font-size: 16px; font-family: 'Conv_Biko_Regular','Hiragino Kaku Gothic Pro'; line-height: 51px; padding-bottom: 1px }
.page-project .page-project-wrapper .page-project-content .project-middle2 p span{ font-size: 15px; display: block}
.page-project .page-project-wrapper .page-project-content .project-middle2 h6{   line-height: 54px; height: 51px; font-size: 16px}
.page-project .page-project-wrapper .page-project-content .project-middle2 ul{ line-height: 54px;}
.page-project .page-project-wrapper .page-project-content .project-middle2 div{ line-height: 54px}
.page-project .page-project-wrapper .page-project-content .project-middle2 ul li{ font-size: 16px; line-height: 51px; font-family:'Conv_Biko_Regular','Hiragino Kaku Gothic Pro'}
.page-project .page-project-wrapper .page-project-content .project-middle2 div .reserve{ margin-left: 25px; background: #89C765; border-radius: 17px; padding: 10px 18px 8px 18px; cursor: pointer}
.page-project .page-project-wrapper .page-project-content .project-middle2 div .reserve .reserve_icon{ background: url('../images/page/project/reserve.png') center center; width: 19px; height: 14px; margin-right: 5px; position: relative; top: 1px}
.page-project .page-project-wrapper .page-project-content .project-middle2 div .reserve .reserve_word{ height: 14px; line-height: 19px; font-size: 16px; color: #FFF}
.page-project .page-project-wrapper .page-project-content .project-middle2 div .reserve span{ display: inline-block}


.page-project .page-project-wrapper .page-project-content .project-bot{ margin: 3em 0 3em 0}
.page-project .page-project-wrapper .page-project-content .project-bot .project-image-group li:first-child{ margin-left: 0}
.page-project .page-project-wrapper .page-project-content .project-bot .project-image-group li:nth-child(3n-2){ margin-left: 0}
.page-project .page-project-wrapper .page-project-content .project-bot .project-image-group li{ width: 32.5%; display: inline-block; float: left; margin: 0 0 1% 1%; position: relative; height: 0; overflow: hidden; background: #F2F2F2; max-height: 300px}
.page-project .page-project-wrapper .page-project-content .project-bot .project-image-group li img{ height: auto; width: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto}

.page-project .page-project-wrapper .page-project-content a.back-to-project{ background: #72CCE6; border-radius: 5px; color: #FFF; display: inline-block; padding: 15px 20px; cursor: pointer; font-size: 17px; height: 17px; width: 166px; line-height: 17px; position: absolute; left:0 ;right: 0; margin: auto; text-align: center}
.page-project .page-project-wrapper .page-project-content a.back-to-project.ie_fix{ width: 170px}
.page-project .page-project-wrapper .page-project-content a.back-to-project.firefox_fix{ width: 178px}

.page-greentip .tips_question_wrapper{ display: none; width: 100%; height: 100%; position: relative; background: #C3E6EB; max-height: 725px; min-height: 600px}
.page-greentip .tips_question_wrapper .tips_question_bg{ position: absolute; margin: auto; left: 0; right: 0; top: 25px; bottom: 0 ;padding: 25px 0; }
.page-greentip .tips_question_wrapper .tips_question_bg img.backboard{ position: absolute; left: 0; right: 0; top: 0; margin: auto; box-shadow:10px 10px 2px rgba(190,218,221,1); height: 100%; width: 100%}
/* .page-greentip .tips_question_wrapper .tips_question_bg img.backboard-big{ display: none} */
.page-greentip .tips_question_wrapper .tips_question_bg img.backboard-small{ display: none}
.page-greentip .tips_question_wrapper .tips_question_bg img.iphone-backboard{ display: none}
.page-greentip .tips_question_wrapper .tips_question_bg img.under_backboard{ position: absolute; height: 35px; width: auto; bottom: 13px; right: 45px}
.page-greentip .tips_question_wrapper .tips_question_bg img.under_backboard.ie_fix{ bottom: -87%}
.page-greentip .tips_question_wrapper .tips_question_bg img.minions{ position: absolute; left: -46px; bottom: -94px; width: auto; height: 180px}
.page-greentip .tips_question_wrapper .tips_question_bg img.minions.ie_fix{ bottom: -96%}

.page-greentip .tips_question_wrapper .tips_question_bg .tips_question{ position: absolute; left: 0; right: 0; top: 0; z-index: 9; margin: auto; opacity: 0; width: 80%; height: 80%; max-width: 1200px}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question.active{ opacity: 1;z-index: 10}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question{ padding: 7% 0; width: 70%; position: absolute; margin: auto; left: 9%; right: 0; top: 0; bottom: 0}

.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .question_no{ color:#FFF; text-align: left}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .question_q{ color: #FEDD6C; text-align: left}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .question_content{ display: none}

.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .col{ position: relative; height: 100%; float: left; width: 76%}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .col:first-child{ width: 24%}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .col:first-child img{ position: absolute; top: 43%; left: -45px; width: auto; height: 170px}

.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .answer_wrapper{ text-align: left; margin-top: 4.8%; position: relative}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .answer_wrapper li{ margin: 1.6% 0}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .answer_wrapper li h4{ float: left; width: 92%}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .answer_wrapper li h4:first-child{ width: 4%; margin-right: 10px}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .answer_wrapper li span{ color:#FFF; letter-spacing: 1px; font-weight: bold}

.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc{ position: absolute; width: 440px; margin: auto; left: 0; right: 0; margin-top: 35px}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li{ display: inline-block; border-radius: 50%; box-sizing: border-box; cursor: pointer; margin: 1.6% 3.2%; position: relative }
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li a{ font-family: 'Apercu-Bold'; padding: 20px; color: #FFF; border-radius: 50%; line-height: 40px; font-size: 48px; display: block; height: 37px; width: 37px; text-align: center; }

.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li .choose_button{ border-radius: 50%; width: 83px; height: 83px ; position: absolute; box-sizing: border-box; top: -2px; left: -2px}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li .choose_button.ie_fix{ width:81px; height: 81px; left: -2px; top: -2px}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li:hover .choose_button{ border: 5px solid rgba(90,80,69,1)}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc.already li:hover .choose_button{ border: none}

.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li.choose_a a{ background: #89C765}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li.choose_b a{ background: #72CCE6}
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li.choose_c a{ background: #F5D070}

/* .page-greentip .tips_question_wrapper .tips_question_bg .backboard_wrapper{ position: absolute; top: 0; right: 0; left: 0; margin: auto; z-index: 9} */


.page-greentip .tips_wrapper{ padding: 6em 0 }
.page-greentip .description{ background:#FFFFFF; position: relative; padding-bottom: 1em}
.page-greentip .tips_game_wrapper{ width: 100%}
.page-greentip .tips_game_wrapper li{ display: inline-block; margin: 0 .6em;  width: 150px}
.page-greentip .tips_game_wrapper li a{ display: block; padding: 10px 0; border-radius: 14px; cursor: pointer}
.page-greentip .tips_game_wrapper li a span{  color: #FFF}
.page-greentip .tips_game_wrapper li.tips_game a{ background: #7FC243}
.page-greentip .tips_game_wrapper li.tips_get a{ background: #72CCE6}

.page-greentip .container2{ background: #F5F5F5; position: relative; margin: 0 auto; overflow: visible; display: none; height: auto}
.page-greentip .container2 .question_content_wrapper{ width: 66%; height: 100%; margin: auto; padding: 5% 0}

.page-greentip .container2 .question_content_wrapper .wrong_get_correct_wrapper{ display: block; position: relative}
.page-greentip .container2 .question_content_wrapper .wrong_get_correct_wrapper .wrong_get_correct{ position: absolute; font-size: 29px; color: #FFF; top: 17%; right: 21.5%; font-weight: bold}

.page-greentip .container2 .question_content_wrapper .content_margin{ margin: 0 auto 0 10%}
.page-greentip .container2 .question_content_wrapper .question_content_li{ width: 25%}
.page-greentip .container2 .question_content_wrapper .question_content_li2{ width: 65%; margin-top: 12%}

.page-greentip .container2 .question_content_wrapper .answer_bg{  padding: 5.8% 4.2%; background: #FFF; position: relative}
.page-greentip .container2 .question_content_wrapper .answer_bg .triangle{ position: absolute; height: 20%; width: auto; left: -40px; bottom: 48px}
.page-greentip .container2 .question_content_wrapper .answer_bg .triangle.ie_fix{ bottom: -10px; left: -37px}
.page-greentip .container2 .question_content_wrapper .answer_bg h4{ margin: 0 0 2em 0}
.page-greentip .container2 .question_content_wrapper .answer_bg h4 p{ font-size: 19px; line-height: 1.5em}
.page-greentip .container2 .question_content_wrapper .answer_bg h4 p span{ color: #EA7171; font-family: 'Conv_Biko_Regular'; font-weight: bold}

.page-greentip .container2 .question_content_wrapper .next_question{ color: #7FC243}
.page-greentip .container2 .question_content_wrapper .end_question{ color: #7FC243; display: none}
.page-greentip .container2 .question_content_wrapper .go-arrow{ background: url('../images/page/tips/go-arrow.svg') right center no-repeat; width: 80px; height: 22px; line-height: 24px; font-size: 21px; font-weight: bold; cursor: pointer}
.page-greentip .container2 .question_content_wrapper .go-arrow.ie_fix{ height: 24px; line-height: 26px}
.page-greentip .container2 .question_content_wrapper .go-arrow:hover span{ color: #EA7171}
.page-greentip .container2 .question_content_wrapper .end_question.go-arrow{ width: 80px}

.top_left{ background: url('../images/page/tips/top-left.png') center center no-repeat; width: 48px; height: 48px; position: absolute; top:0; left: 0}
.top_right{ background: url('../images/page/tips/top-right.png') center center no-repeat; width: 48px; height: 48px; position: absolute; top:0; right: 0}
.bottom_left{ background: url('../images/page/tips/bottom-left.png') center center no-repeat; width: 48px; height: 48px; position: absolute; bottom:0; left: 0}
.bottom_right{ background: url('../images/page/tips/bottom-right.png') center center no-repeat; width: 48px; height: 48px; position: absolute; bottom:0; right: 0}

.question_content_bottom{ z-index: 9; position: relative}

.correct_minion, .wrong_minion{ display: none}
.correct_minion.active, .wrong_minion.active{ display: block}

.page-greentip .score_wrapper{ display: none; width: 100%; background:  #FEDD6C; position: relative}
.page-greentip .score_wrapper .score_content{ padding: 3em 0}
.page-greentip .score_wrapper .score_content .score_word{ padding: 2em 0}
.page-greentip .score_wrapper .score_content .score_word h2{ color: #5A5045; font-size: 32px; line-height: 1.5em}

.page-greentip .score_wrapper .score_content .score_word .full_marks,.page-greentip .score_wrapper .score_content .score_word .marks{ display: none; margin-bottom: 1em; font-weight: bold}
.page-greentip .score_wrapper .score_content .score_word .full_marks.active,.page-greentip .score_wrapper .score_content .score_word .marks.active{ display: block}
.page-greentip .score_wrapper .score_content .score_word .score{ color: #EA7171; font-size: 100px; line-height: 100px}

.page-greentip .score_wrapper .score_content .wallpaper_wrapper{ width: 40%; position: relative; margin: auto; display: none}
.page-greentip .score_wrapper .score_content .wallpaper_wrapper.active{ display: block}
.page-greentip .score_wrapper .score_content .wallpaper_wrapper .download_wallpaper{ position: absolute; bottom: -15px; left:0 ; right: 0; margin: auto; background: #FFF; display: block; width: 125px; height: 38px; text-align: center; border-radius: 8px}
.page-greentip .score_wrapper .score_content .wallpaper_wrapper .download_wallpaper span{ color: #72CCE6; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100px; height: 24px; font-weight: bold; font-size: 17px}
.page-greentip .score_wrapper .score_content .wallpaper_wrapper .border_wallpaper{ border: 10px solid #FFF; display: block}

.champion{ width: 100%; height: 70px; position: relative}
.champion_line{ background: url('../images/page/tips/champion-line.png') center center repeat; width: 100%; height: 14px; position: absolute; top: 0; bottom: 0; margin: auto; display: block}
.star_n_champion{ width: 310px; height: 70px; margin: auto; position: absolute; left: 0; right: 0; display: block; background: #FEDD6C}
.star{ display: inline-block; margin: auto; position: absolute; top: 0; bottom: 0}
.star1-left{ width: 12px; height: 14px; left: 20px}
.star2-left{ width: 18px; height: 20px; left: 45px}
.star3-left{ width: 24px; height: 26px; left: 77px}
.star3-right{ width: 24px; height: 26px; right: 77px}
.star2-right{ width: 18px; height: 20px; right: 45px}
.star1-right{ width: 12px; height: 14px;; right: 20px}
.champion_figure{ width: 80px; height: 70px; position: absolute; left: 0; right: 0; margin: auto}
.champion_figure img{ height: 100%; width: auto}

.last_container{ display: none; background: #F5F5F5}
.last_container_wrapper{ padding: 6em 0}
.last_description{ padding-bottom: 2em}
.share_tips_wrapper{ width: 100%}
.share_tips_wrapper li{ display: inline-block;
margin: 0 .6em;
width: 150px
}
.share_tips_wrapper li.share_tips2{ display: none}
.share_tips_wrapper li a{
display: block;
padding: 10px 0;
border-radius: 14px;
cursor: pointer;
}
.share_tips_wrapper li.share_tips a{ background: #7FC243}
.share_tips_wrapper li.share_tips2 a{ background: #7FC243}
.share_tips_wrapper li.see_share a{ background: #72CCE6}
.share_tips_wrapper li a span{ color: #FFF}

.page-view-tips{ padding: 3em 0 6em 0}
.view-tips-wrapper{ width: 75%; margin: auto; background: #FFF; position: relative; box-shadow: 1px 2px 1px #F1F2F2}
.view-tips-left{ width: 46px; position: absolute; left: -25px; top: 2%; overflow: hidden; background: url('../images/page/tips/blue_left_2.png')center center repeat-y}
.view-tips-blue-left{ height: auto; width: 100%; margin-top: 20px; }
.view-tips-content{ background: url('../images/page/tips/view-tips-bg.png')top center repeat; padding: 3em 5em 3em 5em}
.glass{ width: 60px; height: auto}
.notebook{ width: 70px; height: auto}
.view-tips-top-word, .glass, .notebook{ display: inline-block}
.view-tips-top-word{ width: 470px; margin: auto}
.view-tips-top-word span{ display: block}
.view-tips-top-word span.view-tips-title{ font-size: 26px; line-height: 40px}
.view-tips-top-word span.view-tips-big-title{ color: #72CCE6; line-height: 1.5em; font-size: 45px}

.view-tips{ border: 2px solid #7FC243; border-radius: 10px; background: #F5F5F5; position: relative; margin: 4em 0}
.view-tips .view-tips-no{ position: absolute; top: -25px; left: 85px; background: #7FC243; color:#FFF; font-size: 17px; line-height: 23px; height: 21px; padding: 0.5em 2em; border-radius: 22px; display: block}
.view-tips-group{ padding: 2.5em 6em}
.view-tips-group .col-l{ width: 27%; margin-right: 8%; position: relative; min-height: 200px}
.view-tips-group .col-l img{  position: absolute; left: 0; top: 0; bottom: 0}
.view-tips-group .col-r{ width: 65%; min-height: 200px}
.view-tips-group .col-r h4{ font-size: 17px; padding: 0.5em 0}
.view-tips-group .col-r .view-tips-last-h4{ padding-bottom: 0.2em}
.view-tips-group .col-r h4 span{ display: inline-block}
.view-tips-group .col-r h4 span:first-child{ width: 90px}
.view-tips-group .col-r p{ font-weight: bold; color: #5A5045}

.view-tips-group2{ display: none}

.view-tips-bot-line{ position: absolute; bottom: -3px; height: 1px; width: 100%; border-bottom: 1px solid #F1F1F2; background: #FFF}
.view-tips-bot-line2{ position: absolute; bottom: -5px; height: 1px; width: 100%; border-bottom: 1px solid #F1F1F2; background: #FFF}

.page-gallery{ background: #84D2E2; padding: 3em 0; position: relative; overflow: hidden}
.gallery_wrapper{ width: 50%; margin: auto; position: relative}
.gallery_wrapper .gallery_content{ box-shadow: 0 1px 1px #D8D8D8; position: relative}
.gallery_wrapper .gallery_content .gallery_line1{ height: 100%; width: 3px; display: block; position: absolute; box-shadow: 2px 0 0 #D8D8D8; right: -3px; top: 0; background: #F1F2F2; z-index: 3}
.gallery_wrapper .gallery_content .gallery_line2{ height: 100%; width: 3px; display: block; position: absolute; box-shadow: 2px 0 0 #D8D8D8; right: -6px; top: 0; background: #F1F2F2; z-index: 2}
.gallery_wrapper .gallery_content .gallery_line3{ height: 100%; width: 3px; display: block; position: absolute; box-shadow: 2px 0 0 #D8D8D8; right: -9px; top: 0; background: #F1F2F2; z-index: 1}
.gallery_wrapper li{ display: none}
.gallery_wrapper li.active{ display: block}

.download_gallery{ position: absolute; right: -140px; top: 5%; background: url('../images/page/gallery/download_label.png') center center no-repeat; width: 156px; height: 46px}
.download_gallery span{ color: #FFF; display: block; position: absolute; right: 33px; top: 13px; font-size: 18px}

.outsite_img{ position: absolute; height: auto}
.rubber{ right: 76%; width: 110px; top: 0 }
.ruler{ right: 77%; width: 310px; top: 15%}
.blue_pen_left{ right: 75%; width: 140px; top: 41%}
.green_pen{ right: 82%; width: 160px; top: 64%}
.blue_pen_right{ left: 88%; width: 180px; top: 10%}
.red_pen{ left: 78%; width: 190px; top: 43%}
.yellow_pen{ left: 82%; width: 140px; top: 56%}
.cute{ right: 78%; width: 180px; bottom: 0}
.circle_triangle{ left: 75%; width: 160px; bottom: -60px}

.gallery_button_group{ text-align: center; width: 100%; padding: 2.5em 0 0 0}
.gallery_button_group .gallery_left{ background: url('../images/page/gallery/btn_left.png') center center no-repeat; width: 64px; height: 64px; display: inline-block; cursor: pointer; margin-right: 20px}
.gallery_button_group .gallery_right{ background: url('../images/page/gallery/btn_right.png') center center no-repeat; width: 64px; height: 64px; display: inline-block; cursor: pointer}
/* .page-gallery .page-banner {position: relative; } */
/* .page-gallery .page-banner .banner-image{ padding-top:49px} */
/*
.page-gallery .nav-sub{ width:100%; height: 100%; position: relative; overflow: hidden; font-family: 'Hiragino Kaku Gothic Pro'; }
.page-gallery .nav-sub h4{ font-size: 21px; line-height: 1.4em}
.page-gallery .nav-sub li{ background: #FFFFFF; float: left; overflow: hidden; width: 25% }
.page-gallery .nav-sub li:hover a{ background: #72CCE6; color:#FFFFFF }
.page-gallery .nav-sub li a{ padding:30px 0; display: block; color: #5A5045;border-right:1px solid #D6D6D6; border-bottom: 1px solid #D6D6D6 ;}
.page-gallery .nav-sub li:nth-child(4) a{ border-bottom: none}
.page-gallery .nav-sub li:nth-child(5) a{ border-bottom: none}
.page-gallery .nav-sub li:nth-child(6) a{ border-bottom: none}
.page-gallery .nav-sub li:nth-child(7) a{ border-bottom: none; cursor: default}
.page-gallery .nav-sub li:first-child{ width:50%}
.page-gallery .nav-sub li:nth-child(2),.page-gallery .nav-sub li:nth-child(3){ width: 25%}

.page-gallery p{ color:#594F44}
.page-gallery .padding-date{ padding: 1% 0 0 0}
.page-gallery .gallery-slider{ padding-top: 50px; overflow: hidden;}
.page-gallery .gallery-slider .gallery-box{ width:84%;height:69%; font-size: 1em}
.page-gallery .gallery-slider .gallery-label-top { display: none; position: absolute; top: -37px ; width:100%; text-align: center}
.page-gallery .gallery-slider .gallery-label-bottom{display: none;  position: absolute;  bottom:-25px; width:100%; text-align: center}
.page-gallery .gallery-slider .gallery-label-top img{ width: auto; height: auto}
.page-gallery .gallery-slider .gallery-label-bottom img{ width: auto; height: auto}
.page-gallery .gallery-slider li{ width: 24%; float: left; display: block; overflow: visible; background: #FFF; margin:0 0.5% 25px 0.5%; box-shadow: 3px 3px 5px #D9D9D9;position: relative; cursor: pointer }
*/
/* .page-gallery .gallery-slider li.active{ background: url('../images/page/gallery/tape03.png') center center no-repeat;} */
/*
.page-gallery .gallery-slider li img{ width: 100%; height:100%; margin:18px 0 0 0; opacity: 1; cursor: pointer }
.page-gallery .gallery-slider li:hover img{ opacity: .6}
.page-gallery .gallery-slider li:hover .gallery-label-top{ display:block}
.page-gallery .gallery-slider li:hover .gallery-label-top img{ opacity: 1}
.page-gallery .gallery-slider li:hover .gallery-label-bottom{ display:block}
.page-gallery .gallery-slider li:hover .gallery-label-bottom img{ opacity: 1}
.page-gallery .gallery-slider li .gallery-detail{ width: 84%; padding: 12% 0 3% 0;}
.page-gallery .gallery-slider li .padding-date{ padding:3% 0 2px 0}


.page-gallery .partners{ padding:55px 0 55px 0; background: #E0E0E0}
.page-gallery .partners .partners-title{  padding: 0 0 45px 0}
.page-gallery .partners .partners-school { overflow:hidden; text-align: left; font-size: 16px; color: #767676; }
.page-gallery .partners .partners-school li{ width: 23%; float:left; margin:0 1%; }
.page-gallery .partners .partners-school li.active{ color:#000}
*/
/* .page-gallery .partners .partners-school li ul li{ width:80%; margin: 5px 0; } */

.page-contact{ background: #F5F5F5}
.page-contact .page-banner{ border-bottom: 10px solid #FFF}
.page-contact .page-banner .banner-image{ bottom: 2%; height: 39%}
/* .page-contact .line{ background:#FFFFFF; height:20px} */
.page-contact .content-contact{ padding:75px 0; width: 100%; overflow: hidden;}
.page-contact .content-contact .map{ width:55%; margin-right: 30px}
.page-contact .content-contact img{ width:100%}
.page-contact .content-contact .info{ width:33.3%; margin: auto}
.page-contact .content-contact .info h5{ color: #929497}
.page-contact .content-contact .info ul{ padding: 3.2% 0}
.page-contact .content-contact .info ul li{ padding: .8% 0}
.page-contact .content-contact .info ul li:first-child{ font-size: 19px}
.page-contact .content-contact .info ul li span{ margin-right: 10px}
/*
.border-right-none{ border-right: none}
.border-bottom-none{ border-bottom: none}*/

/*-------------------/
		Footer
/-------------------*/
/* .page-template-page-greentip-php #footer{ position: absolute; bottom: 0} */
/* .page-template-page-view-tips-php #footer{ display: none} */
.home #footer{ position: relative}
#footer{  position: relative; bottom: 0; overflow:hidden; width: 100%; background:#FFFFFF; color:#656668; font-size:12px; display: block; padding: 20px 0 15px 0; border-top: #F2f2f2 2px solid }
#footer .footer-container{ width:93%; margin:0 auto;}
#footer .footer-container .footer-content{ font-family:  Conv_DINLightAlternate; }
#footer .footer-container .footer-content .footer-left{ width: 49.2%; height: 100%; float:left}
#footer .footer-container .footer-content .footer-left2{ display: none}
#footer .footer-container .footer-content .footer-right{ width: 50.8%; float: right}
#footer .footer-container .footer-content .footer-right2{ display: none}
#footer .footer-container .footer-content ul li{ float:left;}
#footer .footer-container .footer-content .copyright{ margin-top: 5px; line-height: 18px}
#footer .footer-container .footer-content .share {border-left: 1px solid #D9D9D9; margin:7px 10px 0 15px; padding-left: 15px; line-height: 14px; height: 13px}
#footer .footer-container .footer-content .ssn li{ margin: 5px 8px 0 0}
#footer .footer-container .footer-content .ssn li a{ display: block}
#footer .footer-container .footer-content .ssn li .social-facebook{ width:20px; height:20px; background: url('../images/footer-facebook2.png')center center no-repeat;}
#footer .footer-container .footer-content .ssn li.instagram a{ width:20px; height: 20px}
/* #footer .footer-container .footer-content .ssn{ margin-top:2px} */
#footer .footer-container .footer-content .ssn li.fb-like{ margin:0 8px 0 4px}
/* #footer .footer-container .footer-content .ssn li.fb-like{ margin-top:-2px} */
#footer .footer-container .footer-content .company{ margin:-5px 0 0 0}
#footer .footer-container .footer-content .company li{ margin:0; height: 34px}
#footer .footer-container .footer-content .company li:first-child{ height: 46px; margin-right: 10px}
#footer .footer-container .footer-content .company li:first-child span{ bottom: 36px}
#footer .footer-container .footer-content .company li span{ display: inline-block; position: relative; bottom: 25px; margin: 0 10px}
#footer .footer-container .footer-content .company li img{ height: 100%; width: auto; display: inline-block}
#footer .footer-container .footer-content .company li.footer-n{ margin-right: 0; height: 25px; position: relative; top: 9px}
#footer .footer-container .footer-content .company li.footer-middle{ margin-right: 15px; height: 25px; position: relative; top: 10px}

#footer .footer-container .footer-content .company2{ display: none; margin: 10px 0}
#footer .footer-container .footer-content .company2 li{ float: left; width: 33.3%; margin: auto; text-align: center}
#footer .footer-container .footer-content .company2 li:first-child{ }
#footer .footer-container .footer-content .company2 li img{ height: 24px; width: auto}
#footer .footer-container .footer-content .company2 li.footer-n{ width: 29%}
#footer .footer-container .footer-content .company2 li.footer-n img{ position: relative}
#footer .footer-container .footer-content .company2 li.footer-middle{ width: 37%}
#footer .footer-container .footer-content .company2 li.footer-middle span{ margin-right: 5px}
#footer .footer-container .footer-content .company2 li span{ bottom: 15px; position: relative; margin-right: 5px; font-size: 11px}
#footer .footer-container .footer-content .company2 li span, #footer .footer-container .footer-content .company2 li img{ display: inline-block}
#footer .visitors{ display:none; }

/*-------------------/
		Responsive
/-------------------*/
@media screen and (max-height: 1110px){
	/* .page-greentip .container{ height: 340px} */
}

@media screen and (max-height: 980px){
	/* .page-greentip .container{ height: 290px; margin-bottom: 0} */
	/* .page-greentip #content{ height: 60%} */
}
@media screen and (max-height: 955px){
	.page-banner .banner-title h2{ padding-top:60px; font-size: 22px}
	.page-banner .banner-title h1{ font-size: 42px; padding-top: 14px}
	.page-banner .banner-title h1.beta{ padding-top: 60px}
	/* .page-about .description{ padding: 4em 0} */
	.page-greentip .tips_wrapper{ padding: 75px 0}
	.last_container_wrapper{ padding: 75px 0}
	.page-about .description{ padding: 75px 0}
	
	.page-greentip .page-banner .banner-image{ height: 48%}
	.page-banner .cloud-item3{ top: 30px}
	.page-banner .cloud-item1{ top: 100px}
	.page-banner .cloud-item2{ top: 200px}
}

@media screen and (max-height: 880px){
/*
	.page-banner .banner-title h2{ padding-top: 65px; font-size: 29px}
	.page-banner .banner-title h1{ font-size: 48px}
*/
}

@media screen and (max-height: 860px){
	/* #header{ height: 120px} */
	.page-greentip .container2 .question_content_wrapper .question_content_li2{ margin-top: 7%}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question{ padding: 6.5% 0; left: 3% }
}
@media screen and (max-height: 860px) and (min-width: 861px){
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .question_q{ font-size: 20px; line-height: 25px}
	/* .answer_wrapper li h4{ font-size: 19px; line-height: 24px} */
}
@media screen and (max-height: 845px){
	
}

@media screen and (max-height: 780px){
	/* .page-greentip .tips_wrapper{ padding: 2em 0} */
	.page-greentip .tips_wrapper .description h4{ font-size: 15px}
	.page-template-page-greentip-php #footer{ position: relative}
}


@media screen and (max-height: 750px){
	/* .page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question{ padding: 6% 0} */
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .col:first-child img{ height: 130px}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc{ margin-top: 25px}
	.page-about .description{ padding: 73px 0 73px 0}
	.home #footer{ position: relative}
}

@media screen and (max-height: 710px){

	/* .page-greentip .container{ height: 230px} */
	.page-greentip .description{ padding-bottom: 2em}
	
}

@media screen and (max-width: 1600px){
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .col:first-child img{ left: -70px}
}
@media screen and (max-width: 1200px){
.page-gallery .gallery-slider li .gallery-detail p{ font-size:14px}

}


@media screen and (max-width: 1260px) , screen and (max-height: 750px) {
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question{ width: 80%; left: 0}
  	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .col:first-child img{ left: -15px; top: 57%; height: 120px}
  	
}
@media screen and (max-width: 1175px){
	#header .header-container #logo{ width: 120px}
	#header .nav-menu li{ padding:10px 0px; }
.content-image-wrapper li .content-image img{ left: 0; height: auto; width: 100%}
.visitors{ width:84px; }
.visitors .visitors_count{ height:86px; line-height:86px; font-size:12px; }
}

@media screen and (max-width: 1124px){

#header{ padding: 20px 0 0 0}
/* #header .header-container{ width: 97%} */
#header .header-container #logo{ width: 120px}
/* #header .header-container .nav-quick{ right: 0} */

#header .nav-menu li{ width: 98px}
#header .nav-menu.safari_fix li{ width: 107px}
#header .nav-menu.firefox_mac_fix li .sub-menu li{ width: 270px}
#header .nav-menu.firefox_win_fix li{ padding: 10px 3px; width: 101px}
#header .nav-menu.firefox_win_fix li .sub-menu{ width: 290px}
#header .nav-menu.firefox_win_fix li .sub-menu li{ width: 275px; padding: 0}
#header .nav-menu.ie_fix li{ width: 99px}
#header .nav-menu.firefox_mac_fix li{ width: 101px}


#header .nav-menu li{ width:78px; font-size:12px; padding:10px 2px; }
#header .nav-menu2 li{ width:78px; font-size:12px; }
#header .nav-menu2 li a{ padding: 10px 0px 6px 0px; font-size:12px; }

#header .sub-menu{ width: 285px}
#header .sub-menu li{ width: 270px}

}
@media screen and (max-width: 1034px){

#footer .footer-container{ width: 95%}
}
@media screen and (max-width: 1024px){
.content-image-wrapper li .content-image img{ left: 25px; top: 0;}
.grid_3{ width: 28%}
.grid_5{ width: 44.8%}
.page-lesson .content-lesson li{ padding: 4% 2.6%}
.page-lesson .content-lesson li .lesson_content a{ height: 205px}

.page-gallery .nav-sub li{ width:100%}
.page-gallery .nav-sub li a{ padding: 20px 0}
.page-gallery .nav-sub li:first-child,.page-gallery .nav-sub li:nth-child(2),.page-gallery .nav-sub li:nth-child(3){ width:100%}
.page-gallery .nav-sub li:nth-child(4) a{ border-bottom: 1px solid #D6D6D6 ;}
.page-gallery .nav-sub li:nth-child(5) a{ border-bottom: 1px solid #D6D6D6 ;}
.page-gallery .nav-sub li:nth-child(6) a{ border-bottom: 1px solid #D6D6D6 ;}
.page-gallery .nav-sub li h6{ font-size: 20px}
.page-gallery .gallery-slider li { width:46%; margin:3% 2%}
.page-gallery .gallery-slider li .gallery-detail{ padding: 9% 0 3% 0}
.page-gallery .gallery-slider li .gallery-detail p{ font-size: 16px}
.page-gallery .gallery-slider .gallery-box{ height:73%;}

.page-project .page-project-wrapper .page-project-content{ padding: 5em 3em 7em 3em}
.page-project .page-project-wrapper .page-project-content .project-middle .middle-col-l{ min-width: 120px}
.page-project .page-project-wrapper .page-project-content .project-middle .middle-col-r{ width: 82%}
/*
.page-project .page-project-wrapper .page-project-content .project-bot .project-image-group li{ width: 100%; display: block; margin: 10px 0 0 0; }
.page-project .page-project-wrapper .page-project-content .project-bot .project-image-group li:first-child{ margin: 0}
*/


.tips_popup .tips_popup_wrapper{ width: 75%}

.view-tips .view-tips-no{ left: 45px}
.view-tips-group{ padding: 2.5em}
.view-tips-wrapper{ width: 80%}
.view-tips-top-word{ width: auto; padding: 0 2em}
.view-tips-top-word span.view-tips-big-title{ font-size: 41px}

.page-greentip .container2 .question_content_wrapper .question_content_li2{ margin-top: 7%}
.page-greentip .container2 .question_content_wrapper .wrong_get_correct_wrapper .wrong_get_correct{ right: 18%}
/* .page-greentip .container2 .question_content_wrapper .answer_bg h4 p{ font-size: 21px; line-height: 26px;} */
.page-greentip .container2 .question_content_wrapper .answer_bg h4{ margin: 0 0 1em 0}
.page-greentip .container2 .question_content_wrapper .answer_bg .triangle{ left: -35px}

#footer { padding: 10px 0 6px 0}
#footer .footer-container .footer-content .footer-left{ width:100%; text-align: center; margin: 0 auto; overflow: hidden}
#footer .footer-container .footer-content .copyright{ float:none; display: inline-block}
#footer .footer-container .footer-content .share{ float:none; display: inline-block}
#footer .footer-container .footer-content .ssn{ float:none; display: inline-block; position: relative; bottom: -5px}
#footer .footer-container .footer-content .ssn li{ margin: 0 8px 0 0; }
#footer .footer-container .footer-content .footer-right{ width:100%; text-align: center; margin: 0 auto; overflow: hidden}
#footer .footer-container .footer-content .company{ margin: 0 auto; padding: 15px 0 5px; float: none; width: 100%; display: inline-block }
#footer .footer-container .footer-content .company li{ display: inline-block; float: none; margin: 0 5px 0 0}
#footer .footer-container .footer-content .company li.footer-middle{ top: -10px}
#footer .footer-container .footer-content .company li.footer-n{ top: -12px}
#footer .footer-container .footer-content .company li span{ margin: 0 10px 0 20px}
#footer .footer-container .footer-content .company li.footer-middle img{ position: relative; bottom: 3px}

}



@media screen and (max-width: 930px){
	#header .nav-menu{ display: none}
	#header .nav-menu2{ display: block}
	#header .menu-menu-chi-container{ width: 60%; margin: auto}
	
}

@media screen and (max-width: 860px){
	.content-image-wrapper li .caption{ width: 100%}
	.content-image-wrapper li .content-image{ width: 100%; height: 406px}
	.content-image-wrapper li .content-image-bg{ height: 395px; width: 90%; margin: auto }
	.content-image-wrapper li .content-image img{ left: 0; right: 0; bottom: 0; margin: auto; height: 100%; width: auto}
	#header .nav-menu2 .sub-menu{ width: 280px}
	#header .nav-menu2 .sub-menu li{ width: 270px}
	.view-tips-wrapper{ width: 85%}
	.view-tips-content{ padding: 3em 3em 1em 3em}
	/*
#header .nav-menu{ display: none}
	#header .nav-menu2{ display: block}
	#header .menu-menu-chi-container{ width: 60%; margin: auto}
*/
	
	/* .page-about .description h4{ font-size: 19px} */
	h4{ font-size: 15px; line-height: 1.5em}
	/* .page-greentip .description, .page-about .description{ padding: 4em 0} */
	.page-about .description h4{ font-size: 15px}
	.page-project .page-project-wrapper .page-project-content .project-middle{ display: none}
	.page-project .page-project-wrapper .page-project-content .project-middle2{ display: block}
	
	.page-project .page-project-wrapper .page-project-content .project-middle .middle-col-l{ min-width: 70px}
	.page-project .page-project-wrapper .page-project-content .project-middle .middle-col-r{ width: 85%}
	.page-project .page-project-wrapper .page-project-content .project-bot .project-image-group li{ max-height: 620px; width: 100%; display: block; margin: 10px 0 0 0; }
	.page-project .page-project-wrapper .page-project-content .project-bot .project-image-group li:first-child{ margin: 0}
	/* .page-project .page-project-wrapper .page-project-content a.back-to-project{ width: 243px} */
	
	.gallery_wrapper{ width: 60%}
	/*
.page-greentip .tips_question_wrapper .tips_question_bg .tips_question{ min-height: 480px}
	.page-greentip .tips_question_wrapper .tips_question_bg img.backboard{ min-height: 40px}
*/
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question{ width: 90% }
	.page-greentip .tips_question_wrapper .tips_question_bg img.minions{ left: -16px; bottom: -65px; height: 150px}
	.page-greentip .tips_question_wrapper .tips_question_bg img.backboard-big{ display: none}
	.page-greentip .tips_question_wrapper .tips_question_bg img.backboard-small{ display: block}
	.page-greentip .tips_question_wrapper .tips_question_bg img.under_backboard{ display: block}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .question_q, .page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .question_no{ font-size: 21px}
	
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .col:first-child{ width: 100%; float: none; height: 30px}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .col{ width: 100%; height: auto; float: none}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .col:first-child img{ display: none}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc{ text-align: center}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li .choose_button{ width: 73px; height: 73px}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li a{ padding: 16px}
	.page-greentip .container2 .question_content_wrapper{ width: 77%}
	.page-greentip .container2 .question_content_wrapper .question_content_li{ width: 30%}
	.page-greentip .container2 .question_content_wrapper .question_content_li2{ margin-left: 5%}
	.page-greentip .container2 .question_content_wrapper .answer_bg .triangle{ left: -39px}
	.view-tips .view-tips-no{ padding: 0.5em 1em}
	
	.page-contact .content-contact .info{ width: 50%}
}

@media screen and (max-width: 768px){
	.grid_5_of_10{ width: 50%}
	.page-lesson .content-lesson li{ padding: 4% 0; min-height: 350px}
	.page-lesson .content-lesson li .lesson_content span{ font-size: 17px; line-height: 24px}
	.page-lesson .content-lesson li .lesson_content span a{ padding: 6px 15px 4px 15px}
	.page-lesson .content-lesson li.this_reward span{ max-width: 200px}
	.page-lesson .content-lesson li.this_workshop span{ max-width: 170px}
	.page-project .page-project-wrapper .page-project-content .project-middle2 div .eng_fix{ display: block}
	.page-project .page-project-wrapper .page-project-content .project-middle2 div .reserve { position: relative; bottom: 4px; margin-left: 0}
	.glass{ width: 40px}
	.notebook{ width: 50px}
	.view-tips-group{ padding: 1.5em}
	.view-tips .view-tips-no{ left: 25px}
	
	.comment-tips_form_default_wrapper.is_mobile .select-avatar input{ width: 20px; padding: 0; position: relative; bottom: 0px; border-radius: 0; left: -5px}
	.comment-tips_form_default_wrapper.is_mobile .select-avatar label{ position: relative; bottom: 0px; right: 10px}
	.comment-tips_form_default_wrapper.is_mobile .select-avatar label, .comment-tips_form_default_wrapper.is_mobile .select-avatar input{ float: none; display: inline-block}
	
	.page-contact .content-contact .info{ width: 60%}
	
}
@media screen and (max-width: 730px){

	.content-image-wrapper li .content-image img{ width: 100%; height: auto}
}
@media screen and (max-width: 768px), screen and (min-height: 955px){
	
	.page-banner .banner-title h2{ padding-top: 40px; font-size: 22px}
	.page-banner .banner-title h1{ padding-top: 14px; font-size: 42px}
	.page-banner .banner-title h1.beta{ padding-top: 60px}
}


@media screen and (max-width: 768px){
	.content-image-wrapper li .content-image img{ width: 100%; height: auto}
	#header{ padding: 5px 0 0 0; height: 90px}
	#header .nav-menu2{ display: none}
	#header .header-container #logo{ width: 90px}
	#header .header-container .nav-quick .iphone_menu{ display: inline-block}
	
	.mobile_sub_menu{ background: #FFF}
	.view_all_programmes{ display: block}
	
	
	.container{ width: 97%}
	
	.page-banner{ min-height: 260px}
	.page-banner .cloud-item1{ top: 50px}
	.page-banner .cloud-item2{ top: 160px}
	.page-banner .cloud-item3{ top: 10px}
	.page-banner .banner-title h1.beta{ padding-top: 40px}
	.page-about .description{ padding: 4.5em 0; width: 80%; margin: auto}
	.page-greentip .description{ width: 80%; margin: auto}
	.page-greentip .last_description{ width: 80%; margin: auto}
	.page-about .description br, .page-greentip .description br, .page-greentip .last_description br{ display: none}
	/* .page-about .description h4{ font-size: 17px} */
	.page-greentip .tips_wrapper{ padding: 4.5em 0}
	/* .page-greentip .tips_wrapper .description h4{ font-size: 17px} */
	.page-greentip .tips_game_wrapper li{ width: 135px}
	.page-greentip .tips_game_wrapper li a{ padding: 8px 0 6px 0}
	.page-greentip .container2 .question_content_wrapper{ width: 95%}
	.page-greentip .tips_question_wrapper .tips_question_bg img.minions{ left: -15px}
	.page-greentip .tips_question_wrapper .tips_question_bg img.backboard-small{ display: none}
	.page-greentip .tips_question_wrapper .tips_question_bg img.iphone-backboard{ display: block}
	.page-greentip .tips_question_wrapper .tips_question_bg img.under_backboard{ right: 30px}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question{ width: 88%}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .question_q, .page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .question_no{ font-size: 21px; line-height:26px}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc{ width: 200px}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li a{ padding: 6px; font-size: 28px}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li .choose_button{ width: 53px; height:53px; top: -2px; left: -2px}
	.page-greentip .tips_question_wrapper .tips_question_bg .tips_question .start_question .choose_the_abc li:hover .choose_button{ border: 3px solid rgba(90,80,69,1)}
	/*.page-greentip .container2 .question_content_wrapper .question_content_li2{ margin-top: 0}*/
	.page-greentip .container2 .question_content_wrapper .answer_bg h4 p{ font-size: 17px}
	.share_tips_wrapper li.share_tips{ display:none}
	.share_tips_wrapper li.share_tips2{ display:inline-block}
	
	.last_container_wrapper{ padding: 50px 0}
	
	.page-project{ padding: 4.5em 0}
	.page-project .page-project-wrapper .page-project-content .project-top h1{ font-size: 39px}
	.page-project .page-project-wrapper .page-project-content{ padding: 5em 2em 6em 2em}
	.page-project .page-project-wrapper .page-project-content .project-middle{ margin: 1em 0}
	.page-project .page-project-wrapper .page-project-content .project-middle .middle-col-r{ width: 80%}
	
	.gallery_wrapper{ width: 90%}
	.download_gallery{ right: 0; top: -40px; margin: auto; background: #7ec244; width: 115px; height: 40px}
	.download_gallery span{ font-size: 14px; right: 0; width: 100%; text-align: center; top: 9px; position: relative}
	
	.page-contact .content-contact{ padding: 4.5em 0}
	.page-view-tips{ padding: 0 0 3em 0}
	.view-tips-left{ background: url('../images/page/tips/blue_left_new.png')center center repeat-y; width: 33px; left: -18px; }
	.view-tips-wrapper{ width: 90%}
	.view-tips-content{ padding: 3em 1.5em 1em 2em}
	.view-tips-top-word{ padding: 0}
	.view-tips .view-tips-no{ left: 0; right: 0; width: 100px; margin: auto; text-align: center}
	
	.view-tips-group .col-l{ float: none; min-height: 130px; margin: 0; width: 100%}
	.view-tips-group .col-l img{ width: auto; height: 100%;}
	.view-tips-group .col-r{ float: none; width: 100%; padding: 1em 0; min-height: inherit}
	.view-tips-group .col-r h4{ width: 100%}
	.view-tips-group .col-r .view-tips-last-h4{ width: 100%; float: none; display: block; padding-bottom: 0.5em}
	
	.view-tips-blue-left{margin-top: 0 }
	/*
.view-tips-group{ display: none}
	.view-tips-group2{ display: block}
*/
	.glass, .notebook{ display:none}
	
	.rubber{ width: 70px}
	.ruler{ width: 160px}
	.blue_pen_left{ width: 70px; right: 89%}
	.green_pen{ width: 90px; right: 86%}
	.blue_pen_right{ width: 80px; left: 89%; top: 21%}
	.red_pen{ width: 100px; top: 43%; left: 83%}
	.yellow_pen{ width: 70px; top: 57%; left: 89%}
	.cute{ right: 58%}
	.page-view-tips{ padding: 2em 0 5em 0}
}

@media screen and (max-width: 650px){
	
	/* .mobile_sub_menu ul li.margin-left-1{ margin-left: 0} */

}

@media screen and (max-width: 580px){
	.visitors{ right: 10px; }
	#header .visitors{ display:none; }
	#header .header-container .nav-quick{ right:0px; }
	#footer .visitors{ display:block; }
	
	.content-image-wrapper li .content-image{ height: 407px}
	.content-image-wrapper li .content-image-bg{ height: 350px}
	/*.share_tips_wrapper li.share_tips{ display: none}*/
	.grid_3, .grid_5{ width: 100%}
	.page-lesson .content-lesson li{ min-height: 240px}
	.page-lesson .content-lesson li .lesson_content a{ height: 185px}
	.page-greentip .tips_question_wrapper{ min-height: 700px}
	.page-greentip .container2 .question_content_wrapper .answer_bg{ padding: 5.8% 1.5em}
	.page-greentip .score_wrapper .score_content .score_word .full_marks{ width: 228px; margin: auto}
	.page-greentip .score_wrapper .score_content .wallpaper_wrapper{ width: 60%}
	#footer .footer-container{ width: 97%}
	#footer .footer-container .footer-content .share{ border-left: none; margin: 7px 5px 0 0; padding-left: 0}
	#footer .footer-container .footer-content .copyright{ display: block}
	#footer .footer-container .footer-content .company{ display: none}
	#footer .footer-container .footer-content .company2{ display: block}
	#footer .footer-container .footer-content .company li:first-child{ height: 35px}
	#footer .footer-container .footer-content .company li span{ margin: 0 10px 0 5px}
	form.comment-form p{ margin: 0 0 2em 0}
	.comments_{ margin: 0 0 2em 0}
	.comment-tips_form_default, .comment-tips_form_custom{ width: 100%; display: block}
	.comment_or_button{ top: 222px}
	.page-template-page-share-php .comment_or_button{ top: 298px; left: 0}
	.tips_popup .comment_or_button{ top: 298px; left: 0; margin: auto}
	form.comment-form p.comment-tips_form_name, form.comment-form p.comment-tips_form_school{ width: 100%; display: block; margin: 0 0 2em 0}
	form.comment-form p.form-submit{ margin: 0}
	.page-template-page-share-php textarea{ width: 88%}
	/* .page-gallery{ padding: 2em 0} */
	.gallery_button_group .gallery_left{ background: url('../images/page/gallery/btn_left_small.png') center center no-repeat; width: 50px; height: 50px; margin-right: 15px}
	.gallery_button_group .gallery_right{ background: url('../images/page/gallery/btn_right_small.png') center center no-repeat; width: 50px; height: 50px}
	
	.view-tips-group .col-l{ min-height: 85px}
	/* .view-tips-group .col-l img{ right: 0} */
	.view-tips-top-word span.view-tips-title{ font-size: 22px; line-height: 30px}
	.view-tips-top-word span.view-tips-big-title{ font-size: 32px}
	
	
	.page-banner .cloud{ width:100px !important; }
	.outsite_img{ display:none; }
	.cute{ display:block; }
	.circle_triangle{ display:block; }
	
	#footer{ padding: 10px 0}
	#footer .footer-container{ width: 88%}
	#footer .footer-container .footer-content .footer-left{ display: none}
	#footer .footer-container .footer-content .footer-left2{ display: block; margin-top: 2.5em}
	#footer .footer-container .footer-content .footer-right2{ display: block}
	#footer .footer-container .footer-content .footer-right{ display: none}
	#footer .footer-container .footer-content .company{ display: block; padding: 0}
/* 	#footer .footer-container .footer-content .company li{ float: left} */
	#footer .footer-container .footer-content .company li{ width:100%; }
	#footer .footer-container .footer-content .company li.footer-middle{ height:auto; margin-right: 0; top: 0}
	#footer .footer-container .footer-content .company li.footer-middle img{ bottom: 0}
	#footer .footer-container .footer-content .company li:first-child{ height:auto; margin-right: 15px}
	#footer .footer-container .footer-content .company li span{ display: block; bottom: inherit; margin: 0}
	#footer .footer-container .footer-content .company li:first-child span{ bottom: inherit}
	#footer .footer-container .footer-content .company li img.mobile_footer_img{ margin-right: 15px}
	
	#footer .footer-container .footer-content .company2 li{ width: auto; height: auto; float: left; text-align: left}
	#footer .footer-container .footer-content .company2 li.footer-n{ width: auto; float: left}
	#footer .footer-container .footer-content .company2 li.footer-middle{ width: auto; margin-right: 5%}
	#footer .footer-container .footer-content .company2 li.footer-middle img{ position: relative; bottom: 0}
	#footer .footer-container .footer-content .company2 li:first-child{ display: block; width: 100%; float: none; text-align: left; margin-bottom: 10px}
	#footer .footer-container .footer-content .company2 li img{ height: 35px}
	#footer .footer-container .footer-content .company2 li span{ bottom: 24px; margin-right: 15px}
	#footer .footer-container .footer-content .company2 li.footer-middle span{ margin-right: 20px}
	#footer .footer-container .footer-content .share{ position: relative; top: -6px; margin-top: 0}
	#footer .footer-container .footer-content .ssn{ bottom: inherit; top: 0}
	#footer .footer-container .footer-content .copyright{ margin-top: 0}
	
	#footer .footer-container .footer-content .company li img{ margin-right:5%; width:35%; height:auto; }
}

@media screen and (max-width: 480px){
	
	.content-image-wrapper li .content-image{ height: 305px}
	.content-image-wrapper li .content-image-bg{ height: 295px}
	.page-banner .banner-title h1{ font-size: 32px}
	.page-project .page-project-wrapper .page-project-content .project-top h1{ font-size: 32px}
	.page-project .page-project-wrapper .page-project-content a.back-to-project{ font-size: 14px; width: 142px}
	.page-banner{ min-height: 230px}
	.page-project .page-project-wrapper .page-project-content .project-middle .middle-col-r{ width: 75%}
	.page-project .page-project-wrapper .page-project-content .project-middle h6 .reserve{ margin-left: 7px}
	.page-greentip .tips_wrapper, .page-about .description{ padding: 3em 0}
	.page-greentip .container2 .question_content_wrapper .question_content_li{ width: 100%; height: 200px; float: none; margin: 0 0 5% 0}
	.page-greentip .container2 .question_content_wrapper .question_content_li2{ width: 80%; margin: auto; float: none}
	.page-greentip .container2 .question_content_wrapper .answer_bg .triangle{ display: none}
	.page-greentip .container2 .question_content_wrapper .wrong_get_correct_wrapper{ height: 200px}
	.correct_minion, .wrong_minion{ width: auto; height: 100%}
	.page-contact .content-contact .info{ width: 80%}
	
	.page-greentip .tips_game_wrapper li{ margin: 0 auto; display: block}
	.page-greentip .tips_game_wrapper li:first-child{ margin: 0 auto 10px auto}
	.share_tips_wrapper li{ display: block; margin: auto}
	.share_tips_wrapper li.share_tips2{ margin: 0 0 10px 0}
	.star_n_champion{ width: 240px}
	.star1-left{ left: 10px}
	.star2-left{ left: 30px}
	.star3-left{ left: 55px}
	.star3-right{ right: 55px}
	.star2-right{ right: 30px}
	.star1-right{ right: 10px}
	
	#footer .footer-container .footer-content .company2 li img{ height: 22px}
	#footer .footer-container .footer-content .company2 li.footer-middle{ height: 23px}
	#footer .footer-container .footer-content .company2 li span{ bottom: 13px}
	
/* 	#footer .footer-container .footer-content .company li img{ margin-right:5%; width:45%; height:auto; } */
/* 	#footer .footer-container .footer-content .company li img.mobile_footer_img{ margin-bottom:10px; } */
	
	/* .gallery_wrapper{ width: 90%} */
}

@media screen and (max-width: 400px){
	
	/* .mobile_sub_menu ul li a{ margin: 0 5%} */
	
	.mobile_menu li.li-lesson a{ width: 110px}
	
	.page-contact .content-contact .info{ width: 90%}
	.page-contact .content-contact .info ul li a{ font-size: 14px}
	
	.page-greentip .container2 .question_content_wrapper .question_content_li2{ width: 90%}
	.view-tips-group .col-l img{ right: 0}
	
	.page-project .page-project-wrapper .page-project-content{ padding: 5em 1em 6em 1em}
	.page-project .page-project-wrapper .page-project-content a.back-to-project{ width: 160px}
/*
	.page-project .page-project-wrapper .page-project-content .project-middle2 p{ font-size: 15px}
	.page-project .page-project-wrapper .page-project-content .project-middle2 h6{ font-size: 15px}
	.page-project .page-project-wrapper .page-project-content .project-middle2 div{ font-size: 15px}
	.page-project .page-project-wrapper .page-project-content .project-middle2 ul li{ font-size: 15px}
	.page-project .page-project-wrapper .page-project-content .project-middle2 div .reserve .reserve_word{ font-size: 15px}
*/
}

@media screen and (max-width: 320px){

	#footer .footer-container{ width:90%}
	#footer .footer-container .footer-content .company2 li.footer-middle{ margin-right: 2%}
	#footer .footer-container .footer-content .company li.footer-middle img{ bottom: 0}

}

/*#header .nav-menu li:nth-child(6){
    padding-top: 3px;
    padding-bottom: 18px;
}
*/

 /*education.php*/
.page-education .description {
    background: #FFFFFF;
    padding: 6em 0;
    position: relative;
}
.school_map_header{
    margin: 10px auto;
}
.school_map_header div{
    display: inline-block;
    width: 400px;
    max-width: 30%;
    text-align: right;
}
.school_map_header div:first-child{
    font-size: 150%;
    text-align: left;
}
#map{
    height: 450px;
    width: 100%;
}
.map_container,.school_map_header div:first-child{
    width: 700px;
    max-width: 60%;
    display: inline-block;
}
.school_map_bottom .list{
    display: inline-block;
    vertical-align: top;
    overflow-y: auto;
    height: 450px;
    text-align: left;
    margin-left: 5px;
    width: 400px;
    max-width: 30%;
}
.school_map_bottom .list > div{
   border-top: 1px solid #f1f2f1;
   padding: 10px 0;
   padding-left: 10px;
}
.school_map_bottom .list .school{
    cursor: pointer;
}
.school_map_bottom .list .school:hover, .school_map_bottom .list .school.selected{
    background-color: rgba(32,56,110,0.1);
}
.school_map_bottom .list > .school > div{
    width: calc(100% - 70px);
}
.school_map_bottom .list > div > div{
    display: inline-block;
    vertical-align: top;
}
.school_map_bottom .list > div:not(.icon) img{
    width: auto;
    height: 60px;
    margin-right: 10px;
    display: inline-block;
}
.school_name{
    font-weight: 900;
    font-size: 115%;
}
.school_map_bottom .icon img{
    height: 44px;
    width: auto;
    display: inline-block;
}
.school_map_bottom .icon div{
    display: inline-block;
}
.school_map_bottom .icon > div > div{
    width: 40px;
}

@media screen and (max-width:768px){
    .map_container,.school_map_header div, .school_map_bottom .list{
        display: block !important;
        max-width: 100% !important;
    }
    .school_map_bottom .list, .school_map_header div{
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        text-align: left;
    }
    #map{
        height: 350px;
    }
    .school_map_bottom .icon > div > div{
        vertical-align: middle;
    }
}