@charset "utf-8";

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

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:hover {color:#ff1744}

/*비주얼 영역*/
#visual {margin-top:59px; height:328px; background:#f7f7f7}
#visual .main-bn {width:1280px; margin:0 auto;  position:relative}
#visual .main-bn h2.tit {color:#111; font-size:82px; font-weight:600; font-family:'Rajdhani','sans-serif'; line-height:100%; letter-spacing:-6px; padding:52px 0 0 126px}
#visual .main-bn p.txt {color:#111; font-size:18px; font-family:'NanumSquareRound'; line-height:100%; letter-spacing:-1px; padding:30px 0 0 126px}
#visual .main-bn p.txt span {display:block; padding-top:15px}
#visual ul.icon {padding:28px 0 0 126px}
#visual ul.icon li {float:left; color:transparent; width:41px; height:42px; overflow:hidden; margin:0 7.5px}
#visual ul.icon li:nth-child(1) {background:url(../img/ico-adobe-ps.png)no-repeat center / 41px auto; margin-left:0}
#visual ul.icon li:nth-child(2) {background:url(../img/ico-adobe-ai.png)no-repeat center / 41px auto} 
#visual ul.icon li:nth-child(3) {background:url(../img/ico-adobe-pr.png)no-repeat center / 41px auto}
#visual ul.icon li:nth-child(4) {background:url(../img/ico-adobe-ae.png)no-repeat center / 41px auto}
#visual ul.icon li:nth-child(5) {background:url(../img/ico-adobe-xd.png)no-repeat center / 41px auto}
#visual ul.icon li:nth-child(6) {background:url(../img/ico-codetool-vs.png)no-repeat center / 41px auto}
#visual .img {position:absolute; right:100px; top:1px; width:488px; height:322px}



/*포트폴리오 영역(공통)*/
.swiper-container {width:1280px; margin:0 auto}
.swiper-container h3 {position:relative; color:#333; font-size:22px; font-weight:600; font-family:'Rajdhani','sans-serif'; line-height:43px; letter-spacing:-0.6px; margin:20px 0; padding-left:48px}

/*좌우 버튼(공통)*/
.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {position:absolute; top:20px; width:43px; height:43px; color:transparent; z-index:10; cursor:pointer; display:flex; align-items:center; justify-content:center}
.swiper-container .swiper-button-prev {right:52px}
.swiper-container .swiper-button-next {right:0}
.swiper-container .swiper-button-prev:after {content:""; position:absolute; width:43px; height:43px; background:url(../img/ico-button-prev.png)no-repeat center / 43px auto; transition:all .3s}
.swiper-container .swiper-button-next:after {content:""; position:absolute; width:43px; height:43px; background:url(../img/ico-button-next.png)no-repeat center / 43px auto; transition:all .3s}
.swiper-container .swiper-button-prev:hover:after {content:""; background:url(../img/ico-button-prev-hover.png)no-repeat center / 43px auto}
.swiper-container .swiper-button-next:hover:after {content:""; background:url(../img/ico-button-next-hover.png)no-repeat center / 43px auto}

/*슬라이드 이미지(공통)*/
.swiper-container .swiper-wrapper .swiper-slide {text-align:left; display:flex; align-items:center; justify-content:center; width:285px}
.swiper-container .swiper-wrapper .swiper-slide a {display:block}
.swiper-container .swiper-wrapper .swiper-slide .img-box {width:285px; height:161px; border-radius:6px; overflow:hidden}
.swiper-container .swiper-wrapper .swiper-slide img {max-width:100%; object-fit:cover; transform:scale(1); transition:.4s}

/*슬라이드 이미지 호버(공통)*/
.swiper-container .swiper-wrapper .swiper-slide a:hover img {transform:scale(1.2)}

/*슬라이드 이미지 하단 텍스트(공통)*/
.swiper-container .swiper-wrapper .swiper-slide .tt-box {padding:11px 0}
.swiper-container .swiper-wrapper .swiper-slide .tt-box p.category {color:#555; font-size:12px; font-family:'NanumSquareRound'; line-height:100%; letter-spacing:-0.6px; padding-bottom:10px}
.swiper-container .swiper-wrapper .swiper-slide .tt-box strong {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; 
    display:inline-block; color:#202020; position:relative; font-size:15px; font-family:'NanumSquareRound'; font-weight:bold; line-height:100%; letter-spacing:-0.6px}
.swiper-container .swiper-wrapper .swiper-slide .tt-box strong:before {content:""; position:absolute; left:0; bottom:0; background:#b4efff; width:100%; height:4px; z-index:-1}
.swiper-container .swiper-wrapper .swiper-slide .tt-box .bro-icon {float:right}
.swiper-container .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list {font-size:0}
.swiper-container .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li {display:inline-block; margin:0 2px}

.swiper-container .swiper-wrapper .swiper-slide .tt-box ul.skill {font-size:0; padding-top:10px}
.swiper-container .swiper-wrapper .swiper-slide .tt-box ul.skill li {
    display:inline-block; position:relative; padding-left:13px; color:#999; font-size:12px; font-weight:400; line-height:100%; font-family:'Rajdhani','sans-serif'}
.swiper-container .swiper-wrapper .swiper-slide .tt-box ul.skill li:before {content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:3px; height:3px; background:#ddd; border-radius:3px}

/*모바일 웹사이트 포트폴리오 영역*/
#portfolio-slide-mo {margin-top:60px; position:relative}
#portfolio-slide-mo .mobile-port h3:before {content:""; position:absolute; left:0; top:0; width:42px; height:43px; background:url(../img/ico-tit01.png)no-repeat center / 42px auto}

/*슬라이드 이미지 하단 텍스트*/
#portfolio-slide-mo .mobile-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(1) {width:15px; height:15px; background:url(../img/ico-chorme.png)no-repeat 0 0 / 15px auto; margin-left:0}
#portfolio-slide-mo .mobile-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(2) {width:15px; height:15px; background:url(../img/ico-naver.png)no-repeat 0 0 / 15px auto}
#portfolio-slide-mo .mobile-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(3) {width:15px; height:15px; background:url(../img/ico-samsung.png)no-repeat 0 0 / 15px auto; margin-right:0}

/*표준형 웹사이트 포트폴리오 영역*/
#portfolio-slide-pc {margin-top:39px; position:relative}
#portfolio-slide-pc .pc-port h3:before {content:""; position:absolute; left:0; top:0; width:42px; height:43px; background:url(../img/ico-tit02.png)no-repeat center / 42px auto}

/*슬라이드 이미지 하단 텍스트*/
#portfolio-slide-pc .pc-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(1) {width:15px; height:15px; background:url(../img/ico-chorme.png)no-repeat 0 0 / 15px auto; margin-left:0}
#portfolio-slide-pc .pc-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(2) {width:15px; height:15px; background:url(../img/ico-safari.png)no-repeat 0 0 / 15px auto}
#portfolio-slide-pc .pc-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(3) {width:15px; height:15px; background:url(../img/ico-firefox.png)no-repeat 0 0 / 15px auto; margin-right:0}

/*상세페이지 디자인 포트폴리오 영역*/
#portfolio-slide-dpd {margin-top:39px; position:relative}
#portfolio-slide-dpd .dpd-port h3:before {content:""; position:absolute; left:0; top:0; width:42px; height:43px; background:url(../img/ico-tit03.png)no-repeat center / 42px auto}

/*슬라이드 이미지 하단 텍스트*/
#portfolio-slide-dpd .dpd-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(1) {width:15px; height:15px; background:url(../img/ico-photoshop.png)no-repeat 0 0 / 15px auto; margin-left:0}
#portfolio-slide-dpd .dpd-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(2) {width:15px; height:15px; background:url(../img/ico-Illustrator.png)no-repeat 0 0 / 15px auto; margin-right:0}

/*소셜페이지 디자인 포트폴리오 영역*/
#portfolio-slide-spd {margin-top:39px; position:relative}
#portfolio-slide-spd .spd-port h3:before {content:""; position:absolute; left:0; top:0; width:42px; height:43px; background:url(../img/ico-tit04.png)no-repeat center / 42px auto}

/*슬라이드 이미지 하단 텍스트*/
#portfolio-slide-spd .spd-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(1) {width:15px; height:15px; background:url(../img/ico-photoshop.png)no-repeat 0 0 / 15px auto; margin-left:0}
#portfolio-slide-spd .spd-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(2) {width:15px; height:15px; background:url(../img/ico-Illustrator.png)no-repeat 0 0 / 15px auto; margin-right:0}

/*소셜페이지 디자인 포트폴리오 영역*/
#portfolio-slide-pd {margin-top:39px; position:relative}
#portfolio-slide-pd .pd-port h3:before {content:""; position:absolute; left:0; top:0; width:42px; height:43px; background:url(../img/ico-tit05.png)no-repeat center / 42px auto}

/*슬라이드 이미지 하단 텍스트*/
#portfolio-slide-pd .pd-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(1) {width:15px; height:15px; background:url(../img/ico-photoshop.png)no-repeat 0 0 / 15px auto; margin-left:0}
#portfolio-slide-pd .pd-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(2) {width:15px; height:15px; background:url(../img/ico-Illustrator.png)no-repeat 0 0 / 15px auto; margin-right:0}

/*유튜브 콘텐츠 포트폴리오 영역*/
#portfolio-slide-youtube {margin-top:39px; position:relative}
#portfolio-slide-youtube .ytb-port h3:before {content:""; position:absolute; left:0; top:0; width:42px; height:43px; background:url(../img/ico-tit07.png)no-repeat center / 42px auto}

/*슬라이드 이미지 하단 텍스트*/
#portfolio-slide-youtube .ytb-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(1) {width:15px; height:15px; background:url(../img/ico-Premiere_Pro.png)no-repeat 0 0 / 15px auto; margin-left:0}
#portfolio-slide-youtube .ytb-port .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(2) {width:15px; height:15px; background:url(../img/ico-After_Effects.png)no-repeat 0 0 / 15px auto; margin-right:0}

/*네이버지식iN 영역*/
#portfolio-slide-kin {margin-top:39px; position:relative}
#portfolio-slide-kin:after {content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:1280px; height:160px; background:linear-gradient(to top, #fff, #f3f3f3)}
#portfolio-slide-kin .kin-post h3 {position:relative; color:#0c3; font-size:23px; font-family:'NanumSquareRound'; line-height:48px; letter-spacing:-1px; margin:20px 0; padding-left:53px}
#portfolio-slide-kin .kin-post h3:before {content:""; position:absolute; left:0; top:0; width:48px; height:49px; background:url(../img/ico-tit-kin01.png)no-repeat center / 48px auto}
#portfolio-slide-kin .kin-post .swiper-wrapper .swiper-slide a {display:block;  width:284px; height:217px; border-radius:16px}
#portfolio-slide-kin .kin-post .swiper-wrapper .swiper-slide .inner-box {width:274px; height:207px; border:2px solid rgba(255,255,255,03); border-radius:16px; background:#fff; box-shadow:6px 6px 12px rgba(0,0,0,.05); transition:all .3s}
#portfolio-slide-kin .kin-post .swiper-wrapper .swiper-slide .inner-box strong {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 
    position:relative; display:block; font-size:16px; font-family:'NanumSquareRound'; line-height:29px; letter-spacing:-1px; padding:15px 16px 14px 48px; border-bottom:1px solid #f4f5f9; background:#fafbff}
#portfolio-slide-kin .kin-post .swiper-wrapper .swiper-slide .inner-box strong:before {
    content:""; position:absolute; left:13px; top:15px; width:28px; height:29px; background:url(../img/ico-qna01.png)no-repeat 0 0 / 28px auto}

#portfolio-slide-kin .kin-post .swiper-wrapper .swiper-slide .inner-box em {
    display:inline-block; margin:14px 0 11px 13px; float:left; color:#fff; font-size:11px; font-family:'NanumSquareRound'; font-weight:100; line-height:100%; letter-spacing:-1px; padding:6px 8px; background:#e9645f; border-radius:10px}
#portfolio-slide-kin .kin-post .swiper-wrapper .swiper-slide .inner-box span.more {
    display:inline-block; margin:14px 0 11px 0; float:right; color:#afafaf; font-size:11px; font-family:'NanumSquareRound'; font-weight:100; line-height:100%; letter-spacing:-0.4px; padding:6px 13px 6px 0}

#portfolio-slide-kin .kin-post .swiper-wrapper .swiper-slide .inner-box .tt {
    float:left; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
    margin:0 13px; color:#525252; font-size:12px; font-family:'NanumSquareRound'; font-weight:100; line-height:20px; height:80px; letter-spacing:-0.4px}

#portfolio-slide-kin .kin-post .swiper-wrapper .swiper-slide:hover .inner-box {box-shadow:6px 6px 12px rgba(0,0,0,.1); border:2px solid rgba(255,255,255,1)}

/*좌우 버튼*/
#portfolio-slide-kin .kin-post .swiper-button-prev,
#portfolio-slide-kin .kin-post .swiper-button-next {position:absolute; top:168px}
#portfolio-slide-kin .kin-post .swiper-button-prev {left:13px}
#portfolio-slide-kin .kin-post .swiper-button-next {right:13px}
#portfolio-slide-kin .kin-post .swiper-button-prev:after {content:""; position:absolute; width:40px; height:40px; background:url(../img/ico-kin-button-prev.png)no-repeat center / 40px auto; opacity:.2; transition:all .3s}
#portfolio-slide-kin .kin-post .swiper-button-next:after {content:""; position:absolute; width:40px; height:40px; background:url(../img/ico-kin-button-next.png)no-repeat center / 40px auto; opacity:.2; transition:all .3s}
#portfolio-slide-kin .kin-post .swiper-button-prev:hover:after {opacity:.7}
#portfolio-slide-kin .kin-post .swiper-button-next:hover:after {opacity:.7}

/*블로그포스팅 영역*/
#portfolio-slide-bp {margin-top:39px; position:relative}
#portfolio-slide-bp .bp-thumb h3:before {content:""; position:absolute; left:0; top:0; width:42px; height:43px; background:url(../img/ico-tit06.png)no-repeat center / 42px auto}

#portfolio-slide-bp .bp-thumb .tt-box ul.skill li {font-family:'NanumSquareRound'}

/*슬라이드 이미지 하단 텍스트*/
#portfolio-slide-bp .bp-thumb .swiper-wrapper .swiper-slide .tt-box .bro-icon ul.icon-list li:nth-child(1) {width:15px; height:15px; background:url(../img/ico-naverblog.png)no-repeat 0 0 / 15px auto; margin-left:0}


/*디자인 등 기타 작업 포트폴리오 영역*/
#portfilo-design-etc {width:1280px; margin:59px auto}
#portfilo-design-etc h3 {position:relative; color:#333; font-size:22px; font-weight:600; font-family:'Rajdhani','sans-serif'; line-height:43px; letter-spacing:-0.6px; margin:20px 0; padding-left:48px}
#portfilo-design-etc h3:before {content:""; position:absolute; left:0; top:0; width:42px; height:43px; background:url(../img/ico-tit-etc01.png)no-repeat center / 42px auto}
#portfilo-design-etc .etc-box1 .etc-img {float:left; width:256px; height:256px; overflow:hidden; position:relative; text-align:center}
#portfilo-design-etc .etc-box1 .etc-img a {display:block}
#portfilo-design-etc .etc-box1 .etc-img em {position:absolute; left:0; right:0; bottom:-256px; background:rgba(0,0,0,.6); width:256px; height:256px; transition:all .3s}
#portfilo-design-etc .etc-box1 .etc-img em img {display:inline-block; width:82px; height:66px; margin-top:95px}
#portfilo-design-etc .etc-box1 .etc-img img {width:100%}

#portfilo-design-etc .etc-box1 .etc-img:hover em {bottom:0}

/*푸터 영역*/
#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; margin-left:0}
#footer .ft-sns li:nth-child(2) a {background:url(../img/ico-ft-instagram.png)no-repeat center / 26px auto}
#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}