@charset "UTF-8";
#container {background: #f2f2f2;}

.sub_header { position: absolute; width: 100%; height: 60px; border-bottom: 1px solid rgba(255,255,255,0.7); z-index: 5; }
.sub_header_in { text-align: center; }
.sub_header ul { display: inline-block; overflow: hidden; }
.sub_header li { float: left; margin:0 20px }
.sub_header a { display: inline-block; line-height: 60px; color: #fff; letter-spacing: -1px;}

.sub_header li.active:after { display: block; content: ""; width: 100%; height: 4px; background: var(--green); position: relative; bottom: 4px; }
.sub_header li.active a { color: var(--green); font-weight: 500; }



.sub_visual { position: relative; height: 380px; text-align: center; color: #fff; overflow: hidden;}
.sub_visual h2 { font-size: 70px; background: none; padding:95px 0 0;
  animation: toUp 600ms ease-in;  }
.sub_visual p { line-height: 1.6; animation: toUp 1000ms ease-in 200ms forwards; opacity: 0; }

.morning { background:#F2B701 url('../img/bg_visual_morning.png') 50% no-repeat;  }

.morning .img1 { position: absolute; left:50%; margin-left: 360px; top:0;
  width: 508px; height: 549px; background: url('../img/img_visual_morning01.jpg'); animation: toDown 500ms ease-in; }
.morning .img2 { position: absolute; left:50%; margin-left: -660px; top:0;
  width: 327px; height: 215px; background: url('../img/img_visual_morning02.jpg'); animation: toLeft 1000ms ease-in; }


@keyframes toUp {
  0% { transform: translateY(200px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes toDown {
  0% { transform: translateY(-200px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes toLeft {
  0% { transform: translateX(100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.product {width: 1170px; margin: auto; height: 80px; position: relative; top: -40px }

.pd_tab {background: #fff; text-align: center;}
.pd_tab ul {display: inline-block;}
.pd_tab li {float: left; margin right:20px;}
.pd_tab li::before {display: inline-block; content: ""; width: 1px; 
  height: 14px; background: #bbb; margin-right: 25px;}

.pd_tab a { display: inline-block;  line-height: 80px; color:var(--gray1); font-weight: 500;}
.pd_tab li.active a {color:var(--green); font-weight: 500;}


.pd_list {padding: 50px 0;}
.pd_list ul {overflow: hidden;}
.pd_list li {position: relative; float: left;  width: 370px; background: #fff; margin: 0 30px 30px 0;}
.pd_list li:nth-child(3) {margin-right: 0;}
.pd_list a {padding: 50px 0;}

.pd_list figure { width: 270px; margin: 20px auto 0 }
.pd_list figure img {width: 100%; width: 100%;}
.pd_list .title {position: relative;  top:0; display: block; font-size: 22px; font-weight: 600; margin-bottom: 10px; z-index: 5;}
.pd_list .eng {position: relative; top:0; z-index: 5;}

.pd_list .summary {position: relative; top:0; z-index: 5; color: #c5e698;}
.pd_list .summary p {line-height: 18;}
.pd_list .viewBtn {position: absolute; content: "" ; width: 100%; height: 100%; background: pink; z-index: 6;}

/*마우스를 올려놨을때 */
.pd_list li::after { position: absolute; content: ""; top: 0; left:0;
width: 100%; height: 100%; background: var(--green);}
.pd_list li:hover .title { color: #fff; top:-150px; transition: 0.4s;}
.pd_list li:hover .eng { color: #fff; top:-142px; transition: 0.4s;}
.pd_list li:hover .summary { color: #fff; top:-142px; transition: 0.4s 0.3s;}
.pd_list li:hover .viewBtn { color: #fff; top:-142px; transition: 0.4s 0.3s;}


.pd_list .summary { top:-135px}