/*!
 * pagepiling.js 1.5.6
 *
 * https://github.com/alvarotrigo/pagePiling.js
 * @license MIT licensed
 *
 * Copyright (C) 2016 alvarotrigo.com - A project by Alvaro Trigo
 */
 html, body {
    overflow:hidden;
    margin:0;
    padding:0;

    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.pp-section {
    height:100%;
    position:absolute;
    width:100%;
    
    /* fixes flickering in firefox*/
    backface-visibility: hidden; 
}

.pp-easing {
    -webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
}
#pp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pp-nav::after { content: ""; position: absolute; width: 1px; height: 100%; left: 50%; transform: translateX(-50%); top: 100px; background: rgba(255,255,255,0.3);}

#pp-nav.right {
    right: 70px;
}
#pp-nav.left {
    left: 17px;
}
.pp-section.pp-table{
    display: table;
}
.pp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.pp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
}
.pp-slidesNav.bottom {
    bottom: 17px;
}
.pp-slidesNav.top {
    top: 17px;
}
#pp-nav ul,
.pp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#pp-nav li,
.pp-slidesNav li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 50px 0;
    position:relative;
}

.pp-slidesNav li {
    display: inline-block;
}
#pp-nav li a,
.pp-slidesNav li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#pp-nav li .active span,
.pp-slidesNav .active span {
    width: 70px; height: 70px;
    background-size: 33px;
}
#pp-nav span,
.pp-slidesNav span {
    width: 7px;
    height: 7px;
    border: 1px solid #fff;
    background: #fff;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 1;
    top: 50%; transform: translate(-50%, -50%);
}
.pp-tooltip {
    position: relative;
    top: auto;
    bottom: auto;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 220px;
    display: block !important; 
}
.pp-tooltip.right {
    right: 20px;
}
.pp-tooltip.left {
    left: 0px;
}
.pp-scrollable{
    overflow-y: scroll;
    height: 100%;
}
#pp-nav li:first-child .active span { background: #fff url(../images/sub/sub2-icon1.png) center no-repeat;}
#pp-nav li:nth-child(2) .active span { background: #fff url(../images/sub/sub2-icon2.png) center no-repeat;}
#pp-nav li:nth-child(3) .active span { background: #fff url(../images/sub/sub2-icon3.png) center no-repeat;}
#pp-nav li:last-child .active span { background: #fff url(../images/sub/sub2-icon4.png) center no-repeat;}

#pp-nav li span::before { position: absolute; font-size: 15px; font-weight: 600; color: #fff; left: -115px; top: 50%; transform: translateY(-50%);}
#pp-nav li span::after { content: ""; position: absolute; top: 0; bottom: 0; margin: auto; width: 30px; height: 1px; background: #fff; left: -20px; display: none;}
#pp-nav li:first-child span::before { content: "부동산 분양대행"; }
#pp-nav li:nth-child(2) span::before { content: "부동산 임대관리"; }
#pp-nav li:nth-child(3) span::before { content: "부동산 개발사업"; }
#pp-nav li:last-child span::before { content: "부동산 컨설팅"; left: -102px;}

#pp-nav li .active span::before { font-size: 20px; left: -155px;}
#pp-nav li .active span::after { display: block;}
#pp-nav li:last-child .active span::before { font-size: 20px; left: -140px;}

/* .pp-nav li::after { } */

@media (max-width: 1800px) {
    #pp-nav.right { right: 30px; }
    #pp-nav li .active span,
    .pp-slidesNav .active span {
        width:40px; height: 40px;
        background-size: 25px !important; background-size: contain;
    }
    #pp-nav li span::after { width: 20px; left: -15px;}
    #pp-nav li span::before { font-size: 12px; left: -90px;}
    #pp-nav li .active span::before { font-size: 15px; left: -120px;}
    #pp-nav li:last-child span::before { left: -80px;}
    #pp-nav li:last-child .active span::before { font-size: 15px; left: -107px;}
} 
@media (max-width: 1400px) {
    #pp-nav li span::before { display: none;}
    #pp-nav li .active span::after { display: none;}
}
@media (max-width: 1024px) {
    #pp-nav::after { top: 80px;}
}
@media (max-width: 640px) {
    #pp-nav::after { top: 60px;}
}