@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap'); /*.Skill class 폰트 사용 시 적용*/

@font-face { /*나눔스퀘어라운드*/
    font-family:'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal; 
    font-style: normal
}

html, body {
    min-width:1280px;
    overflow:hidden;
    font-family:"NanumSquareRound";
    background:#212121;
}

body::-webkit-scrollbar {display:none}
body {-ms-overflow-style:none}

#side-bn ul.slide-cont::-webkit-scrollbar {width:10px; background:#323232}
#side-bn ul.slide-cont::-webkit-scrollbar-thumb {border:1px solid #000; background:#666; border-radius:36px; }
#side-bn ul.slide-cont::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display:block; height:0; background:transparent}

/*헤더 영역*/
#header {position:fixed; top:0; left:0; right:0; height:47px; border-bottom:1px solid #000; background:#202020; box-shadow:2px 5px 3px rgba(0,0,0,.2); z-index:30}

#header .browser-icon {margin-left:12px}
#header .browser-icon li {float:left; width:12px; height:12px; font-size:0; border-radius:50%; margin:17.5px 3px}
#header .browser-icon li.icon1 {background:#ff5f56}
#header .browser-icon li.icon2 {background:#ffbd2e}
#header .browser-icon li.icon3 {background:#27c93f}

/*모바일 웹 페이지 작업 리스트*/
#header .page-list {position:relative; float:left; margin-left:50px}
#header .page-list h2 {position:relative; padding:0 10px}
#header .page-list h2 a {display:inline-block; color:#fff; font-size:14px; font-weight:bold; line-height:47px; letter-spacing:-1px}
#header .page-list h2:after {content:""; position:absolute; right:22px; bottom:12px; width:162px; height:1px; background:#fff; transform:scaleX(0); transition:transform 150ms ease-in-out}
#header .page-list:hover h2:after {transform:scaleX(1)}
#header .page-list:hover i.xi-angle-down-min {color:#00bbff}
#header .page-list:hover ul.page-link {display:block}

#header .page-list ul.page-link {display:none; position:absolute; right:0; top:47px; width:200px; padding:16px 0; background:#fff; border-bottom:3px solid #202020; box-shadow:6px 6px 12px rgba(0,0,0,.03)}
#header .page-list ul.page-link li {position:relative}
#header .page-list ul.page-link li a {color:#212121; font-size:14px; font-weight:normal; padding:6px 26px; line-height:1.6; letter-spacing:-1px; background:#fff; width:200px; transition:all .3s}
#header .page-list ul.page-link li a:before {content:""; display:inline-block; width:3px; height:3px; background:#ddd; margin-right:6px; border-radius:50%; vertical-align:4px}
#header .page-list ul.page-link li a:after {content:""; width:142px; height:1px; background:#ececec; position:absolute; bottom:6px; left:32px}
#header .page-list ul.page-link li:hover a {background:#eee; font-weight:bold}
#header .page-list ul.page-link li:hover a:after {display:none}

/*모바일 웹을 코딩한 후 리뷰*/
#header .pub-review {position:relative; float:left; margin-left:16px}
#header .pub-review h2 {position:relative; padding:0 10px}
#header .pub-review h2 a {display:inline-block; color:#fff; font-size:14px; font-weight:bold; line-height:47px; letter-spacing:-1px}
#header .pub-review h2:after {content:""; position:absolute; left:10px; bottom:12px; width:150px; height:1px; background:#fff; transform:scaleX(0); transition:transform 150ms ease-in-out}
#header .pub-review:hover h2:after {transform:scaleX(1)}
#header .pub-review:hover i.xi-angle-down-min {color:#00bbff}
#header .pub-review:hover ul.review-list {display:block}

#header .pub-review ul.review-list {display:none; position:absolute; left:0; top:47px; width:800px; padding:16px 0; background:#fff; border-bottom:3px solid #000; box-shadow:6px 6px 12px rgba(0,0,0,.03)}
#header .pub-review ul.review-list li {position:relative; color:#212121; font-size:14px; font-weight:normal; padding:6px 26px; line-height:1.6; letter-spacing:-1px}
#header .pub-review ul.review-list li span {letter-spacing:0}
#header .pub-review ul.review-list li strong {position:relative; z-index:2}
#header .pub-review ul.review-list li strong:after {content:""; position:absolute; left:0; bottom:0; width:100%; height:5px; background:linear-gradient(to right, #00e5ff, #18ffff, #69f0ae); z-index:-1}
#header .pub-review ul.review-list li:before {content:""; display:inline-block; width:3px; height:3px; background:#ddd; margin-right:6px; border-radius:50%; vertical-align:4px}
#header .pub-review ul.review-list li:after {content:""; width:730px; height:1px; background:#ececec; position:absolute; bottom:6px; left:32px}

/*모바일 아이콘*/
#header .responsive-btn {position:relative}
#header .responsive-btn .mobile-on {position:absolute; left:50%; top:12px; transform:translateX(-50%)}
#header .responsive-btn .mobile-on a i {display:inline-block; color:#fff; font-size:32px; line-height:32px}
#header .responsive-btn .mobile-on:after {content:""; position:absolute; width:36px; height:2px; background:#fff; bottom:0; left:50%; transform:translateX(-50%); transition:all .3s}
#header .responsive-btn .mobile-on:hover:after {background:#00bbff}

/*사이드 메뉴*/
#side-bn {position:fixed; top:20px; left:-220px; background:#27272d; border-right:1px solid #000; width:220px; height:100%; text-align:center; box-shadow:2px 3px 12px rgba(0,0,0,.2)}
#side-bn > ul.slide-cont {position:absolute; top:47px; left:10px; width:190px; height:902px; overflow-y:scroll; overflow-x:hidden}
#side-bn > ul.slide-cont li.cont-box {padding:16px 0; position:relative}
#side-bn > ul.slide-cont li.cont-box:before {content:""; position:absolute; left:0; top:0; width:calc(100% - 10px); height:1px; background:#474747}
#side-bn > ul.slide-cont li.cont-box:first-child:before {display:none}
#side-bn > ul.slide-cont li.cont-box a.m-site-link {display:block; width:100%; height:auto; text-align:left; position:relative}

#side-bn > ul.slide-cont li.cont-box a.m-site-link .corss-bro {float:right; padding-right:14px}
#side-bn > ul.slide-cont li.cont-box a.m-site-link .corss-bro > i {color:#383838; font-size:13px; line-height:100%; padding:8px 0; transition:all .3s}
#side-bn > ul.slide-cont li.cont-box a.m-site-link em {display:block; position:relative; width:170px; height:96px; background:#333; overflow:hidden; transition:all .3s}
#side-bn > ul.slide-cont li.cont-box a.m-site-link em:before, a.m-site-link em:after {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:all .3s; width:100%; height:100%}
#side-bn > ul.slide-cont li.cont-box a.m-site-link em:before {border-top:2px solid #000; border-bottom:2px solid #000; width:0}
#side-bn > ul.slide-cont li.cont-box a.m-site-link em:after {border-left:2px solid #000; border-right:2px solid #000; height:0}
#side-bn > ul.slide-cont li.cont-box a.m-site-link img {width:100%; opacity:.2; transition:all .3s}
#side-bn > ul.slide-cont li.cont-box a.m-site-link h3 {padding:12px 0 4px 6px; position:relative; color:#7d7d7d; font-size:12px; font-weight:bold; line-height:100%; letter-spacing:-1px; transition:all .3s}
#side-bn > ul.slide-cont li.cont-box a.m-site-link h3:before {
    content:""; position:absolute; left:-220px; top:24px; width:170px; height:4px; background:linear-gradient(to right, #000, #212121); box-shadow:2px 3px 3px rgba(0,0,0,.06); border-radius:4px; 
    z-index:-1; transition:all .3s
}
#side-bn > ul.slide-cont li.cont-box a.m-site-link ul.skill li {
    display:inline-block; position:relative; padding-left:12px; color:#333; font-size:11px; font-family:'Play',sans-serif; line-height:100%; letter-spacing:0; transition:all .3s}
#side-bn > ul.slide-cont li.cont-box a.m-site-link ul.skill li:before {content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:3px; height:3px; background:#333}

/*사이드 메뉴에서 썸네일 현재 페이지 표시*/
#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link .corss-bro i.xi-edge {color:#1299d5}
#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link .corss-bro i.xi-chrome {color:#f9d128}
#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link .corss-bro i.xi-firefox {color:#eb5823}
#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link em {box-shadow:3px 6px 12px rgba(0,0,0,.8)}
#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link img {opacity:1}

#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link em:before {width:100%}
#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link em:after {height:100%}

#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link h3 {color:#fff}
#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link h3:before {left:0}

#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link ul.skill li {color:#999}
#side-bn > ul.slide-cont li.cont-box:nth-child(1) a.m-site-link ul.skill li:before {background:#666}

/*사이드 메뉴 썸네일 호버*/
#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover .corss-bro i.xi-edge {color:#1299d5}
#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover .corss-bro i.xi-chrome {color:#f9d128}
#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover .corss-bro i.xi-firefox {color:#eb5823}

#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover em {box-shadow:3px 6px 12px rgba(0,0,0,.8)}
#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover img {opacity:1}

#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover em:before {width:100%}
#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover em:after {height:100%}
#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover h3 {color:#fff}
#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover h3:before {left:0}
#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover ul.skill li {color:#999}
#side-bn > ul.slide-cont li.cont-box a.m-site-link:hover ul.skill li:before {background:#666}

/*사이드 메뉴 버튼 애니메이션*/
#side-bn > button {background:none; color:#fff; position:absolute; color:transparent; font-size:1px; top:83px; left:220px; width:52px; height:52px; border:none; cursor:pointer}
#side-bn > button > span.btn-slde-bn {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:60%; height:3px; background:#fff; transition:all .3s}
#side-bn > button > span.btn-slde-bn:before, span.btn-slde-bn:after {content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:#fff; transition:all .3s}
#side-bn > button > span.btn-slde-bn:before {top:-10px}
#side-bn > button > span.btn-slde-bn:after {top:10px}

#side-bn > button > span.btn-slde-bn.on {background:none}
#side-bn > button > span.btn-slde-bn.on:before {top:0; transform:rotate(45deg)}
#side-bn > button > span.btn-slde-bn.on:after {top:0; transform:rotate(-45deg)}

/*모바일 웹 화면*/
#device-screen {height:100vh; margin-top:47px}
#device-screen .m-site {position:relative; z-index:3}
#device-screen .m-site div {margin-top:86px; 
    position:absolute; left:50%; top:0; transform:translateX(-50%); width:404px; height:758px; background:url(../img/img-smart-phone.png)no-repeat center / 404px auto; border-radius:66px; box-shadow:6px 10px 36px rgba(0,0,0,.6); z-index:-1}
#device-screen .m-site iframe {position:absolute; left:50%; top:64px; transform:translateX(-50%); width:100%; border-left:1px solid #000; border-right:1px solid #000; border-radius:2px}