@font-face {
    font-family: 'Biennale';
    src: url('../fonts/Biennale-Medium.eot');
    src: url('../fonts/Biennale-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Biennale-Medium.woff2') format('woff2'),
    url('../fonts/Biennale-Medium.woff') format('woff'),
    url('../fonts/Biennale-Medium.ttf') format('truetype'),
    url('../fonts/Biennale-Medium.svg#Biennale-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Biennale It';
    src: url('../fonts/Biennale-RegularIt.eot');
    src: url('../fonts/Biennale-RegularIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Biennale-RegularIt.woff2') format('woff2'),
    url('../fonts/Biennale-RegularIt.woff') format('woff'),
    url('../fonts/Biennale-RegularIt.ttf') format('truetype'),
    url('../fonts/Biennale-RegularIt.svg#Biennale-RegularIt') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Biennale';
    src: url('../fonts/Biennale-Regular.eot');
    src: url('../fonts/Biennale-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Biennale-Regular.woff2') format('woff2'),
    url('../fonts/Biennale-Regular.woff') format('woff'),
    url('../fonts/Biennale-Regular.ttf') format('truetype'),
    url('../fonts/Biennale-Regular.svg#Biennale-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Biennale';
    src: url('../fonts/Biennale-Bold.eot');
    src: url('../fonts/Biennale-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Biennale-Bold.woff2') format('woff2'),
    url('../fonts/Biennale-Bold.woff') format('woff'),
    url('../fonts/Biennale-Bold.ttf') format('truetype'),
    url('../fonts/Biennale-Bold.svg#Biennale-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Biennale';
    src: url('../fonts/Biennale-SemiBold.eot');
    src: url('../fonts/Biennale-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Biennale-SemiBold.woff2') format('woff2'),
    url('../fonts/Biennale-SemiBold.woff') format('woff'),
    url('../fonts/Biennale-SemiBold.ttf') format('truetype'),
    url('../fonts/Biennale-SemiBold.svg#Biennale-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Biennale';
    src: url('../fonts/Biennale-Light.eot');
    src: url('../fonts/Biennale-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Biennale-Light.woff2') format('woff2'),
    url('../fonts/Biennale-Light.woff') format('woff'),
    url('../fonts/Biennale-Light.ttf') format('truetype'),
    url('../fonts/Biennale-Light.svg#Biennale-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}




html, body {font-family: 'Biennale', sans-serif;min-height: 100%;height:100%;}
html, main {min-height: 100%;height:100%;}
body.change-overflow {overflow:hidden;}
* {outline:0;}
a:hover, a:active, a:focus {text-decoration: none;}
a, button {
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
}
h1, h2, h3, h4, h5 {font-weight: 900;}

ul {margin:0;padding:0;list-style-type: none;}
.mobile-visible {display:none;}
.tablet-visible {display:none;}
.justify-content-center {justify-content: center;}
.pad-none {padding:0;}
.full {width:100%;}
.table-content {display: table;  width: 100%;  height: 100%;}
.table-cell-content {display: table-cell; vertical-align: middle;}
.animation-- {-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;  }
.anim1 {-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;  }
.anim2 {-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
.fl-right {float:right;}
.height-fix {height:100%;}
.h-fix {height:100%;}
.height-very {height:80%;}
.stream-iframe {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.stream-iframe iframe, .stream-iframe img {position:absolute;top:0;left:0;width:100%;height:100%;}
.stream-iframe .player {background:transparent !important;}
.grayscale img, .grayscale iframe {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.grayscale img:hover {-webkit-filter: grayscale(0%);filter: grayscale(0%);}
.js-marquee {margin:0 !important;}
.inline-block {display:inline-block}
.padArea {padding:0 120px}
.marginSec {margin:100px 0;}
.cursorP {cursor:pointer;}
.fitCont {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.fitCont:after{
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.workCont {background-size: cover !important;}

body {background: #15284c;}
body.page {background: #fff;}

header {padding-top:35px;}
header .winnieMarquee {color:#fff;font-size:13px;font-weight: 600;}
header .winnieMarquee span {margin:0 2px;}
body.page header .winnieMarquee {color:#15284c;}
header .winnieMarquee span:nth-child(even){color:#e0a43d;}
header .marquee {width: 100%;overflow: hidden;}
header .winnieLogo {margin-top:60px;opacity: .9;max-width: 227px;}
header .winnieLogo:hover {opacity: 1;}

header nav {margin-top:60px;}
header nav ul {}
header nav ul li {}
header nav ul li a {font-family: 'Biennale It';font-size:14px;color:#fff;}
header nav ul li a.active {font-weight: 700;}
header nav ul li a:hover {color:#e0a43d;}
body.page header nav ul li a {color:#15284c;}


.winnieAnimationArea {height: calc(100% - 210px);max-width:33.3%;margin:0 auto;position: relative;margin-top: -50px;}
.winnieAnimationArea div {width:100%;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);overflow: hidden;}
.winnieAnimationArea div img {width: 100%;}
.winnieAnimationArea div:nth-child(2){width: calc(100% - 20%);}
.winnieAnimationArea div:nth-child(3){width: calc(100% - 40%);}
.winnieAnimationArea div:nth-child(4){width: calc(100% - 60%);}

.wCol {position: relative;}
.content {padding-top:40px;}
.content h1 {font-family: 'Biennale It';color:#15284c;font-size:70px;font-weight: normal;letter-spacing: 4px;}
.content h1 img.marginFix {margin:0 20px;}
.content .moreBig {font-size: 70px;font-weight: 600;color: #15284c;letter-spacing: 4px;margin-right: 30px;}
.content .moreBigSmall {font-size: 20px;color: #15284c;font-weight: 300;}
.content span.verline {position: absolute;width: 4px;height: 100px;background: #e0a43d;right: 0;top: 34px;}

.content ul.activeLoop {padding: 0 0 0 50px;margin-top: 35px;}
.content ul.activeLoop li {font-family: 'Biennale It';font-size:55px;color:#15284c;align-items: baseline;display: flex;}
.content ul.activeLoop li span {transition: transform .3s cubic-bezier(.25,.46,.45,.94),color .3s cubic-bezier(.25,.46,.45,.94);display: block;}
.content ul.activeLoop li em {font-size:22px;color:#e0a43d;}
.content ul.activeLoop li.active {color:#e0a43d;}
.content ul.activeLoop li.active span {transform:translateY(-.5vw)}

.content .sec {position: relative;}
.content .sec em {font-size:36px;color:#15284c;font-family: 'Biennale It';display: block}
.content .sec em.afterLine:after {content:"";position: absolute;width: 100px;height: 6px;background: #e0a43d;bottom: 12px;margin-left: 30px;}
.content .sec span.head {font-size:80px;color:#15284c;font-family: 'Biennale It';display: block;line-height: 53px;margin-bottom: 30px;letter-spacing: 10px;}
.content .sec span.head.ultraBig {font-size: 129px;line-height: 100px;}
.content .sec .headSec2 {color:#e0a43d;font-size:45px;font-weight: 500;line-height: 48px;margin: 55px 0 20px;display: block;}
.content .sec p {font-size: 15px;color: #15284c;font-weight: 300;line-height: 29px;}
.content .thinkAnim {width: 100%;max-width: 340px;}
.content .thinkHand {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.content .sec .headSec3 {color:#e0a43d;font-size:27px;font-weight: 500;line-height: 32px;display: block;letter-spacing: 4px;}
.content .sec span.color2 {color:#15284c;}
.content .sec span.e232 {display: block;}
.content .sec span.e3245 {position: absolute;margin: -32px 0 0 10px;}
.content .r234e {margin:40px 0;}
.content .r234e div {color:#e0a43d;font-size:20px;}
.content .je23 {color: #e0a43d;font-size: 27px;font-family: 'Biennale It';margin-top:20px;display: block;}
.content .hyu34 {color: #15284c;font-size: 27px;font-family: 'Biennale It';}
.content .fer33 {color: #15284c;font-size: 27px;font-weight: 700;display:block;}
.content .fer34 {color: #e0a43d;font-size: 20px;font-family: 'Biennale It';display: block;margin:20px 0;}
.content .lightRe {font-family: 'Biennale It';color: #15284c;font-size:44px;margin: 65px 0;}
.content .lightRe.active {color:#e0a43d;}
.content .tre23 {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #e0a43d;font-weight: 500;font-size: 37px;line-height: 35px;}

.content.contactPage h1 {font-size: 36px;}
.content.contactPage .af54 {color: #15284c;font-weight: 500;font-size: 34px;letter-spacing: 2px;margin-left: 5px;}
.content.contactPage .af54 a {color:#e0a43d;}
.content .kl65 {margin:20px 0;}

.workCont {margin-bottom:30px;}
.workCont .centG h2 {font-weight: 500;font-size: 18px;color: #fff;}
.workCont .centG p {font-size: 15px;color: #fff;font-weight: 300;line-height: 29px;margin: 20px 0;padding-right: 30px;}
.workCont .hoverSection {position: absolute;top:-100%;left:0;padding: 20px;width: 100%;height: 100%;background: #26344f !important;}
.workCont .hoverSection a.overL {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}
.workCont .centG a.goProject {font-weight: 700;font-size: 18px;color: #fff;}
.workCont .centG {position: absolute;top: 50%;transform: translateY(-50%);}
.workCont:hover .hoverSection {top:0;}

.khgo a {
    color: #15284c;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 2px;
    display: block;
    text-align: center;
    margin: 20px 0;
}
.khgo {
    color: #15284c;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 2px;
    display: block;
    text-align: center;
    margin-bottom: 20px;

}


.work-detail {padding-bottom: 100px !important;}
.back-to-all:hover {color:#e0a43d;}
.back-to-all {
    text-align: left !important;
    font-size: 18px;
    font-weight: 500;
    color: #15284c;
    margin-bottom: 50px;
    display: block;
    letter-spacing: 2px;
    margin-top: 20px;
}
.back-to-all2 {
    position: sticky;
    top: 15px;
}
.back-to-all2 img {
    display: block;
    margin-left: 62px;
    width: 20px;
    transform: rotate(
            180deg
    );
    margin-top: 10px;
}
.work-detail p, .work-detail h2 {letter-spacing:2px;margin: 0;}
.work-detail .work_name {font-size: 50px;color: #15284c;font-weight: 500;margin: 0;letter-spacing: 7px;}
.work-detail .work_desc {font-size: 14px;color: #15284c;font-weight: 400;margin: 0;margin-top: 7px;}
.work-detail .work {font-size: 20px;color: #15284c;font-weight:400;margin:30px 0;}
.work-detail .desc_bottom {font-size: 15px;color: #15284c;font-weight: 400;margin: 0;}
.work-detail .banner {margin-top: 70px;}
.work-detail .page-center {margin: 70px 0;}
.work-detail .works-photos .col-md-6 {margin-bottom: 30px}
.work-detail .works-photos .col-md-6 img {}
.work-detail .works-photos .col-md-6 iframe {max-height: calc(100% - 10px);margin: 0 !important; height: 600px !important;}
.work-detail .web_url {font-size: 20px;color: #15284c;font-weight: 400;margin: 0;display: block;margin-top: 30px;}

.kjk {max-width: 50px;}
.ttu {width: 50px;}
.htp {
    font-weight: 300;
    font-size: 11px;
}
ul.filter {display:inline-block;margin-bottom:20px;}
ul.filter li {float:left;margin:0 10px;}
ul.filter li.pRelative {
    position: relative;
}
ul.filter li a.active + ul {
    visibility:visible;
    opacity:1;
}
.filteredContent {margin-top:20px;}
ul.filter li ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    margin-top: 10px;
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
}
ul.filter li a {
    min-width: 138px;
    color: #15284c;
    display: block;
    padding: 3px;
}
ul.filter li a.active, ul.filter li a:hover {color:#e3ad51;}
.webChild {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
}
.webChild.active {
    visibility:visible;
    opacity:1;
}
.webChild a.active {
    color:#e3ad51;
}
.webChild a {
    margin: 0px 10px;
    color: #15284c;
    display: block;
    padding: 3px;
}

.workWithUs {}
.workWithUs form {}
.workWithUs form label {display: block;width: 100%;margin-top:70px;}
.workWithUs form label .tyu {
    margin-top:13px;
}
.workWithUs form label .ggh {
    width: 50px;
    margin: -17px 20px 0 0;
}
.workWithUs form label textarea {
    border: 0;
    width: 100%;
    line-height: 4ch;
    background-image: linear-gradient(transparent, transparent calc(4ch - 1px), #e0a43d 0px);
    background-size: 100% 4ch;
    height: 90px;
    resize: none;
}
.workWithUs form label input {
    border: 0;
    border-bottom: 1px solid #e0a43d;
    width:100%;
}
.workWithUs form label .con {
    font-size: 24px;
    color: #15284c;
    font-weight: 500;
}
.workWithUs form label span.color{color: #e0a43d;font-size: 22px;}
.workWithUs form label button {background: none;border:0;}
.workWithUs form label span.name {
    margin-top: -2px;
    min-width: 100px;
    padding-left: 2px;
    font-weight: 300;
}
.min100 {width:100%;}
.botD1 {font-size:27px;color:#15284c;font-weight: 700;}
.botD1 span {
    display: block;
    font-size: 20px;
    color: #e0a43d;
    font-weight: 300;
}
#sendLabel div {margin:0 10px;}
#sendLabel div:first-child, #sendLabel div:last-child {margin:0;}
button:disabled,
button[disabled]{
    cursor: no-drop;
    opacity: .5;
    -webkit-animation: rotating 15s linear infinite;
    -moz-animation: rotating 15s linear infinite;
    -ms-animation: rotating 15s linear infinite;
    -o-animation: rotating 15s linear infinite;
    animation: rotating 15s linear infinite;
}
.loginAlert {display:none;}
.alert-success {
    background: #e4ffe6;
    border: 0;
    border-radius: 0;
    color: #15284c;
    display: block !important;
}
.alert-danger a {
    color: #152874;
    font-weight: 700;
}
.alert-danger {
    background: #fff2f2;
    border: 0;
    border-radius: 0;
    color: #15284c;
    display: block !important;
}
.kkm {margin-top:50px;}
.mVisible {
    display:none;
}
.worksFilterContainer .item a.active  {
    color: #e3ad51;
}
.worksFilterContainer .item a  {
    float: left;
    margin: 0 10px;
    min-width: 138px;
    color: #15284c;
    display: block;
    padding: 3px;
}
.worksFilterContainer {
    width: 100%;
    overflow: hidden;
}
.targetLogo {
    max-width: 300px;
    margin: 0 auto;
    display: inline-block;
    padding-bottom:20px;
}
.targetHref {
    text-align: center;
    display: block;
}
.logoArrowLeft {
    transform: rotate(
            270deg
    );
    width: 20px;
    margin-right: 20px;
    animation: slideRight 2s;
    animation-iteration-count: infinite;
}
.logoArrowRight {
    transform: rotate(
            90deg
    );
    width: 20px;
    margin-left: 20px;
    animation: slideLeft 2s;
    animation-iteration-count: infinite;
}

.privacyPage h2 {
    font-family: 'Biennale It';
    color: #15284c;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 4px;
}

@keyframes slideLeft {
    from {
        margin-left: 20px;
    }
    50% {
        margin-left: 40px;
    }
    100% {
        margin-left: 20px;
    }
}
@keyframes slideRight {
    from {
        margin-right: 20px;
    }
    50% {
        margin-right: 40px;
    }
    100% {
        margin-right: 20px;
    }
}

@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 800px) {
    
}
@media only screen and (max-width: 700px) {
    
    .mHidden {display:none !important;}
    .mVisible {display: block !important;}
    .padArea {padding:0;}
    .winnieAnimationArea {max-width: 80%;}
    .content h1 {font-size:24px;}
    .content h1 img.marginFix {margin: 0 20px;max-width: 50px;}
    .content .moreBig {font-size: 40px;}
    .content .moreBigSmall {font-size:16px;}
    .content span.verline {display:none;}
    .content ul.activeLoop {padding:0;}
    .content ul.activeLoop li {font-size:26px;}
    .marginSec {margin: 40px 0;}
    .content .sec em {font-size:24px;}
    .content .sec span.head {font-size:32px;}
    .columnA {-ms-flex-direction: column!important;flex-direction: column!important;}
    .content .sec span.head {margin-bottom:10px;}
    .content .sec em.afterLine:after {width:70%;}
    .content .sec {width: 100%;min-width: auto !important;}
    .content .sec .headSec2 {font-size: 30px;line-height: 38px;}
    .se543 {margin: 20px auto;}
    .content .je23 {font-size:22px;}
    .content .sec .headSec3 {font-size: 21px;line-height: 25px;}
    .mv92a {max-width: 50px;}
    .content .sec span.head.ultraBig {font-size: 30px;line-height: 45px;letter-spacing: 4px;}
    .content .r234e {margin:20px 0;}
    .content .r234e div {font-size:18px;}
    .content .hyu34 {font-size:22px;}
    .content .fer33 {font-size:20px;}
    .content .lightRe {margin:20px 0;text-align: center;}
    .content .tre23 {font-size:27px;}
    .gh331 {overflow: hidden}
    .content.contactPage h1 {font-size:24px;}
    .content.contactPage .af54 {text-align: left;font-size: 16px;letter-spacing: 0;}
    .contactPage .lightRe.active {font-size:24px;min-width: auto !important;margin:0 10px !important;}
    .workCont {margin-bottom:15px;}
    .workCont .centG h2 {font-size:16px;}
    .workCont .centG p {line-height: inherit;}
    .workCont .centG a.goProject {font-size:22px;}
    .back-to-all {font-size:10px;}
    .back-to-all2 {
        margin: 0;
        text-align: center !important;
        position: fixed;
        bottom: 0;
        left: 0;
        background: #fff;
        z-index: 9;
        top: auto;
        padding: 10px;
        border-top-right-radius: 10px;
    }
    .back-to-all2 img {margin: 10px auto;}
    .work-detail .work_name {font-size:36px;}
    .work-detail .work {font-size:16px;}
    .work-detail .page-center {
        margin: 30px 0;
    }
    .ttu {
        width: 20px;
        margin: 0 auto 10px auto;
        display: block;
    }
    .work-detail .desc_bottom {font-size:13px;}
    #sendLabel {
        display: block !important;
        text-align: center;
        margin-top: 30px;
    }
    .workWithUs form label span.color {font-size:14px;}
    .workWithUs form label .con {font-size:16px;}
    .workWithUs form label .ggh {width:30px;}
    .botD1 {font-size:18px;}
    .regGo {margin:10px 0;}
    .winnieAnimationArea {margin-top:-30px;}
    .headSec2 {display:block !important;}
    .content.contactPage h1 {font-size:18px;}
}



@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotatingReverse {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
.rotating {
    -webkit-animation: rotating 15s linear infinite;
    -moz-animation: rotating 15s linear infinite;
    -ms-animation: rotating 15s linear infinite;
    -o-animation: rotating 15s linear infinite;
    animation: rotating 15s linear infinite;
}
.reverse {
    -webkit-animation: rotatingReverse 15s linear infinite;
    -moz-animation: rotatingReverse 15s linear infinite;
    -ms-animation: rotatingReverse 15s linear infinite;
    -o-animation: rotatingReverse 15s linear infinite;
    animation: rotatingReverse 15s linear infinite;
}


.shake {
    animation: shakeAnim 2s cubic-bezier(.36,.07,.19,.97) both infinite;
}
@keyframes shakeAnim {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}