@charset "utf-8";
/* CSS Document */

#portfolio > div ul {
  text-align: center; 
  margin-left: -2%;}

#portfolio > div  li {
  display:inline-block;
  text-align: center;
  margin: 0.5rem  1%;
  /*font-size: 1.1rem;*/
  font-size: 1rem;
  font-weight: 400;}

p{
	font-family: 'Noto Sans KR',sans-serif !important; 
	font-weight: 100;
	line-height: 1.5;
	margin: 0;
	/*font-size: 1.1rem;*/
	font-size: 1rem;
}
#portfolio .smenu{}


.smenu:link { color: black;  text-decoration: none;}
.smenu:visited {color: black;  text-decoration: none;}
.smenu:hover { color: black;  text-decoration: underline;}
.smenu:active {color: black; text-decoration: underline;} 

.tab_ic{display:block;}
 
#portfolio > div.portW{max-width:1000px; margin:0 auto;}
#portfolio > div.portW ul.port_ul{display:flex; flex-wrap: wrap; justify-content: center; padding:0px; margin:0px;}
#portfolio > div ul.port_ul > li{width: 25%; display: block;  box-sizing:border-box; margin:0px;}

#gallery img.port_img{width:auto; min-width:auto; border:none;}

.con_w{margin-top:60px;}

/* contants  *
.mainContent #com_box {
    width: 100%;
    padding-top: 3rem;
    paading-left: 3%;
    display: inline-block;
 
    font-family: 'NotoKrTh',sans-serif !important;
    font-size: 16px;}

#com_box h2{  
	font-family: 'NotoKrTh',sans-serif !important; 
	font-weight: 100;
	line-height: 1.5;
	margin: 0;}

#com_box h5{
	font-family: 'NotoKrR',sans-serif !important; 
	line-height: 2;
	margin: 0;
  display: inline;
  border-bottom: 1px solid #353535;
  padding-bottom: 3px;}

#com_box ul li{ 
  margin-bottom: 0.5rem; 
  margin-top: 0.5rem;
  margin-left: -1rem;
  color:#000000;
  line-height: 1.5;
  font-family: 'NotoKrL',sans-serif !important; 
  text-align: justify;
  word-wrap : break-word;
}

#com_box p{
	    


	font-family: 'NotoKrTh',sans-serif !important; 
	font-weight: 100;
	line-height: 1.5;
	margin: 2px 0;
  color: black;
	    
	    
}

#com_box .bbb { border: #353535 20px solid;}
#com_box img{ min-width:100%; height: auto }  */
    


/*  SECTIONS  ============================================================================= */

.section1 {
	padding: 0px;
	margin: 0px;}

.section1 h2{ color:black;}

/*  GROUPING  ============================================================================= */

.group1:before,
.group1:after {
    content:"";
    display:table;}
.group1:after {
    clear:both;}
.group1 {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */}

/*  GRID COLUMN SETUP   ==================================================================== */


#gallery img{ min-width:100%; height: auto }

.col1 { 	
  display: block;
	float:left;
	margin: 0.2%;}


.col2 {
	display: block;
	float:left;
	margin: 1rem 0 ;
	font-color:black;}

.col2 p{
	
	color:black;
	font-weight:400;
	margin: 5% 0 0 0;
  text-align: left;}

.col2 h2{
	
	color:white;
	font-weight:400;}



.col2 a:hover {
	color: black;
	font-family: 'NotoKrTh',sans-serif !important; }

.col2 a {
	color: black;
	font-size: 1.1rem;
	font-family: 'NotoKrTh',sans-serif !important; }



.col1:first-child { /*margin-left: 0%;*/ } /* all browsers except IE6 and lower */


.span_1_of_3 {	width: 58.5%; background:rgba(111,91,7,0.56);}
.span_2_of_3 {	width: 39.85%; background:rgba(255,0,4,0.61);}
.span_3_of_3 {	width: 39.85%; background: rgba(72,188,0,0.52);}


.span_1_of_2 {	width: 49%; background:rgba(0,158,171,0.48); }
.span_2_of_2 {	width: 49%;  background: rgba(150,18,185,0.59);}

.span_3_of_all {	
	width: 32.9%; 
	min-height: 250px;
}

.span_3_of_all h3{	
	padding-left: 10px;
	color: #fcad24;
	font-weight: 500;
	border-left: 3px solid #fcad24;
}

@media screen and (max-width:768px){
	.span_3_of_all {	
		width: 300px; 
		min-height: 150px;
		padding:0 20px;
	}
}



/*==============================footer=====================================*/


#p_footer {
  
  background: black;
  text-align: center;

}


#p_footer p{ 
display: inline-block;
width: 90%;
color:white;
text-align: center;}

#p_footer > div ul {
  text-align: center; 
  margin-left: -10px;}

#p_footer > div  li {
  display:inline-block;
  text-align: center;
  color: white;
  margin: 0 10px;;
 
  
        
      }
#p_footer .copy{	
  width: 100%;
  background-color: #252728;
	padding: 0.5em 0;}



@media screen and (max-width:576px){
  
  

  .title_l{ text-align: center; }
  .title_l h2{ color: white; }
  .title_l img{ width: 20px;}

  
  #portfolio > div ul {
  text-align: center; 
  margin-left: -7%;}

  #portfolio > div  li {
  display:inline-block;
  text-align: center;
  margin: 1% 2.5%;
  font-size: 1rem;}

  #portfolio > div ul.port_ul > li{margin:9% 0%; font-size:0.85rem;}
  .con_w{margin-top:10px;}

  #com_box .section1 h2{ color:black;}

  #com_box h5{   

	font-family: 'NotoKrR',sans-serif !important; 
  line-height: 1;
	margin: 0;
  display: inline;
  border-bottom: 1px solid #353535;
  padding-bottom: 1px;
  font-size: 1rem;}
  
#com_box ul li{ 
  margin-bottom: 0.5rem; 
  margin-top: 0.5rem;
  margin-left: -1rem;
  color:#000000;
  line-height: 1.5;
  font-family: 'NotoKrL',sans-serif !important; 
  text-align: justify;
  text-justify: inter-character; }
  
  
#com_box p{
  font-family: 'NotoKrTh',sans-serif !important; 
	font-weight: 100;
	line-height: 0.5;
	margin: 2px 0;
  color: black;}
  
 


#p_footer p{ 
display: inline-block;
width: 90%;
line-height: 1.5;
color:white;
text-align: center;
margin-top: -0.6rem }

#p_footer > div ul {
  margin-top: -0.6rem;
  text-align: center; 
  margin-left: -10%;}

#p_footer > div  li {
  display:inline-block;
  text-align: center;
  color: white;
  margin: 0 10px;;
 
  
        
      }
#p_footer .copy{	
  width: 100%;
  background-color: #252728;
	padding-bottom: 1rem;}
  
  
  
  

}
/*=======================================================================*/


.gallery_content:hover .overlay.right {
            top: 0;
        }

        #gallery_layout {
        
        }

        #gallery_layout:after {
            content: "";
            display: block;
            clear: both;
        }

        .gallery_content {
            position: relative;
            float: left;
        
            overflow: hidden;
        }

        .gallery_content img {
            width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
            transition: all 1s ease-in-out;
            border: 3px solid #535353;
        }

        .content {
			width: 80%;
            z-index: 1;
            display: block;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
.content h1 {
           
            text-transform: uppercase;
            text-align: center;
			      color: white;
            margin: 0;
        }
          
      .content h3 {
          
            text-transform: uppercase;
            text-align: center;
			      color:#fcad24;
		        margin: 0;
        }
        .content p {
           
            font-size: 1.3em;
            text-align: center;
			color: white;
			font-family: 'NotoKrTh';
			font-weight: 100;
      margin-top:0.5rem;
			
        }     




        .gallery_content:hover .overlay.black{
            display: none;
            transition: all 1s ease-in-out;
        }

        .gallery_content:hover .content {
            display: none;
            transition: all 1s ease-in-out;
        }


        .gallery_content:hover img {
            transform: scale(1.2);
            transition: all 1s ease-in-out;
        }

        .overlay {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
        }

        /* overlay color */
       .overlay.black {
            background-color: rgba(0, 0, 0, 0.7);
        }  
        .overlay.yellow {
            background-color: rgba(103, 58, 183, 0.5);
        }
        .overlay.red {
            background-color: rgba(244, 67, 54, 0.5);
        }      

        .gallery_content:hover .overlay {
            display: block;
            transition: all 0.5s ease-in-out;
        }
        
        @media all and (min-width: 960px) {
            #gallery_layout {
               
            }  
        }

        @media all and (max-width: 959px) {
        #gallery_layout {
            width: 100%;
        }
        .gallery_content {
            width: 100%;
        }

        }
        @media all and (max-width: 499px) {
        #gallery_layout {
       
        }
        .gallery_content {
            width: 100%;
        }
			
			
		.content h1 {
           
            text-transform: uppercase;
            text-align: center;
			      color: white;
            margin: 0;
            font-size: 1.5rem;
        }
          
      .content h3 {
          
            text-transform: uppercase;
            text-align: center;
			      color:#fcad24;
		        margin: 0;
            font-size: 1.5rem;
        }
        .content p {
           
            font-size: 1rem;
            text-align: center;
			color: white;
			font-family: 'NotoKrTh';
			font-weight: 100;
      margin-top:5px;
			
        }     
          
          
 .btn-foh {
  color: #fff;
  background: rgba(253,253,253,0.47);
  border-color: white;
  border: 0px ;
  font-size:3rem;
  font-family: 'Noto Sans';
  line-height: 0.5;
  vertical-align: top;

} 
	
	
			
			

			

        }





.btn-foh {
  color: #fff;
  background: rgba(253,253,253,0.47);
  border-color: white;
  border: 0;
  font-size:4rem;
  font-family: 'Noto Sans';
  line-height: 0.75;
  vertical-align: top;

}