@charset "utf-8";

.pages {word-break: keep-all; padding-bottom:100px;}
.pages .full-page {height:100vh;}
.pages .page-title {font-size:72px; text-align:center; color:#383935; padding-top:40px;}
@media(max-width:600px){
    .pages .page-title {font-size:45px;}
}
.lh-30 {line-height: 30px;}
.lh-45 {line-height: 45px;}
.lh-50 {line-height: 50px;}
.lh-55 {line-height: 55px;}

@media(max-width:1200px){
.lh-30 {line-height: 25px;}
.lh-45 {line-height: 30px;}
.lh-50 {line-height: 35px;}
.lh-55 {line-height: 40px;}
}

@media(max-width:800px){
  .lh-30 {line-height: 20px;}
  .lh-45 {line-height: 25px;}
  .lh-50 {line-height: 30px;}
  .lh-55 {line-height: 35px;}
  }

/* SUMMOA - 브랜드스토리 */
#page-31 {word-break:keep-all;}
#page-31 .line {width:2px; background:#6a6a6a; height:70px; margin:0 auto 60px auto; }
#page-31 #s01 {background:url(/images/contents/menu/p31_s01_down.png) no-repeat center bottom 30px, url(/images/contents/menu/p31_s01_bg.jpg) no-repeat center bottom;}
#page-31 #s01 .wrap {height:100%; position:relative;}
#page-31 #s01 .wrap .item {position:absolute;}
#page-31 #s01 .wrap .item span {display: block;}
#page-31 #s01 .wrap .item.item-01 {top:25%;}
#page-31 #s01 .wrap .item.item-01 span {line-height:70px;}
#page-31 #s01 .wrap .item.item-02 {top:45%;}
#page-31 #s01 .wrap .item.item-03 {bottom:300px; right:220px;}
#page-31 #s01 .wrap .item.item-04 {margin:auto; top:auto; right:2%; bottom:550px; left:auto; height:50px;}
#page-31 #s01 .wrap .item.item-05 {bottom:0; right:0;}
#page-31 #s01 .wrap .item.item-05 img {display:block;}
#page-31 #s02 .wrap {height:100%;}
#page-31 #s02 .wrap .col,
#page-31 #s02 .wrap .row {height:100%;}
#page-31 #s03 {background:url(/images/contents/menu/p31_s03_bg.jpg) center center; background-size:cover; padding-top:70px;}
#page-31 #s03 .col {text-align:right;}
#page-31 #s04 {padding-top: 70px;}
#page-31 #s04 .row-1 {background:linear-gradient(to right, #eef8f3 60%, transparent 60%); margin-bottom:100px;}
#page-31 #s04 .row-2 {background:linear-gradient(to left, #fdf7f0 60%, transparent 60%); margin-bottom:100px;}
#page-31 #s04 .row-2 .wrap {position:relative;}
#page-31 #s04 .row-2 .col-md-6:nth-child(1) {position:absolute; right:-0.75rem; top:0; bottom:0;}
#page-31 #s04 .row-2 .col-md-6:nth-child(2) {}
#page-31 #s04 .col-md-6 img {display:block;}
#page-31 #s04 .row-1 .fs-30 {color:#487371;}
#page-31 #s04 .row-2 .fs-30 {color:#a2640c;}
#page-31 #s04 .row-2 .flex{flex-direction: row-reverse;}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media(max-width:1024px){
    #page-31 #s01 .wrap .item.item-01 span {line-height:50px;}
    #page-31 #s02.full-page {padding:70px 0; height:auto;}
    #page-31 #s02 .wrap {height:auto;}
    #page-31 #s02 .wrap .col{margin-top: 40px;}
    #page-31 #s02 .wrap .col p.mt-5{margin-top: 1rem !important;}
    #page-31 #s02 .wrap .col .pl-5{padding: 0 !important;}
    #page-31 #s02 .wrap .row {flex-direction: column; text-align:center; justify-content: center}
    #page-31 #s02 .wrap .row .h-100 > div {width:100%;}
    #page-31 #s02 br.web {display:block;}
    #page-31 #s03 .col {width:50%;}
}
@media(max-width:768px){
    #page-31 #s03.full-page {height:auto; padding:70px 0;}
    #page-31 #s03.full-page .pb-5{padding-bottom: 0 !important;}
    #page-31 #s03 .wrap .row {flex-direction: column;}
    #page-31 #s03 .col {width:100%; text-align:center;}
    #page-31 #s03 .col .flex {justify-content: center;}
    #page-31 #s03 .col .text-right {text-align:center;}
    #page-31 #s04 .row {flex-direction: column;}
    #page-31 #s04 .row-1 {background:#eef8f3; padding-bottom: 70px;}
    #page-31 #s04 .row-2 {background:#fdf7f0; padding-bottom: 70px;}
    #page-31 #s04 .row-2 .col-md-6:nth-child(1) {position:relative;}
    #page-31 #s04 .row-2 .col-md-6:nth-child(1) .text-right{text-align: center !important;}
    #page-31 #s04 .col-md-6 {width:100%; max-width:100%; flex:0 0 100%; text-align:center;}
    #page-31 #s04 .col-md-6:nth-child(1) {padding:40px 0;}
    #page-31 #s04 .col-md-6 img {display:inline-block; width:100%;}
    #page-31 #s04 .col-md-6 .flex{display: block;}
}
@media(max-width:425px){
    #page-31 #s01 .wrap .item.item-01 {top:20%;}
    #page-31 #s01 .wrap .item.item-02 {top:40%;}
    #page-31 #s01 .wrap .item.item-03 {bottom: 40%; width: 80%; right: 0; left: 0;}
    #page-31 #s01 .wrap .item.item-04 {bottom: 25%; right: 0; left: 0;}
    #page-31 #s01 .wrap .item.item-05 img {max-width: 250px;}
}

/**
 * 33, 34 페이지 동일한 css 사용.
 */

#page-32,
#page-33,
#page-34{padding-top: 130px;}

#page-32 {background:#f7f6f6;}
#page-32 .s01 {text-align:center; background:linear-gradient(to right, #e8e8e8, #f4f4f4, #e8e8e8); padding:100px 0;}

@media(max-width:768px){
    #page-32 .s01 {padding:30px;}
    #page-32,
    #page-33,
    #page-34{padding-top: 70px;}
}

#page-32 .s02 {background:#fff; padding:100px 60px;}
#page-32.p34 .s02 .essence {min-height:400px;}
#page-32 .s02 .bubbles {position:absolute;}
#page-32 .s02 .bubbles .bubble {
    width:133px; height:135px; background:url(/images/contents/menu/p32_bubble.png) no-repeat center center;
}
#page-32.p34 .pr{padding-left: 80px;}
#page-32 .s02 ul {}
#page-32 .s02 ul li {margin:12px 0;}
#page-32 .s02 .txt { width: 68%; margin: 0 auto;
    text-align:center; color:#777; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf;
    padding:8px 0 6px 0;
}
#page-32 .problems {
    background:url(/images/contents/menu/p32_0003.jpg) no-repeat center center; background-size:cover;
    max-width:800px; height:654px; margin:100px auto; color:#fff; position:relative;
    padding:110px 0 0 0;
}
#page-32 .problems .line {width:1px; background:#fff; height:70px; margin:40px auto 40px auto; opacity: 0.7; }
#page-32 .problems p {color:#fff; text-align:center; display:block;}
#page-32 .problems p.mar {}
#page-32 .problems ul {
    position:absolute; max-width:470px; width:100%; margin:auto; top:auto; right:0; bottom:20%; left:0;
}
#page-32 .problems ul li {
    padding-left:25px; background:url(/images/contents/menu/p32_check.png) no-repeat left top 6px;
}
#page-32 .what-is-does {margin-bottom: 100px;}
#page-32 .what-is-does .flex {flex-wrap: wrap;}
#page-32 .what-is-does .flex > div {
    width:50%; height:190px; position:relative; padding:40px 20px 20px 100px;
    word-break: keep-all;
}
#page-32 .what-is-does .flex > div:before {
    content:''; position:absolute; color:#edf9f2; font-size:120px;
    font-family:Lato, sans-serif; line-height:120px; top:0; left:0;
}
#page-32 .what-is-does .flex > div:nth-child(1):before {content:'1';}
#page-32 .what-is-does .flex > div:nth-child(2):before {content:'2';}
#page-32 .what-is-does .flex > div:nth-child(3):before {content:'3';}
#page-32 .what-is-does .flex > div:nth-child(4):before {content:'4';}
#page-32 .what-is-does .flex > div:nth-child(5):before {content:'5';}
#page-32 .what-is-does .flex > div:nth-child(6):before {content:'6';}
#page-32 .point {
    background:url(/images/contents/menu/p32_0004.jpg) no-repeat center right, #c9e1d3;
    height:628px; padding:50px;
}
#page-32.p33 .point {background-image:url(/images/contents/menu/p33_0004.jpg)}
#page-32.p34 .point {background-image:url(/images/contents/menu/p34_0004.jpg)}
#page-32 .point .head {
    text-align:center; color:#383935; position:relative;
}
#page-32 .point .head:after {
    content:''; position:absolute; height:1px; width:70px; background:#383935; margin:auto;
    top:auto; right:0; bottom:0; left:0;
}
#page-32 .point .fs-30 {color:#6d8487;}

@media(max-width:1024px){
    #page-32.p34 .pr{padding: 0;}
    #page-32 .essence .col {width:100%; max-width:100%; flex:0 0 100%; text-align:center;}
    #page-32 .essence .col ul {margin-bottom:40px;}
    #page-32 .point .row{height: auto;}
    #page-32 .point .row > div {background:rgba(255,255,255,0.5); padding:30px;}
    #page-32 .point .head {margin-bottom: 20px;}
    #page-32 .point .row > div > div {margin-bottom:20px;}
    #page-32 .point .row > div > div:last-child {margin-bottom:0;}
    #page-32 .point .row br {display:none;}
}
@media(max-width:768px){
    #page-32 .s02 {padding:0 0 60px 0;}
    #page-32 .s02 .bubbles .bubble{background-size: contain; width: 120px;}
    #page-32 .s02 .bubbles .bubble.mb-3{margin: 0 !important}
    #page-32 .essence {padding:30px;}
    #page-32 .problems {height:auto; padding:60px 30px; margin: 60px 0;}
    #page-32 .problems ul {position:relative; margin-top:50px;}
    #page-32 .what-is-does {margin-bottom: 60px;}
    #page-32 .what-is-does .flex > div {width:100%; height: 155px;}
    #page-32 .what-is-does .flex > div:before {position:absolute; margin:auto; left:15px; top:30px; height:100px; line-height:100px;}
    #page-32 .point {position:relative; background: url(/images/contents/menu/p32_0004.jpg) no-repeat center;}
    #page-32 .point .row {position:absolute; left:0; bottom:0%; padding: 30px;}
    #page-32 .point .row > div {width:100%; max-width:100%; flex:0 0 100%;}
}
@media(max-width:600px){
    /* #page-32 .point {position:relative;}
    #page-32 .point .row {position:absolute; left:0; bottom:-50%;}
    #page-32 .point .row > div {width:100%; max-width:100%; flex:0 0 100%;} */
}

#page-32 .s03 {height:793px; background:url(/images/contents/menu/treatment.jpg) no-repeat center center; position:relative; background-size: cover;}
#page-32.p33 .s03 {background-image:url(/images/contents/menu/serum.jpg);background-size: cover;}
#page-32.p34 .s03 {background-image:url(/images/contents/menu/foam3.jpg);background-size: cover;}
#page-32.p42 .s03 {background-image:url(/images/contents/menu/hydramask.jpg);background-size: cover;}
#page-32.p43 .s03 {background-image:url(/images/contents/menu/toneup.jpg);background-size: cover;}
#page-32 .s03 .flex {height:100%;}
#page-32 .s03 .rect {width:45%; position:absolute; right:0; }
#page-32 .s03 .rect .head {line-height:55px;}
#page-32 .s03 .rect .body {margin-top:50px; line-height:30px;}

@media(max-width:768px){
    #page-32 .s03 {height: 650px; background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/images/contents/menu/p32_0005.jpg) no-repeat left -200px center;}
    #page-32.p33 .s03 {height: 650px; background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/images/contents/menu/p33_0005.jpg) no-repeat left -200px center;}
    #page-32.p34 .s03 {height: 650px; background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/images/contents/menu/p34_0005.jpg) no-repeat left -200px center;}
    #page-32 .s03 .rect {width:100%; text-align:center; padding:30px; color: #fff;}
    #page-32 .s03 .rect .body br {display:none;}
    #page-32 .s03 .rect .head{line-height: 35px;}
    #page-32 .s03 .rect .body{line-height: 25px;}
}

#page-32 .s04 {background:#fff;}
#page-32 .s04 .rect {width:80%; margin:auto;}
#page-32 .s04 .rect .row {
    position:relative; color:#383935; border-bottom:2px solid #d4d4d4;
}
#page-32 .s04 .rect .row:last-child {border-bottom:0;}
#page-32 .s04 .rect .no {
    position:absolute; color:#00b799; font-size:84px; font-family: 'Lato', sans-serif;
    z-index:10; font-weight:100; height:100%;
}
#page-32 .s04 .rect .col {padding:90px 40px;}
#page-32 .s04 .rect .col:nth-child(2) {text-align:center;}
#page-32 .s04 .rect .col:nth-child(3) {}

@media(max-width:768px){
    #page-32 .s04 .rect .no {height:auto;}
    #page-32 .s04 .rect .col {width:100%; max-width:100%; flex:0 0 100%; padding: 40px 0 30px 60px;}
    #page-32 .s04 .rect .col:nth-child(2){text-align: left;}
    #page-32 .s04 .rect .col:nth-child(3){padding: 0 0 40px 60px;}
}
@media(max-width:425px){
    /* #page-32 .s04 .rect .col {padding:30px;} */
}

#page-32 .s05 {background: #fafafa; padding-bottom: 100px;}
#page-32 .s05 .head {padding:100px 0 35px 0; text-align:center;}
#page-32 .s05 .body {width: 80%; margin: 0 auto; background:#fff; padding:50px; text-align:center;}
#page-32 .s05 .body .c2{padding-top: 65px;}

@media(max-width:768px){
    #page-32 .s05 {padding-bottom: 60px;}
    #page-32 .s05 .head {padding: 60px 0 35px 0;}
    #page-32 .s05 .body {}
    #page-32 .s05 .body .flex {flex-wrap: wrap;}
    #page-32 .s05 .body .flex > div {width:100%;}
    #page-32 .s05 .body .flex > div:nth-child(2) {padding:30px 0 20px 0;}
    #page-32 .s05 .body .flex > div:nth-child(2) img {transform:rotate(90deg);}
    #page-32 .s05 .body .c2 {padding-top: 10px;}
}

#page-32 .s06 {background:#fff;}
#page-32 .s06 .head {padding:60px 0 0 0; text-align:center;}
#page-32 .s06 .body {padding:50px; text-align:center;}
#page-32 .s06 .step {color:#00b780;}

@media(max-width:768px){
    #page-32 .s06 .body {flex-wrap: wrap;}
    #page-32 .s06 .body > div {width:100%; margin-bottom:30px;}
    #page-32 .s06 .body > div:last-child {margin-bottom:0;}
}

@media(max-width:425px){
  #page-32 .s05 .body,
  #page-32 .s06 .body{width: 100%; padding: 30px;}
}

/**/
#page-36 {}
#page-36 #s01 {background:url(/images/contents/menu/p36_01.jpg) no-repeat right bottom; background-size:cover;}
#page-36 #s02 {background:url(/images/contents/menu/p36_02.jpg) no-repeat center center; background-size:cover;}
#page-36 #s03 {background:url(/images/contents/menu/p36_03.jpg) no-repeat center center; background-size:cover;}
#page-36 #s04 {background:url(/images/contents/menu/p36_04.jpg) no-repeat center center; background-size:cover;}
#page-36 #s04 img{margin: 0 auto;}
#page-36 #s04 .researchers {
    max-width:853px; margin:auto; border-top:2px solid #ccc; border-bottom:2px solid #ccc;
    display:flex; align-items: center; padding:20px 20px 20px 0;
}
#page-36 #s04 .researchers > div {}
#page-36 #s04 .researchers > div:nth-child(1) {padding:0 40px;}
#page-36 #s04 .researchers > div:nth-child(2) {}
#page-36 #s05 {background:url(/images/contents/menu/p36_05.jpg) no-repeat center center; background-size:cover;}
#page-36 #s05 .lh{line-height: 1.8;}

@media(max-width:1024px){
    #page-36 #s01 {height:790px; background-position: 70% }
    #page-36 #s02 {height:700px; padding:60px 0;}
    #page-36 #s03 {height:700px;}
    #page-36 #s04 {height:700px; padding-bottom:60px;}
    #page-36 #s04 .con_body div:nth-child(1){margin: 50px 0;}
    #page-36 #s05 {height:700px;}

}
@media(max-width:582px){
    #page-36 #s05 .lh p{min-width: 535px;}
}

/**/
#page-40 {
    background:url(/images/contents/menu/p40_bg.jpg) no-repeat center center; min-height:1000px;
    background-size:cover;
}
#page-40 .history {position:relative;}
#page-40 .history:before {
    content:''; display:block; position:absolute; margin:auto; width:2px; height:99%;
    background:#17818c; top:20px; right:0; bottom:auto; left:0;
}
#page-40 .history .flex {text-align:right; padding:0;}
#page-40 .history .flex > div {width:50%; padding:20px 40px;}
#page-40 .history .flex:first-child > div {padding-top:0;}
#page-40 .history .flex:nth-child(2n-1) {justify-content: flex-end; text-align:left;}
#page-40 .history .y {
    margin-bottom:20px; color:#17818c; font-size:30px; font-family: Montserrat,sans-serif; position:relative;
}
#page-40 .history .y:before {
    content:''; display:block; position:absolute; width:8px; height:8px; background:#17818c;
    border-radius:100%; margin:auto; top:0; right:auto; bottom:0; left:-44px;
}
#page-40 .history .log {font-family: 'Noto Sans KR',sans-serif;}
#page-40 .history .log li {display:flex; margin-bottom:10px;}
#page-40 .history .log li:last-child {margin-bottom:0;}
#page-40 .history .log li div:nth-child(1) {width:45px; color:#17818c;}
#page-40 .history .log li div:nth-child(2) {font-weight:300;}
#page-40 .history .flex:nth-child(2n) {}
#page-40 .history .flex:nth-child(2n) .y {}
#page-40 .history .flex:nth-child(2n) .y:before {left:auto; right:-44px;}
#page-40 .history .flex:nth-child(2n) .log {}
#page-40 .history .flex:nth-child(2n) .log li {position:relative; text-align:right;}
#page-40 .history .flex:nth-child(2n) .log li > div:nth-child(1) {position:absolute; right:0;}
#page-40 .history .flex:nth-child(2n) .log li > div:nth-child(2) {padding-right:45px; width:100%;}

@media(max-width:768px){

    #page-40 .history:before {right:auto;}
    #page-40 .history .flex > div {width:100%; padding:20px;}
    #page-40 .history .flex {text-align:left;}
    #page-40 .history .flex:nth-child(2n) .log li {text-align:left;}
    #page-40 .history .flex:nth-child(2n) .log li > div:nth-child(1) {position:relative;}
    #page-40 .history .flex .y:before,
    #page-40 .history .flex:nth-child(2n) .y:before {right:auto; left:-23px;}
    #page-40 .history .flex:nth-child(2n) .log li > div:nth-child(2) {padding-right:0;}

}

/**/
#page-41.pages{padding: 0;}
#page-41 .flex {justify-content: space-between;}
#page-41 .text-m {margin: 35px 0 0 35px;}
#page-41 .add {}
#page-41 .add ul {display:flex; flex-wrap: wrap;}
#page-41 .add ul li {width:50%; padding:15px 0;}
#page-41 .add ul li > span:nth-child(1) {display:inline-block; margin-right:15px; font-size:20px; font-weight:bold;}
#page-41 .cts02 {position: relative; background: linear-gradient(360deg, #f8f8f8 68%, #fff 32%); width: 100%; height: 100%; padding-bottom: 110px;}


@media(max-width:1200px){
  #page-41 .root_daum_roughmap{width: 100% !important;}
}

@media(max-width:1024px){
  #page-41 .flex {display: block; text-align: center;}
  #page-41 .text-m {margin: 1.2rem 0 0 0;}
}

@media(max-width:425px){
    #page-41 .add ul li {width:100%;}
    #page-41 .add ul li > span:nth-child(1){font-size: 17px;}
}

/**/
#page-37 {}
#page-37 .flex {justify-content: space-between;}
#page-37 .text-m {margin: 35px 0 0 35px;}
#page-37 .rnd {display:flex; justify-content: space-between; flex-wrap: wrap; margin-top:60px;}
#page-37 .rnd > div {width:30%; text-align:center; padding:50px 30px;}
/* #page-37 .rnd .img{height: 90px;} */

@media(max-width:1024px){
  #page-37 .flex {display: block; text-align: center;}
  #page-37 .text-m {margin: 1.2rem 0 0 0;}

}

@media(max-width:768px){
    #page-37 .rnd{margin-top: 40px;} 
    #page-37 .rnd > div {width:100%; margin-bottom:4%;}
    #page-37 .rnd > div:last-child {margin-bottom:0;}

}

@media(max-width:425px){
  .fs-72{font-size: 35px;}
}


/*  */
#page-32.p43 .flex-col{margin-left: 100px;}