@charset "utf-8";

@import url("../../style/base.css");

@import url("structure.css");

/*====================================================
------------------------------------------------------
	 main.css
------------------------------------------------------
====================================================*/

/*================= contents menu ============

	1: pageImg
	
	2: common
	   - h2
		- h3
		- text
			- .w90Br
			- .w90
			- .w100Br
			- .w100Br
			- .s85Br
			- .s85
			
			
	*3: Top  ID:etop
	
	4: Introduction  ID:intro
	
	5: CharacteristicOfLearning  ID:chara

	6: SchoolLife  ID:life
	
	7: ApplicationGuidebook  ID:app

	8:Village  ID:vill
	
	:areaE 
	  - copy

	
============================================== */

/*====================================================
	1: pageImg
====================================================*/

#etop #areaB { background: url(../img/pageImg.jpg);}

#intro #areaB { background: url(../Introduction/img/pageImg.jpg);}
#chara #areaB { background: url(../CharacteristicOfLearning/img/pageImg.jpg);}
#life #areaB { background: url(../SchoolLife/img/pageImg.jpg);}
#app #areaB { background: url(../ApplicationGuidebook/img/pageImg.jpg);}

#pageImg { width: 175px; height: 295px; background: url(../c_img/pageImg.jpg) no-repeat; text-indent: -9876em; margin: -10px 0 0 0;}


/*====================================================
	2: common
====================================================*/
h2 { width: 545px; text-indent: -9876em; margin: 0 0 10px 0; background: no-repeat;} 
h3 { width: 545px; height: 30px; text-indent: -9876em; margin: 0 0 15px 0; background: no-repeat;} 


/*
  -text
====================================================*/
/*
	- w = width
	- s = font size
	- R = text align Right
*/	

p { padding: 0 0 .8em 0;}
.w90 { width: 90%;}
.s85 { font-size: .765em;}
.s85R { font-size: .765em; text-align: right;}
.w100R { width: 100%; text-align: right;}
.w100s85R { width: 100%; text-align: right; font-size: .765em;  }

/*
  -other
====================================================*/

.left { float: left;}
.right { float: right;}
#areaC ul { padding-bottom: .8em }

.rowSet { width: 545px;}
.rowSet:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
   .rowSet  {
         display: inline-table;
     }
 /**/




/*====================================================
	3: Top  ID:stop
====================================================*/
#etop #areaA { width: 765px; height: 74px;  padding: 0; margin: 0 auto; position: relative; background: url(../c_img/bgAreaA.gif) no-repeat;}
#etop .goToTop { margin: 0 10px 15px auto;} 

.btTopTopics  { float: left; display: block; width: 225px; height: 167px; background: url(../img/btTopTopics.jpg) 0 0 no-repeat; padding: 0; margin: 0 0 15px 0; overflow:hidden;}
/*\*//*/
 overflow:auto;
/**/
.btTopTopics  a { display: block; width: 225px; height: 167px;  text-indent: -9876em;}
.btTopTopics  a:hover { background: url(../img/btTopTopics.jpg) -225px 0;}

.btTopVill  { float: right; display: block; width: 300px; height: 167px; background: url(../img/btTopVill.jpg) 0 0 no-repeat; padding: 0; margin: 0 0 15px 0; overflow:hidden;}
/*\*//*/
 overflow:auto;
/**/
.btTopVill  a { display: block; width: 300px; height: 167px;  text-indent: -9876em;}
.btTopVill  a:hover { background: url(../img/btTopVill.jpg) -300px 0;}


.bN01  { clear: both; display: block; width: 545px; height: 100px; background: url(../img/bNblog.jpg) 0 0 no-repeat; padding: 0; margin: 15px 0; overflow:hidden;}
/*\*//*/
 overflow:auto;
/**/
.bN01 a { display: block; width: width: 450px; height: 100px;  text-indent: -9876em;}



/*====================================================
	4: Introduction  ID:intro
====================================================*/

#intro h2 { height: 35px; background: url(../Introduction/img/e01_h2.gif);}
#intro h3.e01_h3_00 { height: 35px; background: url(../Introduction/img/e01_h3_00.gif);}
#intro h3.e01_h3_01 { height: 25px; background: url(../Introduction/img/e01_h3_01.gif); margin: 20px 0 10px 0;}
#intro h4 { height: 130px; background: url(../Introduction/img/e01_h4_00.jpg); text-indent: -9876em; margin: 0 0 10px 0;}

#intro #areaC .left { margin: 0 5px 0 0;}
#intro #areaC span { display: block; font-size: .765em;}


/*====================================================
	5: CharacteristicOfLearning  ID:chara
====================================================*/

#chara h2 { height: 35px; background: url(../CharacteristicOfLearning/img/e02_h2.gif);}
#chara h3.e02_h3_00 { height: 35px; background: url(../CharacteristicOfLearning/img/e02_h3_00.gif);}
#chara h3#e02_h3_01 { height: 65px; background: url(../CharacteristicOfLearning/img/e02_h3_01.gif); margin-bottom: 0;}
#chara h3#e02_h3_02 { height: 65px; background: url(../CharacteristicOfLearning/img/e02_h3_02.gif); margin: 0;}
#chara h3#e02_h3_03 { height: 65px; background: url(../CharacteristicOfLearning/img/e02_h3_03.gif); margin: 0;}
#chara h3#e02_h3_04 { height: 65px; background: url(../CharacteristicOfLearning/img/e02_h3_04.gif); margin: 0;}
#chara h3.e02_h3_05 {width: 530px; height: 30px; background: url(../CharacteristicOfLearning/img/e02_h3_05.gif) no-repeat;}

#chara h4 { color: #fff; font-weight: bold; margin: 0 0 10px 0; padding: 0 0 0 10px}
#chara h4.gold {width: 535px; background: #a09500;}
#chara h4.blue { width: 250px; background: #3071b8;}

#chara #areaC dl.line { width: 525px; background: #fffef7 url(../c_img/line1_30.gif) 210px 0 repeat-y; border: 1px solid #ccc; padding: 10px; margin: 0 0 5px 0;}
#chara #areaC dl.line dd:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
     #chara #areaC dl.line dd {
         display: inline-table;
     }
 /**/
#chara #areaC dl.line dd img { float: left; margin-right: 20px;}
#chara #areaC dl.line dd p { padding-bottom: 0;}
#chara #areaC dl.line dd p strong { display: block;}

#chara #areaC dl.noline { width: 545px; margin: 10px 0;}
#chara #areaC dl.noline dd:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
     #chara #areaC dl.noline dd {
         display: inline-table;
     }
 /**/
#chara #areaC dl.noline dd img { float: right; margin: 0 0 0 5px;}
#chara #areaC dl.noline dd div { float: left; width: 250px;}




#chara #areaC .blueLine { width: 247px; border: 1px solid #3071b8; padding: 3px; line-height: 120%; margin: 15px 0 0 0}
#chara #areaC .goldLine { width: 247px; border: 1px solid #a09500; padding: 3px; line-height: 120%; margin: 15px 0 0 0}
#chara #areaC .blueLineBox { width: 535px; background: #ebf6fd; border: 1px solid #3071b8; padding: 5px; margin: 30px 0 0 0;}
#chara #areaC .blueLineBox:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
     #chara #areaC .blueLineBox {
         display: inline-table;
     }
 /**/
#chara #areaC .blueLineBox p img { margin: 25px 0 0 0}

#chara #areaC .right { margin: 0 0 0 5px;}

.e02_Do4 { width: 545px; height: 380px; background: url(../CharacteristicOfLearning/img/e02_00.gif) 50% 0 no-repeat; position: relative; margin: 0 0 30px 0}
.e02_Do4  p { padding-top: 270px; line-height: 120%;}

.e02_bt01 { width: 63px; height: 15px; position: absolute; top: 70px; left: 45px;}
.e02_bt01 a { display: block; width: 63px; height: 15px; background: url(../CharacteristicOfLearning/img/e02_bt01_down.gif) 0 0 no-repeat;}
.e02_bt01 a:hover, .e02_bt02 a:hover, .e02_bt03 a:hover, .e02_bt04 a:hover { background-color: #fff; /* IE6ذ */}
.e02_bt01 a:hover img, .e02_bt02 a:hover img, .e02_bt03 a:hover img, .e02_bt04 a:hover img { visibility: hidden;}

.e02_bt02{ width:79px; height: 15px; position: absolute; top: 75px; left: 295px;}
.e02_bt02 a { display: block; width:79px; height: 15px; background: url(../CharacteristicOfLearning/img/e02_bt02_down.gif) 0 0 no-repeat;}

.e02_bt03 { width: 79px; height: 35px; position: absolute; top: 170px; left: 143px;}
.e02_bt03 a { display: block; width: 79px; height: 35px; background: url(../CharacteristicOfLearning/img/e02_bt03_down.gif) 0 0 no-repeat;}

.e02_bt04 { width: 79px; height: 35px; position: absolute; top: 275px; left: 330px;}
.e02_bt04 a { display: block; width: 79px; height: 35px; background: url(../CharacteristicOfLearning/img/e02_bt04_down.gif) 0 0 no-repeat;}


#chara .goToTop { margin: 15px 0 40px auto;} 


/*====================================================
	6: SchoolLife  ID:life
====================================================*/

#life h2 { height: 35px; background: url(../SchoolLife/img/e03_h2.gif);}
#life h3.e03_h3_00 { height: 65px; background: url(../SchoolLife/img/e03_h3_00.gif);}
#life h4.e03_h4_00 { height: 30px; background: url(../SchoolLife/img/e03_h4_00.gif); text-indent: -9876em}


#life .rowSet { border-top: 1px solid #ccc; padding: 15px 0;}
#life .rowSet dd { width: 125px; float: left; margin: 0 15px 0 0;}
#life .rowSet dd.last { margin: 0;}
#life .rowSet dd span { display: block; font-size: .765em; padding-top: .2em; line-height: 110%;}


/*====================================================
	7: ApplicationGuidebook  ID:app
====================================================*/

#app h2 { height: 35px; background: url(../ApplicationGuidebook/img/e04_h2.gif);}
#app h2.h2_02 { height: 35px; background: url(../ApplicationGuidebook/img/e04_h2_02.gif);}
#app h3 { height: 25px; margin: 30px 0 8px 0;}
#app h3.e04_h3_01 { background: url(../ApplicationGuidebook/img/e04_h3_01.gif); margin-top: 0px;}
#app h3.e04_h3_02 { background: url(../ApplicationGuidebook/img/e04_h3_02.gif);}
#app h3.e04_h3_03 { background: url(../ApplicationGuidebook/img/e04_h3_03.gif);}
#app h3.e04_h3_04 { background: url(../ApplicationGuidebook/img/e04_h3_04.gif);}
#app h3.e04_h3_05 { background: url(../ApplicationGuidebook/img/e04_h3_05.gif);}
#app h3.e04_h3_06 { background: url(../ApplicationGuidebook/img/e04_h3_06.gif);}
#app h3.e04_h3_07 { background: url(../ApplicationGuidebook/img/e04_h3_07.gif);}
#app h3.e04_h3_08 { background: url(../ApplicationGuidebook/img/e04_h3_08.gif);}
#app h3.e04_h3_09 { background: url(../ApplicationGuidebook/img/e04_h3_09.gif);}
#app h3.e04_h3_10 { background: url(../ApplicationGuidebook/img/e04_h3_10.gif);}
#app h3.e04_h3_11 { background: url(../ApplicationGuidebook/img/e04_h3_11.gif);}

table { width: 545px; margin: 0 auto; padding: 0; border-top: 1px solid #3071b8;}
table th { width: 15%; background: #eff7ff; border-left: 1px solid #3071b8; border-right: 1px solid #3071b8; border-bottom: 1px solid #3071b8; font-weight: normal; padding: 10px 5px 10px 10px;}
table td { width: 85%;background: #fff; border-right: 1px solid #3071b8; border-bottom: 1px solid #3071b8; padding: 10px 5px 10px 15px;}
table tbody.w50 td { width: 50%; border-left: 1px solid #3071b8; border-right: 1px solid #3071b8; border-bottom: 1px solid #3071b8; }
table tbody.w50 td.noline, th.noline { border-left: none; }
thead th { text-align: center;}

ul.dotBlue li { background: url(../c_img/pmDotBlue.gif) 0 .3em no-repeat; padding-left: 15px; }

span.sp1 { padding-left: 1em;}
span.sp2 { padding-left: 2em;}
span.sp3 { padding-left: 3em;}
span.sp4 { padding-left: 4em;}


/*====================================================
	8:Village  ID:vill
====================================================*/

#vill h2 { height: 181px; background: url(../Village/img/e05_h2.gif);}
#vill h3.e05_h3_00 { text-indent: -9876em;}
#vill h3.e05_h3_01 { height: 35px; background: url(../Village/img/e05_h3_00.gif); text-indent: -9876em; margin-top: -10px;}
#vill h4 { background: #5aa572; color: #fff; font-weight: bold; margin: 0 0 10px 0; padding: 0 0 0 10px}

.upperImg { width: 545px; height: 564px; background: url(../Village/img/e05_00.jpg);}
.upperImg p { text-indent: -9876em;}

#vill .left { margin: 0 5px 0 0;}
#vill .rowSet { margin: 0 0 15px 0}
#vill .rowSet dl { width: 178px; float: left; margin: 0 5px 0 0;}
#vill .rowSet dl.last { margin: 0;}

/*====================================================
	 -areaE(footer)
====================================================*/
#areaE .copy { width: 95%; padding: 0 ; margin: 0 5px 2px auto; text-align: right; color: #fff; line-height: 1.3em;  position: absolute; bottom: 0; right: 0;}