@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/34px Noto Sans KR;
    letter-spacing: 0px;
    display: inline-block;
    margin-top: -8px;
}
.container p{
    color: #000000;
    letter-spacing: 0px;
    opacity: 1;
    font: normal normal 300 18px/34px Noto Sans KR; 
}
.title-txt p{
    font: normal normal 300 44px/56px Noto Sans KR;
}
.container strong{
    font-weight: bold
}
.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:491px;
    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;
    /*left:315px;*/
}
.science-page1 .seperator{
    width: 64%;
    margin-left: 34%;
    margin-top:-10px;
}
.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: 15px;
    margin-left: 40px;
    width: 64%;
}
.science-page2 .contents{
    /*position: absolute;
    width: 100%;
    min-width:1000px;*/
    position: absolute;
    left:50%;
    transform: translate(-50%, 0);
    width: 1305px;
    min-width:1000px;
    height: fit-content;
    top: 60px;
}

.science-page2 .first-txt{
    width: 1345px;
    height: auto;
}
.science-page2 .first-txt .left-txt{
    margin-top: 1%;
    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: 40px;
}
.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{
    height: auto;
    transform:scale(1.002);             /*  default */
    -webkit-transform:scale(1.002);  /*  크롬 */
    -moz-transform:scale(1.002);     /* FireFox */
    -o-transform:scale(1.002);        /* Opera */
    transform: translate(-16%);
}

.science-page2 .body-txt {
    width: 100%;
    margin-top: 35px;
    display: flex;
    justify-content: center;
}
.science-page2 .body-txt p{
    width: 67%;
    max-width: 883px;
}
.science-page2 .sub-txt{
    margin-top: 40px;
    text-align: center;
    width: 100%;
}
.science-page2 .sub-txt img{
    width: 45%;
    max-width: 872px;
    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: 40%;
    margin-left: 60%;
    margin-top:-9px;
}
.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: 5%;
}
.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{
    display: none;
}

.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: 60%;
    margin-left: 40%;
    margin-top:-6px;
}
.science-page4 .main-txt{
    width: 100%;
    margin-top:6%;
}
.science-page4 .main-txt p{
    font: normal normal 300 18px/32px Noto Sans KR;
    color: #2C2C2C;
}
.science-page4 .sub-txt{
    width: 100%;
    margin-top: 4%;
    text-align:center;
}
.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: 450px;
    transform: translate(-40%, -10%);
    height: auto;
}
.science-page4 .olly-img{
    position: absolute;
    transform: translate(-35%, -20%);
    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: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.science-page5 .title-txt {
    width: 100%;
    display: inline;
}
.science-page5 .title-txt .seperator{
    margin-left: 27%;
    width: 70%;
    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 Noto Sans KR;
    color: #2C2C2C;
}
.science-page5 .type .type-txt{
    font: normal normal 300 16px/22px Noto Sans KR;
    padding-top: 8%;
    padding-bottom: 4%;
    color: #2C2C2C;
}
.science-page5 .type .day-night-txt p{
    font: normal normal 300 16px/22px Noto Sans KR;
    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 24px/36px Noto Sans KR;
    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 .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;
}