@import url("reset.css");

.container a:link{
    font: normal normal 100 12px/20px Noto Sans KR;
    margin-top: -5px;
}
.container p{
    font: normal normal 100 12px/20px Noto Sans KR;
}
.title-txt p{
    font: normal normal 300 24px/36px Noto Sans KR;
}

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

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

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

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

.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: 658px;
}
.science-page1 .contents{
    min-width: 340px;
    left: 588px;
    height:756px;
}

.science-page1 .title-txt p{
    text-align: left;
    font: normal normal 100 24px/36px Noto Sans KR;
}

.science-page1 .txt1{
    font: normal normal 100 12px/20px Noto Sans KR;
}

.science-page1 .sub-txt{
    content:url('/img/science/S_KRMobile_section01_KRtext.png');
    margin-top:20px;
    margin-bottom:20px;
}

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

.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: 50%;
    margin-left: 45%;
}

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

.science-page2 .seromela-video{
    width: 45%;
    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-page2 .sub-txt{
    content:url('/img/science/S_KRMobile_section02_KRtext.png');
}


.science-page3 .contents{
    width: 340px;
}

.science-page3 .title-txt .seperator{
    width: 30%;
    margin-left: 70%;
    margin-top: -9px;
}

.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{
    content:url('/img/science/S_KRMobile_section03_KRtext.png');
}

.science-page4 .contents{
    width: 340px;
    height: auto;
    padding-bottom: 14%;
}
.science-page4 .left-content{
*display: inline;
}
.science-page4 .title-txt{
    width: 100%;
    text-align: left;
}
.science-page4 .title-txt .seperator{
    width: 60%;
    margin-left: 40%;
}
.science-page4 .main-txt{
    width: 100%;
    margin-top: 25%;
}
.science-page4 .sub-txt{
    text-align:center;
    width: 100%;
}
.science-page4 .main-txt p{
    font: normal normal 300 12px/20px Noto Sans KR;
}
.science-page4 .coffee-olly-img{
    position: relative;
    margin-left: 0%;
    margin-top: 3%;
    width: 100%;
    height: 65%;
}
.science-page4 .coffee-img{
    position: absolute;
    width: 90%;
    margin-top: 22%;
    margin-left: 25%;
    transform: translate(-25%, -25%);
    height: auto;
}
.science-page4 .olly-img{
    position: absolute;
    transform: translate(-20%, -24%);
    width: 70%;
    margin-top: 20%;
    margin-left: 31%;
    height: auto;
}
.science-page4 .sub-txt{
    margin-top:20px;
    content:url('/img/science/S_KRMobile_section04_KRtext.png');
}

.science-page5 .contents{
    width: 340px;
    margin-top: 40px;
}
.science-page5 .title-txt > .seperator{
    margin-left: 53%;
    width: 47%;
}
.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 100 12px/16px Noto Sans KR;
}
.science-page5 .type .type-txt{
    font: normal normal 100 9px/14px Noto Sans KR;
}
.science-page5 .type .day-night-txt p{
    font: normal normal 100 9px/14px Noto Sans KR;
    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: 26%;
}

.science-page5 .download .txt p{
    font: normal normal 300 18px/27px Noto Sans KR;
}
.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;
}