@charset "utf-8";
#main .main_visual{height: 100vh;position: relative;background-image:url('/img/main_bg.png');background-position: center;background-repeat: no-repeat;background-size: cover}
#main .main_visual .img{max-width: 900px;margin: 0 auto}
#main .main_visual .btms{position: absolute; left: 60px;bottom: 54px;width:calc(100% - 120px)}
#main .main_visual .btms .sns{float:left;font-size: 0}
#main .main_visual .btms .sns > a{display: inline-block;vertical-align: middle}
#main .main_visual .btms .sns > a:first-child{position: relative;margin-right: 13px;padding-right: 14px;}
#main .main_visual .btms .sns > a:first-child::before{width: 1px;height: 15px;background: #808080;content: ''; position: absolute;right: 0;top:50%; margin-top: -7.5px}

#main .main_visual .btms .g_list{float: right}
#main .main_visual .btms .g_list ul {font-size: 0}
#main .main_visual .btms .g_list ul li{display: inline-block;vertical-align: middle;margin-left: 55px}
#main .main_visual .btms .g_list ul li:first-child{margin-left: 0}
#main .main_visual .btms .g_list ul li a{color:#c2c2c2; text-transform: uppercase;display: block;font-size: 15px;color:#c2c2c2}


#main .ct_map{padding: 200px 0; text-align: center}
#main .ct_map .mo{display: none}
#main .ct_map img{max-width: 100%}
#main .contact{padding: 70px 0 110px;text-align: center}
#main .cont_wrap .img{}
#main .cont_wrap{max-width: 610px; margin: 0 auto}
#main .cont_wrap > p{color:#333333; font-size: 14px;font-weight: 700;margin-top: 22px;letter-spacing: 5px; text-align: center;}
#main .cont_wrap ul{margin-left: -30px;font-size: 0;margin-top: 35px;margin-bottom: 90px;}
#main .cont_wrap ul li{color: #79787D;font-size: 15px; margin-left: 30px;display: inline-block;vertical-align: middle}
#main .cont_wrap #emailForm{text-align: center;margin-top:50px}
#main .cont_wrap #emailForm input{border: none;  height: 37px;  line-height: 37px; text-align: center;  font-size: 15px; color: #fff;background: transparent;border-bottom: 1px solid #6d6d6d;display: block;width: 100%}
#main .cont_wrap #emailForm input::placeholder,#main .cont_wrap #emailForm textarea::placeholder{color:#7d7d7d;font-size: 18px} 
#main .cont_wrap #emailForm textarea{border: none;  height: 37px;  line-height: 37px; text-align: center;  font-size: 15px; color: #fff;background: transparent;border-bottom: 1px solid #6d6d6d;display: block;resize: none;width: 100%;margin-top: 40px}
#main .cont_wrap #emailForm .btns_wr{max-width: 184px;margin: 100px auto;position: relative}
#main .cont_wrap #emailForm button{font-size: 13px;position: absolute;max-width: 184px;margin-left: 24px;margin-top: 0 }
#main .cont_wrap #emailForm button span{font-size: 13px}
#main .cont_wrap #emailForm .button-success{display: none}
.b_tit a {
  position: absolute;
  font-size: 20px;
  color: #fff;
  line-height: 22px;
  bottom: 0;
  display: block;
  border-bottom: 1px solid #fff;
  right: 0;
  bottom: -4px;
  text-transform: capitalize;
}

#project{padding-top: 145px;padding-bottom: 100px}
.project{}

.project .p_img{text-align: center;}
.project .category{margin-top:54px;text-align: center;}
.project .category ul{margin-left: -30px; font-size: 0}
.project .category ul li{margin-left: 30px;display: inline-block;vertical-align: middle}
.project .category ul li.on a{color:#757575}
.project .category ul li a{color:#383838;font-size: 16px;font-weight: 500;text-transform: capitalize}
.project .pj_list {
  max-width: 1000px;margin:40px auto 0
}
.project .pj_list ul {
  width: calc(100% + 20px);
  margin-left: -20px;
  margin-top: -20px;
  font-size: 0;
  
}
.project .pj_list ul li{overflow: hidden;border-radius: 15px;width:calc(50% - 30px);margin-left: 20px;margin-top:20px;float: left;background-size:cover;background-repeat: no-repeat;background-position: center;position: relative;text-align: center}
.project .pj_list ul li a{display: block;} 
.project .pj_list ul li a img{visibility: hidden;opacity: 0}
.project .pj_list ul li a > div{color: #fff;  background-color: rgba(0,0,0,0.6);position: absolute;left: 0; top:0; width:100%; height:100%; padding-top:14%;opacity: 0;transition:all .4s}
.project .pj_list ul li a > div b{font-size: 30px; margin-top:30px; display: block}
.project .pj_list ul li a > div p{font-size: 22px;}
.project .pj_list ul li a > div span{display: block;font-size: 15px;margin-top:15px;  font-weight: 200;}
.project .pj_list ul li a:hover > div{opacity: 1}



/**************** 사이트보기 박스 ********************/

#project_view .projectInfo #projectLink{
    width: 170px;
    height: 37px;
    line-height: 38px;
    text-align: center;
    border: 1px solid #747474;
    margin-top: 25px;
    font-size: 15px;
    color: #6A6A75;
    background: url("/img/sub/btnGoSite2.png") no-repeat 100px 15px;
    /*니가바뀌는 모든속성을 바꿔라=all*/
  
  }

#project_view .projectInfo #projectLink .bo {
    display: block;
    padding-right: 55px;
}


/**************** 사이트보기 박스 ********************/


/****************박스사진확대********************/
.bigcon {
    overflow: hidden;
    width: 480px;
    height: 298px;
    position: relative;
  }
  
  .bigcon a img {
    width: 100%;
    content: "";
    /*글없이하려면 content는 ""하고 바로밑에두개 없애면됨*/
    text-align: center;
    color: #fff;
  
  }

  /*확대효과
  .bigcon:hover a {
    transform: scale(1.05);
    transition: all 0.4s ease-in-out;
  }
  */


  .itemm {
    height: 298px;
  }
  .blackcon {
    position: absolute;
    background: rgba(0,0,0,0.0);
    height: 100%;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    transition: all 0.6s;
    line-height: 30px;
    width: 480px;
    height: 298px;
    color: rgba(0,0,0,0);
    cursor: pointer;
    v
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
  }
  
  .blackcon:hover {
    color: #fff;
    background-color: rgba(0,0,0,0.6);
    width: 480px;
    height: 298px;
  
  }
  
  .blackcon span{
      font-weight: 600;
      font-size: 30px;
  }
  
  .line{
          text-align: center;
          position: relative;
          top: 50%;
          transform: translateY(-50%);
      }
/****************박스사진확대********************/






#project_view {
  padding-top: 106px;
  background:#ebebeb
}

#project_view .project_wrap{}
#project_view .projectImg{width:960px; height: 960px;float: left}
#project_view .projectInfo{width:calc(100% - 960px);float: left;height:960px;text-align:center;}
#project_view .pj_inner{max-width: 430px; display: inline-block;text-align:left}
#project_view .projectInfo #projectName{color:#737373;font-size: 60px;font-weight: 700;letter-spacing: -0.040em}
#project_view .projectInfo #projectTitle{font-size: 32px;font-weight: 700; line-height: 1;color: #737373;margin-top: 24px;letter-spacing: -0.02em}
#project_view .projectInfo #projectInfo{font-size: 14px;color:#666666;letter-spacing: -0.025em;line-height: 1.6;margin-top: 30px}
#project_view .projectInfo #projectLink{margin-top:30px}
#project_view .projectInfo ul{font-size: 0;margin-top: 30px;margin-left:-12px}
#project_view .projectInfo ul li{display: inline-block;vertical-align: middle;margin-top: 12px;margin-left:12px}
#project_view .projectInfo ul li em{display: inline-block;vertical-align: middle}
#project_view .projectInfo ul li span{display: inline-block;vertical-align: middle;font-size: 14px;color:#666666;letter-spacing: -0.025em;padding-left:10px;box-sizing:border-box}
#project_view .list_btn {
  position: fixed;
  right: 60px;
  bottom:60px;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 3px 3px 8px -4px #717171;
}
#project_view .list_btn a {
  display: block;
 
}

.project_view .pc_img{text-align: center}
.project_view .mo_img{display: none}

#loading {
  display: block;
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111621;
  z-index: 9999;
}

.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(20, 20, 20, 0.8), rgba(0, 0, 0, 0.8));

  background: -webkit-radial-gradient(
    rgba(20, 20, 20, 0.8),
    rgba(0, 0, 0, 0.8)
  );
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: "";
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 150ms infinite linear;
  -moz-animation: spinner 150ms infinite linear;
  -ms-animation: spinner 150ms infinite linear;
  -o-animation: spinner 150ms infinite linear;
  animation: spinner 150ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 1.5em 0 0,
    rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) -1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 -1.5em 0 0,
    rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 1.5em 0 0,
    rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) -1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 -1.5em 0 0,
    rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.skiils_hd {
  position: absolute;
  left: -9999px;
  font-size: 0;
}
/*scroll 효과*/
.mv_scl {
  animation: vb 2s infinite;
}
::-webkit-scrollbar {
  width: 5px;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  width: 5px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 3px;
}
::-webkit-scrollbar-track {
  width: 5px;
  background: transparent;
}
@keyframes vb {
  0% {
    bottom: 10%;
  }
  50% {
    bottom: 12%;
  }
  100% {
    bottom: 10%;
  }
}


/*포트폴리오 리스트 웹썸네일*/
.project .pj_list ul li.mac{background-image: url('/img/sub/mac_t.jpg')}
.project .pj_list ul li.vita{background-image: url('/img/sub/vita_t.jpg')}
.project .pj_list ul li.orion{background-image: url('/img/sub/orion_t.jpg')}
.project .pj_list ul li.samjin1{background-image: url('/img/sub/samjin1_t.jpg')}
.project .pj_list ul li.hong1{background-image: url('/img/sub/hong1_t.jpg')}
.project .pj_list ul li.sulbing{background-image: url('/img/sub/sulbing_t.jpg')}
.project .pj_list ul li.she{background-image: url('/img/sub/she_t.jpg')}
.project .pj_list ul li.posco{background-image: url('/img/sub/posco_t.jpg')}
.project .pj_list ul li.hollys{background-image: url('/img/sub/hollys_t.jpg')}
.project .pj_list ul li.samjin2{background-image: url('/img/sub/samjin2_t.jpg')}
.project .pj_list ul li.hong2{background-image: url('/img/sub/hong2_t.jpg')}
.project .pj_list ul li.samsung{background-image: url('/img/sub/samsung_t.jpg')}
.project .pj_list ul li.woodam{background-image: url('/img/sub/woodam_t.jpg')}
.project .pj_list ul li.hansol{background-image: url('/img/sub/hansol_t.jpg')}


/*포트폴리오 리스트 그래픽썸네일*/
.project .pj_list ul li.kepco{background-image: url('/img/sub/kepco_t.jpg')}
.project .pj_list ul li.asean{background-image: url('/img/sub/asean_t.jpg')}
.project .pj_list ul li.book{background-image: url('/img/sub/book_t.jpg')}
.project .pj_list ul li.slapton1{background-image: url('/img/sub/slapton1_t.jpg')}
.project .pj_list ul li.adidas{background-image: url('/img/sub/adidas_t.jpg')}
.project .pj_list ul li.way{background-image: url('/img/sub/way_t.jpg')}
.project .pj_list ul li.freedom{background-image: url('/img/sub/freedom_t.jpg')}
.project .pj_list ul li.nuts{background-image: url('/img/sub/nuts_t.jpg')}
.project .pj_list ul li.pattern1{background-image: url('/img/sub/pattern1_t.jpg')}
.project .pj_list ul li.love{background-image: url('/img/sub/love_t.jpg')}
.project .pj_list ul li.camel{background-image: url('/img/sub/camel_t.jpg')}
.project .pj_list ul li.samjin3{background-image: url('/img/sub/samjin3_t.jpg')}


/*포트폴리오 리스트 브랜딩썸네일*/
.project .pj_list ul li.slapton2{background-image: url('/img/sub/slapton2_t.jpg')}
.project .pj_list ul li.leeset{background-image: url('/img/sub/leeset_t.jpg')}
.project .pj_list ul li.set2{background-image: url('/img/sub/set2_t.jpg')}
.project .pj_list ul li.ty{background-image: url('/img/sub/ty_t.jpg')}
.project .pj_list ul li.rickview{background-image: url('/img/sub/rickview_t.jpg')}
.project .pj_list ul li.sunsol{background-image: url('/img/sub/sunsol_t.jpg')}
.project .pj_list ul li.gganggan{background-image: url('/img/sub/gganggan_t.jpg')}
.project .pj_list ul li.bts{background-image: url('/img/sub/bts_t.jpg')}
.project .pj_list ul li.shake{background-image: url('/img/sub/shake_t.jpg')}
.project .pj_list ul li.rak{background-image: url('/img/sub/rak_t.jpg')}
.project .pj_list ul li.busan{background-image: url('/img/sub/busan_t.jpg')}
.project .pj_list ul li.samfood{background-image: url('/img/sub/samfood_t.jpg')}
.project .pj_list ul li.hyomin{background-image: url('/img/sub/hyomin_t.jpg')}
.project .pj_list ul li.jangmo{background-image: url('/img/sub/jangmo_t.jpg')}
.project .pj_list ul li.amazing{background-image: url('/img/sub/amazing_t.jpg')}


/*포트폴리오 리스트 기타썸네일*/
.project .pj_list ul li.puppy{background-image: url('/img/sub/puppy_t.jpg')}
.project .pj_list ul li.pattern2{background-image: url('/img/sub/pattern2_t.jpg')}
.project .pj_list ul li.Dyson{background-image: url('/img/sub/Dyson_t.jpg')}
.project .pj_list ul li.festival{background-image: url('/img/sub/festival_t.jpg')}
.project .pj_list ul li.acc1{background-image: url('/img/sub/acc1_t.jpg')}
.project .pj_list ul li.acc2{background-image: url('/img/sub/acc2_t.jpg')}
.project .pj_list ul li.typo{background-image: url('/img/sub/typo_t.jpg')}
.project .pj_list ul li.note{background-image: url('/img/sub/note_t.jpg')}