.container-w {
  position: relative;
  width: 1200px;
	 height: 100%;
  width: 100%;
  
}

.image0 {
  display: block;
  width: 680px;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: white;


}

.container-w:hover .overlay {
  opacity: 1;
}


}
</style>



.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}


.mySlides {
    display:none
}
.slide {
    max-width:calc(100% - 100px); //set max width to 100% - 100px for scalability
    width: 680px;
    position:relative;
}
.mySlides {
    max-width:100%;
}

//center the arrow image within the black circle background
.w3-btn-floating > img {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}

//First center the buttons vertically.
.w3-btn-floating {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

//Pull prev button all the all the way to the left by setting right 100% and add a little extra spacing with margin
#prev {
    margin-right:10px;
    right:100%;
}
//Push next button all the all the way to the right by setting left 100% and add a little extra spacing with margin
#next {
    margin-left:10px;
    left:100%;
}


/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


div.button {
	opacity: 0;
	
}



div.c {
    text-align: right;
}div.c {
    text-align: right;
}div.c {
    text-align: right;
} div.c {
    text-align: right;
} 
IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
IMG.close {
 opacity: 0.7;}

* {
	margin: 0;
	padding: 0;
}

 html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
}


#container {
    position: ;
}

#img1 {
    position: absolute;
    top: 1250px;
	left: 2450px;
	right: 0 }

#img2 {
    position: absolute;
    top: 99px;
	left: 1535px;
	right: 0 }

#img3 {
    position: absolute;
    top: 710px;
	left: 2152px;
	right: 0 }

#img4 {
    position: absolute;
    top: 100px;
	left: 2145px;
	right: 0 }

#img5 {
    position: absolute;
    top: 1790px;
	left: 373px;
	right: 0 }
#img6 {
    position: absolute;
    top: 1850px;
	left: 1390px;
	right: 0 }

#lesson2-que1 {position: absolute;
    top: 773px;
	left: 373px;
	right: 0 
}

#lesson2-que2 {position: absolute;
    top: 1252px;
	left: 373px;
	right: 0 
}

#lesson4-water {position: absolute;
    top: 179px;
	left: 447px;
	right: 0 
}

#lesson4-mirror {position: absolute;
    top: 1628px;
	left: 348px;
	right: 0 
}
#lesson5-there {position: absolute;
    top: 662px;
	left: 425px;
	right: 0 
}
#lesson5-mon {position: absolute;
    top: 350px;
	left: 1180px;
	right: 0 
}
#lesson5-mr {position: absolute;
    top: 1450px;
	left: 1870px;
	right: 0 
}

#lesson6-my {position: absolute;
    top: 565px;
	left: 348px;
	right: 0 
}
#lesson6-fox {position: absolute;
    top: 900px;
	left: 348px;
	right: 0 
}
#lesson6-paris {position: absolute;
    top: 1580px;
	left: 1410px;
	right: 0 
}
#lesson7-jane {position: absolute;
    top: 2166px;
	left: 718px;
	right: 0 
}
#lesson7-at {position: absolute;
    top: 2167px;
	left: 1175px;
	right: 0 
}

#lesson7-co {position: absolute;
    top: 1830px;
	left: 430px;
	right: 0 
}

#lesson7-old {position: absolute;
    top: 678px;
	left: 2380px;
	right: 0 
}
#lesson8-ra {position: absolute;
    top: 1370px;
	left: 494px;
	right: 0 
}
#lesson8-son {position: absolute;
    top: 1012px;
	left: 2260px;
	right: 0 
}
#lesson8-ga {position: absolute;
    top: 1352px;
	left: 2258px;
	right: 0 
}

#lesson8-hw {position: absolute;
    top: 1640px;
	left: 2250px;
	right: 0 
}

#lesson9-da {position: absolute;
    top: 200px;
	left: 1275px;
	right: 0 
}

#lesson10-bu {position: absolute;
    top: 130px;
	left: 385px;
	right: 0 
}

#lesson11-ma {position: absolute;
    top: 890px;
	left: 1891px;
	right: 0 
}

#lesson11-lud {position: absolute;
    top: 2182px;
	left: 2017px;
	right: 0 
}



div{
  clear:both;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

mark { 
    background-color: #abd5ff;
    color: #666;
}

tab {
	padding-left:0.7em
}

div.lesson {
    text-indent: 10px;
}

p.righttag{position: relative;
	padding-left: 680px;
	width: ; 
	height: ;
border: none;}

p.readingrighttag{position: relative;
	padding-left: 600px;
	width: ;
	height: ;
border: none;}

p.indent2{
	padding-left: 290px;
	
}
p.indent3{
	padding-left: 377.5px;
	
}
p.indent4{
	padding-left: 500px;
	
}

p.right{
	text-align: right;
	padding-right: 500px;}

div.relative {
	}


h1 {  font-language-override: 'en', 'ko-KR';
	font-size: 16px;
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif' ;
	background: #fff;
	font-weight: normal;
	font-color: #666;

}

body { font-language-override: 'en', 'ko-KR';
	font-size: 16px;
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif' ;
	background: #fff;
	font-weight: normal;
	font-color: #666;
}

small {
		font-size: 14px;
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; color: #666; }
a:active { text-decoration: underline; color: #666; }
a:visited { text-decoration: none; color: #666; }
a:hover {
	text-decoration: underline;
}

a img { border: none; }


/* navbar=top menu bar */

body {margin:auto;
}



.navbar { 
  background-color: white;
  position: fixed;
  top: 0;
  padding: 16px 5px 3px 16px;
  width: 100%;	
	font-size: 16px;
}

.navbar a {
    
   padding: 16px 5px 3px 16px;
  line-height: 1.6;
	font-size: 16px;
	 width: 100%;	
}



.topnav-right {
 
}





#menu {
    width: 280px;
    overflow: scroll;
    top: 130px;
	
bottom: 0; 
	left: 0;
	position: fixed;
  

	line-height: 1.2;
}


#menu ul {
	
	list-style: none;
		margin:  0 32px 0;


}

#menu ul li.section-title { }


	img {
  float: left;
}


p.clear {
  clear: both;
}

p.text {
 width: 600px
}



#content {

	padding: 50 0 0 0;
	margin: 50px 20px 0 325px;

    top: 0;
	
}
#content2 {

    padding: 10px 0px 0px 1010px;
		list-style: none;
	width: 1500px;
position: fixed;
	line-height: ;


}

p.small {
  line-height: 1.95;
}

p.big {
  line-height: 2;
}

p.middle {
  line-height: 2.6;
}

p.m {
  line-height: 1.8;
}

p.s {
  line-height: 3.2;
}

#img-container p	{

	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 16px;
		font-weight: normal;
	
}

#once { clear: left; }


img.top {
    vertical-align: text-top;
}

img.bottom {
    vertical-align: text-bottom;
}

nav.site_menu a {
  text-decoration: none;
  color: #666;
}

body.contact a.current {
 
  text-decoration: underline;
  color: black;
}




/*post it*/
section { margin: 227px 20px 60px; }
#section_wrap { width: 100%; line-height: 1.3em; }
#section_wrap.program article { display: none; }
#section_wrap.calendar { margin-left: 25%; width: 75%; line-height: 1em; }
#section_wrap.category.notice .list { border-bottom: 1px solid #000; margin-bottom: 1em; padding-bottom: 1em; }
#sticker_wrap { top: 4%; left: 0; width: 100%;}
#stickers { top:130px !important;height: 0px !important;}
#drag_area { position: auto; margin: 20 0 0 200; height: 100% !important;}
#sticker_wrap .sticker { position: absolute; padding: 5px 5px 8px 8px;border: 0px solid none; background-color: #f1c534; cursor: none; font-size: 15px; text-align: left; opacity: 0.7;}
#sticker_wrap .sticker a { font-weight: normal; }
#sticker_wrap .sticker.notice { background-color: #f1c534;}
#sticker_wrap .sticker.red { background-color: #f1c534; }
#sticker_wrap .sticker.yellow { background-color: #f1c534; }
#sticker_wrap .sticker.aqua { background-color: #f1c534; }
#sticker_wrap .sticker.green { background-color: #f1c534; }
#sticker_wrap .sticker.blue { background-color: #f1c534; }
#sticker_wrap .sticker.orenge { background-color: #f1c534; }
#sticker_wrap .sticker.gray { background-color: #f1c534; }
#sticker_wrap .sticker.violet { background-color: #f1c534; }
#sticker_wrap .sticker.very { color: #f1c534; }
#sticker_wrap .sticker a.close { display: block; position: absolute; top: 0; right: 0; width: 18px; height: 18px; }
#sticker_wrap .sticker a.close img { display: block; width: 18px; height: 18px; }



/*button*/
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:none;color:none;background-color:none;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   


.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:none!important}
		

/*lesson dropdown bar*/



/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
 font-size: 16px;
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif' ;
	background: #fff;
	font-weight: normal;
	font-color: #666;
    font-size: 16px;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    outline: none;

}


}

/* Main content */
.main {
    margin-left: 200px; /* Same as the width of the sidenav */
    font-size: 16px; /* Increased text to enable scrolling */
    padding: 0px 10px;
	
}


/* container align*/
.dropdown-container {
    display: none;
    padding-left: 112px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
    float: right;
    padding-right: 8px;
}