@charset "utf-8";

/*스크롤 영역*/
body::-webkit-scrollbar {display:none}
body {-ms-overflow-style:none}

/* html body 영역 스크롤 비활성화 */
.not-scroll {position:fixed; overflow:hidden; width:100%; height:100%}

html, body {
    min-width:1280px
}

/*헤더 영역*/
#header {position:fixed; top:0; left:0; background:#202020; width:100%; height:59px; border-bottom:1px solid #000; z-index:30}
#header h1.logo {float:left; font-size:0}
#header h1.logo a {display:inline-block; margin-left:20px; color:#fff; font-size:16px; font-weight:600; font-family:'Rajdhani','sans-serif'; line-height:59px}
#header .util {float:right; font-size:0; margin-right:16px}
#header .util a {display:inline-block; padding:0 8px; color:#bdbdbd; font-size:16px; font-weight:600; font-family:'Rajdhani','sans-serif'; line-height:59px; transition:color .3s}

/*클릭된 페이지*/
#header .util a:nth-child(2) {color:#ff1744}

#header .util a:hover {color:#ff1744}

/*비주얼 영역*/
#visual {margin-top:59px; height:328px; background:#fbfbfb url(../img/bg-main-bn.png)no-repeat center}
#visual > .main-bn {width:1280px; margin:0 auto; position:relative; text-align:center}
#visual > .main-bn img {display:inline-block; width:62px; height:62px; margin-top:56px}
#visual > .main-bn h2 {color:#111; font-size:72px; font-weight:600; font-family:'Rajdhani','sans-serif'; line-height:100%; letter-spacing:-6px; margin-top:14px}
#visual > .main-bn p {color:#616161; font-size:18px; font-family:'NanumSquareRound'; line-height:100%; letter-spacing:-1px; margin-top:25px}

/*디자인 작업물 리스트*/
#design-wroks {width:1160px; margin:68px auto; font-size:0}

#design-wroks .row {display:inline-block; width:278px; margin:0 8px; vertical-align:top}
#design-wroks .row:first-child {margin-left:0}
#design-wroks .row:last-child {margin-right:0}

#design-wroks .row .img-box {width:278px; height:auto; overflow:hidden; cursor:pointer; border-radius:6px; margin:12px 0}
#design-wroks .row .img-box img {width:100%; transform:scale(1); transition:transform .3s}
#design-wroks .row .img-box:hover img {transform:scale(1.1); transition:transform .3s; border-radius:6px}

#design-wroks .pp-img-box {display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:657px; height:auto; max-height:657px; overflow-y:auto; border-radius:6px; z-index:10}
#design-wroks .pp-img-box img {width:100%; object-fit:cover}
.dim {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.8); cursor:pointer; z-index:9}

/*레이어 팝업 스크롤*/
#design-wroks .pp-img-box::-webkit-scrollbar {background:rgba(255,255,255,.1)}
#design-wroks .pp-img-box::-webkit-scrollbar-thumb {background:rgba(255,255,255,.2); border-radius:10px; box-shadow:0 3px 6px rgba(0,0,0,.6)}
#design-wroks .pp-img-box::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display:block; height:0; background:transparent}

/*푸터 영역*/
#footer {margin-top:80px; background:#111; height:156px; text-align:right}
#footer .ft-box {width:1280px; margin:0 auto}
address {display:inline-block; float:left; color:#c0c0c0; font-size:16px; font-weight:400; font-family:'Rajdhani','sans-serif'; line-height:100%; padding-top:38px}
#footer .ft-sns {float:right; color:#fff; padding:32px 0 22px 0}
#footer .ft-sns li {float:left}
#footer .ft-sns li a {display:block; color:transparent; width:26px; height:26px; overflow:hidden; margin:0 10px}
#footer .ft-sns li:nth-child(1) a {background:url(../img/ico-ft-naver-blog.png)no-repeat center / 26px auto}
#footer .ft-sns li:nth-child(2) a {background:url(../img/ico-ft-instagram.png)no-repeat center / 26px auto; margin-right:0}
#footer p.ft-tt1 {color:#eee; font-size:14px; font-weight:100; line-height:100%; letter-spacing:-0.4px}
#footer p.ft-tt2 {padding-top:16px; color:#fff; font-size:12px; font-weight:100; line-height:100%; letter-spacing:-0.4px} 
#footer p.ft-tt2 img {width:12px; vertical-align:-1px}

/*최상단 이동하기 버튼*/
#btn-top {position:fixed; right:24px; bottom:40px; width:46px; height:46px; overflow:hidden; background:url(../img/ico-btn-top.png)no-repeat 0 0 / 46px auto; cursor:pointer; opacity:.3; transition:all .3s}
#btn-top:hover {opacity:1}