@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");
        * {font-family:'나눔고딕', NanumGothic, 'Nanum Gothic';}
        
        body 
        {
            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: 100%;
            margin: 0px auto;
             
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType2 
            {
                    margin: 0px auto;
                    width: 100%;
                    
            }
        }
        
        /*상단메뉴*/
        .rowType3 
        {
            width: 1200px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType3 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }
        
        /*상단텝메뉴*/
        .rowType4 
        {
            width: 1200px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType4 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }
        
        /*중간이미지*/
        .rowType5 
        {
            width: 1200px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType5 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }  
        
        /*중간내용*/
        .rowTypeContent
        {
            width: 1200px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowTypeContent 
            {
                margin: 0 0.8% 0 1%;
                width: 98.2%;
                text-align:center;
            }
        }  
        /*중간내용 종료*/
                
        /*보드,갤러리,지도*/
        .rowType6 
        {
            width: 1200px;
            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: 1200px;
            margin: 0px auto;
        }
        
        @media only screen and (max-width: 780px) 
        {
            .rowType8 
            {
                    margin: 0px auto;
                    width: 100%;
            }
        }             
         /*최상단 컨텐츠 종료*/          
        
        #tabInfo 
        {
            display: none;
        }
        
        #title_message 
        {
            display: none;
        }

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

        .MobileOnly {display:block;}
        

         @media only screen and (max-width: 780px) 
         {
             .MobileOnly {display:none;}
            
         }   
         
        .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% 0.2%;	       
        }
        .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: 19.84%;/*1200/19.84=238*/
        }
        .span_4_of_5 
        {
	        width: 79.36%;/*1200/0.7936=952*/
        }
        .span_1_of_4 
        {
	        width: 24.85%;
        }
        
        
        .span_3_of_4 
        {
	        width: 74.95%;
        }
        
        .span_3_of_3 
        {
	        width: 100%;
        }
        
        .span_2_of_3 
        {
	        width: 66.6%;/*margin:  1% 0 1% 0.2%*/
        }
        .span_1_of_3 
        {
	        width: 33.2%;/*398.4*/
        }
        
        .span_1_of_2 
        {
	        width: 49.9%;
        }        

        /*  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%;

	        }
	 
	        .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%;
	        }
        } 

        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 1200px or less */
@media screen and (max-width: 1200px) 
{
	#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%;
    font-weight: bold;
}

#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;
                font-size:13px;
                color:#717171;
                font-weight: bold;
            }

            #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;       
}
/*사이드 메뉴 관련 종료*/


/*사이드 메뉴 관련 시작-CstMenu*/
#ContainerCstMenu
{
    border-bottom:solid 1px white;
}

#CstMenu
{
    padding:0px;
    margin:0;
    list-style-type:none;
    font-size:15px;
    color:black;                
    width:100%;
    font-weight: bold;
}

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

#CstMenu li a:hover
{
    color:White;
    background-color:Gray;
    border:solid 1px black;
}

#CstMenu a:link
{
     color:black;
     text-decoration:none;
     display:block;
     padding: 5px 13px;
}
            
#CstMenu a:visited
{
     color:black;
     text-decoration:none;
     display:block;
     padding: 5px 3px;
     
}

#CstMenu a:hover
{
    color:Red;
}

#CstMenu2
{
    padding:0px;
    margin:0;
    list-style-type:none;
    font-size:15px;
    color:black;                
    width:100%;
    font-weight: bold;
}

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

#CstMenu2 li a:hover
{
    color:Black;
    background-color:#ffcc00;
    border:solid 1px black;
}

#CstMenu2 a:link
{
     color:black;
     text-decoration:none;
     display:none;
     padding: 5px 13px;
}
            
#CstMenu2 a:visited
{
     color:black;
     text-decoration:none;
     display:block;
     padding: 5px 3px;
     
}

#CstMenu2 a:hover
{
    color:Red;
}
@media only screen and (max-width: 780px) 
{
            #div_title
            {
                font-size: 12px;    
            }
            
            .div_title
            {
                font-size: 12px;    
            }
            
            #CstBottomImg
            {
                 display:none;
            }
                
            #ContainerCstMenu
            {
                border-bottom:solid 1px #eeeeee;
            }
            
            #CstMenu
            {
                padding:0;
                margin:0;
                list-style-type: none;
                overflow: hidden;
                font-size:13px;
                color:#717171;
                font-weight: bold;
                border-bottom:solid 1px gray;
                border-top:solid 1px gray;
                /*text-align:center;*/
                /*width:100%;*/
                text-align:center;
            }

            #CstMenu li
            {
                height: 20px;
                /*display:inline-block;*/
                position: relative;
                float: left;

                margin-right: 0px;
                border-right: 1px solid #aaa;
                padding:0 1px 1px 1px;
                text-align:center;
            }
            
            #CstMenu li a
            {
                text-decoration: none;
                color: gray;
                font: 12px/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;


            }
            
            #CstMenu a:link
            {
                 color:black;
                 text-decoration:none;
                 display:block;
                 padding: 5px 5px;
            }

            #CstMenu li a:hover
            {
                color: White;                
            }
            
            #CstMenu li.active a
            {
                font-weight: bold;
                color: Gray;

            }
            
            #CstMenu li:last-child 
            {
                border-right: none;
            }
            
            
            #CstMenu2
            {
                padding:0;
                margin:0;
                list-style-type: none;
                overflow: hidden;
                font-size:13px;
                color:#717171;
                font-weight: bold;
                border-bottom:solid 1px gray;
                /*text-align:center;*/
                /*width:100%;*/
                text-align:center;
            }

            #CstMenu2 li
            {
                height: 20px;
                /*display:inline-block;*/
                position: relative;
                float: left;

                margin-right: 0px;
                border-right: 1px solid #aaa;
                padding:0 5px 5px 5px;
                text-align:center;
            }
            
            #CstMenu2 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;


            }
            
            #CstMenu2 a:link
            {
                 color:black;
                 text-decoration:none;
                 display:block;
                 padding: 5px 2px;
            }

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

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

}

.CstMenusubcontainer 
{
    margin:0px;
}

.CstMenusubcontainer > div 
{
    display:none;
}

/*첫번째 메뉴만 보이게*/
.CstMenusubcontainer > 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
            {
                display:block; 
                padding:0;
                margin:0;            
                width:100%;
                
            }
}

.pc_view_only
{
    padding:0;
    margin:0;            
    width:100%;    
    display:block;
}

@media only screen and (max-width: 780px) 
{           
            
            .pc_view_only
            {
                display:none;
                margin: 0px auto;
                width: 100%;                
                background-image:url('http://uh8282.com/Mobile/upload/images/pconly.png');
            }

}



.mo_view_only
{
    display:none;
}

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