header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
}
/* banner */
#big-banner {
    height: calc(100vh - 60px);
    min-height: 450px;
    padding: 0;
}
.banner {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.banner .container {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: left;
}
.banner h1.page-title {
    font-size: 40px;
    text-shadow: 0 0 5px rgba(0,0,0,.15);
    color: #fff;
    line-height: 1.7;
    white-space: nowrap;
    margin-bottom: 15px;
    position: relative;
}
.banner h1.page-title:after {
    content: '';
    display: inline-block;
    background-color: #fff;
    width: 30px;
    height: 4px;
    border-radius: 4px;
    position: absolute;
    bottom: -8px;
    left: 0;
}
.banner .caption {
    color: #fff;
    margin-top: 50px;
}
.banner .caption p {
    margin-bottom: 20px;
}

/* value */
.value {
    padding: 60px 0;
    background-color: white;
}
.value .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.value-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.value-box img {
    height: 80px;
    margin-right: 30px;
}
.value-box .content h2 {
    font-size: 30px;
    font-weight: 100;
    margin: 0 0 8px 0;
    line-height: 1;
}
.value-box .content h4 {
    color: #666;
    font-weight: 100;
    margin: 0;
    line-height: 1.2;
}

/* animation */
.animation-item {
    transition: 0.8s;
    opacity: 0;
    transform:translateY(20px);
}
.animation-item:nth-child(2) {
    transition-delay: 0.4s;
}
section.animation.active .animation-item {
    opacity: 1;
    transform: translateY(0);
}

/* offices */
.main-title {
    font-size: 36px;
    text-align: left;
    position: relative;
    margin-bottom: 60px;
    color: #fff;
}
.main-title:after {
    content: '';
    display: inline-block;
    background-color: #fff;
    width: 30px;
    height: 4px;
    border-radius: 4px;
    position: absolute;
    bottom: -10px;
    left: 0;
}
.offices {
    background-color: #333;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right;
    height: 680px;
    padding: 0;
    overflow: hidden;
    transition: .3s ease-in-out;
    transition-delay: .1s;
    position: relative;
}
.offices h2,
.offices h4,
.offices p {
    color:#fff;
}
.offices p {
    font-size: 16px;
}
.offices#kr {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130043701_rJHmf/png);
}
.offices#jp {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130042213_A5fhm/jpg);
}
.offices#tw {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130042215_89wwT/jpg);
}
.offices#sh {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20190103093249_IZSPp/jpg);
}
.offices#hk {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130042212_l1TQS/jpg);
}
.offices#ph {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130042214_0xfQ5/jpg);
}
.offices#th {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130042215_W735m/jpg);
}
.offices#vn {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130042216_Rssip/jpg);
}
.offices#ma {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130042215_x6zve/jpg);
}
.offices#sg {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130042214_MUfRb/jpg);
}
.offices#in {
    background-image:url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130042213_E1qDT/jpg);
}
.offices .content {
    width: 100%;
    position: absolute;
    left: 0;
    top: 80px;
    z-index: 9;
    background-color: transparent;
}
.map {
    position: relative;
    height: 100%;
}
.map img {
    height: 100%;
    position: absolute;
    top: 0;
    right: 33.33%;
}
.office-location {
    position: absolute;
    z-index: 9;
}
[data-location=kr] {
    top: 301px;
    right: calc(33.33% + 297px);
}
[data-location=jp] {
    top: 313px;
    right: calc(33.33% + 232px);
}
[data-location=tw] {
    top: 368px;
    right: calc(33.33% + 313px);
}
[data-location=sh] {
    top: 326px;
    right: calc(33.33% + 320px);
}
[data-location=hk] {
    top: 383px;
    right: calc(33.33% + 355px);
}
[data-location=ph] {
    top: 443px;
    right: calc(33.33% + 319px);
}
[data-location=th] {
    top: 433px;
    right: calc(33.33% + 417px);
}
[data-location=vn] {
    top: 450px;
    right: calc(33.33% + 387px);
}
[data-location=ma] {
    top: 477px;
    right: calc(33.33% + 422px);
}
[data-location=sg] {
    top: 501px;
    right: calc(33.33% + 406px);
}
[data-location=in] {
    top: 543px;
    right: calc(33.33% + 371px);
}
.office-location .dot {
    cursor: pointer;
    background-color: #82DCE2;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    display: inline-block;
    transition: .2s;
}
.office-location .dot:hover,
.office-location.active .dot {
    background-color: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,.4);
    transform: scale(1.2);
}
.office-location .country {
    display: inline-block;
    text-shadow: 0 0 15px rgba(255,255,255,.4);
    position: absolute;
    left: 15px;
    bottom: 0;
    pointer-events: none;
}
.office-location .country .country-name {
    padding-left: 120px;
    padding-right: 5px;
    text-align: right;
    transition: .3s;
    opacity: 0;
    overflow-y: hidden;
    white-space: nowrap;
}
.office-location.active .country .country-name {
    transition-delay: .5s;
    opacity: 1;
}
.office-location .country .country-name > * {
    transform: translateY(30px);
    transition: .3s;
}
.office-location.active .country .country-name > * {
    transform: translateY(0);
    transition-delay: .5s;
}
.office-location .country h4 {
    font-weight: lighter;
    font-size: 3rem;
    margin: 0;
    line-height: 1;
}
.office-location .country h2 {
    font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: 5rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
}
.office-location .plane {
    display: inline-block;
    width: 0;
    transition: .6s;
    height: 1px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,.8);
    position: relative;
    left: 0;
    bottom: 8px;
    opacity: 0;
}
.office-location.active .plane {
    width: 100%;
    opacity: 1;
}
.office-location .plane:after {
    display: inline-block;
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background-image: url(https://image.kkday.com/image/get/s1.kkday.com/campaign_327/20180130042218_VkU3D/png);
    background-size: 100%;
    background-repeat: no-repeat;
    right: -25px;
    bottom: -18px;
}

/* founder */
.founder {
    background-color: #f1f1f1;
    padding: 80px 0;
}
.profile {
    position: relative;
}
.profile img {
    width: 100%;
    margin: 0;
    border-radius: 4px;
}
.profile .card {
    padding: 10px 20px;
    position: absolute;
    background-color: #fff;
    bottom: 0;
    right: 0;
    transform: translate(20%, 20%);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.intro {
    padding: 20px 0;
}
.intro .main-title {
    color: #26bec9;
}
.intro .main-title:after {
    background-color: #26bec9;
}
.intro p {
    color: #555;
}

.lovers {
    padding: 40px 0;
    background-color: white;
}
.photo-title .main-title {
    color: #26bec9; 
}
.photo-title .main-title:after {
    background-color: #26bec9;
}
.photo-img {
    height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 -15px;
}

@media screen and (max-width: 991px) {
    #big-banner {
        height: auto;
        min-height: auto;
        padding: 15px;
    }
    .founder {
        padding: 80px 15px;
    }
    .lovers {
        padding: 0px;
    }
    .photo-img.photo-title {
        margin: 15px -15px -15px 15px;
    }
    .photo-img {
        height: 200px;
    }
}

@media screen and (max-width: 768px) {
    .banner h1.page-title {
        font-size: 32px;
        text-align: center;
    }
    .banner h1.page-title:after {
        left: 50%;
        transform: translateX(-50%);
    }
    .banner .page-subtitle {
        display: none;
    }
    .banner .caption {
        margin-top: 30px;
    }
    .banner .caption p {
        font-size: 14px;
    }
    .value {
        padding: 20px 0;
    }
    .value .container {
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    .value-box {
        display: block;
        text-align: center;
    }
    .value-box > img {
        margin: 0;
    }
    .value-box > .content {
        margin-top: 20px;
    }
    .offices {
        background-position: 80%;
    }
    .offices .content {
        top: 40px
    }
    .map img {
        right: 20%;
        pointer-events: none;
    }
    .main-title {
        font-size: 28px;
        margin-bottom: 36px;
        text-align: center;
    }
    .main-title:after {
        left: 50%;
        transform: translateX(-50%);
    }
    .office-location .country h4 {
        font-size: 2rem;
    }
    .office-location .country h2 {
        font-size: 3rem;
    }
    .offices p {
        font-size: 14px;
        text-align: center;
    }
    [data-location=kr] {
        right: calc(20% + 297px);
    }
    [data-location=jp] {
        right: calc(20% + 232px);
    }
    [data-location=tw] {
        right: calc(20% + 313px);
    }
    [data-location=sh] {
        right: calc(20% + 237px);
    }
    [data-location=hk] {
        right: calc(20% + 355px);
    }
    [data-location=ph] {
        right: calc(20% + 319px);
    }
    [data-location=th] {
        right: calc(20% + 417px);
    }
    [data-location=vn] {
        right: calc(20% + 387px);
    }
    [data-location=ma] {
        right: calc(20% + 422px);
    }
    [data-location=sg] {
        right: calc(20% + 406px);
    }
    [data-location=in] {
        right: calc(20% + 371px);
    }
    .founder {
        padding: 40px 15px 20px;
    }
    .photo-img.photo-title {
        margin: 0;
        padding-top: 40px;
        height: auto;
    }
}

@media screen and (max-width: 580px) {
    .map img {
        right: 5%;
    }
    [data-location=kr] {
        right: calc(5% + 297px);
    }
    [data-location=jp] {
        right: calc(5% + 232px);
    }
    [data-location=tw] {
        right: calc(5% + 313px);
    }
    [data-location=hk] {
        right: calc(5% + 355px);
    }
    [data-location=ph] {
        right: calc(5% + 319px);
    }
    [data-location=th] {
        right:calc(5% + 417px);
    }
    [data-location=vn] {
        right: calc(5% + 387px);
    }
    [data-location=ma] {
        right: calc(5% + 422px);
    }
    [data-location=sg] {
        right: calc(5% + 406px);
    }
    [data-location=in] {
        right: calc(5% + 371px);
    }
}

@media screen and (max-width: 480px) {
    .offices {
        background: #333 !important;
        height: 500px;
    }
    .map img {
        right:-15%;
    }
    .office-location {
        display: none;
    }
}