@charset "utf-8";
#counter1,#counter2,.countCover span { font-size:2em;color:#2560b5;font-weight:bold;}
#counter1.Ecounter1, #counter2.Ecounter2, .countCover.EcountCover span{font-size:1.8em;}
.countCover p, .countCover span{float:left;}
.countCover{width:fit-content;margin:0 auto;}
.countCover span{font-size:2em;}

.curveCover svg:nth-child(1) .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {stroke-dashoffset : 1000px;}
  to {
    stroke-dashoffset: 0;
  }
}

.curveCover2{width:100%;}


.curveCover{position:relative;}
.curveCover svg:nth-child(2){position:absolute;top:0;left:0;}
.curveCover svg:nth-child(2) .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash2 5s linear forwards;
}

@keyframes dash2 {
  from {stroke-dashoffset : 1000px;}
  to {
    stroke-dashoffset: 0;
  }
}

svg{width:100%;height:100%;}
.curveCover{max-height:300px;width:100%;}


#nashTitBg{
    background-image: url(http://glaceum.com/bizdemo122944/img/glaceum/img/common/scienceTit1.png);
      background-repeat: no-repeat;
      background-position: top center;
      background-size: auto 100%;
    }
.spacer-nash .container{width:95%;}
.spacer-nash .container>div{margin-top:80px;}

.nashSource{color:#2560b5;font-size: 20px;letter-spacing: -0.5px;line-height: 25px;}
.nashSource span{font-size:0.7em;}

.misTit1{font-size: 2em;}
.misTit2{padding-bottom: 30px;font-size: 2em;}
  .misTit1::after{
    display: block;
    content: '';width:50px;height: 3px;background-color: #2560b5;
    margin: 0 auto;margin-top:10px;

  }

  .misTit2::after{
    display: block;
    content: '';width:50px;height: 4px;background-color: #dd5858;
    margin: 0 auto;margin-top:10px;
  }


.ageCover{background-color: #f0f6ff;padding:25px 0 15px 0;margin:30px 0 10px 0;border-radius: 50px;}

.ageCover ul{width: 50%;margin:0 auto;}
.ageCover ul li{float:left;width:50%;position: relative;}
.ageCover ul li img{width: 70%; height: auto;}
.ageCover ul::after{content: '';display: block;clear: both;}

.ageCover ul li:nth-child(1)::after{content: '과체중';}
.ageCover ul li:nth-child(2)::after{content: '비만';}

.ageCover.EageCover ul li:nth-child(1)::after{content: 'Over \A weight';white-space:pre;line-height: 1.1em;}
.ageCover.EageCover ul li:nth-child(2)::after{content: 'Obese';}


.ageCover ul li:nth-child(1)::after,.ageCover ul li:nth-child(2)::after{color:#fff;font-size: 1.3em;letter-spacing: -0.5px;font-weight: bold;position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.ageCover.EageCover ul li:nth-child(1)::after,.ageCover.EageCover ul li:nth-child(2)::after{font-size:1em;}

.nashCover{
  background-color: #fff1f1;border-radius: 100px;padding: 60px 0 0;
}

.nashH3b{
  font-size: 23px;
color: #fff;font-weight: bold;
padding: 5px 10px;
background-color: #3a72cc;display: inline-block;margin: 0 0 30px 0;

}
.nashH3p{
  font-size: 23px;
color: #fff;font-weight: bold;
padding: 5px 10px;
background-color: #ce3838;display: inline-block;margin: 0 0 30px 0;

}
.curveAni{
  background-image: url(http://glaceum.com/bizdemo122944/img/glaceum/img/science/curveBg.png),
  url(http://glaceum.com/bizdemo122944/img/glaceum/img/science/curvepoint1.png);
  background-repeat: no-repeat;
  background-position: left bottom, 25% 15%;
  background-size: 100% auto, auto 50% ;
  margin-left:auto;
}

.curveCover,.hsgCover{margin:100px 0;}
.kcal{position: absolute;top: 25%;right: 15%;
    animation-name: kcal;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    opacity: 1;
    width: 13%;
            }
.kcalTxt1{text-align: left;}
.kcalTxt1,.kcalTxt2{padding:30px 0;font-size: 1.2em;}
.kcalTxt2{padding-left: 30px;}


            @keyframes kcal{
                0%{}
                15%{
                    opacity: 0.5;
                }
                30%{opacity: 1;
                    }
                45%{opacity: 0.8;
                    }
                60%{opacity: 1;
                }
                75%{opacity: 0.7;
                }
                100%{opacity: 1;
    }
            }
.nash3,.nash4{display:block;}
.nash3-2,.nash4-2{display:none;}
.nashCover img{margin:0 auto;}

  @media(max-width:1300px) {
  .kcalTxt1,.kcalTxt2{font-size: 1em;}
  .curveAni{width:500px;}
  .spacer-nash>.container{max-width: 98%;margin:0 auto;}
              }

  @media (max-width:991px){
    #parkTitBg{
    background-image: url(http://glaceum.com/bizdemo122944/img/glaceum/img/common/scienceTit2.png);}
    .curveCover{max-height: 600px;height: 100%;}

    .ageCover ul li:nth-child(1)::after,.ageCover ul li:nth-child(2)::after{font-size: 1em;}

.spacer-nash .container>div{margin-top:50px;}

    .curveCover, .hsgCover{margin:50px 0;}



  .spacer-nash .container{width:100%;}
  .kcalTxt2{padding-left: 15px;padding-right: 15px;}

  .curveAni{margin:0 auto;max-width:800px;width:100%;}

  .curveAni{
    background-image: url(http://glaceum.com/bizdemo122944/img/glaceum/img/science/curveBg2.png),
    url(http://glaceum.com/bizdemo122944/img/glaceum/img/science/curvepoint1.png);
}

.nashCover img{width:85%;}

.ageCover ul li img{width:90%;}
#counter1, #counter2, .countCover span{font-size:1.5em;}

#counter1.Ecounter1, #counter2.Ecounter2, .countCover.EcountCover span{font-size:1.2em;}
.ageCover.EageCover ul li:nth-child(1)::after,.ageCover.EageCover ul li:nth-child(2)::after{font-size:0.8em;}

              }

  @media (max-width:600px) {
    .nashCover{border-radius: 50px;padding-top:0;}

    .nash3,.nash4{display:none;}
    .nash3-2,.nash4-2{display:block;}
    .nashCover img{width:95%;}
    .misTit1, .misTit2{font-size: 1.4em;}

    .ageCover ul li:nth-child(1)::after,.ageCover ul li:nth-child(2)::after{font-size: 13px;}

    #counter1, #counter2, .countCover span{font-size: 1em;}
    .ageCover.EageCover ul li:nth-child(1)::after,.ageCover.EageCover ul li:nth-child(2)::after{font-size:0.7em;font-weight: 400;}

  }
  @media (max-width:500px) {
  .kcalTxt1,.kcalTxt2{font-size:13px;}
  .ageCover ul{width:220px;}
  .ageCover ul li{width:100px;margin-left:20px;}
  .ageCover ul li:nth-child(1){margin-left:0;}
  .ageCover ul li img{width:100%;}
  #counter1, #counter2, .countCover span{font-size:1.2em;}
  #counter1.Ecounter1, #counter2.Ecounter2, .countCover.EcountCover span{font-size:0.9em;}
  .nashSource{color:#2560b5;font-size: 14px;line-height: 15px;}
  }