@charset "utf-8";
/* ===================================================
	access CSS
====================================================== */

#access { background: url(../img/contents/contents_bg.gif)repeat-x center top,#000;}
#main_img { height: 300px; background: url(../img/access/title.jpg)no-repeat center top;}
#main_img h2 { position: absolute; right: 15%; top: 30%; z-index: 101;}

@media screen and (max-width: 768px) {
	#access #contents_wrap { width: 100%;}
	#access #contents_wrap #breadcrumb { width: 92%; margin: 10px auto 15px;}
	#main_img { height: auto; padding-bottom: 0;}
	#main_img h2 { padding: 75px 0; position: static; text-align: center; border-bottom: 4px solid #56361c;}
}
@media screen and (max-width: 420px) {
	#main_img h2 img { width: 70%;}
}


/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 { background: url(../img/access/sec1_bg.jpg)no-repeat center 50px;}
#sec1 img:nth-child(1) { padding-left: 80px; position: relative; z-index: 1;}
#sec1 img:nth-child(2) { margin-top: -100px;}
#sec1 img:nth-child(3) { margin-top: -250px; float: right; position: relative; z-index: 1;}

@media screen and (max-width: 768px) {
	#sec1 { width: 100%; background-size: 120%; background-position: center 140px; text-align: center;}
	#sec1 img { max-width: 92%; padding: 0 4%!important;}
	#sec1 img:nth-child(2) { margin-top: -40px;}
	#sec1 img:nth-child(3) { margin-top: -120px; float: none;}
}
@media screen and (max-width: 600px) {
	#sec1 img:nth-child(2) { margin-top: -30px;}
	#sec1 img:nth-child(3) { margin-top: -40px;}
}


/* ---------------------------------------------------
#sec2
------------------------------------------------------ */
#sec2 { margin-top: 50px;}
#sec2 #map {width: 960px; height: 460px; margin: 50px 0 100px;}
#sec2 #map .mapinfowindow { color: #000;}
#sec2 #map .mapinfowindow h4 { margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px dotted #ccc; font-size: 15px;}
#sec2 #map .mapinfowindow p { width: 280px;}

@media screen and (max-width: 768px) {
	#sec2 { width: 92%; margin: 50px auto 0;}
	#sec2 #map { width: 100%; height: 350px;}
}
@media screen and (max-width: 600px) {
	#sec2 { margin: 40px auto 0;}
	#sec2 #map { height: 300px; margin: 40px 0 60px;}
	#sec2 #map .mapinfowindow p { width: 200px;}
}



/*clear*/
#sec1:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; line-height: 0; }