@charset "utf-8";

/* ·¹À̾ƿô */
#nav {width: 100%; height:110px; background: rgba(255, 255, 255, 0.8); z-index: 1000;}
#title {width: 100%; margin: 200px 0 50px 0; float: left;}
#title-top {width: 100%; margin: 0 0 50px 0; float: left;}
#contents {width: 100%; }
#footer {width: 100%; height: 150px; clear: both; background: #dcdcdc;}

/* ¸Þ´º */
#nav > iframe {width:100%; height: 350px;}

/* article »ó´Ü¹®±¸ */
#title .title .ttl-name {position: relative; font-size: 30px; padding: 20px 0; background: #e8f5e9 ;}
#title .title .ttl-name span {position: absolute; left: 20px; top: 0px; color: #139c4f; font-size: 50px; }
#title .title .ttl-name .fnt {font-size: 24px;}
#title .title .ttl-desc {font-size: 20px; padding: 20px;}
#title .title .ttl-en {font-size: 15px; text-transform: uppercase; color: #e1bee7; border-bottom: 1px solid #e1bee7; border-top: 1px solid #e1bee7; margin: 0px 100px 20px 100px; padding: 10px; letter-spacing: 15px; font-family: 'Lobster', cursive;}

@media (max-width: 800px){

}

/* article »ó´Ü¹®±¸1 */
#title-top .logo {height: 150px;}
#title-top .ttl {position: relative; padding: 20px 0; background: #e8f5e9 ;}
#title-top .ttl h1 {font-size: 24px; font-weight: bold;}
#title-top .ttl h1 span {position: absolute; left: 20px; top: 0px; color: #139c4f; font-size: 50px; }
#title-top .ttl-desc {padding: 20px;}
#title-top .ttl-desc p {font-size: 20px;}
#title-top .ttl-en {font-size: 15px; text-transform: uppercase; color: #e1bee7; border-bottom: 1px solid #e1bee7; border-top: 1px solid #e1bee7; margin: 0px 100px 50px 100px; padding: 10px; letter-spacing: 15px; font-family: 'Lobster', cursive;}

@media (max-width: 800px){
	#title-top .ttl h1 {font-size: 30px;}
	#title-top .ttl-desc p {font-size: 18px;}
	#title-top .ttl-en {margin: 0;}
}

/* section ÄÁÅÙÃ÷ */
.container {width: 1200px; margin: 0 auto;}
.container ul li iframe {width: 1200px; height: 700px;}

@media (max-width: 1200px){
	.container {width: 100%; }
	.container ul li iframe {width: 100%; height: 700px;}
}
@media (max-width: 1000px){
	.container ul li iframe {height: 600px;}
}
@media (max-width: 800px){
	.container ul li iframe {height: 500px;}
}
@media (max-width: 600px){
	.container ul li iframe {height: 400px;}
}
@media (max-width: 480px){
	.container ul li iframe {height: 400px;}
}

/* ǪÅÍ */
#footer > iframe {width: 100%; }