@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
@import url(../fonts/lucida.css);

*{margin: 0; padding: 0; box-sizing: border-box;}
ul{list-style: none;}
a{text-decoration: none; color: inherit;}
img{max-width: 100%;}
i, span, a{display: inline-block;}
h1, h2, h3, h4, h5, h6{line-height: 1.2;}

body{font-size: 14px; color: #1d1d1d;
    font-family: 'Noto Sans KR', sans-serif; line-height: 1.5;
    word-break: keep-all;}

:root{--main: #047d77;
      --point: #faeb00;
      --sub: #1d1d1d;}

.lucida_console{font-family: 'Lucida Console';}
.line_change{display: block;}
.flex{display: flex; justify-content: space-between;}
.main_color{color: var(--main);}
.black_color{color: #000;}

/* mobile */

#header{background: var(--main); padding: 20px 0;}
#header .inner{padding: 0 10px; margin: 0 auto;}
#header .flex{align-items: center;}
#header .logo{width: 10%; min-width: 40px;}
#header .logo .logo_text{display: none;}
#header .cta{width: 60%;
    font-size: calc(0.875rem + ((1vw - 3.75px) * 2.1352)); color: #fff;
    text-align: right;}
#header .cta .btn{width: 40%; background: var(--point); 
    font-weight: 700; color: var(--main); text-align: center;
    padding: 10px 0;}

/* #headline{background: #fff; height: 600px;}
#headline .inner{position: relative;}
#headline .headline_text{width: 55%;
    font-size: calc(2.5rem + ((1vw - 3.75px) * 3.5587)); color: #000;
    text-align: center;
    position: absolute; top: 50px; left: 50%; transform: translateX(-50%);}
#headline .headline_text .main_color{font-weight: 700;}
#headline .headline_text span:last-child{padding-top: 20px;
    font-size: calc(2.8125rem + ((1vw - 3.75px) * 5.3381));}
#headline .gif{width: 37%;
    position: absolute; left: 50%; top: 390px; transform: translateX(-50%);} */
/* 다른 방법? */
#headline{background: #fff; padding: 50px 0;}
#headline .inner{display: block;}
#headline .headline_text{
    font-size: calc(2.5rem + ((1vw - 3.75px) * 3.5587)); color: #000;
    text-align: center;}
#headline .headline_text .main_color{font-weight: 700;}
#headline .headline_text span:last-child{padding-top: 20px;
    font-size: calc(2.8125rem + ((1vw - 3.75px) * 5.3381));}
#headline img{padding: 0 calc(4.6875rem + ((1vw - 3.75px) * 6.4935));}
/* 다른 방법.. */

#contents .sec1{background: var(--main); padding-top: 50px;}
#contents .sec1 .inner{padding: 0 30px;}
#contents .sec1 .title{color: #fff; text-align: center;}
#contents .sec1 .title h2{font-size: calc(1.75rem + ((1vw - 3.75px) * 3.796)); }
#contents .sec1 .title p{font-size: calc(0.875rem + ((1vw - 3.75px) * 1.6607));
    padding-top: 30px;}
#contents .sec1 .obese, #contents .sec1 .healthy{text-align: center;}
#contents .sec1 .obese .description, #contents .sec1 .healthy .description{color: #fff;}
#contents .sec1 .obese .description p:first-of-type, #contents .sec1 .healthy .description p:first-of-type{font-size: calc(1.75rem + ((1vw - 3.75px) * 2.0166));
    padding: 30px 0 20px;}
#contents .sec1 .obese img{width: calc(7.875rem + ((1vw - 3.75px) * 12.2183));}
#contents .sec1 .healthy img{width: calc(6.625rem + ((1vw - 3.75px) * 9.8458));}
#contents .sec1 .obese .description p:nth-of-type(2), #contents .sec1 .healthy .description p:nth-of-type(2){font-size: calc(0.875rem + ((1vw - 3.75px) * 1.6607));
    padding: 20px 65px 50px;}
#contents .sec1 .obese .description p:last-of-type, #contents .sec1 .healthy .description p:last-of-type{display: none;}

#contents .sec2{background: #fff; padding-top: 50px;}
#contents .sec2 .inner{padding: 0 30px;}
#contents .sec2 .title{text-align: center;
    padding: 0 30px;}
#contents .sec2 .title p{font-size: calc(1.625rem + ((1vw - 3.75px) * 3.4401));}
#contents .sec2 .title h2{font-size: calc(1.875rem + ((1vw - 3.75px) * 3.5587));}
#contents .sec2 .description_full{text-align: center;}
#contents .sec2 .text{font-size: calc(0.875rem + ((1vw - 3.75px) * 1.6607));
    padding-bottom: 50px;
    text-align: center;}

#contents .sec3{background: var(--main); overflow: hidden;}
#contents .sec3 .inner{padding: 0 30px;}
#contents .sec3 .title{text-align: center; color: #fff;
    padding: 50px 55px 30px;}
#contents .sec3 .title p:first-of-type{font-size: calc(1.625rem + ((1vw - 3.75px) * 3.4401));}
#contents .title h2{font-size: calc(1.875rem + ((1vw - 3.75px) * 3.5587));
    padding: 10px 0 20px;}
#contents .sec3 .title p:last-of-type{font-size: calc(0.875rem + ((1vw - 3.75px) * 1.6607));
    padding-bottom: calc(3.125rem + ((1vw - 3.75px) * 12.987));}
#contents .sec3 img{padding-bottom: 50px; transform: scale(1.5);}

#contents .sec4{background: #fff;}
#contents .sec4 .inner{padding: 0 30px;}
#contents .sec4 .description_full{padding: 50px 0;
    text-align: center;
    display: block;}
#contents .sec4 .description h2{font-size: calc(1.875rem + ((1vw - 3.75px) * 2.9656));}
#contents .sec4 .description img{background: var(--main); padding: 9px;
    margin: 30px 0 30px;}
#contents .sec4 .description p{font-size: calc(0.875rem + ((1vw - 3.75px) * 1.6607));}
#contents .sec4 .desc1 p{padding-bottom: 30px;}

#footer{background: var(--main); padding: 50px 0;}
#footer .inner{padding: 0 30px; text-align: center;}
#footer .text{color: #fff;}
#footer .text p{font-size: calc(1rem + ((1vw - 3.75px) * 1.6607));}
#footer .cta{padding-top: 10px;
    font-size: calc(1.25rem + ((1vw - 3.75px) * 2.1352)); color: #fff;}
#footer .cta .btn{width: 38%; background: var(--point); 
    font-weight: 700; color: var(--main); text-align: center;
    padding: 10px 0;}

@media screen and (min-width: 760px) {
    .inner{padding: 0 20px;}
    #header .logo{width: 30%;}
    #header .logo .logo_icon{width: 30%; vertical-align: -85%;}
    #header .logo .logo_text{display: inline-block; width: 65%; padding-left: 2%;}

    /* #headline .inner{position: static; padding: 100px 90px 0 45px;}
    #headline .headline_text{position: static; transform: translateX(0);
        text-align: left;}
    #headline .gif{width: 30%; position: static; transform: translateX(0); padding-bottom: 30px;} */
    #headline{padding: 100px 0;}
    #headline .inner{padding: 0 50px 0 calc(2.8125rem + ((1vw - 7.6px) * 9.8253));
        display: flex;}
    #headline .headline_text{text-align: left;}
    #headline img{padding: 0 calc(6.25rem + ((1vw - 7.6px) * 22.9258));}

    #contents .sec1{padding-top: 100px;}
    #contents .sec1 .description_full{display: flex; justify-content: space-between;}
    #contents .sec1 .obese .description p:first-of-type, #contents .sec1 .healthy .description p:first-of-type{padding: 50px 0 30px;}
    #contents .sec1 .obese .description p:nth-of-type(2), #contents .sec1 .healthy .description p:nth-of-type(2){padding: 30px 40px 20px;}
    #contents .sec1 .obese .description p:last-of-type, #contents .sec1 .healthy .description p:last-of-type{display: block;
        font-size: calc(1.25rem + ((1vw - 7.6px) * 1.31));
        padding-bottom: 100px;}

    #contents .sec2{padding-top: 100px;}
    #contents .sec2 .title{text-align: center;
        padding: 0 20px;}
    #contents .sec2 .description_full{text-align: center;
        display: flex; flex-wrap: wrap;}
    #contents .sec2 .description_full .img{width: calc(100%/3 - 10px);}
    #contents .sec2 .text{padding-bottom: 100px;}
    #contents .sec2 .text .line_change{display: inline-block;}

    #contents .sec3 .title{padding: 50px 70px 30px;}
    #contents .title h2{padding: 20px 0 30px;}
    #contents .sec3 .title p:last-of-type .line_change{display: inline-block;}
    #contents .sec3 img{transform: scale(1.2);}

    #contents .sec4 .inner{padding: 100px 20px;}
    #contents .sec4 .description_full{padding: 0px;
        display: flex;}
    #contents .sec4 .description{width: calc(100%/2 - 20px);}
    #contents .sec4 .desc1 p{padding-bottom: 0;}

    #footer{padding: 100px 0;}
    #footer .cta{padding-top: 15px;}
    #footer .cta .btn{width: 30%;}

}

@media screen and (min-width: 1218px) {
    .inner{width: 1218px; margin: 0 auto;}
    #header .cta{font-size: 32px;}

    #headline .inner{padding: 0 50px 0 90px;}
    #headline .headline_text{font-size: 70px;}
    #headline .headline_text span:last-child{font-size: 90px;}
    #headline img{padding: 0 205px;}

    #contents .sec1 .title h2{font-size: 60px;}
    #contents .sec1 .title p{font-size: 28px;}
    #contents .sec1 .obese .description p:first-of-type, #contents .sec1 .healthy .description p:first-of-type{font-size: 45px;}
    #contents .sec1 .obese img{width: 229px;}
    #contents .sec1 .healthy img{width: 189px;}
    #contents .sec1 .obese .description p:nth-of-type(2), #contents .sec1 .healthy .description p:nth-of-type(2){padding: 30px 105px 20px; font-size: 28px;}
    #contents .sec1 .obese .description p:last-of-type, #contents .sec1 .healthy .description p:last-of-type{font-size: 26px;}

    #contents .sec2 .inner{padding: 0 30px;}
    #contents .sec2 .title{text-align: center;
        padding: 0 20px;}
    #contents .sec2 .title p{font-size: 55px;}
    #contents .sec2 .title h2{font-size: 60px;}
    #contents .sec2 .text{font-size: 28px;}

    #contents .sec3 .background{text-align: center;}
    #contents .sec3 .title p:first-of-type{font-size: 55px;}
    #contents .title h2{font-size: 60px;}
    #contents .sec3 .title p:last-of-type{font-size: 28px;
        padding-bottom: 160px;}
    #contents .sec3 img{max-width: 1218px;}

    #contents .sec4 .description h2{font-size: 55px;}
    #contents .sec4 .description{width: 570px;}
    #contents .sec4 .description p{font-size: 28px;}

#footer .text p{font-size: 30px;}
#footer .cta{padding-top: 20px;
    font-size: 38px;}
}