@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
        
        body 
        {
            font-family: 'NanumGothic', '나눔고딕','NanumGothicWeb';
            padding:0;
            margin:0;            
        }

        a.nounderline: link   
        {  
            Text-decoration: none;   
        }   

        .mainContain 
        {
            width: 100%;
            margin: 0px auto;
        }
        

        /*최상단*/
        .rowType1 
        {
            width: 100%;
            margin: 0px auto;
            background-image:url('images/bg.png');
            background-repeat: repeat-x;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType1 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }
        
        /*상단이미지*/
        .rowType2 
        {
            width: 980px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType2 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }
        
        /*상단메뉴*/
        .rowType3 
        {
            width: 980px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType3 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }
        
        /*상단텝메뉴*/
        .rowType4 
        {
            width: 980px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType4 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }
        
        /*중간이미지*/
        .rowType5 
        {
            width: 980px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType5 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }  
        
        /*중간내용*/
        .rowTypeContent
        {
            width: 980px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowTypeContent 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }  
        /*중간내용 종료*/
                
        /*보드,갤러리,지도*/
        .rowType6 
        {
            width: 980px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType6 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }  
        /*보드,갤러리,지도 종료*/
        
        /*하단시작*/
        .rowType7 
        {
            width: 100%;
            margin: 0px auto;
            background-image:url('images/bg.png');
            background-repeat: repeat-x;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType7 
            {
                    margin: 0px auto;
                    width: 100%;
                    background-image:url('images/bg.png');
                    background-repeat: repeat-x;
            }
        }             
        
        /*최상단 컨텐츠*/
        .rowType8 
        {
            width: 980px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType8 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }             
         /*최상단 컨텐츠 종료*/   
         
         
         /*공지사항*/
        .rowGonzi 
        {
            border-width:1px;
            Z-INDEX: 201;
            width: 500px;
            left:50%;
            top:30%;
            margin:0 0 0 0;
            border: 1px solid #fff;
            border-radius: 5px;    
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);  
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowGonzi 
            {
                position: relative;
                border-width:1px;
                Z-INDEX: 201;
                POSITION: absolute;
                left:10px;
                width:280px;
                height:300px;
                overflow:scroll;
                padding:5px 10px 5px 10px
                border: 1px solid #fff;
                border-radius: 5px;    
                box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);    
            }
        }     
        
        .shadow 
        {
            margin: 0px auto;
            display: block;
            width: 100%;
            padding:10px;
    
            background: white;
            border: 1px solid #fff;
            border-radius: 5px;
    
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }    
        
        .shadow2 
        {
            margin: 0px auto;
            display: block;
            width: 100%;
            padding:0px;
    
            background: white;
            border: 1px solid #fff;
            border-radius: 5px;
    
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }           
        
        /*공지사항종료*/
        #tabInfo 
        {
            display: none;
        }
        
        #title_message 
        {
            display: none;
        }

        @media screen and (min-width: 768px) 
        {
            #title_message 
            {
                clear: both;
                display: block;
            }
        }        

        .outer2 
        {
            font-size: 0;
            width: 49%;
            height: 30px;
            text-align: left;
            display: inline-block;
        }
        
        .outer2 .emptyDiv 
        {
            height: 49%;
            visibility: collapse;
        }

        .outer2 .inner 
        {
            padding: 10px;
            font: bold 14px Arial;
            color:White;
        }
        
        .outer 
        {
            font-size: 0;
            width: 49%;
            height: 30px;
            text-align: right;
            display: inline-block;
        }

        .outer .emptyDiv 
        {
            height: 49%;
            visibility: collapse;
        }

        .outer .inner 
        {
            padding: 10px;
            font:12px Arial;
            color:White;
        }

        .verticalCenter 
        {
            display: inline-block;
            *display: inline;
            zoom: 1;
            vertical-align: middle;
        }
        
        .alink 
        {
            text-decoration: none;
            color:White;
        }

        
        /*칼럼*/
        .section {
	        clear: both;
	        padding: 0px;
	        margin: 0px;
        }

        /*  COLUMN SETUP  */
        .col {
	        display: block;
	        float:left;
	        margin: 1% 0 1% 1.6%;
        }
        .col:first-child { margin-left: 0; }


        /*  GROUPING  */
        .group:before,
        .group:after {
	        content:"";
	        display:table;
        }
        .group:after {
	        clear:both;
        }
        .group {
            zoom:1; /* For IE 6/7 */
        }

        /*  GRID OF THREE  */
        .span_1_of_5 
        {
	        width: 15%;
        }
        .span_4_of_5 
        {
	        width: 82%;
        }
        .span_1_of_4 
        {
	        width: 20%;
        }
        .span_3_of_4 
        {
	        width: 75%;
        }
        
        .span_3_of_3 
        {
	        width: 100%;
        }
        .span_2_of_3 
        {
	        width: 66.1%;
        }
        .span_1_of_3 
        {
	        width: 32.2%;
        }
        .span_1_of_2 
        {
	        width: 49.2%;
        }   
        
        .spanNew_2_of_3 
        {
	        width: 66.1%;
        }
        .spanNew_1_of_3 
        {
	        width: 32.2%;
        }
        
        .spanNew2_2_of_3 
        {
	        width: 66.1%;
        }
        .spanNew2_1_of_3 
        {
	        width: 32.2%;
        }     

        /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

        @media only screen and (max-width: 480px) {
	        .col { 
		        margin: 1% 0 1% 0%;
	        }
        }

        @media only screen and (max-width: 480px) 
        {
            .span_1_of_5 
            {
		        width: 100%;
	        }
	        .span_4_of_5 {
		        width: 100%; 
	        }
            .span_1_of_4 
            {
		        width: 100%;
		        display:none; 
	        }
	        .span_3_of_4 {
		        width: 100%; 
	        }
	        .span_3_of_3 {
		        width: 100%; 
	        }
	        .span_2_of_3 {
		        width: 100%; 
	        }
	        .span_1_of_3 {
		        width: 100%;
	        }
	        .span_1_of_2 {
		        width: 100%;
	        }
	        
	        .spanNew_2_of_3 
	        {
		         display:none;
	        }
	        .spanNew_1_of_3 
	        {
		        width: 100%;
	        }
	        
	        .spanNew2_2_of_3 
	        {
		         display:none;
	        }
	        .spanNew2_1_of_3 
	        {
		        display:none;
	        }
        } 

        h1,h2,h3{}
        p, blockquote, pre, code, ol, ul{}
        
        /*  이미지 디자인 */
        .post-container 
        {
            margin: 2px 2px 0 0;  
            border: 1px solid #333;
            overflow: auto
        }
        
        .post-thumb 
        {
            float: left
        }
        
        .post-thumb img 
        {
            display: block
        }
        
        .post-content 
        {
            margin-left: 50px
        }
        .post-title 
        {
            font-weight: bold;
            font-size: 200%
        }
        
        
.my-box { border:1px solid; padding:2px;}      
.my-box_black { border:1px solid black; padding:2px; }  
.my-box_gray { border:1px solid gray; padding:2px; } 
/************************************************************************************
3columnns
*************************************************************************************/
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

/* STRUCTURE */


#leftcontent 
{
	width: 290px;
	float: left;
	padding: 1px 15px;
}

#middlecontent 
{
	width: 294px; /* Account for margins + border values */
	float: left;
	padding: 1px 15px;
	margin: 1px 5px 5px 5px;
}

#sidebarcontent 
{
	width: 270px;
	padding: 1px 15px;
	float: left;
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) 
{
	#leftcontent 
	{
		width: 41%;
		padding: 1% 4%;
	}
	
	#middlecontent 
	{
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebarcontent 
	{
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

}

/* for 700px or less */
@media screen and (max-width: 600px) 
{

	#leftcontent {
		width: auto;
		float: none;
	}
	
	#middlecontent {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebarcontent {
		width: auto;
		float: none;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) 
{
	h1 
	{
		font-size: 2em;
	}
	
	#sidebar 
	{
		display: none;
	}

}


#leftcontent, #middlecontent, #sidebarcontent 
{
	margin-bottom: 5px;
}

#leftcontent, #middlecontent, #sidebar
{
	border: solid 0px #ccc;
}


/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}



/*사이드 메뉴 관련 시작*/
            #ContainerLeftMenu
            {
                border-bottom:solid 1px white;
            }
            
            #LeftMenu
            {
                padding:0;
                margin:0;
                list-style-type:none;
                font-size:15px;
                color:black;
                width:100%;
            }

            #LeftMenu li
            {
                border-bottom:1px solid #eeeeee;
            }

            #LeftMenu li a:hover
            {
                color:White;
                background-color:#ffcc00;
            }

            #LeftMenu a:link
            {
                color:black;
                text-decoration:none;
                display:block;
                padding: 7px 10px;
            }
            
            #LeftMenu a:visited
            {
                color:black;
            }

            #LeftMenu a:hover
            {
                color:White;
            }

         @media only screen and (max-width: 780px) 
         {
            #ContainerLeftMenu
            {
                border-bottom:solid 1px #eeeeee;
            }
            
            #LeftMenu
            {
                padding:0;
                margin:0;
                list-style-type: none;
                overflow: hidden;
            }

            #LeftMenu li
            {
                height: 20px;
                float: left;
                margin-right: 0px;
                border-right: 1px solid #aaa;
                padding:0 5px 5px;
            }
            
            #LeftMenu li a
            {
                text-decoration: none;
                color: gray;
                font: 14px/1 Helvetica, Verdana, sans-serif;
                text-transform: uppercase;
 
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                -ms-transition: all 0.5s ease;
                transition: all 0.5s ease;


            }

            #LeftMenu li a:hover
            {
                color: #666;
            }
            
            #LeftMenu li.active a
            {
                font-weight: bold;
                color: #333;

            }
            
            #LeftMenu li:last-child 
            {
                border-right: none;
            }

         }


.subcontainer 
{
    margin:0px;
}
.subcontainer > div 
{
    display:none;
}

/*첫번째 메뉴만 보이게*/
.subcontainer > div:first-child 
{
    display:block; 
    vertical-align:top;       
}
/*사이드 메뉴 관련 종료*/

/*20150327 이미지 자동변경기능*/
#CstMenu_PC
{
    padding:0;
    margin:0;            
    width:100%;    
    display:block;
}

@media only screen and (max-width: 780px) 
{           
            
            #CstMenu_PC
            {
                display:none;
            }

}

#CstMenu_MO
{
    display:none;
}

@media only screen and (max-width: 780px) 
{                       
            #CstMenu_MO
            {
                padding:0;
                margin:0;            
                width:100%;
                display:block; 
            }
}