*{
  margin:0;
  padding:0;
  border:0;
}

/*@font-face {
  font-family: 'PSL-Display';
  src: url('../font/PSL-Display.eot');
  src: url('../font/PSL-Display.eot?#iefix') format('embedded-opentype'),
  url('../font/PSL-Display.woff2') format('woff2'),
  url('../font/PSL-Display.woff') format('woff'),
  url('../font/PSL-Display.ttf') format('truetype'),
  url('../font/PSL-Display.svg#PSL-Display') format('svg');
  font-weight: normal;
  font-style: normal;
  text-rendering: optimizeLegibility;
}

a,h1,h2,h3,p{
  font-family: 'PSL-Display';
  padding:0;
  margin:0;
  -webkit-font-smoothing: antialiased;
}*/

img{
  width:100%;
  vertical-align:top;
  image-rendering: -moz-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

body{
  background:#fff;
}

.container-fluid{
    padding:0;
}
.vitamilk{
    background: url(../../images/buy/delivery/bg2.jpg) no-repeat center bottom;
    background-size: cover;
    width: 100%;
    height: 100vh;
    text-align: center;
    min-height: 46vw;
    position: relative;
    overflow:hidden;
}

.top-header{
    width: 100%;
    /*position: fixed;*/
    top: 0;
    display: none;
}

.man{
/*    background:url(../../img/main.png) no-repeat right bottom;*/
    height:100%;
    background-size:contain;
    width:90%;
    float:right;
    vertical-align: bottom;
    display:flex;
    align-items: flex-end;
    padding-bottom:2vw;
}

.box{
    width:80%;
    position:relative;
    display:inline-block;
    margin:4vw auto;
    float:left;
    position:relative;
}

#timeline{
    width:35%;
    z-index:999;
    position:absolute;
    bottom:3vw;
    left:20%;
}

.box #line{
    width: 65%;
    margin:1.3vw 1vw;
    -webkit-transition: all 0.5s; /* Safari */
  transition: all 0.5s;
    float:right;
}

.box #line:hover{
    -webkit-filter: drop-shadow(0px 7px 7px rgba(0, 0, 0, 0.57));
    filter: drop-shadow(0px 7px 7px rgba(0, 0, 0, 0.57));
    transform:rotateZ(-2deg);
}

.vitamilk .footer{
    position:absolute;
    bottom:0;
    width:100%;
    left:0;
}

#text-head{
    width: 51%;
    margin: 12% 22% 0 0;
}

#line{
    width: 51%;
    margin: 0 21% 0 0;
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
}

#line:hover{
    -webkit-filter: drop-shadow(0px 7px 7px rgba(0, 0, 0, 0.57));
    filter: drop-shadow(0px 7px 7px rgba(0, 0, 0, 0.57));
    transform:rotateZ(-2deg);
}

#text-con{
    width: 30%;
    margin: 0 41% 10% 0;
}

#text-head-mobile{
    display: none;
}

/*background-image
  image-rendering: -moz-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;*/

/*
@media only screen and (max-aspect-ratio: 5/3){
    .man{
        background-position:right top; 
    }
    #man{
         flex:0 0 65%;
        max-width: 765%;
    }
    #text{
        flex:0 0 35%;
        max-width: 35%;
    }
    .box{
        width:90%;
        float:left;
        margin:20vw auto;
    }
}
*/
@media only screen and (max-width:1440px){
    #text-head{
        /*margin: 150px 22% 0 0;*/
        margin: 130px 22% 0 0;
    }
}

@media only screen and (max-width:1280px){
    #text-head{
        width: 53%;
        margin: 150px 22% 0 0;
    }

    #line{
        width: 53%;
        margin: 0 21% 0 0;
    }

    #text-con{
        width: 40%;
        margin: 0 41% 10% 0;
    }
}

@media only screen and (max-width:1280px), (max-height:720px){
    #text-head{
        width: 45%;
        margin: 104px 22% 0 0;
    }

    #line{
        width: 45%;
        margin: 0 21% 0 0;
    }

    #text-con{
        width: 32%;
        margin: 0 35% 10% 0;
    }
}

@media only screen and (max-width:1200px){
    .img-header{
        position: fixed;
        width: 180%;
        left: 47%;
        transform: translate(-50%);
    }
}

@media only screen and (max-width:1024px){
    .img-header{
        position: fixed;
        width: 195%;
        left: 47%;
        transform: translate(-50%);
    }
    #text-head{
        width: 58%;
    }

    #line{
        width: 58%;
    }

    #text-con{
        width: 48%;
    }
}

@media only screen and (max-width:812px){
    #text-head{
        width: 45%;
        margin: 60px 22% 0 0;
    }

    #line{
        width: 43%;
        margin: 0 22% 0 0;
    }

    #text-con{
        display: block;
    }

    #text-con{
        width: 29%;
        margin: 0 0 0 15%;
    }
}

@media only screen and (max-width:768px){
    .vitamilk{
         background: url(../../images/buy/delivery/bg-mobile4.png) no-repeat center bottom;
         background-position:75% bottom;
    }

    .top-header{
        display: block;
    }

    #text-head-mobile {
        /*width: 75%;
        margin: 21% 22% 0 0;*/
        width: 63%;
        margin: 21% 22% 0 0;
        margin: 0 auto;
        padding-top: 19%;
    }

    #line {
        /*width: 67%;
        margin: 0 21% 0 0;*/
        width: 64%;
        /* margin: 0 21% 0 0; */
        margin: 0 auto;
    }

    #text-con {
        /*width: 45%;
        margin: 0 50% 0 0;*/
        display: none;
    }

    .man{
        padding-bottom:5vw;
    }

    .img-header{
        position: fixed;
        width: 195%;
        left: 47%;
        transform: translate(-50%);
    }
    #left-icon{
        display: none;
    }

    #right-icon{
        display: none;
    }

    #text-head{
        display: none;
    }

    #text-head-mobile{
        display: block;
    }
}

@media only screen and (max-width:736px){
    .vitamilk{
         background: url(../../images/buy/delivery/bg2.jpg) no-repeat center bottom;
         background-size: cover;
            width: 100%;
            height: 100vh;
            text-align: center;
            min-height: 46vw;
            position: relative;
            overflow:hidden;
    }

    .top-header{
        width: 100%;
        /*position: fixed;*/
        top: 0;
        display: none;
    }

    #text-head{
        display: block;
    }

    #text-head-mobile{
        display: none;
    }

    #text-head{
        width: 48%;
        margin: 93px 22% 0 0;
    }

    #line{
        width: 48%;
        margin: 0 48% 0 0;
    }

    #text-con{
        display: block;
    }

    #text-con{
        width: 35%;
        margin: 0 41% 10% 0;
    }
}

@media only screen and (max-width:667px){
    .vitamilk{
         background: url(../../images/buy/delivery/bg2.jpg) no-repeat center bottom;
         background-size: cover;
            width: 100%;
            height: 100vh;
            text-align: center;
            min-height: 46vw;
            position: relative;
            overflow:hidden;
    }

    .top-header{
        width: 100%;
        /*position: fixed;*/
        top: 0;
        display: none;
    }

    #text-head{
        display: block;
    }

    #text-head-mobile{
        display: none;
    }

    #text-head{
        width: 53%;
        margin: 55px 22% 0 0;
    }

    #line{
        width: 53%;
        margin: 0 48% 0 0;
    }

    #text-con{
        display: block;
    }

    #text-con{
        width: 40%;
        margin: 0 41% 10% 0;
    }
}

@media only screen and (max-width:480px){
    .vitamilk{
         background: url(../../images/buy/delivery/bg-mobile4.png) no-repeat center bottom;
         background-position:75% bottom;
    }

    .top-header{
        display: block;
    }

    #text-head-mobile {
        /*width: 75%;
        margin: 21% 22% 0 0;*/
        width: 85%;
        margin: 21% 22% 0 0;
        margin: 0 auto;
        padding-top: 19%;
    }

    #line {
        /*width: 67%;
        margin: 0 21% 0 0;*/
        width: 83%;
        /* margin: 0 21% 0 0; */
        margin: 0 auto;
    }

    #text-con {
        /*width: 45%;
        margin: 0 50% 0 0;*/
        display: none;
    }

    .man{
        padding-bottom:5vw;
    }

    .img-header{
        position: fixed;
        width: 195%;
        left: 47%;
        transform: translate(-50%);
    }
    #left-icon{
        display: none;
    }

    #right-icon{
        display: none;
    }

    #text-head{
        display: none;
    }

    #text-head-mobile{
        display: block;
    }
}

@media only screen and (max-width:375px){
    .vitamilk{
         background: url(../../images/buy/delivery/bg-mobile4.png) no-repeat center bottom;
         background-position:75% bottom;
    }

    .top-header{
        display: block;
    }

    #text-head {
        width: 75%;
        margin: 21% 22% 0 0;
    }

    #line {
        /*width: 67%;
        margin: 0 21% 0 0;*/
        width: 80%;
        margin: 0 21% 0 0;
        margin: 0 auto;
    }

    #text-con{
        display: none;
    }

    #text-con {
        width: 45%;
        margin: 0 50% 0 0;
    }

    
    #left-icon{
        display: none;
    }

    #right-icon{
        display: none;
    }

    #text-head{
        display: none;
    }

    #text-head-mobile{
        display: block;
    }
}

@media only screen and (max-aspect-ratio: 10/6){
    .box{
        margin:14vw auto;
    }
    
}

@media only screen and (max-aspect-ratio: 4/3){
    .vitamilk{
        min-height:100vh;
        height:100%;
    }
    .h-100{
        min-height:100vh;
    }
    .man{
        background-position:top right; 
        display:block;
        float:none;
        margin-right:auto;
    }
    .col-6{
        max-width:100%;
        flex:0 0 100%;
    }
    .col-6#man{
        order:1;
        height:100%;
        max-width:900px;
/*
        margin-top:-12vw;
        margin-left:-60vw;
*/
    }
    #text{
        max-width:900px;
    }
    .vitamilk{
        /*background-position:73% bottom;*/
        background-position:39% bottom;
        background-size: cover;
/*        min-height:162vw;*/
    }
    .box{
        float:none;
        margin:4vw auto 0;
        width: 90%;
    }
    .box #line{
        margin:5vw 1vw 1vw;
    }
    .vitamilk .footer{
        position:absolute;
        bottom:0;
        width:100%;
    }
}

@media only screen and (orientation:portrait){
    .box{
        margin:10vw auto 6vw;
    }
}