@charset "utf-8";
@import url(reset.css);
@import url(motion.css);
@import url(header.css);
@import url(footer.css);
@import url(contents.css?ver20240118);

html, body{width: 100%; height:100%;}
#wrap{width: 100%; height:100%;}

/* sub(common) */

#wrap .sub_vis{width: 100%;height:340px;margin-top:0px;background: #eee;}
#wrap .sub_vis h3{font-size: 40px;color: #fff;font-weight:600; text-align: center; padding-top:190px;}
#wrap .sub_vis#sub1{background: url(../img/p_img/sub_vis1.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub2{background: url(../img/p_img/sub_vis2.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub3{background: url(../img/p_img/sub_vis3.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub4{background: url(../img/p_img/sub_vis4.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub5{background: url(../img/p_img/sub_vis5.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub6{background: url(../img/p_img/sub_vis6.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub7{background: url(../img/p_img/sub_vis7.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}


#wrap .sub_nav.pc{display: block;width: 100%;height:56px;background: #be1e2d;  overflow-x: hidden;}
#wrap .sub_nav.pc ul{width: 1199px;margin: 0 auto;border-left: 1px solid #df4f5c;}
#wrap .sub_nav.pc ul:after{display: block;content: '';clear: both;}
#wrap .sub_nav.pc ul li{float: left;}
#wrap .sub_nav.pc ul li a{display: block;width: 100%;height:56px;line-height:56px;text-align: center;color: #fff;border-right: 1px solid #df4f5c;font-size: 18px;font-weight: normal;letter-spacing: -0.5px;}
#wrap .sub_nav.pc ul li.on a{background: #fff;color: #be1e2d;}

#wrap .sub_nav.pc ul li.double a{padding-top: 9px;height: 56px;line-height: 1.3;}
#wrap .sub_nav.s1 ul li{width: 100%;}

#wrap .sub_nav.s2 ul li{width: 49.999%;}
#wrap .sub_nav.s3 ul li{width: 33.33333333333333%;}
#wrap .sub_nav.s4 ul li{width: 25%;}
#wrap .sub_nav.s5 ul li{width: 20%;}
#wrap .sub_nav.s6 ul li{width: 16.66666666666667%;}

#wrap .sub_nav.mobile{display: none;position: relative;width: 100%;z-index: 1000;}
#wrap .sub_nav.mobile a.selected{position: relative;display: block;width: 100%;height: 60px;border-bottom: 1px solid #ccc;}
#wrap .sub_nav.mobile a.selected span.txt{display: block;width: 100%;height: 60px;line-height: 60px;font-size: 20px;font-weight: 500;text-align: center;color: #090909;}
#wrap .sub_nav.mobile a.selected span.arrow{position: absolute;top: 15px;right: 15px;display: block; width:30px;height: 30px;background: url(../img/s_img/sub_nav_m_arrow.png) no-repeat center center;-webkit-background-size: 100%; background-size: 100%;}
#wrap .sub_nav.mobile a.selected.on span.arrow{background: url(../img/s_img/sub_nav_m_arrow_on.png) no-repeat center center;-webkit-background-size: 100%;background-size: 100%;}
#wrap .sub_nav.mobile ul{display: none;position: absolute;top: 60px;left: 0;width: 100%;background: #be1e2d;padding: 30px 0;}
#wrap .sub_nav.mobile ul li a{display: block;width: 100%;font-size: 20px;color: #fff;text-align: center;height: 40px;line-height: 40px;}
#wrap .sub_nav.mobile ul li:hover{background: #981b27;}

#wrap #content{width: 100%;}
#wrap #content .container{width:1200px; margin: 0 auto;padding:80px 0;}
#wrap #content h4{ position : relative; padding:130px 0 50px 0;font-size: 35px;color: #090909;text-align: center; font-weight:500;margin-bottom:60px; line-height:1;  }
#wrap #content h4:before{content : ''; display : inline-block; position : absolute; width: 50px; height: 1px; background: #be1e2d; top: 110px; left: 50%; transform: translateX(-50%);}
/* #wrap #content h4{padding:0 0 50px 0;font-size: 27px;color: #090909;text-align: center; background:url(../img/s_img/h4_bar.gif) no-repeat center bottom;  font-weight:500;margin-bottom:60px; line-height:1;  } */
#wrap #content h4 span{padding:10px 20px;  margin:0 auto; text-align:center; font-family:'NotoSerifKr-SemiBold', serif;}
#wrap #content p.h4_txt{font-size:25px; line-height:35px; padding-bottom:40px; letter-spacing:-0.03em; font-weight:300; text-align:center;}
#wrap #content p.h4_txt strong{font-weight:600;}
/* #wrap #content h5{font-size:25px; font-weight:500; line-height:1.5; margin:60px auto; text-align: center;} */
/* #wrap #content h5.fir{font-size:25px; font-weight:500; line-height:1.5; margin:0px auto 60px auto; text-align: center;} */

#wrap #content p.h4_txt span.pc_cut{display:block;}






/* 01 건강한 이야기  */

.section#section1{clear:both; margin:0px 0; padding:0; background:#fff;}
.section#section1 .container{width:100%; height:100%;  margin:0 auto;  padding:100px 0;}
.section#section1 h3{ font-family: "NotoSerifKr-Medium"; padding:20px 0 20px 0;text-align: center;font-size: 30px;color: #111;font-weight:500; letter-spacing:-0.03em; background:url(../img/s_img/title_blueline.gif) no-repeat center 0;}
.section#section1 p.tit{font-family: "NotoSerifKr-Regular"; font-size:16px; font-weight:300; line-height:1.5; color:#111; text-align: center;}
.section#section1 p.tit span.pc_cut{display:block;}
.section#section1 p.tit strong{font-family: "NotoSerifKr-Medium"; }


.section#section1 .about_box { position:relative; z-index:10; width:1200px; height:240px; margin:40px auto 0 auto !important;  background:none;}
.section#section1 .area {position:absolute; top:0px; left:0px; position:relative; overflow:hidden; width:1200px; height:300px; margin:0 auto; }

.section#section1 .icon_bar ul { width:100%; margin:0;padding:0 5%;}
.section#section1 .icon_bar ul:after{display: block;content: '';clear: both;}
.section#section1 .icon_bar ul li {position:relative; margin:30px 0 0px 0; width:25%; text-align:center !important; float:left; font-size:14px; text-align:center !important; letter-spacing:-1px; }
.section#section1 .icon_bar ul li:after{display: block;content: '';clear: both;}

.section#section1 .icon_bar ul li.last{border-right:0;}
.section#section1 .icon_bar ul li a {display:block; padding:0px 0 0 0;  text-align:center; line-height:1.5; font-weight:600; color:#333; letter-spacing:-0.05em; word-break:keep-all; transition:transform 600ms ease-in-out 0s; }
.section#section1 .icon_bar ul li a img{text-align:center;}
.section#section1 .icon_bar ul li a span{font-size:13px; }
.section#section1 .icon_bar ul li a:hover { color:#2c79bd; text-decoration:none;}
.section#section1 .icon_bar ul li em{margin:0 auto; width:100%; display:block; font-size:18px; padding-bottom:10px; text-align:center;}
.section#section1 .icon_bar ul li a span.more_btn {display:block; width:46px; height:46px; margin:0 auto; margin-top:-27px; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
.section#section1 .icon_bar ul li a:hover span.more_btn,#section1 .icon_bar ul li.area01 a:focus span.more_btn {background:url("../img/s_img/btn_icon_more.png") no-repeat scroll 50% bottom; transform: rotate(360deg); font-weight:bold;}
.section#section1 .icon_bar ul li a span.img_area {width:100%; max-width:150px;  margin:0 auto;padding-top:15px; overflow:hidden; transition:margin 0.35s ease-in-out; text-align:center;}
.section#section1 .icon_bar ul li a span.img_area img {width:100%; max-width:130px; margin:0 auto; transition: 0.35s ease-in-out; text-align:center;}
.section#section1 .icon_bar ul li a:hover span.img_area img { margin-top:0px; }
.section#section1 .icon_bar ul li em.txt{margin:10px auto; text-align:center; font-weight:500; color:#333; line-height:1.5;}
.section#section1 .icon_bar ul li em.txt a{font-size:16px; }
.section#section1 .icon_bar .pc_icon_area{display : block;}
.section#section1 .icon_bar .mobile_icon_area{display : none;}


/*02 제품소개 3개 */


.section#section2{clear:both; margin:0px auto; padding:0px 0; background:#d9cec6 url(../img/s_img/product_3_bg.jpg) no-repeat center 0;}
.section#section2 .container{padding:100px 0 !important;  }
.section#section2 #product_3{width:1200px; height:480px; margin:0px auto 0 auto; position:relative; padding:0px 0;}
.section#section2 #product_3 ul{width:1200px; margin:0 auto 0 auto;}
.section#section2 #product_3 ul:after{display: block;content: '';clear: both;}

.section#section2 #product_3 ul.prd01 li{position: relative;float: left;width:33.3333%; height:480px;overflow: hidden;margin:0; padding:0; vertical-align:top;  transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s;}
.section#section2 #product_3 ul.prd01 li.b1{background: url(../img/s_img/product_bg01.jpg) no-repeat 0 0;}
.section#section2 #product_3 ul.prd01 li.b2{background: url(../img/s_img/product_bg02.jpg) no-repeat 0 0;}
.section#section2 #product_3 ul.prd01 li.b3{background: url(../img/s_img/product_bg03.jpg) no-repeat 0 0;}
.section#section2 #product_3 ul.prd01 li dl{text-align:center;}
.section#section2 #product_3 ul.prd01 li dl dt{padding-top:220px;font-size:20px; font-weight:400; text-align:center; color:#fff;}
.section#section2 #product_3 ul.prd01 li dl dt strong{font-weight:600;}
.section#section2 #product_3 ul.prd01 li dl dd.btn{width:130px; height:36px; margin:100px auto 0 auto; border:2px solid #fff; text-align:center; padding:0;}
.section#section2 #product_3 ul.prd01 li dl dd.btn a{color:#fff;  font-size:16px;line-height:32px;z-index:3; position:relative; display: inline-block;  margin-left:0px; width:100%; }
.section#section2 #product_3 ul.prd01 li dl dd.btn a:after {position:absolute;content:'';width:100%;height:0%;top:0;right:0;  z-index:-3;background: #fff;border-radius:0px; transition: all 0.7s ease;}
.section#section2 #product_3 ul.prd01 li dl dd.btn a:hover {color:#111}
.section#section2 #product_3 ul.prd01 li dl dd.btn a:hover:after{top:0;height:100%}
.section#section2 #product_3 ul.prd01 li dl dd.btn a:active {top:2px}







/*03 홍보관 제품4개 */

.section#product_4{clear:both; position:relative;width:100%; height:auto; margin:0 auto;  background:#fff;}
.section#product_4 h3{ font-family: "NotoSerifKr-Medium"; padding:20px 0 20px 0;text-align: center;font-size: 30px;color: #111;font-weight:500; letter-spacing:-0.03em; background:url(../img/s_img/title_blueline.gif) no-repeat center 0;}
.section#product_4 p.tit{font-family: "NotoSerifKr-Regular"; font-size:16px; font-weight:300; line-height:1.5; color:#111; text-align: center;}
.section#product_4 p.tit span.pc_cut{display:block;}



.section#product_4 .container{width:1200px; margin:0 auto;padding:110px 0 200px 0 !important;}
.section#product_4 ul.main_quick{width:100%; margin:80px auto 0 auto;}
.section#product_4 ul.main_quick:after{display: block; content: ''; clear: both;}
.section#product_4 ul.main_quick li{float: left;width:24.16666666667%; min-height:260px; background:#fff; margin:0 1.111111% 0 0; }
.section#product_4 ul.main_quick li.last{margin-right: 0;}
.section#product_4 ul.main_quick li a{position: relative;display:block; border:0px solid #acacac;width:100%; height:200px;}
.section#product_4 ul.main_quick li a span.img_box{position: relative;display: block;width:100%;height:auto;overflow: hidden;}
.section#product_4 ul.main_quick li a span.img_box img{width:100%; max-width:290px;transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s;}
.section#product_4 ul.main_quick li a span.tit{position: absolute;bottom:0px;left: 0px;background: url(../img/s_img/bg_main_quick.png) repeat;display: block; width:100%; max-width: 290px;text-indent: 30px;height: 60px;line-height: 60px;font-size: 20px;color: #fff;font-weight: 500;text-align: left;transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s;}
.section#product_4 ul.main_quick li a span.plus{position: absolute;bottom: 0;right: 30px;display: block;text-align: right;width: 100%;height: 60px;line-height: 60px;font-size: 20px;color: #fff;font-weight: 500;transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s;}
.section#product_4 ul.main_quick li a span.border{position: absolute;top:0px;left: 0px;display: block;border: 15px solid #be1e2d;width: 100%;height: 100%;display: none;background: url(../img/s_img/main_quick_border_bg.png) repeat;transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s;}
.section#product_4 ul.main_quick li a span.view{position: absolute;top:45px;left: 0;display: block;width: 100%;height: 80px;color: #fff;font-size: 20px;text-align: center;display: none;background: url(../img/s_img/icon_main_quick_plus.png) no-repeat center 100%;transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s;}

.section#product_4 ul.main_quick li a:hover span.img_box img{width: 100%; max-width:290px; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s;}

.section#product_4 ul.main_quick li a:hover span.tit{display: none;transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s;}
.section#product_4 ul.main_quick li a:hover span.plus{display: none;transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s;}
.section#product_4 ul.main_quick li a:hover span.border{display: block;transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s;}
.section#product_4 ul.main_quick li a:hover span.view{display: block;transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s;}
.section#product_4 ul.main_quick li span.bott_txt{display:inline-block; width:100%;max-width:290px;  background:#be1e2d;padding:0px 10px 0px 10px; font-size:15px; font-weight:400; line-height:60px; color:#fff; letter-spacing:-0.05em; text-align:center;}