@charset "utf-8";

  #modal{
    width:100%; height:100%;
    position:fixed;
    top:50%; left:50%;
    background-color:rgba(0, 0, 0, 0.7);
    transform:translate(-50%, -50%);
    z-index:9999;
    display:none;
  } 
  #modal > .t{
    position:fixed;
    top:32%; left:50%;
    transform:translatex(-50%);
    background-color:#fff;
    width:300px; height:50px;
  }
  #modal > .b{
    text-align:center;
    position:fixed;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:300px; height:270px;
    font-size:16px; 
    color:#333;
    padding:50px 30px;
    line-height:25px;
    background-image:url(../images/modal.png);
    background-size:100% 100%;
    background-repeat: no-repeat;
  }
  #modal > .b > .m_logo{
    width:60%;
    text-align:center;
  }
  #modal > .b > .m_back{
    position:absolute;
    top:0px; left:0px;
  }
  #modal span{
    font-weight:bold;
    color:#fff;
    background-color:#333;
    border-radius:5px;
    padding:2px;
  }
  #modal .close{
    position:absolute;
    bottom:20px; left:50%;
    transform:translateX(-50%);
  }
  #modal .close a{
    color:#fff;
    display:block;
    padding:0px 9px;
    font-size:12px;
  }
  #modal .close:hover a{
    background-color:#fff;
    color:#333;
  }
  /* 헤더시작 */
  header{
    position:fixed;
    width:100%; height:80px;
    z-index:1000;
    transition:0.3s;
    right:0px;
  }
  header:hover{
    background:rgba(255, 255, 255,.9);
  }
  header > h1{
    width:200px;
    float:left;
    margin:2px 40px;
  }
  header > h1 > a{}
  header > h1 > a > img{ width:100%;}

  header nav{
    height:80px;
    float:right;
    position:relative;
  }
  header nav > .menu{
    width:900px;
    display:flex;
    justify-content:space-around;
    margin:27px;
    transition:0.3s;
  }
  header nav > .menu >li{
    width:100%;
    text-align:center;
  }
  header nav > ul > li > a{
    display:block;
    width:100%;
    color:#fff;
    padding:5px 0px;
    text-align:center;
    transition:0.5s;
  }
  header nav > .menu > li > a:hover{
    opacity:0.7;
    transform:scale(1.1); 
  }

  header > nav > .menu01{
    width:30px;
    float:right;
    display:flex;
    margin:30px 20px;
    padding-right:20px;
    background-color:rgba(255, 255, 255, .9);
    border-radius:25px;
    z-index:9980;
    transition:0.5s;
    overflow:hidden;
    /* display:none; */
  }
  .m_act{
    width:500px !important;
  }
  .menu01 > li{
    width:100px;
    margin:10px;
  }
  .menu01 > li > a{
    color:#333;
  }
  
  .arrow{
    width:60px; height:60px;
    position:absolute;
    right:-3px;
    background-color:#333;
    border-radius:50%;
    margin:22px;
    padding:7px;
    box-sizing:border-box;
    cursor:pointer;
    display:none;
    z-index:9999;
    transition:0.5s;
  }
  .arrow > div{
    position:relative;
    width:35px; height:6px;
    background-color:#fff;
    margin:7px auto 0px auto;
    border-radius:10px;
    transition:0.3s;
  }
  .a01{
    transform:rotate(30deg);
    width:23px !important;
    left:9px; top:8px;
  }
  .a02{
    width:30px;
    right:0px;
  }
  .a03{
    transform:rotate(-30deg);
    width:23px !important;
    left:9px; bottom:8px;
  }





/* 메인시작 */
  main{clear:both;}
  #banner{
    width:100%; height:960px;
    background-color:none;
    overflow:hidden;
  }
  #banner > video{
    width:100%;
  }
  #banner > h2{
    font-size:80px; 
    color:#fff;
    font-weight:bold;
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    font-family:"play-black",arial, 'sans-serif';
  }
  #banner > p{
    position:absolute;
    top:40%; left:50%;
    color:#fff;
    font-size:25px;
    transform:translatex(-50%);
    font-family:"future",arial, 'sans-serif';
  }
  #banner > .p01{
  }
  #banner > .p02{
    top:60%; left:50%;
  }
  .wheel{
    position:absolute;
    bottom:2%; left:50%;
    transform:translateX(-50%);
    z-index:9998;
  }
  .wheel img{
    width:80px; 
  }
  .wheel span{
    display:block;
    width:10px; height:10px;
    position:fixed;
    bottom:25%; left:50%;
    transform:translateX(-50%);
    border-radius:50%;
    background:#fff;
    cursor:default;
  }

  /* about시작 */
  #about{
    width:100%; height:960px;
    background:#000;
    position:relative;
  }
  #about_box01{
    width:1240px; height:700px;
    margin:0px auto;
    position:relative;
  }
  #about_box01 > ul{
    display:flex;
    justify-content:flex-end;
  }
  #about_box01 > ul > li{
    height:70px;
  }
  #about_box01 > ul > li a{
    display:block;
    padding:5px 15px;
    margin-top:40px;
    color:#fff;
    transition:0.2s;
  }
  #about_box01 > ul > li > div{
    width:100%; height:640px;
    position:absolute;
    bottom:0px; left:0px;
    display:none;
  }
  #about_box01 ul > img{
    position:absolute;
    top:70px;
    width:80%;
    z-index:0;
  }
  .font{
    transform:scale(1.1);
    font-weight:bold;
  }

  .profile{
    font-size:20px;
    color:#fff;
    z-index:10;
    position:relative;
    display:none;
  }
  .profile > h3{
    position:absolute;
    top:15%; left:15%;
    line-height:35px;
    display:none;
  }
  .profile > h3 img{
    position:absolute;
    top:7px; left:-65px;
    width:64px; height:60px;
  }
  .profile > .hide_box{
    width:50px; height:10px;
    position:absolute;
    top:40%; left:11%;
    overflow:hidden;
  }
  .profile .p_box01{
    width:350px; height:315px;
    position:absolute;
    top:0%; left:0%;
    font-size:16px;
    line-height:45px;
    z-index:10;
    display:flex;
    overflow:hidden;
  }
  .p_box01 > div{
    width:22px; height:315px;
    background:rgb(112, 112, 112);
    margin-right:30px;
  }
  .profile .p_box02{
    width:0px; height:20px;
    position:relative;
    top:100px; left:50%;
    font-size:18px;
    line-height:25px;
    z-index:10;
    text-align:left;
    overflow:hidden;
  }
  .profile .p_box02 img{
    width:370px;
    position:absolute;
    left:30px;
  }
  
  .career{
    color:#fff;
  }
  .career > h3{
    margin:50px 0px 100px 100px;
    line-height:35px;
    font-size:25px;
    transition:3s;
  }
  .career > .box01, .box02{
    width:20px; height:60px;
    background-color:#ccc;
    float:left;
    margin-left:115px;
  }
  .career > h3 img{
    transform:translatey(23px);
    width:64px; height:60px;
  }
  .career > p{
    margin:20px 0px 50px 150px;
    line-height:25px; 
  }
  .career > p > span{
    font-size:24px;
    font-weight:bold;
  }
  .career >.p_box02{
    width:500px; height:550px;
    position:absolute;
    top:10%; right:0%;
    font-size:18px;
    line-height:25px;
    z-index:10;
    text-align:left;
    overflow:hidden;
  }
  .career .p_box02 img{
    width:360px;
    position:absolute;
    top:0px; left:0px;
  }



  #about_box02{
    width:100%; height:260px;
    background-color:#000;
    position:relative;
    color:#fff;
  }
  .skill{
    width:100%; height:260px;
    margin:0px auto;
    text-align:center;
  }
  .skill > div{
    width:180px; height:240px;
    margin:10px;
    display:inline-block;
    position:relative;
    overflow:hidden;
  }
  .skill > div p{
    margin-top:10px;
  }
  .skill > div > .g_box{
    width:100%; height:180px;
    position:absolute;
    bottom:0px;
    transition:0.5s;
  }
  .skill > div > .g_box > img{
    width:100%;
    position:absolute;
    left:0px;
    z-index:500;
  }
  .skill > div > .g_box > p{
    margin:30px auto 0px auto;
    line-height:25px;
    display:none;
    transition:1s;
  }



  /* 스킬 게이지바 */
  .skill > .Photo > .g_box > .gauge{
    position:absolute;
    left:2px; bottom:-100%;
    width:100%; height:180px;
    background-color:#fff;
    z-index:100;
  }
  .skill > .illust > .g_box > .gauge{
    position:absolute;
    left:2px; bottom:-100%;
    width:100%; height:180px;
    background-color:#fff;
    z-index:100;
  }
  .skill > .HTML > .g_box > .gauge{
    position:absolute;
    left:2px; bottom:-100%;
    width:100%; height:180px;
    background-color:#fff;
    z-index:100;
  }
  .skill > .CSS > .g_box > .gauge{
    position:absolute;
    left:2px; bottom:-100%;
    width:100%; height:180px;
    background-color:#fff;
    z-index:100;
  }
  .skill > .java > .g_box > .gauge{
    position:absolute;
    left:2px; bottom:-100%;
    width:100%; height:180px;
    background-color:#fff;
    z-index:100;
  }
  .skill > .jquery > .g_box > .gauge{
    position:absolute;
    left:2px; bottom:-100%;
    width:100%; height:180px;
    background-color:#fff;
    z-index:100;
  }



  /* portfolio 시작 */
  .port_n{
    position:fixed; top:50%; right:130px;
    transform:translateY(-50%);
    cursor:pointer;
    display:none;
    z-index:9999;
  }
  .port_n > ul{
    width:11px; 
    background-color:#fff;
    position:relative;
  }
  .port_n > ul > li{
    width:100%;  height:65px;
    border:1px solid #333;
    background-color:#fff;
  }
  .act{
    background:#000 !important;
    border:2px solid #fff !important;
    transform:translateX(-1px);
    transition:0.5s;
  }
  .act01{
    color:#000 !important;
    font-weight:bold;
  }
  .port_n > ul > li > span{
    display:inline-block;
    width: 100%; height:100%;
  }
  #portfolio{
    width:100%;
    /* background-color:#ccc; */
  }
  #portfolio > article{
    margin:0px auto;
  }


  /* 포트폴리오 1 */
  .port01, .port02, .port03, .port04{
    width:85%; height:960px;
    position:relative;
    overflow:hidden;
  }
  .port01{
  }
  #portfolio .img_box{
    width:820px; height:820px;
    position:relative;
    top:50px;
    float:left;
    margin:20px 0px 0px 50px;
  }
  #portfolio .img_box > img{
    position:absolute;
    top:0px;
  }
  #portfolio .img_box > .img01{
    z-index:1000;
  }
  #portfolio .img_box > .img02{
    width:80%;
    top:10%; left:10%;
    animation: rotate_images 15s linear infinite;
  }
  #portfolio .img_box > .img03{
    width:100%;
    animation: rotate_images_re 10s linear infinite;
  }
  #portfolio .img_box > .m_img01{
    width:580px; height:580px;
    border-radius:50%;
    overflow:hidden;
    position:absolute;
    top:120px; left:120px;
  }
  #portfolio .img_box > .m_img01 > .img04{
    width:100%;
    display:block;
    margin-top:80px;
  }
  #portfolio .img_box > .icon01{
    position:absolute;
    bottom:140px; left:320px;
  }
  #portfolio .img_box > .icon01 > span{
    display:inline-block;
    font-size:30px;
    color:#c1a95b;
    font-weight:bold;
    text-indent:10px;
    transform:translateY(-20px);
  }

  #portfolio .txt_box{
    width:700px; height:820px;
    position:relative;
    top:10px;
    float:left;
  }
  #portfolio .txt_box > img{
    width:40px;
    position:absolute;
  }
  #portfolio .txt_box > .t_commas{
    top:150px; left:50px;
  }
  #portfolio .txt_box > .b_commas{
    bottom:100px; right:50px;
  }
  
  #portfolio .txt_box > p{
    text-align:left;
    line-height:25px;
    justify-content:center;
    margin:20px 0px 0px 150px;
  }
  #portfolio .txt_box > .title{
    margin:250px 0px 50px 150px;
    font-size:25px;
    font-weight:bold;
    color:#C1A95B;
  }
  #portfolio .txt_box > .sub_title{
    font-size:18px;
    font-weight:bold;
  }
  #portfolio .txt_box > p > img{
    display:inline-block;
    width:40px;
    transform:translatey(10px);
  }
  #portfolio .txt_box > span{
    display:inline-block;
    background-color:#fff;
    color:#333;
    border-radius:5px;
    margin-top:50px;
    margin-right:30px;
    cursor:pointer;
    transition:0.3s;
  }
  #portfolio .txt_box > .btn01{
    margin-left: 150px;
  }
  #portfolio .txt_box > .btn01 > a, #portfolio .txt_box > .btn02 > a{
    display:block;
    padding:5px 10px;
  }
  #portfolio .txt_box > span:hover a{
    background-color:#333;
    color:#C1A95B;
  }


  /* 포트폴리오2 */
  .port02{
  }
  #portfolio > .port02 > .img_box > .m_img02{
    width:580px; height:580px;
    border-radius:50%;
    overflow:hidden;
    position:absolute;
    top:120px; left:120px;
  }
  #portfolio > .port02 > .img_box > .m_img02 > .img04{
    width:100%; 
    display:block;
    margin-top:80px;
  }
  #portfolio > .port02 > .img_box > .icon02{
    position:absolute;
    bottom:140px; right:320px;
  }
  #portfolio .img_box > .icon02 > span{
    display:inline-block;
    font-size:30px;
    color:#c1a95b;
    font-weight:bold;
    text-indent:10px;
    transform:translateY(-20px);
  }
  

  /* 포트폴리오3 */
  .port03{
  }
  #portfolio > .port03 > .img_box > .m_img03{
    width:580px; height:580px;
    border-radius:50%;
    overflow:hidden;
    position:absolute;
    top:120px; left:120px;
  }
  #portfolio > .port03 > .img_box > .m_img03 > .img04{
    width:100%; 
    display:block;
    margin-top:80px;
  }
  #portfolio > .port03 > .img_box > .icon03{
    position:absolute;
    bottom:140px; left:270px;
  }
  #portfolio .img_box > .icon03 > span{
    display:inline-block;
    font-size:30px;
    color:#c1a95b;
    font-weight:bold;
    text-indent:10px;
    transform:translateY(-20px);
  }


  /* 포트폴리오4 */
  .port04{
  }
  #portfolio > .port04 > .img_box > .m_img04{
    width:580px; height:580px;
    border-radius:50%;
    overflow:hidden;
    position:absolute;
    top:120px; left:120px;
  }
  #portfolio > .port04 > .img_box > .m_img04 > .img04{
    width:100%; 
    display:block;
    margin-top:100px;
  }
  #portfolio > .port04 > .img_box > .icon04{
    position:absolute;
    bottom:140px; right:340px;
  }
  #portfolio .img_box > .icon04 > span{
    display:inline-block;
    font-size:30px;
    color:#c1a95b;
    font-weight:bold;
    text-indent:10px;
    transform:translateY(-20px);
  }


  /* 스크롤 값 보이기 */
  .status{
    position:fixed;
    top:100px; right:100px;
    background:#ffff00;
    color:#f00; font-size:20px;
    z-index:9999;
  }

/* skill시작 */
  #gallery{
    width:100%; height:960px;
    background:rgb(92, 140, 189);
  }


  /* contact시작 */
  #contact{
    width:100%; height:830px;
    background-color:#333;
    margin:0px auto;
    position:relative;
  }
  #contact > .txt01{
    position:absolute;
    top:5%; left:0%;
    font-size:45px;
    color:#fff;
    font-family:"jalnan", arial, sans-serif;
  }
  #contact > .txt02{
    position:absolute;
    top:20%; right:0%;
    font-size:45px;
    color:#fff;
    font-family:"jalnan", arial, sans-serif;
  }
  #contact > #con_box{
    width:1240px; height:450px;
    position:absolute;
    top:40%; left:50%;
    transform:translatex(-50%);
    background-color:#222;
    display:flex;
  }
  #contact > #con_box > h3{
    position:absolute;
    top:20px; left:50%;
    transform:translate(-50%);
    color:#fff;
    font-weight:bold;
    font-size:20px;
  }
  .txt_box{
    width:620px; height:250px;
    margin-top:0px;
  }
  .txt_box > p{
    text-align:center;
    margin:80px 0px 0px 50px;
    line-height:21px;
    color:#fff;
  }
  #contact > #con_box > .txt_box > .img_box{
    width:570px; height:155px;
    background-color:#ccc;  
    margin:20px 0px 0px 50px;
  }
  .email{
    width:620px; height:450px;
  }
  .email > ul{
    color:#fff;
    margin:50px 0px 0px 30px;
  }
  .email > ul > li{
    height:90px;
    display:flex;
  }
  .email  img{
    width:85px; height:85px;
    display:block;
    margin:20px;
  }
  .email span{
    line-height:20px;
    padding:40px 0px;
  }
  .email > ul > li:nth-child(3) span{
    padding:50px 0px;
  }
  .email > ul > li:last-child span{
    padding:50px 0px;
  }




  /* 푸터시작 */
  footer{
    width:100%; height:130px;
    background-color:#8E8E8E;
    font-size:14px;
  }
  footer > address{
    text-align:center;
    transform:translateY(50px);
    line-height:20px;
  }
  footer > address > span{
    color:#000;
  }

  @keyframes ani{
    0%{top:85px}
    50%{top:90px}
    100%{top:85px}
  }

  /* 타이핑 */

  /* #typing {
    display: inline-block;
    animation-name: cursor;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
  } */
  @keyframes cursor{
      0%{border-right: 1px solid #fff}
      50%{border-right: 1px solid #000}
      100%{border-right: 1px solid #fff}
  }

  @keyframes rotate_images{
    100%{transform:rotate(360deg);}
  }
  @keyframes rotate_images_re{
    100%{transform:rotate(-360deg);}
  }