@charset "utf-8";
/*
Theme Name: ONE WORLD JAPAN
Theme URI: http://www.web-makati.com/
Description: ONE WORLD JAPANESE LANGUAGE CENTER INC.
Version: 0.1.4
Author: WEB MAKATI
Author URI: http://www.web-makati.com/
License: GNU General Public License
Tags: Philippine, ONE WORLD JAPAN INC.
*/
/* ----------------------------------
              COMMON
---------------------------------- */
body { margin:0px auto 0px auto;
       font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
       background:#fff;}
header,section,article,aside,footer{ 	display: block;}
img{ margin:0;padding:0;border:none;}
ul,ol{	margin:0;padding:0;list-style:none;list-style-position:outside;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
p{ margin:0;padding:0;}
div{ 	margin:0;padding:0;}

/* ----------------------------------
           COMMON LINK
---------------------------------- */
a:link{ color:#333;text-decoration:none;}
a:visited{ color:#333;text-decoration:none;}
a:hover{ color:#ff0000;	text-decoration:underline;}
a:active{ color:#298ADC;text-decoration:none;}

/* ----------------------------------
          ClearFix
---------------------------------- */
.cf:after {  display:block; height:0;  visibility:hidden;
            clear:both;   content:".";}
/* 追加 MacIE 5 と WinIE 7 向け */
/*MacIE \*/
* html .cf{ height:1em;}
/*-------------------------------------
	画像下端/リンク透過
-------------------------------------*/
img { vertical-align: bottom; }
a:hover img {opacity: 0.8;filter: alpha(opacity=80);}
/*-------------------------------------
	BR
-------------------------------------*/
.pc { }
.sp { display:none; }
  @media screen and (max-width : 480px) {
     .pc  { display:none; }
     .sp { display:block; }
  }

/*-------------------------------------
	Body BG
-------------------------------------*/
body { background:url(/image/top001.jpg) no-repeat; background-size:100% auto; }
body.page21 { background:url(/image/top000.jpg) no-repeat; background-size:100% auto; }
body.top {  background:none; }

  @media screen and (max-width : 480px) {
     body { background:url(/image/top001s.jpg) no-repeat; background-size:100% auto; }
  }
/*-------------------------------------
	     Header
-------------------------------------*/
header { width:100%;text-align:center;margin:0px auto 0px auto;
         background: #bed0e5; position: relative;z-index: 10; }
#header-inner { max-width:1150px;margin:0px auto 0px auto;padding:0px; }
.company-logo { float:left;padding:0px;margin:0;height:110px;width:35%;}
.company-logo img { max-width:100%; }

h1  { float:left;font-size:22px;color:#ffffff;padding:30px 0 0px 0;margin:0px;width:30%;
      text-shadow: 2px 2px 2px #777, -2px 2px 2px #777,2px -2px 2px #777,-2px -2px 2px #777,
             0px 2px 2px #777, -2px 0px 2px #777, 2px 0px 2px #777, 0px -2px 2px #777,
             5px 5px 6px #777;}
#header-inner .subTitle { float:right;max-width:302px;max-height:66px;padding-top:10px; }
#header-inner .subTitle img { max-width:100%; }

  @media screen and (max-width : 768px){ 
       #header-inner { width:100%; }
       .company-logo { width:50%; height:auto; }
       h1{ width:50%;font-size :1.5em;} 
       #header-inner .subTitle { display:none; }
  }
  @media screen and (max-width : 480px) { 
       .company-logo { width:100%;float:none;text-align:center; }
       .company-logo img { width:60%; }
       #titleGroup { float:none;width:100%;margin:0px auto;text-align:center; }
       h1{ float:none; width:100%; font-size :1.5em; padding-top:0px; } 
  }

/*-------------------------------------
          GLOBAL NAVIGATION 
-------------------------------------*/
nav { width:100%;clear:both;height:47px;position:relative;z-index:10;
          background-color: rgba(51,51,51,0.7); }
nav.fixed { position: fixed;top: 0;left: 0;width: 100%; }
#navList { max-width:1200px; margin:0 auto; }

  @media screen and (min-width : 769px){
     nav img { display:none; }
     #navList ul { width:100%; z-index:10;margin:0px auto 0px auto;}
     #navList li { float: left;margin:0;padding:12px 0;width:16.6%; font-weight:bold;
                     margin-top:0;text-align:center; }
     #navList a { font-weight:bold;display: block;font-size:14px;color:#fff; }
     #navList li.active a { color:#33ff33; }
     #navList a:hover { color:#33ff33;text-decoration:none; }
  }
  @media screen and (max-width : 768px){
     nav.fixed { position: fixed;top: 0px;left: 0;width: 100%; }
     nav { background:none; display:block;width:50px;height:47px;cursor:pointer;z-index:10;}
     li.menu-item{ position: relative;padding-left:8px;z-index:3; }
     li.menu-item a{ display:block;padding:20px;   color: #FFFFFF;    text-decoration: none; }
     #navList.open { -webkit-transition: .5s linear; 	transition: .5s linear;  }
     #navList.close { height:100%;margin-left:300px; -webkit-transition: .5s linear; transition: .5s linear; }
     nav ul { list-style:none; padding:0px;
                margin:-46px 0px 0px -310px; }
     nav ul li { font-size: 16px;font-weight: bold;
              background: #323333 none repeat scroll 0% 0%;
             width: 300px;border-bottom: 1px solid #FFF;}
  }
  @media screen and (max-width : 480px) {
     #navList.close { margin-left:260px; }
     nav ul { margin:-46px 0px 0px -260px; }
     nav ul li { width: 250px; }
     nav.openIcon { position:relative;z-index:10;}
  }
/*-------------------------------------
	  Slide Show
-------------------------------------*/
#slideshow {  position: relative; }
#slideshow img { width:100%; }
/*-------------------------------------
	   Main Contents
-------------------------------------*/
article { width:100%; }
h2 { font-size:20px; color:#009900 }
h2.titleW { color:#fff; }
#topCon { clear:both;width:100%; text-align:center; }
#topConInner { max-width:1150px;margin:0 auto; }
#topCon p.topImage { font-size: 31vw; }

#topCon .youtube-ch{
	position: absolute;
    right: 1%;
    bottom: 25%;
	width: 25vw;
	max-width:370px;
    background: #ff0000;
    border-radius: 10px;
	text-align:left;
}
.youtube-ch a:link,
.youtube-ch a:visited{
	color: #fff;
    font-size: 1.6vw;
	font-size:clamp(14px, 1.6vw, 24px);
    font-weight: bold;
    display: block;
    padding: 3% 5%;
    width: 100%;
    box-sizing: border-box;
}
.youtube-ch a:hover{
	text-decoration:none;
}

@media screen and (max-width : 850px){
	#topCon .youtube-ch{
		width: 40vw;
	}
	#topCon .youtube-ch a:link,
	#topCon .youtube-ch a:visited{
		font-size:clamp(14px, 1.8vw, 24px);
	}
}
@media screen and (max-width : 525px) {
	#topCon .youtube-ch a:link,
	#topCon .youtube-ch a:visited{
		font-size:clamp(12px, 1.6vw, 24px);
	}
  }


.topIframe { overflow: scroll; height:300px; 
    /* IE, Edge 対応 */
    -ms-overflow-style: none;
    /* Firefox 対応 */
    scrollbar-width: none;}
      /* Chrome, Safari 対応 */
  .topIframe::-webkit-scrollbar {
    display:none;
  }

.top-left { width:calc(99% - 500px); float:left; }
.newTopLeft { width:100%; float:none; }
.top-right { width:500px; float:right; margin:1% auto; text-align:center; }

#topBox { width:90%; float:none;margin:2% auto 3%; padding:1%;background-color: rgba(204,255,204,0.5);
          border:1px #ccc solid;border-radius:40px; position:relative; text-align:center;}

#topBox h2 { clear:both; width:90%; margin:0 4%; color:#fff; padding:5px;border:none; font-size:18px;
             display:block;background-color:rgba(50,50,50,0.7); }

#topBox .topConText { font-size:14px; text-align:left; padding:2%; }
#topCon p.topImage2 { font-size: 3vw; }

  @media screen and (max-width : 1400px){
      #topCon p.topImage { font-size: 30vw; }
      #topCon p.topImage2 { font-size: 2vw; }
  }
  @media screen and (max-width : 1300px){
      #topCon p.topImage { font-size: 28vw; }
      #topCon p.topImage2 { font-size: 2vw; }
  }
  @media screen and (max-width : 1200px){
      #topCon p.topImage { font-size: 26vw; }
      #topCon p.topImage2 { font-size: 1vw; }
  }
  @media screen and (max-width : 1100px){
      #topCon p.topImage { font-size: 25vw; }
      #topCon p.topImage2 { font-size: 1vw; }
  }
  @media screen and (max-width : 1000px){
      #topCon p.topImage { font-size: 24vw; }
      #topCon p.topImage2 { font-size: 0.5vw; }
  }
  @media screen and (max-width : 900px){
      #topCon p.topImage { font-size: 21vw; }
      #topCon p.topImage2 { font-size: 0.5vw; }
  }
  @media screen and (max-width : 768px){
      #topConInner { width:100%; }
      #topCon p.topImage { font-size: 30vw; }
      .top-left { width:100%; float:none; }
      .top-right { width:100%; float:none; }
  }
  @media screen and (max-width : 480px) {

      #topCon p.topImage { font-size: 32vw; }
      #topBox { width:95%; float:none; }
      #topBox h2 { width:80%; margin:0 9%; }
  }

#midCon { clear:both;width:96%;margin:0 auto; position:relative; padding-top:30px; } 
#midConInner { max-width:1150px;margin:0 auto; }

  @media screen and (max-width : 768px){
      #midConInner {  max-width:100%; } 
      #midCon.contact-sp { padding-top:50%; }
  }
  @media screen and (max-width : 480px) {
      #midCon.top-first { padding-top:0px; } 
      #midCon.contact-sp { padding-top:50%; }
  }

#topBox2 { width:94%; margin:10px auto; padding:10px;background:url(/image/top010.jpg) no-repeat center right;
          border:1px #ccc solid;border-radius:20px; position:relative; }

#topBox2 h2 { width:200px; color:#fff;margin:0px;padding:10px;border:none;
             display:block;background-color:rgba(50,50,50,0.7); }

#topBox2 .topConText { font-size:14px; text-align:left; padding:2%; }

#topBox4 { width:94%; margin:10px auto; padding:10px;background:url(/image/top021.jpg) no-repeat center right;
          border:1px #ccc solid;border-radius:20px; position:relative; }
#topBox4 .topConText { font-size:14px; text-align:left; padding:2%; }
#topBox4 .introduction { width:48%; }

#service { padding:30px 0px;margin-top:20px; color:#fff;position:relative;
	background:url(/image/top002.jpg); 
	-webkit-background-size:cover;	-moz-background-size:cover;
	-o-background-size:cover;	background-size:cover;
	background-attachment:fixed; }
#service:before { content:"";width:100%;height:100%;position:absolute;top:0px;left:0px;
	display:block;background-color:rgba(102,102,102,0.7);z-index:0;}

#service div.midBox { float:left; width:46%; margin:10px 0.5%; padding:1%;
          border:2px #fff solid; border-radius:10px;  }
#service div.midBox .midConText { width:50%; }
#service p.midPic { float:right; width:40%; }
#service div.midBox img { max-width:200px; width:100%; }
#service div.midBox ul { list-style-type: circle; margin-left:30px; font-size:14px; float:left; }

#service h3 { color:#fff;margin:0px auto; }
.midConText { font-size:14px;width:100%; }
.midConText span { margin-left:0px; }

  @media screen and (max-width : 1200px){
      #service div.midBox { height:280px; }
      #service p.midPic { float:none; width:96%; }
  }
  @media screen and (max-width : 1110px){
      #service div.midBox { height:300px; }
  }
  @media screen and (max-width : 920px){
      #service div.midBox { height:320px; }
  }
  @media screen and (max-width : 860px){
      #service div.midBox { height:350px; }
  }
  @media screen and (max-width : 768px){
      #service div.midBox { height:370px; }
      #topBox2 { background:url(/image/top011.jpg) no-repeat center right; }
	   #topBox4 { background:url(/image/top021m.jpg) no-repeat center right; }
      #service div.midBox { float:none; width:96%; }
      .midConText { font-size:14px;width:96%; }
  }

  @media screen and (max-width : 480px) {
      .midConText span { margin-left:50px; }
      #service div.midBox { float:none; width:96%; margin:10px 0.5%; padding:1%;  }
      #service p.midPic { float:none; }
	   #topBox2 .introduction { width:100%; }
      #topBox3 .introduction2 { width:100%; }
	   #topBox4 .introduction { width:100%; }
  }

#topBox3 { width:94%; margin:10px auto; padding:10px;
	background:url(/image/top-arrow.png) no-repeat top right;
          border:1px #ccc solid;border-radius:20px; position:relative; }

#topBox3.pinoy { background:none; }

#topBox3 h2 { width:200px; color:#fff;margin:0px;padding:10px;border:none;
             display:block;background-color:rgba(50,50,50,0.7); }
#topBox3 h3 { color:#fff;margin:0px;padding:5px;border:1px #0000ff solid; background:#9999ff; font-size:16px;}
#topBox3 h3.dress { color:#fff;margin:0px;padding:5px;border:1px #ff0000 solid; background:#ff9999; font-size:16px;}

#topBox3 .topConText { font-size:14px; text-align:left; padding:2%; }
.shadow { text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff,
              2px 2px 2px #fff, -2px -2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff;}

#topBox3 .topBox-left { width:43%; margin:0 1%; float:left; }
#topBox3 .topBox-right { width:53%; margin:0 1%; float:right; }
#topBox3 .topBox-left2 { width:53%; margin:0 1%; float:left; }
#topBox3 .topBox-right2 { width:43%; margin:0 1%; float:right; }
#topBox3 .topBox-left3 { width:48%; margin:0 1%; float:left; }
#topBox3 .topBox-right3 { width:48%; margin:0 1%; float:right; }

#topBox3 .youtube-ch{
    width: 50%;
    max-width: 450px;
    background: #ff0000;
    border-radius: 10px;
    text-align: left;
    margin: 20px 10px 30px auto;
}
@media screen and (max-width : 768px){
	#topBox3 .youtube-ch{
		width: 80%;
	}
}
@media screen and (max-width : 480px){
	#topBox3 .youtube-ch{
		width: 96%;
        margin: 20px auto 30px 10px;
	}
}

table.box3Table { font-size:14px; width: 100%; margin: 0 auto;  }
table.box3Table th { width: 25%; background: #295890; vertical-align: middle; text-align: left; 
         overflow: visible; position: relative; color: #fff; padding:12px 0 12px 5px;}
table.box3Table th:after { left: 100%; top: 50%; border: solid transparent; content: " ";
          height: 0; width: 0; position: absolute; pointer-events: none;
          border-color: rgba(136, 183, 213, 0); border-left-color: #295890;
          border-width: 10px;  margin-top: -10px; }
table.box3Table td { background: #f8f8f8; width: 25%; padding-left: 20px; }

table.box3Table2 { font-size:14px; width: 100%; margin: 0 auto;  }
table.box3Table2 td.t1 { background: #447791; width: 25%;  }
table.box3Table2 td.t2 { background: #5893b1; width: 25%;  }
table.box3Table2 td.t3 { background: #7cacc2; width: 25%;  }
table.box3Table2 td.t4 { background: #a0c2d3; width: 25%;  }

  @media screen and (max-width : 768px){
      #topBox3 { background:url(/image/top-arrow.png) no-repeat top right; }
      #topBox3 .topIframe img{ padding:5px 0;} 

      #topBox3 .topBox-left { width:98%; margin:0 1%; float:none; }
      #topBox3 .topBox-right { width:98%; margin:0 1%; float:none; }
      #topBox3 .topBox-left2 { width:98%; margin:0 1%; float:none; }
      #topBox3 .topBox-right2 { width:98%; margin:0 1%; float:none; }
      #topBox3 .topBox-left3 { width:98%; margin:0 1%; float:none; }
      #topBox3 .topBox-right3 { width:98%; margin:0 1%; float:none; }
  }

#topBox5 { width:94%; margin:10px auto; padding:10px;
          border:1px #ccc solid;border-radius:20px; position:relative; }
#topBox5 h2 { width:200px; color:#fff;margin:0px;padding:10px;border:none;
            display:block;background-color:rgba(50,50,50,0.7); }
#topBox5 .topConText { font-size:14px; text-align:left; padding:2%; }


#topBox6 { width:94%; margin:10px auto; padding:10px; 
          border:1px #ccc solid;border-radius:20px; position:relative; }
#topBox6 .topConText { font-size:14px; text-align:left; padding:2%; color:#fff; }
.shadowB { text-shadow: 1px 1px 1px #333, -1px -1px 1px #333, -1px 1px 1px #333, 1px -1px 1px #333,
              2px 2px 2px #333, -2px -2px 2px #333, -2px 2px 2px #333, 2px -2px 2px #333; }

/*-------------------------------------
	  Top YouTube
-------------------------------------*/
.youtubeBox { width:48%; margin:0 1%; }
.youtube { position: relative; margin:0 1%; width: 98%; padding-top: 56%; }
.youtube iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
  @media screen and (max-width : 480px){
      .youtubeBox { width: 98%; margin:1%;  }
  }
/*-------------------------------------
	  Top Bottom Button
-------------------------------------*/
.topBottomBtn { width:110px; font-size:18px;font-weight:bold;padding:6px 40px 5px;text-decoration:none;color:#333;
                margin:0 0 0 50px; border:1px #ff9999 solid;border-radius:15px;margin-bottom:40px;
                background:linear-gradient(#feebeb, #ffcccc); }
.topBottomBtn:hover { cursor:pointer; background: #fff; transition-property: all;
         transition: 0.3s linear; }

/*-------------------------------------
	   Bottom Banner
-------------------------------------*/
.banner { display:flex; flex-wrap:wrap; margin:20px 0; }
.banner p { float:left; width:33%; }
.banner p img { width:100%; }
/*-------------------------------------
	   About Us
-------------------------------------*/
#aboutUs { padding:30px 0px;margin-top:0px;color:#fff;position:relative;margin:20px 0 0 0;
	background:url(/image/top003.jpg);
	-webkit-background-size:cover;	-moz-background-size:cover;
	-o-background-size:cover;	background-size:cover;
	background-attachment:fixed; }
#aboutUs:before { content:"";width:100%;height:100%;position:absolute;top:0px;left:0px;
	display:block;background-color:rgba(98,45,24,0.6);z-index:0; }
.aboutConText { width:80%; margin:20px auto; font-size:14px; line-height:2em; }

#pinoy-worker { padding:30px 0px;margin-top:0px;color:#fff;position:relative;margin:20px 0 0 0;
	background:url(/image/top017.jpg);
	-webkit-background-size:cover;	-moz-background-size:cover;
	-o-background-size:cover;	background-size:cover;
	background-attachment:fixed; }
#pinoy-worker:before { content:"";width:100%;height:100%;position:absolute;top:0px;left:0px;
	display:block;background-color:rgba(51,51,50,0.6);z-index:0; }

#topBox3.school { font-size:14px; background:none; }
#topBox3.school span { font-weight:bold; } 
.boxCircle { width:100%; margin: 0 auto; text-align:center; }
.boxCircle1 { float:left; margin:10px 0 10px 120px; background:#ffeaeb; border-radius:50px; padding:20px; 
             border:1px #ffcccc solid; }
.boxCircle2 { float:right; margin:70px 50px 50px 0; background:#eaeaff; border-radius:50px; padding:20px;
             border:1px #ccccff solid; }
.boxCircle3 { float:left; margin:10px; background:#eaffea; border-radius:50px; padding:20px; 
             border:1px #ccffcc solid; }
.boxCircle4 { float:right; margin:50px 10px; background:#fdffea; border-radius:50px; padding:20px; 
             border:1px #ffff99 solid; }
.boxCircle5 { float:left; margin:10px 0 10px 40px; background:#ececec; border-radius:50px; padding:20px;
             border:1px #ccc solid; }

  @media screen and (max-width : 768px){
      .boxCircle { width:100%; margin: 0; }
      .boxCircle p img { width:100%; }
  }
  @media screen and (max-width : 480px) {
      table.box3Table2 { font-size:12px; }
      #topBox3 .topBox-left { width:98%; margin:0 1%; float:none; }
      #topBox3 .topBox-right { width:98%; margin:0 1%; float:none; }
      #topBox3 .topBox-left2 { width:98%; margin:0 1%; float:none; }
      #topBox3 .topBox-right2 { width:98%; margin:0 1%; float:none; }
      .aboutConText { width:96%; } 
      #topBox3.school { background:none; }
      .boxCircle1 { float:none; margin:10px 0; }
      .boxCircle2 { float:none; margin:10px 0; }
      .boxCircle3 { float:none; margin:10px 0; }
      .boxCircle4 { float:none; margin:10px 0; }
      .boxCircle5 { float:none; margin:10px 0; }
  }
/*-------------------------------------
	   Page Contents
-------------------------------------*/
#pageCon { margin-top:58%; }
#pageBox { width:94%; margin:10px auto; padding:10px;background:#fff;
          border:1px #ccc solid;border-radius:20px; position:relative; }
.pageBox-left { float:left; width:58%; padding:1%; }
.pageBox-right { float:right; width:38%; padding:1%; }
.pageBox-right img { width:100%; border-radius: 20px; }

  @media screen and (max-width : 1300px){
      #pageCon { margin-top:56%; }
  }
  @media screen and (max-width : 900px){
      #pageCon { margin-top:55%; }
  }
  @media screen and (max-width : 768px){
      #pageCon { margin-top:50%; }
  }
  @media screen and (max-width : 480px) {
      #pageCon { margin-top:50%; }
  }
/*-------------------------------------
	   About Us
-------------------------------------*/
#aboutBox { width:94%; margin:0px auto 30px auto; padding:10px;background:url(/image/top014.jpg) no-repeat center right;
          border:1px #ccc solid;border-radius:20px; position:relative; background-size:contain; }
.aboutConLeft { float:left;width:15%; margin:20px 0 30px 3%;line-height:2em;}
.aboutText { padding: 20px 20px 10px 0px; }
.aboutConRight { float:left;width:80%;margin:20px 0 30px 0;line-height:2em; }
.schoolConMap { float:left; padding:2% 1%; width:48%; }
.schoolConMap img { width: 100%; }
#aboutBox h4 { clear:both; color: #009900; }
  @media screen and (max-width : 768px){
      #aboutBox { background:none; text-shadow:1px 1px 2px #fff,1px -1px 2px #fff,-1px 1px 2px #fff,-1px -1px 2px #fff; }
      .aboutConLeft { float:left;width:25%; }
      .aboutConRight { float:right;width:65%; }
      .schoolConMap { text-align:center; }
      .schoolConMap img { margin-top:20px; }
  }
  @media screen and (max-width : 480px) {
      .aboutConLeft { float:left;width:30%; }
      .aboutConLeft span { font-size:13px; }
      .aboutConRight { float:right;width:67%; }
	  .schoolConMap { float:none; width:98%; }
      .schoolConMap img { width:100%; }
  }
.ajuyPic { display:flex; }
.ajuyPic p { margin:1px 1px 0 0; }
.ajuyPic img { width:100%; }
/*-------------------------------------
	   Teacher
-------------------------------------*/
h1.teacher { padding-top:30px; width:50%; }
#teacherCon { padding-top:57%; }
#teacherBox { width:calc(50% - 42px); float:left; margin:10px; padding:10px;background:#fff;
          border:1px #ccc solid;border-radius:20px; }
#teacherBox .pageBox-left { float:left; width:38%; padding:1%; }
#teacherCon h4 { text-align:left; }
#teacherBox .pageBox-left img { width:100%; border-radius:20px; }
#teacherBox .pageBox-right { font-size:12px; float:right; width:58%; padding:1%; text-align:left; }
#teacherBox .pageBox-right span { font-size:14px; font-weight:bold; }

.staffBox { clear:both; display:flex; flex-wrap:wrap; 
     margin:10px; padding:10px;background:#fff;
          border:1px #ccc solid;border-radius:20px; }
.staffBox p { width:18%; margin:2% 3.5% 0; 
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 3em;
}
.staffBox p  img { width:100%; border-radius:20px; }

#service div.teachBox { float:left; width:46%; margin:10px 0.5%; padding:1%;
          border:2px #fff solid; border-radius:10px; max-height:220px;height:auto; }
#service div.teachBox2 { float:left; width:46%; margin:10px 0.5%; padding:1%;
          border:2px #fff solid; border-radius:10px; height:auto;width:95.5%; }
#service div.teachBox2 img { max-width:46%; margin:0 2%; }

  @media screen and (max-width : 1200px){
      #service div.teachBox { max-height:none; }
      #service div.teachBox img { width:80%; margin:0 10%; }
  }
  @media screen and (max-width : 768px){
      #teacherCon { padding-top:47%; }
      #teacherBox .pageBox-left { float:none; width:98%;  }
      #teacherBox .pageBox-right { float:none; width:98%; }
  }
  @media screen and (max-width : 480px) {
      h1.teacher { font-size:20px; padding-top:0px; width:100%; }
      #teacherCon { padding-top:37%; }
      #teacherBox { width:calc(100% - 42px); float:none; }
      #service div.teachBox { float:none; width:96%; max-height:none; }
      #service div.teachBox2 { float:none; width:96%; max-height:none; }
      #service div.teachBox2 img { max-width:96%; margin:10px 2%; }
  }
/*-------------------------------------
	   CONTACT
-------------------------------------*/
.contactConLeft { float:left;width:48%;  }
.contactText { padding: 20px 20px 10px 50px; }
.contactConRight { float:right;width:48%; }
h3.contactTitle { }
#contactForm { margin:20px 0px 20px 50px; }
.contactLeft { width:200px;float:left;margin:3px; text-align:left;}
.contactRight { margin:5px 14px; }
.contactRight input, .contactRight textarea { width:90%;}
.submitBtn { margin-left:200px;}
#contactForm table { table-layout:fixed; }
#contactForm .formTable { width:80%;margin:10px auto 10px auto;
         border-spacing:0;border-collapse:collapse; }
#contactForm .formTable td { width:70%;padding:5px 20px 5px 20px;word-wrap:break-word; }
#contactForm .formTable th { width:30%;padding:5px 20px 5px 20px; }
.contact-under { height:250px; }

.location { padding: 10px 10px 10px 40px; }
.location ol  { counter-reset:li; padding:0; list-style:none; margin:0 0 20px 50px; }
.location ol li {  position:relative;    margin:10px 0 0px 50px;     padding:0px 8px;
         border-bottom:1px solid #999;   background:#f6f6f6; }
.location ol li:before { content:counter(li);  counter-increment:li;   position:absolute;
        left:-18px;    width:18px;    padding:2px 0 2px 0;    border-top:1px solid #999;border-bottom:1px solid #999;
        color:#fff;    background:#999;    font-weight:bold;    font-family:"Helvetica Neue", Arial, sans-serif;
        text-align:center; }

  @media screen and (max-width : 768px) {
     #contactForm { margin:30px 0px 20px 0px; }
     h3.contactTitle { margin-left:0px; }
     .contactText { padding: 20px 20px 10px 0px; }
     .contactRight input, .contactRight textarea { width:100%;}
     .submitBtn { margin-left:40%;}
     .contact-under { height:100px; }
  }
  @media screen and (max-width : 480px) {
     .contactConLeft { float:none;width:100%; }
     .contactText { padding: 20px 20px 10px 10px; }
     .contactConRight { float:none;width:100%; }
     h3.contactTitle { margin-left:0px; }
     #contactForm .formTable { width:98%;margin:1% auto;
         border-spacing:0;border-collapse:collapse; }
     .contactRight input, .contactRight textarea { width:100%;}
     .history ol { margin-left:10px; }
     .location { padding: 10px 10px 10px 10px; }
     .location ol  { margin-left:0px; }
     .location ol li { margin:10px 0 0px 10px; }
  }

.outlineLeft { float:left;width:25%;padding-left:10%; }
.outlineText { padding: 20px 20px 10px 0px; }
.outlineRight { float:right;width:65%; }
.outlineLeft li { margin-left:20px; }
.organization { text-align:center; }
  @media screen and (max-width : 768px) {
     .outlineLeft { clear:both;width:25%; }
     .organization img { width:100%; }
  }
  @media screen and (max-width : 480px) {
     .outlineLeft { clear:both;float:none;width:100%;padding-left:0; }
     .outlineText { padding: 20px 20px 10px 0px; }
     .outlineRight { float:none;width:90%;padding-left:10%; }
  }

/*-------------------------------------
	    Page Top
-------------------------------------*/
#page-top { display: block;  position: fixed;  z-index: 9999;  bottom: 10px;
  right: 10px;  width: 100px;  padding: 20px 10px;  background:#555;
  color: #fff;  text-align: center;  text-decoration: none; }
#page-top:hover{   background: rgba(0,0,0,.8); }
  @media screen and (max-width : 480px) {
      #pageTop { display: none; }
  }
/*-------------------------------------
	     Footer
-------------------------------------*/
footer { width:100%;text-align:center;margin:0px auto 0px auto;padding:10px 0 30px 0;
         background:#323333;}

#footer-inner { max-width:1150px;margin:0px auto 0px auto;padding:0; }
#footerGroup { width:250px;float:left;padding:0 1%; }
#footerGroupB { width:70% ; float:left;padding:0 1%;
         width : -webkit-calc(100% - 250px - 4%) ;width : calc(100% - 250px - 4%) ; }


footer li { color:#fff; }
footer li a { display:block;text-decoration:none;}
footer li a:link { color:#fff;}
footer li a:visited{ color:#fff;text-decoration:none;}
footer li a:hover{ color:#ff0000;text-decoration: none;}

#footerGroup ul { text-align:left;font-size:12px; }
#footerGroup li { padding:5px 0px; }

#footerGroupB ul { text-align:left;font-size:12px; }
#footerGroupB li { float:left;width:20%;padding:5px 0px;text-align:center; }

  @media screen and (max-width : 768px){
      #footer-inner { max-width:100%; } 
      #footerGroup { width:25%;float:left; }
      #footerGroupB { width:70% ; float:left;padding:0 1%;
         width : -webkit-calc(100% - 25% - 4%) ;width : calc(100% - 25% - 4%) ; }
  }
  @media screen and (max-width : 480px) {
      #footer-inner { width:98%;margin:0 1%; } 
      #footerGroup {  width:98%; }
      #footerGroupB {  display:none; }
  }