@charset "utf-8";
/*   menu1   visual ======================================================================= */

#intro { width: 100%; height:100vh !important ; padding: 0 !important;}
#intro .imgWrap{}
#intro .intro{position: absolute; top: 0; left: 0; width: 100%;  background-size: cover;}
#intro .intro.active {z-index: 100}
#intro .intro1{ background: url("../img/visual1.png") no-repeat center center;}
#intro .intro2{ background: url("../img/visual2.png") no-repeat center center;}
#intro .intro3{ background: url("../img/visual3.png") no-repeat center center;}
#intro .intro4{ background: url("../img/visual4.png") no-repeat center center;}

#intro .intro > div {width: 1200px; margin: auto; }
#intro .intro  .copy {text-indent: -9999px;  }
#intro .ico_ctrl {position: absolute; height: 20px;  bottom: 100px; left: 50%;  z-index: 850}
#intro .ico_ctrl  ul {float: left;  margin:0  20px 0 0; }
#intro .ico_ctrl  ul li {float: left; width: 21px; height: 20px; margin-left: 20px; }
#intro .ico_ctrl  ul li:first-child{margin-left: 0; }
#intro .ico_ctrl  ul li a{display: block; width: 21px; height: 20px; background: url('../img/idx_off.png') no-repeat 0 0; text-indent: -9999px; }
#intro .ico_ctrl  ul li a.active{background: url('../img/idx_on.png') no-repeat 0 0;}
#intro .ico_ctrl > a.pause {display: block; float: left;  width: 17px; height: 19px;  background: url('../img/idx_pause.png') no-repeat 0 0; text-indent: -9999px; }
#intro .ico_ctrl > a.play {display: block; float: left;  display: block; width: 17px; height: 19px;  background: url('../img/idx_play.png') no-repeat 0 0; text-indent: -9999px;}
#intro .intro_btn{position: absolute; display: block; width: 33px; height: 64px; top: 50%;  margin-top: -32px; z-index: 900}
#intro .intro_btn.prev {left: 30px; }
#intro .intro_btn.next{right: 30px; }


/* menu */
#gnb_wrap {position: absolute; width: 100%; height: 59px; bottom: 0;background: url('../img/bg_nav.png') repeat-x 0; border-bottom: 1px solid #88888b; z-index:120;}
#gnb_wrap ul {width: 1200px;  margin: 0 auto; padding: 0 300px 0 0; }
#gnb_wrap ul li {float: left; width:16.6%; margin: 0; padding: 0;  text-align: center;  font-size: 28px; font-family: "Nanum700";letter-spacing: -1.5px;   }
#gnb_wrap ul li a {position: relative; display: block; height:21px; line-height: 21px; padding: 19px 0; background: url('../img/nav_border.png') no-repeat right 0;  border-bottom: 1px solid #88888b; color: #171717;}
#gnb_wrap ul li:first-child  {background: url('../img/nav_border.png') no-repeat 0 0; }
#gnb_wrap ul li a.active {background: #fff   ; color: #f58220;  border-bottom: 1px solid #fff; }
#gnb_wrap ul li a.active:after {position: absolute;content:''; width: 100%; height: 4px; top: 0; left: 0px; background: #09195d;  }
#gnb_wrap ul li.menu1 a.active:after {top: 56px }

#gnb_wrap ul li a span {display: block;  height: 21px; margin: auto; background: url('../img/gnb_menu.png') no-repeat ; text-indent: -9999px;}
#gnb_wrap ul li.menu1 a span {width:60px; background-position: 0 0; }
#gnb_wrap ul li.menu2 a span {width:80px; background-position: -75px 0; }
#gnb_wrap ul li.menu3 a span {width:104px; background-position: -181px 0; }
#gnb_wrap ul li.menu4 a span {width:80px; background-position: -314px 0; }
#gnb_wrap ul li.menu5 a span {width:79px; background-position: -411px 0; }

#gnb_wrap ul li.menu1 a.active span {width:60px; background-position: 0 -21px; }
#gnb_wrap ul li.menu2 a.active span {width:80px; background-position: -75px -21px; }
#gnb_wrap ul li.menu3 a.active span {width:104px; background-position: -181px -21px; }
#gnb_wrap ul li.menu4 a.active span {width:80px; background-position: -314px -21px; }
#gnb_wrap ul li.menu5 a.active span {width:79px; background-position: -411px -21px; }
#gnb_wrap p {position:absolute; top:0; left:50%; /* border-right:1px solid #88888b; */ font-size:0; padding-right:1px; background: url('../img/nav_border.png') no-repeat right 0; margin-left:246px;}
#gnb_wrap p1 {position:absolute; top:0; left:50%; /* border-right:1px solid #88888b; */ font-size:0; padding-right:1px; background: url('../img/nav_border.png') no-repeat right 0; margin-left:527px;}



/*   menu2   ��ġ�߱� ======================================================================= */
#menu2 {padding: 80px 0  ; }
#menu2  .inner h1 {float: left; width: 220px; margin: 0 150px  0 180px ;  }
#menu2  .inner h1 img{width: 100%; }
#menu2  .inner h1 + div {float: left;  width:530px; }
#menu2  .inner h1 + div h2 {margin: 0; font-size: 35px; color: #f58220 ; letter-spacing: -2.5px; font-weight: 600;}
#menu2  .inner h1 + div  p {line-height:32px; margin: 40px 0 0 5px; font-size: 18px; }

#menu2 .vision {width: 1200px; margin:80px auto 0;  }
#menu2 .vision li {float: left; width: 183px; margin-left: 71.25px}
#menu2 .vision li:first-child{margin-left: 0; }
#menu2 .vision li h3 {width: 183px; height: 183px; margin: 0;  background-image: url('../img/vision.png') ;  text-indent: -9999px;  overflow: hidden; }
#menu2 .vision li.vision1.active h3 {background-position:  0 0;transition: all .5s ease; }
#menu2 .vision li.vision2.active h3 {background-position:  -253px 0; transition: all .5s ease;}
#menu2 .vision li.vision3.active h3 {background-position:  -508px  0;transition: all .5s ease; }
#menu2 .vision li.vision4.active h3 {background-position:  -763px 0; transition: all .5s ease;}
#menu2 .vision li.vision5.active h3 {background-position:  -1016px 0; transition: all .5s ease;}

#menu2 .vision li.vision1 h3 {background-position:  0 -183px; transition: all .5s ease;}
#menu2 .vision li.vision2 h3 {background-position:  -253px -183px; transition: all .5s ease;}
#menu2 .vision li.vision3 h3 {background-position:  -508px  -183px; transition: all .5s ease;}
#menu2 .vision li.vision4 h3 {background-position:  -763px -183px; transition: all .5s ease;}
#menu2 .vision li.vision5 h3 {background-position:  -1016px -183px; transition: all .5s ease;}
#menu2 .vision li p {line-height: 20px; margin: 20px ; text-align: center;   font-size: 14px;}


/*  health navi */
#menu3 {padding-top: 0px; }
#menu3  .definition {margin: 0;   background: #fafafa url('../img/bg_healthnavi.png') no-repeat  center 0}
#menu3  .definition .inner {width: 1200px; margin: auto; padding: 70px 0;}
#menu3  .definition .inner  > div  h2{float: left; width: 250px; margin: 0 175px 0 320px; }
#menu3  .definition .inner  > div  h2 img {width: 100%; }
#menu3  .definition .inner  > div p{float: left; width: 450px; line-height: 36px; margin: 0; font-size: 18px; }
#menu3  .definition .inner ul {margin: 40px 0 0  265px;  padding: 0;  }
#menu3  .definition .inner ul li {position: relative; float: left; width: 270px; margin-left:62.5px;  }
#menu3  .definition .inner ul li:first-child{margin-left: 0; }
#menu3  .definition .inner ul li  span {display: block; width: 270px; height: 275px;  }
#menu3  .definition .inner ul li  p {line-height: 20px; margin: 10px 0 0 0; text-align: center; }
#menu3  .definition .inner ul li  span:before {content:''; display: block; position: absolute; width: 54px ; height: 54px; top: 50%; left: -60px; margin-top: -27px; background: url('../img/arrow.png') no-repeat 0 0; }
#menu3  .definition .inner ul li:first-child  span:before{background: none; }

#menu3 .why {position: relative; padding: 80px 0 ; background: #f1f6fc }
#menu3 .why:before {content:"" ; position: absolute; display: block;  width: 413px; height: 581px; bottom: 0; left: 0; background: url('../img/bg_why2.png') no-repeat 0 0;}
#menu3 .why:after {content:"" ; position: absolute; display: block;  width: 666px; height: 558px; top: 0; right: 0; background: url('../img/bg_why1.png') no-repeat 0 0; }
#menu3 .why .inner {position: relative; z-index: 10; }
#menu3 .why .left {float: left; width: 620px;  }
#menu3 .why .left h3 {margin: 0; font-size: 36px; font-weight: 600; letter-spacing: -2px; color: #535353;   }
#menu3 .why .left  ul {margin: 55px 0 0  0; padding: 0}
#menu3 .why .left  ul  li {margin-top: 30px; padding-top: 30px; border-top: 1px solid #fff;  }
#menu3 .why .left  ul  li:first-child{padding-top: 0; border-top: 0}
#menu3 .why .left  ul  li h4 {float: left;  width: 191px;  margin:0  40px 0 0 }
#menu3 .why .left  ul  li dl {padding-top: 10px; }
#menu3 .why .left  ul  li dl dt {margin-bottom: 25px; font-weight: 600; font-size: 24px; color: #f58220}
#menu3 .why .left  ul  li dl dd{line-height: 28px;  }
#menu3 .why .left  ul  li dl dd:before {content:"-" ; display: inline-block; margin-right: 10px; }


#menu3 .why .top .right {float: right; width: 490px;  }
#menu3 .why .top .right h3 {height: 60px; line-height: 60px;  margin: 0; background: #5da9dd; color: #fff;  text-indent: 20px; font-size: 24px;}
#menu3 .why .top .right h3:after {content:''; position: absolute; display: block; width: 157px; height: 182px;  top: -32px; right: -16px; background: url('../img/thumb1.png') no-repeat 0 0; z-index: 100}
#menu3 .why .top .right  dl {margin: 0; padding: 35px; background: #fff; }
#menu3 .why .top .right  dl dt {height: 24px; line-height: 24px;  padding: 14.5px 0; background: #fff;  border-bottom: 1px solid #dddddd;  font-size: 18px; color: #535353; }
#menu3 .why .top .right  dl dt:first-child{border-top: 1px solid #ccc; }
#menu3 .why .top .right  dl dt a {display: block; color: #535353; }
#menu3 .why .top .right  dl dt:hover a, #menu3 .why .right  dl dt:focus a {color: #252525; }
#menu3 .why .top .right  dl dt.active { background: #eef6fc;  border-bottom: 1px solid #5da9dd}
#menu3 .why .top .right  dl dt.active a { font-weight: 600;  color: #000; }
#menu3 .why .top .right  dl dt:before {content: ''; display: block;  float: left; width: 24px; height: 24px; margin:0  15px; background: url('../img/ico_q.png') no-repeat 0 0; }
#menu3 .why .top .right  dl dd {display: none; float: none ; height: 125px;  line-height: 24px; margin: 0 ;  border-bottom: 1px solid #5da9dd; letter-spacing: -1px; }
#menu3 .why .top .right  dl dd:before {content: ''; display: block;  float: left; width: 24px; height: 24px; margin: 25px  15px ; background: url('../img/ico_a.png') no-repeat 0 0;}
#menu3 .why .top .right  dl dd  p{float: left; width: 350px; margin: 0;  padding: 25px 15px  25px 0; }
#menu3 .why .top .right  dl dd.active{display: block; }

#menu3 .why .bottom { margin-top: 80px; background: #fff}
#menu3 .why .bottom .left {float: left; width: 460px; padding: 57px 0 ; background: #9daec5; text-align: center;  color: #fff;  }
#menu3 .why .bottom .left   h4 {margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -2px;}
#menu3 .why .bottom .left   p {line-height: 24px; width: 85%; margin: 30px auto 0;}
#menu3 .why .bottom .right {float: right; width: 740px; }
#menu3 .why .bottom .right  ul {margin: 0; padding: 25px;  }
#menu3 .why .bottom .right  ul li {float: left;  width: 314.5px;  height: 199px; margin-left: 30px; padding-left: 30px;  border-left: 1px solid #eee; box-sizing: border-box; }
#menu3 .why .bottom .right  ul li:first-child{padding-left:0px; margin-left: 0px; border-left: 0 none;  }
#menu3 .why .bottom .right  ul li  span {display: block ;float: left;  line-height: 199px; margin-right: 30px;   }
#menu3 .why .bottom .right  ul li   dl dt {margin: 20px 0 ;font-size: 24px; color: #000;  font-weight: 600}


/* ����ȳ� */
#menu4 {padding: 100px 0; }
#menu4  h1{margin: 0; font-size: 28px; text-align: center; font-size: 40px; letter-spacing: -2px; font-weight: 600;}
#menu4 ul {margin: 80px 0 0 0; padding: 0}
#menu4 ul li {position: relative; float: left; width: 400px; height: 180px;  box-sizing: border-box; }
#menu4 ul li.service2{padding: 20px; background: #ffe3a6}
#menu4 ul li.service4{padding: 20px; background: #f0f7e8}
#menu4 ul li.service5{padding: 20px; background: url('../img/thumb6.png') no-repeat 0 0 }
#menu4 ul li.service6{padding: 20px; background: #c7eafb}
#menu4 ul li.service8{padding: 20px; background: #fcdfeb}
#menu4 ul li.service4 dl {float: right;  text-align: right; }
#menu4 ul li.service5 p {margin-top: 90px; color: #fff; }
#menu4 ul li.service5 p strong{display: block;  font-size: 20px; font-weight: 600;}
#menu4 ul li.service6 dl {margin-top: 40px; }
#menu4 ul li.service8 dl {float: right;  margin-top: 35px; text-align: right; }
#menu4 ul li dt {margin: 0 0 12px 0; padding: 0; font-size: 20px; color: #535353;  letter-spacing: -2px;  font-weight: 600}
#menu4 ul li dd {line-height: 24px; padding: 0; margin: 0;  font-size: 16px;   }
#menu4 ul li.service2 dt:after {content:''; display: block; width: 40px; height: 4px; margin: 12px 0; background: #fdb773;}
#menu4 ul li.service4 dt:after {content:''; display: block; width: 40px; height: 4px; margin: 12px 0 12px 220px; background: #c2e39c;}
#menu4 ul li.service6 dt:after {content:''; display: block; width: 40px; height: 4px; margin: 12px 0; background: #90d0ef;}
#menu4 ul li.service8 dt:after {content:''; display: block; width: 40px; height: 4px; margin: 12px 0 12px 260px; background: #fa98c1;}


/*  �ʺ극�� */
#menu5 {padding: 100px 0; background: #fafafa url('../img/bg_menu5.png') no-repeat 0 bottom}
#menu5 h1 {width: 1200px; margin: 0 auto; }
#menu5 h1 img {width: 20%; }
#menu5  .inner > img {position: absolute; top: -60px; right: 0; }
#menu5  .inner h2 { margin: 30px 0 0 0; font-size: 40px; font-weight: 600;  letter-spacing: -2px; }
#menu5 .inner h2 strong {color: #5da9dd; letter-spacing: -1.2px; }
#menu5 .inner  p {line-height: 24px; margin: 20px 0 0 0; }
#menu5 .inner .tblWrap {width: 60%; margin-top: 40px; padding: 10px 20px; border-top: 2px solid #f58220; border-bottom: 1px solid #f58220}
#menu5 .inner .tblWrap  table td, #menu5 .inner .tblWrap table th {line-height: 24px; padding: 10px 20px; text-align: left;  border-top: 1px solid #dedede; }
#menu5 .inner .tblWrap  table .first {border-top: 0 none; }
#menu5 .inner .tblWrap  table td p {margin: 0; }
#menu5 .inner .tblWrap  table  th {font-weight: 600;vertical-align: top; }


footer {height: 90px; line-height: 90px; background: #8f8f8f}
footer .inner {width: 1200px; margin: auto; }
footer .inner  p {margin:0;text-align: center; color: #c8c8c8; font-size: 12px; }
footer .inner  p img {margin-right:  60px; vertical-align: middle; }