<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
        *{
            margin: 0;
            padding: 0;
        }
        
        body{
            font: 12px '맑은 고딕', 'Helvetica', sans-serif;
        }
        
        a{
            text-decoration: none;
        }
        
        li{
            list-style: none;
        }
        
        img{
            border: 0;
        }
        
        .mid_wrap{
            max-width: 1000px;
            margin: 0 auto;
        }
        
        
        .mid_wrap &gt;h2{
            font-size: 80px;
            color: #545454;
        }
        
        /*top : 헤더 역할*/
        #top{
            width: 100%;
            position: fixed;/*상단에 고정되도록*/
            top: 0;
            left: 0;
            z-index: 100;/*슬라이드 이미지라던가 높였을때 얘가 더 높아야함 ㅇㅇ 고정 네비니까 modal window잇을때는 modal window보다 낮아야함*/
            /*background: #000;*/
        }

        /*body div:first-child.ont{
        background: #000;
        }*/
        
        #navi{
            /*overflow: hidden;*//*원래는 쓰면 안되는 overflow hideen 이나 서브가 안뜨기에 상관무*/
            position: relative;
        
            
        }
        
        #navi &gt; h1{
            float: left;
        }
        
        #navi &gt; h1 &gt; a{
            color: #fff;
            font-size: 1.3em;
        }
        
        #navi &gt; ul{
          float: right;
        }
        
        #navi &gt; ul &gt; li{
            float: left;
            height: 50px;
            line-height: 50px;
            list-style: none;
        }
        
        #navi &gt; ul &gt; li &gt; a{
            color: #fff;
            font-size: 1.2em;
            padding: 0 10px;
        }

        #navi &gt; ul &gt; li &gt; a.on{
            color: #7da7d9;
        }
        
#m_menu,#x_bar{display: none;}

#m_menu a{
    display: block;
}

/*#x_bar{
    background: url(../img/main/splite_x1.png) 0 0 no-repeat;
    width:35px;
    height: 31px;
    z-index: 101;
    position: absolute;
        z-index: 301;
        right: 7%;
        background: url(../img/main/splite_x1.png) 10% 0 no-repeat;
        background-size:25px;
        cursor: pointer;
        
    }*/
#sm_menu{
            width: 70%;
            position: absolute;
           /* right: -100%;*/
            right: -200%;/*원래는 -100%인데 안되서 -200%로 바꿔봄*/
            top: 40px;
            background: #3b3b3b;
    display: none;
}

#sm_menu li{
    display: block;
    border-bottom: 1px solid #848484;
}

#sm_menu li a{
             display: block;
            text-indent: 10px;
            padding: 10px 0;
     color:#fff;
}

#sm_menu li a.on{
     color:#4f8dd8;
}


        
        /*-------------------------------------------------------------------------------------본문 스타일*/
        #wrap{
           /* padding-top: 50px;겹쳐있기때문에 본문내용 내려가게함*/
        }
        
        #home{
            width: 100%;
            height: 850px;
            background: url(../index_img/bg1_1.jpg) center no-repeat;
            background-size: cover;
            /*height: 600px;*//*내용 없어서 세로 길이 강제로 지정하는것, 세로 길이 넣는것 아님*/
        }

#home .mid_wrap{
    background: url(../index_img/portfolio_bg_tile.png) center no-repeat;
       background-size: contain;
   
   /* width: 600px;
   height: 600px;*/
     width:60%;
    height: 60%;
    padding-top: 300px;
    padding-left: 15%;
    transform: translate(0, -10px);
            transition: all 0.5s ease-in;
   }

#home .mid_wrap:hover{
    transform: translate(0, 20px);
       
}      
      
        #home #bg_title{
            width: 200px;
            height: 200px;
            margin-top:10%;
            margin-left: 20%;
        }


        #bg_title h2{
            color: #fff;
            font-size: 4.0em;
            margin-bottom: 20px;
             
        }

        #bg_title p{
            color: #fff;
            font-size: 1.3em;
    
        }
/*---------------------------work-----------------------*/
        #work{
            /*display: flex;*/
            float: left;
            overflow: hidden;
            width: 100%;
            height: 100%;
            
            
           
        }

        #work h3{
            height: 620px;
            font-size: 1.3em;
            background: url(../index_img/bg2.jpg) center no-repeat;
            color: #fff;
            background-size: cover;
           width: 250px;
           /*width:30%;*/
           /* display: flex;*/
            float: left;
            text-align: center;
            padding-top: 425px;
            /*align-items: center;
            justify-content: center;
            */
        }

#work h3 strong{
     font-size: 2.5em;
    color: #4f8dd8;
}

#work h3 p{
  text-align:center;
     border-top: 2px solid #404040;
}

.h3_bg{
    background: #000;
    width: 80%;
    height: 30%
}

        .white{
            margin-top: 80px;
           
            /*margin-left: 5%; */
        }
#work .white{
    float: left;
    width: 80%;
}

ul.tab{
    overflow: hidden;
}

        ul.tab li{
            width: 20%;/*반응형 웹 만들거 생각해서 100px 대신 부모의 20%*/
            height: 40px;
            float: left;
        }
        
        ul.tab li a{
            outline: none;/*포커스가 위치되어 잇다! 점선 생기니.. 지저분해~없애*/
            display: block;/*전체영역 손가락 모양나와야하니까*/
            color: #565656;
            font-size: 1.8em;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
        }
        
        
        ul.tab li.selected a{
            color: #4f8dd8;/*a 때문에 글자색 바뀌는거니까 ㅇㅇ*/
            cursor: default;/*선택된 곳 손가락 안나오도록, a 때문에 링크 손가락이 걸리는거니 li에 안주도록 조심*/
            
        }
div.tab_content{
width: 100%;
}

        div.tab_content &gt; #web{
            /*clear: both;강제로 밑으로 떨어지도록 하는것*/
            /*padding: 10px;*/
            /*text-indent: 1em;*//*글자 한글자만큼 띄움*/
            color: #333;
           padding-left: 5%;
            overflow: hidden;
            width: 100%;
        }
        
        div.tab_content &gt; #web ul li{
            float: left;
            padding: 10px 0px;
            box-sizing: border-box;

        }

        div.tab_content &gt; #web ul li a{
            position: relative;
            display: block;  
        }
        /*---오버시 어둡게 해줄 */
        .h_box{
            position: absolute;
            left: 0;/*부모 기준 달라붙도록*/
            top: 0;/*부모 기준 달라붙도록*/
            width: 100%;
            height: 100%;
        }

        .over{
          background: #000;
            opacity: 0.5;/*인터넷 익스플로러 8이하는 구동안됨, 이미지와 색상 같이 흐려짐, 색상만 하는경우 rgba로 해야함*/
            filter: alpha(opacity=50);/*낮은 버전에서도 사용 할 수 있도록*/
            
        }

#web ul li img{
    width: 100%;
}

.p_wrap{
   position: absolute;
    width: 240px;
    height: 100px;
    z-index: 9;
    top: 0;
    left: 50%;
    margin-left: -120px;
    margin-top: -50px;
    top:50%;
    display: flex;
    flex-wrap: wrap;
}

        div.tab_content &gt; #web ul li a .p_wrap p{
            color:#fff;
            width: 90px;
            text-align: center;
            background: #7da7d9;
            padding: 10px;
            /*position: absolute;*/
            z-index: 11;
            
            margin:5px;
            display:none;
        }

div.tab_content &gt; #web ul li:nth-child(3) a .p_wrap p:nth-child(3),div.tab_content &gt; #web ul li:nth-child(4) a .p_wrap p:nth-child(3){
    background: #fff;
    color: #7da7d9;
}


        /*-----------2dworks-------------------*/
#graphics{
            padding-left: 5%;
            overflow: hidden;
            width: 90%;
}

        #adv h4,#mobile h4, #info h4{
            font-size: 1.3em;
            font-weight: bold;
            margin-top: 10px;
            text-indent: 3%;
            color: #777;
        }

#adv,#mobile, #info{
    width: 100%;
}
        
        .swiper-container{
            width: 100%;
           /* max-width:900px;*/
           /* height: 210px;*/
            margin: 20px 0;
            
         }

.swiper-wrapper{
    width: 100%;
}
        .swiper-slide{
            width: 100%;
            text-align: center;
            font-size: 18px;
            background: #fff;
            /*width: 80%;*/
            position: relative;

        }

        .swiper-slide a{
            display: block;
        }

	    .swiper-slide img{
            width:100%;
            height:auto;
            vertical-align:top;
           /* vertical-align:middle;*/
        }
.swiper-button-next, .swiper-button-prev {
    margin-top: -30px;
    background-color: rgba(0,0,0,0.4);
}

        .swiper3 img{
            width:80%;
            height:auto;
            vertical-align:top;
        }

	    .swiper-slide p{
            display:none;
            color: #fff;
            font-size: 13px;
            position: absolute;
            z-index: 10;
            top: 40%;
            left: 37%;
        }

          #glaylayer{/*화면전체를 어둡게*/
            position: fixed;/*absolute는 화면전체기준으로 잡히나 스크롤 움직엿을때 빈 화면 생김 */
            display: none;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.6;
            filter: alpha(opacity=60);
            z-index:100; 
        }
        
        #overlayer{
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            margin-top: -350px;
            /*이미지 세로 크기, 2나눈값(절반사이즈만큼 위쪽으로 이동)*/
            margin-left: -215px;
            /*이미지 가로 크기, 2나눈값(절반사이즈만큼 왼쪽으로 이동)*/
            width: 50%;
            z-index: 101;
           
        }
        
        #overlayer div{position: relative;/*fixed넣은데에는 relative 못주니 div만든데에 이거 넣기 */ 
            width: 500px;}
        
        #overlayer &gt; div &gt; img{
            width: 100%;
        }

        #overlayer &gt; div &gt; span{
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
        }

/*-------------3dworks---------------------------------------------*/

#graphic3d{
            padding-left: 5%;
            overflow: hidden;
            width: 90%;
}

#work3d h4,#character h4{
            font-size: 1.3em;
            font-weight: bold;
            margin-top: 10px;
            text-indent: 3%;
            color: #777;
        }

#work3d,#character{
    width: 100%;
}
        
.swiper-button-next, .swiper-button-prev {
    margin-top: -30px;
    background-color: rgba(0,0,0,0.4);
}

        .swiper6 img{
            width:80%;
            height:auto;
            vertical-align:top;
        }

	    .swiper-slide p{
            display:none;
            color: #fff;
            font-size: 13px;
            position: absolute;
            z-index: 10;
            top: 40%;
            left: 37%;
        }

 #darklayer{/*화면전체를 어둡게*/
            position: fixed;/*absolute는 화면전체기준으로 잡히나 스크롤 움직엿을때 빈 화면 생김 */
            display: none;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.6;
            filter: alpha(opacity=60);
            z-index:100; 
        }
        
        #hoverlayer{
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            margin-top: -350px;
            /*이미지 세로 크기, 2나눈값(절반사이즈만큼 위쪽으로 이동)*/
            margin-left: -215px;
            /*이미지 가로 크기, 2나눈값(절반사이즈만큼 왼쪽으로 이동)*/
            width: 50%;
            z-index: 101;
           
        }
        
        #hoverlayer div{position: relative;/*fixed넣은데에는 relative 못주니 div만든데에 이거 넣기 */ 
            width: 500px;}
        
        #hoverlayer &gt; div &gt; img{
            width: 100%;
        }

        #hoverlayer &gt; div &gt; span{
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
        }
        

/*-------------------profile-----------------------------*/
        
        #profile{
              /*display: flex;*/
            float: left;
            overflow: hidden;
            width: 100%;
           /* height: 100%;*/
            background: #424242;
        }

        #profile .white{
            margin-left: 25px;
        }

        #profile h3{
            font-size: 1.3em;
            background: url(../index_img/bg3.jpg) center no-repeat;
            background-size: cover;
            color: #fff;
            /*width: 15%;*/
             /*width: 250px;*/
           /* display: flex;
            align-items: center;
            justify-content: center;*/
            height: 750px;
             width: 250px;
             float: left;
            text-align: center;
            padding-top: 425px;
        }

#profile h3 strong{
     font-size: 2.5em;
    color: #4f8dd8;
}

#profile h3 p{
  text-align:center;
    border-top: 2px solid #404040;
}

#profile_tl{
    width: 40%;
    float: left;
    margin-left: 30px;
}
        #profile_title{
           /* display: flex;*/
           /* align-items: center;*/
            width: 300px;
            border-bottom: 3px solid #4f8dd8;
            padding-bottom: 7px;
            float: left;
            overflow: hidden;
        }

        #profile_title h4{
            font-size: 1.7em;
            display: inline-block;
            color: #fff;
            
        }

        #profile_title span{
            padding-left: 5px;
            padding-top: 10px;
            color: #999;
        }

        #profile_left{
            float: left;
            overflow: hidden;
            width: 50%;
            text-align: justify;
        }

        #profile_2 p{
            width: 100%;
            font-size: 1.3em;
            font-weight: bold;
            padding-top: 20px;
            color: #fff;
            
        }

        #profile_3{
            margin-top: 40px;
        }

         #profile_3 p{
            font-size: 1.2em;
            padding-top: 10px;
             color: #fff;
        }

        #profile_3 p:nth-child(1){
            font-size: 1.3em;
            font-weight: bold;
            padding-top: 20px;
            color: #4f8dd8;
        }

        #profile_4{
            margin-top: 40%;
        }

        #profile_4 span{
            color:#4f8dd8;
            font-size: 1.2em;
            font-weight: bold;
            text-decoration: underline;
           
        }

         #profile_right{
            /*float:left ;*/
            overflow: hidden;
            /* padding-left: 10px;*/
             width: 40%;
        }
        
        #profile_right &gt; p{
            font-size: 1.3em;
            font-weight: bold;
            margin: 20px 0;
            color: #fff;
             
        }

        
#skill_2d{
   float: left;
    text-align: center;
}  

#skill_2d li,#skill_3d li{
    overflow: hidden;
    color: #fff;
}

.skill_img{
    float: left;
}

.skill_lv{
    float: right;
    padding-top: 23px;
}


#skill_3d{
    float: right;
text-align: center;}


  #bkpoplayer{/*화면전체를 어둡게*/
            position: fixed;/*absolute는 화면전체기준으로 잡히나 스크롤 움직엿을때 빈 화면 생김 */
            display: none;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.8;
            filter: alpha(opacity=80);
            z-index:100; 
        }
        
        #poplayer{
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            margin-top: -410px;
            /*이미지 세로 크기, 2나눈값(절반사이즈만큼 위쪽으로 이동)*/
            margin-left: -297px;
            /*이미지 가로 크기, 2나눈값(절반사이즈만큼 왼쪽으로 이동)*/
            width: 50%;
            z-index: 101;
        }
        
        #poplayer div{position: relative;/*fixed넣은데에는 relative 못주니 div만든데에 이거 넣기 */ 
            width: 590px;}
        
        #poplayer &gt; div &gt; img{
            width: 100%;
        }

        #poplayer &gt; div &gt; span{
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
        }

        


/*-------------------------contact-------------------*/
 #contact{
    /*display: flex;*/
     float: left;
            overflow: hidden;
            width: 100%;
           /* height: 100%;*/
     /*margin-bottom: 50px;*/
             
     
} 


#contact h3{
            font-size: 1.3em;
            background: url(../index_img/bg4.jpg) center no-repeat;
            background-size: cover;
            color: #fff;
            /*width: 15%;*/
            /*display: flex;
            align-items: center;
            justify-content: center; */
            height: 550px;
             width: 250px;
            float: left;
            text-align: center;
            padding-top: 425px;
        }

#contact h3 strong{
     font-size: 2.5em;
    color: #4f8dd8;
}

#contact h3 p{
  text-align:center;
    border-top: 2px solid #404040;
}


#contact figure{
    float: left;
    margin-left: 3%;
    margin-top: 5%;
    width:78%;
    
}

#contact figure img{
    width: 100%;
}

#contact_3{
    margin-top: 10%;
    margin-left: 0px;
    
}

/*
#contact_3 ul{
    display: flex;
}
*/

#contact_3 ul li{
/*    display: flex;
    flex-direction: column;
    flex-grow:1;*/
    float: left;
    padding: 0 8%;
}

#contact_3 ul li h4{
    font-size: 1.5em;
    font-weight: bold;
}

#contact_3 ul li p{
    font-size: 1.1em;
    margin-top: 10px;
    margin-bottom: 50px;
}

        
        
        
        /*푸터 스타일*/
        #footer{
             background-color: #999;
            height: 50px;/*내용에따라 늘어나도록 원래 세로 안주는것*/
            overflow: hidden;
            padding: 10px 0 ;
        }
        
        /*go버튼*/
        .go_top{
            position: fixed;
            bottom: 80px;/*footer회색영역보다 올리고 싶어서 ㅇㅇ*/
            right: 10%; 
            display: none;
        }
        
        .go_top a{
            color: #fff;
            background-color: rgba(0,0,0,0.8);
            padding: 10px;
        }
        
        .go_top:hover a{
           background-color:  rgba(255,255,255,0.8);
            color: #000;
        }
        
 












/*--------------------미디어 쿼리-------------------*/
@media screen and (max-width:1130px){
    #work h3,#profile h3,#contact h3{
        width: 15%;
    }


@media screen and (max-width:1030px){/*원래 970*/
    .tab_content #web{
      width: 100%;
    }
    
    .tab_content #web ul li{
        width: 50%;
        padding: 5px;
    }
  
    #profile h3{
       height: 800px; 
    }
    
    #profile_left{
       width:60%;
    }
    
   #profile_4{
            margin-top: 200px;
       margin-right: 30px;
       float:left;
        }
    
    #profile_right{
        width: 40%;
        padding-left: 30px;
        }

}
@media screen and (max-width:856px){
    
     #profile_right{
        width: 80%;
        margin-top: 100px;
        }
}
@media screen and (max-width:767px){
    #navi_ul{
        display: none;
    }
    #m_menu{
        display: block;
        position: absolute;
        right: 5%; 
    }
    
    #m_menu img{
        width: 80%;
    }
    
    #sm_menu{    
    right: -100%;
    display: block;
    }

    
    
    #work h3, #work h3, #profile h3, #contact h3{
        display: none;
    }
  /*-----------2dwork--------------*/  
    #adv,#mobile,#info{
        width: 100%;
    }
   #adv h4,#mobile h4, #info h4{
            font-size: 1.1em;
            text-indent: 0;
        }
     #work .white{
        float: none;
        width: 100%;
        margin-left: 0;
    }
        .p_wrap {
            
            width: 150px;
            height: 60px;
            z-index: 9;
            top: 0;
            left: 50%;
            margin-left: -75px;
            margin-top: -40px;
            top: 50%;
            display: flex;
            flex-wrap: wrap;
        }
        div.tab_content &gt; #web ul li a .p_wrap p{
            width: 60px;
            font-size: 0.8em;
            margin: 2px;
            padding: 10px 5px;
            line-height: 1.2em;
        }
        
        .swiper-container{
            width: 100%;
            margin: 20px auto;
         }
        .swiper-slide{
            font-size: 18px;
            position: relative;

        }

        .swiper-slide a{
            display: block;
        }

	    .swiper-slide img{
            width:100%;
            height:auto;
            vertical-align:top;
           /* vertical-align:middle;*/
        }

        .swiper3 img{
            width:80%;
            height:auto;
            vertical-align:top;
        }

	    .swiper-slide p{
            display:none;
            color: #fff;
            font-size: 13px;
            position: absolute;
            z-index: 10;
            top: 40%;
            left: 37%;
        }

          #glaylayer{/*화면전체를 어둡게*/
            position: fixed;/*absolute는 화면전체기준으로 잡히나 스크롤 움직엿을때 빈 화면 생김 */
            display: none;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.6;
            filter: alpha(opacity=60);
            z-index:100; 
        }
        
        #overlayer{
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            margin-top: -350px;
            /*이미지 세로 크기, 2나눈값(절반사이즈만큼 위쪽으로 이동)*/
            margin-left: -215px;
            /*이미지 가로 크기, 2나눈값(절반사이즈만큼 왼쪽으로 이동)*/
            width: 50%;
            z-index: 101;
           
        }
        
        #overlayer div{position: relative;/*fixed넣은데에는 relative 못주니 div만든데에 이거 넣기 */ 
            width: 500px;}
        
        #overlayer &gt; div &gt; img{
            width: 100%;
        }

        #overlayer &gt; div &gt; span{
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
        }
    #profile_tl{
        width: 100%;
        margin-left: 0;
    }
    #profile_right{
        padding-left: 0;
    }
    
    
#contact_3 ul li{

    padding: 0 2%;
}
    #contact figure{
        width: 95%;
    }
    

   
    
    
}/*최대 사이즈 767*/









</pre></body></html>