@import url("reset.css");
.store-btncolor-white {
    filter: invert(100%) sepia(0%) saturate(7487%) hue-rotate(146deg) brightness(99%) contrast(104%)
}

.container a:link{
    text-decoration: underline !important;
    font: normal normal 300 18px/32px Montserrat;
    letter-spacing: 0px;
    display: inline-block;
    margin-top: -10px;
}
.container p{
    color: #000000;
    letter-spacing: 0px;
    opacity: 1;
    font: normal normal 300 18px/32px Montserrat;
    word-break: break-word;
}
.title-txt p{
    font: normal normal 300 40px/52px Montserrat;
}

.sub-txt p{
    font: italic normal normal 24px/34px Lora;
}

/*.container strong{
 
    font: normal normal 500 18px/32px Montserrat;
}*/
.container img{
    width: 100%;
}
.container{
    overflow: hidden;
}
video{
    outline: none;
    border: none;
}
.seperator{
    height: 1px;
    border-top: 1px solid #707070;
}
.active {
    background-color: #EDEBE7D9;
}
.wrap{
    width: 100%;
    height: 100%;
}

.intro {
    position: relative;
    width: 100%;
    overflow-x:hidden;
    overflow-y:hidden;
}

.intro-bg {
    position: relative;
    left:50%;
    transform: translate(-50%, 0);
    width: 100%;
    min-width: 1920px;
}

.video-container {
    position: relative;
    width:100%;
    height:auto;
    padding-top:50%;
}

.video-container video {
    position:absolute;
    min-width:100vw;
    top:0;
    left:0;
}
.intro .intro-box{
    position: absolute;
    width: 22%;
    min-width:499px;
    height: fit-content;
    top: 351px;
    left:325px;
}

.intro .intro-txt{ 
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -30%);
    -webkit-transform: translate(-40%, -30%);
}

.science-page1 {
    position: relative;
    height: auto;
    left:50%;
    transform: translate(-50%, 0);
    width: 100%;
    min-width: 1920px;
}

.science-page1 .wrap{
    width: 100%;
    height: auto;
    overflow-x:hidden;
    overflow-y:hidden;
    min-height: 1020px;
}

.science-page1 .contents {
    position: absolute;
    left:50%;
    transform: translate(-50%, 0);
    width: 1305px;
    min-width:1000px;
    height: fit-content;
    top: 60px;
}
.science-page1 .seperator{
    width: 64%;
    margin-left: 34%;
    margin-top:-13px;
}
.science-page1 .sub-txt{
    text-align: center;
    width: 100%;
    padding-top: 4%;
}

.science-page1 .sub-txt img{
    width: 70%;
}
.science-page1 .main-content{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.science-page1 .main-content .body-txt{
    margin-top: 4%;
    width: 40%;
}
.science-page1 .txt1{
    text-align: left;
}
.science-page1 .main-content .eye-img{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 58%;
}

.science-page2{
    position: relative;
    height: auto;
    left:50%;
    transform: translate(-50%, 0);
    width: 100%;
    min-width: 1920px;
    min-height:1285px;
}

.science-page2 .wrap{
    width: 100%;
   /* min-height: 1400px;*/
    overflow-x:hidden;
    overflow-y:hidden;
}

.science-page2 .seperator{
    position: absolute;
    margin-top: 17px;
    margin-left: 40px;
    width: 64%;
}
.science-page2 .contents{
    position: absolute;
    left:50%;
    transform: translate(-50%, 0);
    width: 1305px;
    min-width:1000px;
    height: fit-content;
    top: 60px;
}

.science-page2 .first-txt{
    width: 1317px;
    height: auto;
}
.science-page2 .first-txt .left-txt{
    margin-top: 3%;
    padding-top: 2%;
    padding-left: 9%;
    width: 67%;
    float: left;
}
.science-page2 .first-txt .left-txt p{
    text-align: left;
}
.science-page2 .title-txt p{
    text-align: right;
}
.science-page2 .title-txt{
    margin-right: 15px;
}

.science-page2 .title-txt .title-txt-strong{
    font: normal normal 500 40px/50px Montserrat;
}
.science-page2 .seromela-video{
    width: 100%;
    margin-top: 50px;
    text-align: center;
    overflow: hidden;
    border-left: #EDEBE7 3px;
    border-right: #EDEBE7 3px;

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

.science-page2 .body-txt {
    width: 100%;
    margin-top: 3%;
    display: flex;
    justify-content: center;
}
.science-page2 .body-txt p{
    width: 67%;
}
.science-page2 .sub-txt{
    margin-top: 2%;
    text-align: center;
    width: 100%;
}
.science-page2 .sub-txt img{
    width: 45%;
    height:auto;   
}


.science-page3{
    position: relative;
    height: auto;
    left:50%;
    transform: translate(-50%, 0);
    width: 100%;
    min-width: 1920px;
}
.science-page3 p{
    color: #000000;
    text-align: left;
}
.science-page3 .wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.science-page3 .contents{
    margin-top:5%;
    width: 65.5%;
    max-width: 1257px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 10%;
}
.science-page3 .contents .top-content{
    width: 100%;
    display: flex;
    flex-direction: row; 
}
.science-page3 .left-content{
    width: 55%;
    height: auto;
}
.science-page3 .title-txt .seperator{
    width: 28%;
    margin-left: 72%;
}
.science-page3 .conday-video{
    z-index: 2;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 3%;
    overflow: auto;
}
.science-page3 .conday-video .cover-line{
    z-index: 1;
    position: absolute;
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.science-page3 video{
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
}
.science-page3 .right-content{
    margin-left: 2%;
    margin-top: 1%;
    width: 42%;
    height: auto;
}
.science-page3 .right-content p{
    padding-top: 0%;
}
.science-page3 .prdct-hcl-mark{
    text-align: right;
    margin-top: 5%;
}
.science-page3 .prdct-hcl-mark img{
    width: 38%;
    height: auto;
}
.science-page3 .sub-txt{
    margin-top: 3%;
    text-align: center;
    width: 100%;
}
.science-page3 .sub-txt img{
    width: 65%;
}
.science-page3 .sub-txt p{
    text-align: center;
}

.science-page4{
    position: relative;
    height: auto;
    left:50%;
    transform: translate(-50%, 0);
    width: 100%;
    min-width: 1920px;
}

.science-page4 .wrap{
    display: flex;
    justify-content: center;
    margin-left: 100px;
}
.science-page4 .contents{
    display: inline;
    width: 653px;
    height: auto;
    padding-bottom: 10%;
}
.science-page4 .title-txt {
    width: 100%;
}
.science-page4 .title-txt .seperator{
    width: 50%;
    margin-left: 50%;
    margin-top:-10px;
}
.science-page4 .main-txt{
    width: 100%;
    margin-top:6%;
}
.science-page4 .main-txt p{
    font: normal normal 300 18px/32px Montserrat;
    color: #2C2C2C;
}
.science-page4 .sub-txt{
    width: 100%;
    margin-top: 4%;
    text-align:left;
}
.science-page4 .sub-txt img{
    width: 85%;
}
.science-page4 .coffee-olly-img{
    margin-top: 70px;
    margin-left: 200px;
    width: 27%;
    height: auto;
}

.science-page4 .coffee-img{
    position: absolute;
    width: 25%;
    width: 450px;
    transform: translate(-40%, -10%);
    height: auto;
}
.science-page4 .olly-img{
    position: absolute;
    transform: translate(-35%, -20%);
    width: 22%;
    width: 450px;
    height: auto;
}


.science-page5{
    position: relative;
    height: auto;
    left:50%;
    transform: translate(-50%, 0);
    width: 100%;
    min-width: 1920px;
}
.science-page5 .wrap{
    background-color: #E1E1E1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.science-page5 .contents{
    width: 68%;
    height: auto;
    padding-bottom: 10%;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.science-page5 .title-txt {
    width: 100%;
    display: inline;
}
.science-page5 .title-txt .seperator{
    margin-left: 35%;
    width: 63%;
    margin-top: -10px;
}
.science-page5 .type .seperator{
    width: 55%;
}
.science-page5 .body-txt{
    margin-top: 3%;
    width: 66%;
}
.science-page5 .body-txt p{
    color: #2C2C2C;
}
.science-page5 .life-type-table{
    width: 100%;
    margin-top: 3%;
    height: auto;
    display: flex;
    flex-direction: row;
}
.science-page5 .life-type-table .type{
    flex-basis: 24.5%;
    padding-left: 1%;
}
.science-page5 .type .seperator{
    margin-top: 2%;
    width: 100%;
    border-top: 1px solid #707070;
    padding-bottom: 2%;
}
.science-page5 .type .type-name{
    padding-top: 3%;
    text-align: center;
    font: normal normal 300 18px/24px Montserrat;
    color: #2C2C2C;
}
.science-page5 .type .type-name strong{
    font: italic normal 500 18px/22px Montserrat;
  
}
.science-page5 .type .type-txt{
    font: normal normal 300 14px/19px Montserrat;
    padding-top: 8%;
    padding-bottom: 4%;
    color: #2C2C2C;
}
.science-page5 .type .day-night-txt p{
    font: normal normal 300 14px/19px Montserrat;
    padding-top: 4%;
    padding-bottom: 4%;
    color: #2C2C2C;
}
.science-page5 .type .day-night-txt strong {
    font: normal normal 500 14px/19px Montserrat;
    padding-top: 4%;
    padding-bottom: 4%;
    color: #2C2C2C;
}
.science-page5 .download {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.science-page5 a:link{
    text-decoration: none !important;
}
.science-page5 .download .txt{
    z-index: 2;
    top: 50%;
    transform: translateY(50%);
}
.science-page5 .download .txt p{
    font: normal normal 300 28px/36px  Montserrat;
    color: #2C2C2C;
}

.science-page5 .download .txt strong{
    font: normal normal 500 28px/36px  Montserrat;
    color: #2C2C2C;
}

.science-page5 .app{
    z-index: 2;
    width: 17%;
    margin-top: 8%;
    margin-left:6%;
    color: #707070;
    text-align: center;
    display: grid;
    row-gap: 0px;
}
.science-page5 .app div{
    width: 90%;
}
.science-page5 .download .app-android {
    width: 121.5px;
    height: 36px;
}

.science-page5 .download .app-android:hover {
    opacity: 0.7;
}
.science-page5 .download .app-ios {
    width: 121.5px;
    height: 36px;
    margin-top: 6px;
}

.science-page5 .download .app-img-ios {
    opacity: 0.3;
}