/*프로세스 부분 CSS*/

/*리셋*/
*{margin: 0;padding: 0;}
img{vertical-align: top;}
li{list-style: none;}
a{text-decoration: none;}

/*메인*/
html,body {width: 100%; height: 100%; }
#main {background: url(../images/process_portfolio.png) no-repeat; height: 8350px;}
#main2 {background: url(../images/process_chefhouse.png) no-repeat; height: 5516px;}
#main3 {background: url(../images/process_teru-ten.png) no-repeat; height: 7242px;}
#main4 {background: url(../images/process_cocacola.png) no-repeat; height: 6893px;}
#main5 {background: url(../images/process_PURR.jpg) no-repeat; height: 7707px;}

/*이전프로세스 다음프로세스*/
#nextprev {position: fixed; top: 50%;}
#nextprev a {color: #111; font-weight: bold;}

#nextprev #next {position: fixed; right: 30px; border-bottom: 3px solid #111; width: 130px; transition: 0.3s; }
#nextprev #next:hover {width: 140px;}
#nextprev #next:before {width: 20px; height: 3px; position: absolute; right: -1px; top: 13px; content: ""; clear: both; background: #111; transform: rotate(45deg);}

#nextprev #prev {position: fixed; left: 30px; border-bottom: 3px solid #111; width: 130px; transition: 0.3s;  text-align: right;}
#nextprev #prev:hover {width: 140px;}
#nextprev #prev:before {width: 20px; height: 3px; position: absolute; left: -1px; top: 13px; content: ""; clear: both; background: #111; transform: rotate(135deg);}

/*TOP 메뉴버튼*/
#top {width: 60px; height: 60px; background: #FFC15C; border-radius: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; position: fixed; bottom: 50px; right: 50px; font-weight: bold; cursor: pointer; line-height: 0.9; transition: 0.2s; font-size: 14px;}
#top:hover {background: #fcae2f; color: #fff;}

/*홈버튼과 포트폴리오버튼*/
#bottom {background: #eee; text-align: center; padding: 20px 0;}
#bottom > div {display: inline-block; text-align: left; position: relative; margin-left: 100px;}
#bottom #box { }
#bottom > div div {position: relative; line-height: 1;}
#bottom div > span {position: absolute; width: 50px; height: 20px; background: #88C4D5; left: -30px; top: 30%; border-radius: 100px; transition: 0.3s;}
#bottom div > span.on {width: 75px;}
#bottom a {color: #111;}
#bottom div strong {font-weight: normal; font-size: 10px; }
#bottom div p {font-size: 18px; font-weight: bold;}

/*햄버거 메뉴 버튼*/
#menu {position: absolute; top: 30px; right: 30px; cursor: pointer; z-index: 5;}
#menu span {background: #333; width: 40px; height: 5px; display: block; margin-bottom: 5px;}
#menu span:nth-of-type(2) {width: 20px;}

#bg {background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; top: -2000px; transition: 0.5s;}
#bg.hide {top: 0;}
#bg a {float: left; width:calc(100%/3); height: 100%; position: relative; top: -2000px;}
#bg a:first-child.hide {top: 0;}
#bg a:nth-of-type(2).hide {top:0;}
#bg a:last-child.hide {top: 0;}
#bg a:first-child {background: rgba(12,132,167,0.8); transition: 0.6s; transition-delay: 0.2s;}
#bg a:nth-of-type(2) {background: rgba(229,169,81,0.8); transition: 0.6s; transition-delay: 0.4s;}
#bg a:last-child {background: rgba(240,222,208,0.8); transition: 0.6s; transition-delay: 0.6s;}

#bg p {display: flex; height: 100%; justify-content: center; align-items: center; flex-direction: column; font-size: 48px; color: #fff; font-weight: bold;}