/* CSS Document */
/* main */
.main { margin-left: 80px; z-index: 1000; padding: 0 7%; }

.spOnly { display: none; }

.posRel { position: relative; }

.posAbs { position: absolute; top: 0; left: 0; width: 100%; }

#works-list { max-width: 1920px; margin: 0 auto; }

#sub-nav { padding: 0 0 2%; }

#sub-nav li { margin: 0 10px 0 0; display: inline-block; cursor: pointer; padding: 6px 30px 3px; border: 1px solid #555; }

#sub-nav li:last-of-type { margin: 0; }

#sub-nav li:hover, #sub-nav li.active { background: #ffad0e; border: 1px solid #ffad0e; color: #fff; }

#tab1 { display: block; }

#tab1 .item { width: 32%; margin: 0 2% 2% 0; overflow: hidden; float: left; position: relative; z-index: 0; }

#tab1 .item:nth-of-type(3n) { margin: 0 0 2% 0; }

#tab1 .item:nth-of-type(3n + 1) { clear: both; }

#tab1 .item a { display: block; position: relative; }

#tab1 .item img { transition: all 1s; -webkit-transition: all 1s; width: 100%; }

#tab1 .item a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; height: 100%; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; }

#tab1 .item .inner { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); color: #fff; opacity: 0; z-index: 1; transition: all 0.3s; -webkit-transition: all 0.3s; font-size: 16px; }

#tab1 .item .inner p:nth-of-type(1) { font-size: 19px; margin: 0 0 3%; font-weight: bold; }

#tab1 .item a:hover:before { opacity: 1; }

#tab1 .item a:hover img { transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); }

#tab1 .item a:hover .inner { opacity: 1; }

.tab { display: none; }

.tab .box { padding: 0 0 40px; border-top: 1px solid #cecece; text-align: center; }

.tab .box h3 { font-size: 24px; font-weight: bold; padding: 40px 0 0 0; }

.tab .box .txt { font-size: 16px; margin: 0 0 30px; line-height: 1.6; }

.tab .box-img:after { display: block; clear: both; height: 0; visibility: hidden; content: '.'; zoom: 1; }

.tab .box-img img { width: 48.5%; float: left; margin: 0 3% 3% 0; }

.tab .box-img img:nth-of-type(2n) { margin: 0 0 3%; }

.tab .box-img2 img { margin: 0 0 3%; width: 100%; }

.tab .box { opacity: 0; -webkit-transition: all 1.2s; transition: all 1.2s; }

.tab .box a { position: relative; overflow: hidden; display: block; }

.tab .box a img { width: 100%; }

.tab .box a:before, .tab .box a:after { position: absolute; content: ''; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; }

.tab .box a:before { background-color: rgba(0, 0, 0, 0.49); top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

.tab .box a:after { background: url("../imgs/works/icon.png") no-repeat; background-size: 100%; bottom: 10px; right: 10px; z-index: 1; width: 50px; height: 50px; }

.tab .box a:hover:before, .tab .box a:hover:after { opacity: 1; }

.tab .box a img { transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; }

.tab .box a:hover img { -webkit-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); }

.tab .item { opacity: 0; -webkit-transition: all 1.2s; transition: all 1.2s; }

.tab .box.inview, .tab .item.inview { opacity: 1; }

.tab .posAbs { top: 1px; }

/*===============================
             MEDIA
================================*/
@media only screen and (max-width: 1500px) { #tab1 .item .inner { font-size: 0.9vw; }
  #tab1 .item .inner p:nth-of-type(1) { font-size: 1.2vw; } }

@media only screen and (max-width: 1200px) { #sub-nav li { padding: 6px 20px 3px; }
  #tab1 .item { width: 49%; }
  #tab1 .item:nth-of-type(3n) { margin: 0 2% 2% 0; }
  #tab1 .item:nth-of-type(2n) { margin: 0 0 2% 0; }
  #tab1 .item:nth-of-type(3n + 1) { clear: none; }
  #tab1 .item:nth-of-type(2n + 1) { clear: both; }
  #tab1 .item .inner { font-size: 1.4vw; }
  #tab1 .item .inner p:nth-of-type(1) { font-size: 1.8vw; margin: 0 0 1.5%; } }

@media only screen and (max-width: 1000px) and (orientation: landscape) { /* main */
  .main { margin-left: 50px; } }

@media only screen and (max-width: 767px) and (orientation: portrait) { /* main */
  .main { margin-left: 0; }
  .posAbs { top: -50px; }
  .tab .posAbs { top: -49px; } }

@media only screen and (max-width: 767px) { .pcOnly { display: none; }
  .spOnly { display: block; }
  #works-list { padding: 0 0 10%; }
  #sub-nav { padding: 0 0 4%; }
  #sub-nav li { width: 32%; margin: 0 2% 2% 0; float: left; text-align: center; padding: 6px 0 3px; display: block; }
  #sub-nav li:nth-of-type(3) { margin: 0 0 2%; }
  #sub-nav li:nth-of-type(4) { margin: 0 2% 0 0; width: 49%; }
  #sub-nav li:nth-of-type(5) { margin: 0; width: 49%; }
  #tab1 .item { width: 100%; margin: 0 0 4% !important; }
  #tab1 .item .inner { font-size: 2.8vw; }
  #tab1 .item .inner p:nth-of-type(1) { font-size: 4vw; }
  #tab1 .item a:before { display: none; }
  #tab1 .item .inner { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); position: static; padding: 1em 0; background: #525252; }
  .tab .box h3 { font-size: 18px; }
  .tab .box .txt { font-size: 14px; }
  .tab .box-img img { width: 100%; float: none; margin: 0 0 10px !important; }
  .tab .box a:after { width: 2em; height: 2em; } }