@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img,
object,
embed,
video { max-width: 100%; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img { width: 100%; }
/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		3;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	9;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */
body { min-width: 350px; }
dy,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,p,th,td,button { margin: 0; padding: 0 }
h2 { font-size: 160%; color: #0066cc; padding-left: 25px; margin-bottom: 6px; margin-top: 40px; background-image: url(m_img/icon_h2.png); background-repeat: no-repeat; background-position: left top; }
h3 { font-size: 160%; color: #0066cc; padding-left: 25px; margin-bottom: 8px; background-image: url(m_img/icon_h2.png); background-repeat: no-repeat; background-position: left top; }
h4 { font-size: 110%; margin-bottom: 3px; }
p { font-size: 100%; line-height: 150%; }
ul { list-style: none; }
ul li { margin-bottom: 10px; }
#wrap{
	width: 100%; 
	height: 100%;
	margin: 0 auto;

}

/* ----------------------- header ----------------------- */
#logo { float: left; margin-top: 6px; margin-left: 5px; width: 75%; }
#logo h1 { font-size: 17px; font-weight: bold; color: #000; background-image: url(m_img/header_logo.png); background-repeat: no-repeat; background-position: left center; background-size: 60px; padding: 4px 0 0 65px; }
#logo h1 a:visited { color: #000; }


.btn_call { float: right; width: 40px; display: inline; padding: 0; right:0;}

/* nav */
#nav { clear: both; float: left; width: 100%; padding-top: 12px; padding-bottom: 1px; background: #003399; color: #FFF; border-top: 2px solid #cc0000; font-weight: bold; }
#nav ul { clear: none; list-style: none; }
#nav ul li { float: left; width: 33%; text-align: center; font-size: 110%; }
#nav ul li a {  color: #fff; }
#nav ul li a:hover { color: #fff200; }


/* ----------------------- footer.php ----------------------- */

#phon { clear: both; width: 100%; background: #003399; text-align: center; padding: 18px 0 20px 0; color: #FFF; text-align: center; }
.txt_1 { font-size: 100%; font-weight: bold; line-height: none; padding-top: 10px; padding-bottom: 0px; }
.txt_2 { font-size: 30px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
.phonbtn { padding: .3em .8em; text-align: center; border: 1px solid #ffff00; background: #003399; border-radius: .2em; color: white; font-size: 125%; line-height: 2.5; width: 40%; }
.phonbtn a { color: #fff200; }


footer#realfooter { background: #ebebeb; text-align: center; }
.foot { width: 95%; margin: 0 auto; padding: 15px 0;color: #666666;font-size: 90%;   }
.copy { padding-top: 20px; ;font-size: 80%; }


.foot div{ clear: both; float: left; width: auto; border-top: 1px solid #999; border-bottom: 1px solid #999;  padding-top: 8px; margin-bottom: 8px;  width:100%; }
.foot ul {text-align: center; color: #000; }
.foot ul li {float:left; width:50%;  text-align: left;}
.foot span {font-size: 75%;   }	



/* ----------------------- index ----------------------- */

#maincontent { float: left; width: 100%; border-top: 2px solid #cc0000; text-align: center; padding-top: 25px; color: #fff; background-image: url(m_img/mainbg.png); background-repeat: repeat-x; background-position: left top; }
.text_1 { font-size: 30px; font-family: Arial, Helvetica, sans-serif; }
.text_2 { font-size: 50px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; line-height: 38px; }
.text_3 { font-size: 24px; font-weight: bold; color: #cc0000; padding-top: 15px; }
.text_4 { font-size: 18px; font-weight: bold; color: #000; }
.text_5 { font-size: 8px; text-transform: uppercase; line-height: 8px; }

#wrap_icon { position: relative; display: block; width: 100%; background-image: url(m_img/main_img1.png); background-repeat: repeat-x; background-size: 150%; background-position: center bottom; height: 170px; }
#wrap_icon .icon { position: relative; margin: 0 auto; width: 229px; font-size: 12px; text-align: center; }
#wrap_icon .icon dd { display: block; float: left; width: 70px; height: 62px; z-index: 500; background: #cc0000; padding: 6px 0 0px 0; margin: 3px; }





/* ----------------------- 서브타이틀이미지----------------------- */
#subcontent { float: left; width: 100%; padding-top: 20px; padding-bottom: 30px; line-height: 180px; background-image: url(m_img/main_img2.png); background-repeat: repeat-x; background-position: right top; background-size: 100% }
.subtext_1 { font-size: 220%; color: #cc0000; padding-left: 15px; }
.subtext_2 { font-size: 90%; font-weight: bold; width: 56%; padding-left: 15px; color: #999 }



/* ---------------------------------------------- */
#greeting { padding: 0px 15px 50px 15px; text-align: justify; clear: both; float: left; display: block; background-image: url(m_img/menu1_img2.png);  background-size: 70%; background-position: right bottom; background-repeat: no-repeat; }
#content { padding: 20px 15px 50px 15px; text-align: justify; clear: both; float: left; display: block; }



.box1 { clear: both; background: #fff; padding-bottom: 15px; border-bottom: 3px solid #dddddd; }
.text_blueb { color: #0099ff; font-weight: bold; }
.text_blue { color: #0099ff; }

#ul n1 { width: 150px; border: 1px solid #dddddd; }
.ul n1 ul { list-style: none; float: left }
.ul n1 ul li { text-decoration: none; font-size: 14px; font-weight: bold; color: #FFF; text-align: center; width: 50%; border: 1px solid #dddddd;  }




/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
#subcontent { float: left; width: 100%; padding-top: 20px; padding-bottom: 25px; background-image: url(m_img/main_img2.png); background-repeat: repeat-x; background-position: right top; background-size: 93% }
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

#wrap_icon { position: relative; display: block; width: 100%; background-image: url(m_img/main_img1.png); background-repeat: no-repeat; background-size: 1000px; background-position: center bottom; height: 190px; }

#wrap{	width: 70%;
	max-width: 1232px;
	padding-left: 1%;
	padding-right: 1%;
	margin: auto;

}
#subcontent {  float: left; width: 100%; padding-top: 40px;   padding-bottom: 120px; background-image: url(m_img/main_img2.png); background-repeat: repeat-x; background-position: right top; background-size: 95%}

#greeting { padding: 0 15px 50px 15px; text-align: justify; clear: both; float: left; display: block; background-image: url(m_img/menu1_img2.png);  background-size: 30%; background-position: right bottom; background-repeat: no-repeat; }