/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 960 Grid
================================================== */

	/* 공통 영역 */

	
	.contact									{ padding-bottom: 100px; background: url(../../images/common/icon_sub.png) no-repeat right bottom;}
	.contact .box								{ position: relative; padding-top: 130px; text-align: right; }
	.contact .box .btn							{ position: absolute; top: 130px; right: 0;}
	.contact .box .btn p						{ padding-top: 10px;}
	.contact .box .map_mobile					{ display: none;}
	.contact .info								{ padding: 20px 0 20px 195px;}
	.contact .info:after						{ clear: both; content: ""; display: block;}	
	.contact .info div							{ float: left; font: normal 12px "Dotum"; color: #a6a6a6;}
	.contact .info div p						{ padding-bottom: 20px;}
	.contact .info div.bus						{ padding-right: 35px; width: 250px; background: url(../../images/contact/dot_line.gif) repeat-y right top;}
	.contact .info div.subway					{ padding: 0 35px; width: 295px; background: url(../../images/contact/dot_line.gif) repeat-y right top;}
	.contact .info div.car						{ padding-left: 35px; width: 210px;}
	
	
	



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
		
		
		.contact .box .btn						{ right: 15px;}
		.contact .box .btn a					{ display: none;}
		.contact .box .map						{ width: 100%;}
		.contact .info							{ padding: 20px 0 20px 15px;}
		.contact .info div						{ font: normal 11px "Dotum"; color: #a6a6a6; letter-spacing: -1px; line-height: 16px;}
		.contact .info div.bus					{ padding-right: 25px; width: 205px;}
		.contact .info div.subway				{ padding: 0 25px; width: 245px;}
		.contact .info div.car					{ padding-left: 25px; width: 190px;}
		
		#divpop_area							{ display: none;}
 
    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 400px) and (max-width: 767px) {
		
		.contact								{ padding-bottom: 30px;}
		.contact .box .btn						{ top: 100px; left: 10px; right: auto;}
		.contact .box .btn a					{ display: none;}
		.contact .box .map						{ display: none;}
		.contact .box .map_mobile				{ display: block; width: 100%;}
		.contact .info							{ padding: 20px 0 20px 15px;}
		.contact .info div						{ padding: 0 0 25px 0 !important;}
		.contact .info div p					{ padding-bottom: 10px;}
		.contact .info div.bus					{ padding-right: 0; width: 100%; background: none;}
		.contact .info div.subway				{ padding: 0; width: 100%; background: none;}
		.contact .info div.car					{ padding-left: 0; width: 100%;}		

		#divpop_area							{ display: none;}

		
    }
	
	
/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 399px */

    @media only screen and (max-width: 399px) {
		
		.contact								{ padding-bottom: 30px;}
		.contact .box .btn						{ top: 100px; left: 10px; right: auto;}
		.contact .box .btn a					{ display: none;}
		.contact .box .map						{ display: none;}
		.contact .box .map_mobile				{ display: block; width: 100%;}
		.contact .info							{ padding: 20px 0 20px 15px;}
		.contact .info div						{ padding: 0 0 25px 0 !important;}
		.contact .info div p					{ padding-bottom: 10px;}
		.contact .info div.bus					{ padding-right: 0; width: 100%; background: none;}
		.contact .info div.subway				{ padding: 0; width: 100%; background: none;}
		.contact .info div.car					{ padding-left: 0; width: 100%;}

		#divpop_area							{ display: none;}
		
		
    }