.design-banner-contain{position: relative;}
.design-banner-info{position: absolute;top:50%;left:7.5rem;width:40%;word-break: break-word;transform: translate(0,-50%);}
.design-banner-title{text-transform: uppercase;font-size:24px;font-family: 'Montserrat';opacity: 0.5 ;font-weight: bold;color:#fff;margin-bottom: 0.8rem;}
.design-banner-description{color:#fff;text-transform: uppercase;font-size:36px;font-family:  var(--miko-font);}

.design-box-contain{margin:4rem 0;display: flex;flex-wrap: wrap;}
.design-flex{width:50%;text-align: right;}
.design-item{display: inline-block;}
.design-flex:nth-child(2n){margin-top: 18em;}
.design-flex:nth-child(4n + 3){text-align: left;}
.design-flex:nth-child(4n + 4){text-align: left;}
.design-img{display: block; overflow: hidden;}
.design-img img{display: block; transform: scale(1); transition: all 0.5s;}
.design-img:hover img{display: block; transform: scale(1.05); transition: all 0.5s;}
.design-info{text-align: right;margin-top: 1rem;}
.design-info-detail{width:60%;display: inline-flex;border-top:7px solid #1FC1C1;padding-top: 1.5rem;}
.design-name{width:50%;}
.design-name h2{text-transform: uppercase;font-size: 24px;font-weight: bold;font-family: 'Montserrat';}
.design-name p{margin: 0;}
.design-number{width:50%;text-align: left;font-family: 'Montserrat';font-weight: bold;font-size: 100px;color:#1FC1C1;margin-top: -1.5rem;}

/* blur content when show data */
.blur-content{filter: blur(15px);transition: all ease 0.8s;}
/* Hide scrollbar */
.load-detail-design::-webkit-scrollbar , .none-scroll::-webkit-scrollbar{ display: none;}
.load-detail-design, .none-scroll{ -ms-overflow-style: none;  /* IE and Edge */scrollbar-width: none;  /* Firefox */}
.none-scroll{overflow: hidden;}

/* box load show page */
.design-detail-data{display: none;}
.load-detail-design{width: 100%; height: 100vh; position: fixed; left: 0; top: 0; overflow-x: hidden; overflow-y: auto; scrollbar-color: #fff #bbb; scrollbar-width: none; opacity:0; pointer-events: none; z-index: -1;transition: all ease 0.8s;}
.load-detail-design.design-show {pointer-events: auto;opacity: 1;background: rgba(0,0,0,0.7);z-index: 999999;}

/*data content after ajax*/
.design-content-data{width: 100%; height: auto; position: relative; margin: 0; padding: 0; z-index: 10;/*transform: translate3d(0px, 0px, 0px);*/opacity:0;}
.load-detail-design.design-show > .design-content-data.design-animate-out {animation-duration: 1s;animation-delay: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;animation-name: fadeInUp;}
.load-detail-design.design-show > .design-content-data.design-animate-right {
	animation-name: fadeInRight;
	-webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-duration:1s;
    animation-delay: 0s;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
    to {
        opacity:0;
        -webkit-transform: translatex(-100%);
        -moz-transform: translatex(-100%);
        -o-transform: translatex(-100%);
        transform: translatex(-100%);
    }
}
@-moz-keyframes fadeInRight {
    from {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
    to {
        opacity:0;
        -webkit-transform: translatex(-100%);
        -moz-transform: translatex(-100%);
        -o-transform: translatex(-100%);
        transform: translatex(-100%);
    }
}
@keyframes fadeInRight {
    from {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
    to {
        opacity:0;
        -webkit-transform: translatex(-100%);
        -moz-transform: translatex(-100%);
        -o-transform: translatex(-100%);
        transform: translatex(-100%);
    }
}


@keyframes fadeInUp {
    from {
        transform: translate3d(0,150px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,150,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

/*button close*/
.design-close{position: fixed; top: 7px; right: 30px; width: 50px; height: 50px; padding: 0; cursor: pointer; color: #fff; background-color: transparent; opacity: 0; transition: all .3s ease-in-out; z-index: 3500;}
.design-close::after, .design-close::before{position: absolute;background: #fff;height:2px;transform: rotate3d(0,0,1, 
0deg);transition: all .3s ease-in-out;transition-delay: .3s;}
.design-close::after{content: ''; pointer-events: none; transform-origin: 50% 50%; top: 50%; width: 70%;}
.design-close::before{content: ''; pointer-events: none; transform-origin: 50% 50%; top: 50%; width: 70%;}
.load-detail-design.design-show > .design-close{opacity: 1;}
.load-detail-design.design-show > .design-close::before{transform: rotate3d(0,0,1,45deg); left: 13%;}
.load-detail-design.design-show > .design-close::after{transform: rotate3d(0,0,1,-45deg); left: 13%;}

/*design header content data*/
.design-content-header{background: linear-gradient(#374FA8,#53C3FF);padding: 5% 0;margin-bottom: 15rem;}
.design-header-main{position: relative;}
.design-header-img{position: absolute;top:0;right:10px;width: 65%;}
.design-header-info{width:35%;padding: 0 6rem;padding-top: 1.5rem;}
.design-header-title{margin:0;text-transform: uppercase;font-size:24px;font-family: 'Montserrat';font-weight: bold;color:rgba(255,255,255,0.5);margin-bottom:0;}
.design-header-name{text-transform: uppercase;color:#fff;font-size: 48px;font-family: var(--miko-font);margin:0;font-weight: 100;margin-top: 1rem;}
.design-header-view{color:#fff;display: block;position: relative;font-size:18px;font-family: 'Montserrat';border-bottom:2px solid #fff;
padding:15px 0;text-decoration: none;margin-top: 5rem;}
.design-header-view svg{position: absolute;right:0;}

.design-content-banner{margin-bottom: 3rem;}
.design-content-description{text-align: center;color:#fff;margin:0 auto;margin-top:3rem;font-size:16px;font-family: 'Montserrat';font-weight: 300;max-width: 90%;line-height: 1.5;}

.design-content-body{margin-bottom: 5rem}
.design-content-bodytop{position: relative;}
.design-content-body-img1{position: relative;display: inline-block;overflow: hidden; border-radius: 15px;}
.design-content-body-img1 img{display: block;}
.design-content-body-img1::after{content:'';position: absolute;top:0;left:0;width:100%;height:100%;background: #3856AD;opacity: 0.8;}

.design-content-body-img2{display: inline-block;position: absolute;right:5%;top: 50%; transform: translate(0,-50%);}
.design-content-body-img2 img{display: block;}

.center-layout-fix{max-width: 1050px; margin: 0 auto;}
.design-content-footer-box{display: flex;}
.design-content-footer-left{color:#fff;font-size:16px;font-family: 'Montserrat';font-weight: 300;width:50%;align-self: center;}

.design-content-slide .click-next, .design-content-slide .click-prev, .design-content-slide { position: relative; display: inline-block; }
.design-content-slide{width: 100%; height: auto; background-color: rgba(0,0,0,.3); margin: 0; padding: 5vw 0; text-align: center;}
.design-content-slide .click-next, .design-content-slide .click-prev{vertical-align: middle; margin: 0 2vw; width: calc((1125/2000*100vw)/5); height: calc((1125/2000*100vw)/10); color: #fff; cursor: pointer; z-index: 5;}
.design-content-slide .click-next svg, .design-content-slide .click-prev svg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }
.design-content-slide .click-next span, .design-content-slide .click-prev span { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; border: 1px solid #fff;}
.design-content-slide .click-next span::before, .design-content-slide .click-prev span::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
.design-content-slide .click-next span::after, .design-content-slide .click-prev span::after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,.5); pointer-events: none; }
.design-content-slide::before { content: ''; position: absolute; left: 50%; width: 1px; background-color: #fff; pointer-events: none;height: 5vw; bottom: 5.2vw; }