@import url("reset.css");


.container a:link{
    font: normal normal 300 13px/21px Montserrat;
    margin-top: -5px;
}
.container p{
    font: normal normal 300 13px/21px Montserrat;
}
.title-txt p{
    font: normal normal 300 22px/30px Montserrat;
}
.sub-txt p{
    font: italic normal normal 14px/24px Lora;
}


.intro-bg {
    min-width: 889px;
}

.video-container {
    padding-top: 50%;
}

.video-container video {
    width:889px;
}

.intro .intro-box{
    top: 261px;
    left: 286px;
    min-width: 264px;
}

.science-page1{
    min-width: 889px;
    transform: translate(-66%);
    min-height:650px;
}

.science-page1 .seperator{
    width: 34%;
    margin-left: 64%;
}
.science-page1 .wrap{
    min-width: 889px;
    min-height: 820px;
}
.science-page1 .contents{
    min-width: 340px;
    left: 588px;
    height:756px;
}
.science-page1 .sub-txt{   
    padding-top: 30px;
}

.science-page1 .main-content{
    margin-top: 0px;
} 
.science-page1 .main-content .body-txt{
    margin-top: 0px; 
}
.science-page1 .title-txt p{
    text-align: left;
    font: normal normal 300 22px/30px Montserrat;
}

.science-page2 .title-txt .title-txt-strong{
    font: normal normal 500 22px/30px Montserrat;
}


.science-page1 .txt1{
    padding-top:30px;
    font: normal normal 300 13px/21px Montserrat;
}

.science-page2{
    height: auto;
    min-height:900px;
} 
.science-page2 .wrap {
    width: 100%;
    padding-bottom: 15px;
}
.science-page2 .seperator{
    position: absolute;
    margin-left: 50%;
    margin-top: 14.8%;
    width: 9%;
}

.science-page2 .contents-low{
    min-width: 340px;
    width: 19%;
    transform: translate(109%, 0);
}

.science-page2 .contents{
    top:0;
    min-width: 340px;
    width: 39.5%;
    transform: translate(-72%);
}
.science-page2 .first-txt{
    width: 49%;
    margin-left: 45%;
}

.science-page2 .first-txt .left-txt{
    width: 100%;
    padding-left: 10%;
}

.science-page2 .seromela-video{
    width: 45%;
    margin-top:20px;
    transform: translate(110%);
}

.science-page2 .seromela-video video{
    transform:scale(1.0025);             /*  default */
    -webkit-transform:scale(1.0025);  /*  크롬 */
    -moz-transform:scale(1.0025);     /* FireFox */
    -o-transform:scale(1.0025);        /* Opera */
    max-width: 100%;
    height: auto;
}

.science-page3 .contents{
    width: 340px;
    margin-top:20px;
    padding-bottom: 80px;
}

.science-page3 .contents .top-content{
    margin-top:0;
}
.science-page2 .contents-low{
   margin-top:20px;
}
.science-page3 .title-txt .seperator{
    width: 17%;
    margin-left: 82%;
    margin-top: -9px;
}

.science-page3 .title-txt {
    margin-bottom:6%;
}

.science-page3 .conday-video video{
    max-width: 100%;
    height: auto;
    transform:scale(1.003);             /*  default */
    -webkit-transform:scale(1.003);  /*  크롬 */
    -moz-transform:scale(1.003);     /* FireFox */
    -o-transform:scale(1.003);        /* Opera */
}
.science-page3 .right-content{
    display: inline-block;
}

.science-page3 .right-content .body-txt{
    width: 100%;
}
.science-page3 .right-content p{
    padding-top: 5%;
}
.science-page3 .prdct-hcl-mark{
    text-align: right;
    padding-left: 0;
    width: 100%;
    margin-top: 10px;
}
.science-page3 .prdct-hcl-mark img{
    width: 100%;
    max-width: 102px;
    height: auto;
}

.science-page3 .sub-txt p{
    width:99%;
    margin-left:0%;
}

.science-page4 .contents{
    width: 340px;
    height: auto;
    padding-bottom: 16%;
}
.science-page4 .left-content{
*display: inline;
}
.science-page4 .title-txt{
    width: 100%;
    text-align: left;
}
.science-page4 .title-txt .seperator{
    width: 44%;
    margin-left: 56%;
    margin-top:-9px;
}
.science-page4 .main-txt{
    width: 100%;
    margin-top: 16%;
}
.science-page4 .sub-txt{
    text-align:center;
    padding-top:8%;
    width: 100%;
}
.science-page4 .main-txt p{
    font: normal normal 300 13px/21px Montserrat;
}
.science-page4 .coffee-olly-img{
    position: relative;
    margin-left: 0%;
    margin-top: 0%;
    width: 88%;
    height: 65%;
}
.science-page4 .coffee-img{
    position: absolute;
    width: 90%;
    margin-top: 22%;
    margin-left: 30%;
    transform: translate(-25%, -25%);
    height: auto;
}
.science-page4 .olly-img{
    position: absolute;
    transform: translate(-20%, -24%);
    width: 70%;
    margin-top: 25%;
    margin-left: 37%;
    height: auto;
}

.science-page5 .contents{
    width: 340px;
    margin-top: 40px;
}
.science-page5 .title-txt > .seperator{
    margin-left: 66%;
    width: 32%;
    margin-top:-8px;
}
.science-page5 .body-txt{
    margin-left: 0%;
    margin-bottom: 4%;
    margin-top:10%;
    width: 100%;
}
.science-page5 .life-type-table{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.science-page5 .life-type-table .type{
    display: grid;
    padding-bottom: 10%;
    column-gap: 1%;
    grid-template-columns:32% 66%;
    padding-left: 0%;
}
.science-page5 .type-img{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    width: 100%;
    height: auto !important ;
    max-width: 120px;
    max-height: 120px;
    padding-right: 2%;
}
.science-page5 .type-txts{
    width: 100%;
    height: auto;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}
.science-page5 .day-night-txt{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    width: 100%;
}
.science-page5 .type .type-name{
    text-align: left;
    padding-top: 0px;
    font: normal normal 300 12px/15px Montserrat;
}

.science-page5 .type .type-name strong{
    font: italic normal 500 12px/15px Montserrat;
}

.science-page5 .type .type-txt{
    font: normal normal 300 10px/14px Montserrat;
}
.science-page5 .type .day-night-txt p{
    font: normal normal 300 10px/14px Montserrat;
    padding-top: 0%;
    padding-bottom: 2%;
}
.science-page5 .download {
   position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.science-page5 .download .txt{
    z-index: 2;
    margin-top: 5%;
    margin-left: 0%;
    text-align: center;
    font: normal normal 300 16px/22px Montserrat;
}

.science-page5 .download .txt strong{
    font: normal normal 500 16px/22px  Montserrat;
}

.science-page5 .download .txt p{
    font: normal normal 300 16px/22px Montserrat;
}
.science-page5 .app{
    width: 68%;
    margin-top: 18%;
    margin-left: 20%;
    color: #707070;
    text-align: center;
    display: inline-block;
}

.science-page5 .download .app-android {
    width: 110px;
}

.science-page5 .download .app-ios {
    width: 110px;
    margin-top: -7px;
    margin-left: 8px;
}

.science-page5 .download .app-img-ios {
    height: 35px;
}