#wrap{width:100%; height:100%;  position:relative; margin:0 auto;}
.layFull{position:relative; width:100%; margin:0 auto;}
.layGrid{position:relative; width:1300px; margin:0 auto;}

.flexBox {
    display: flex;
    flex-wrap: wrap;
}
.flexBox .flexItem {
    box-sizing: border-box;
    position: relative;
  }
.flexItem12 {
    width: 100%;
  }
  .flexItem10 {
    width: 83.33333333%;
  }
  .flexItem9 {
    width: 75%;
  }
  .flexItem8 {
    width: 66.66666667%;
  }
  .flexItem7 {
    width: 95%;
  }
  .flexItem6 {
    width: 50%;
  }
  .flexItem5 {
    width: 41.66666667%;
  }
  .flexItem4 {
    width: 33.33333333%;
  }
  .flexItem3 {
    width: 0%;
  }
  .flexItem2 {
    width: 16.66666667%;
  }

/*header*/
#header{position:fixed; background:rgba(255,255,255,1); z-index: 1000; padding: 18px 0;}
#header .language{padding-right: 30px; position: absolute; right: 0;}
#header .language li{float: right; padding-top: 15px;}
#header .language li a{font-size:14px; font-weight: 400; line-height: 1; padding-left:10px; color: #555; display: block;}
#header .mlogo{display:none;}
#header #navi{display: flex; justify-content: center;}
#header #navi > li{float: left; padding:10px 30px 0; position: relative; right: 65px;}
#header #navi > li > a{color: #333333;  font-size: 17px; font-weight: 500; line-height: 1; box-sizing: border-box;}
#header.f-nav{background:rgba(256,256,256,1); box-sizing: border-box;}
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.8s;}
#header.f-nav .sub li{background-color:rgba(247,247,247,1);}

/*sub menu*/
#header .sub{display:none; position:absolute; top:63px; left:50%; margin-left:-80px; text-align:center; z-index:99;}
#header .sub li{background-color:rgba(256,256,256,0.75); width:160px; box-sizing: border-box;}
#header .sub li a{color: #454545; font-weight: 400; font-size: 15px; line-height: 1.3; box-sizing: border-box; display: block; padding:10px;}
#header .sub li a:hover{background-color:rgba(241,89,41,0.9); color: #fff; transition:background 0.2s;}
#header .sub li.on a{color:#fff;}

/*mobile menu*/
.mobile-menu {display: none; position: fixed; top: 15px; right: 15px; z-index: 1200; width: 45px; height: 45px; padding: 5px; background-color: inherit; border: 0;}
.mobile-menu i {font-size: 2em;}
.menuwrap {position: fixed; top: 0; left: -80%; /* 너비 300px 인 사이드바를 왼쪽으로 300px 이동시켜 화면에 보이지 않게 함 */ z-index: 1200; overflow: auto; width: 80%; /* 너비 */ height: 100%; padding: 20px 0; box-sizing: border-box; transition: left .3s ease-in-out; /* 0.3초 동안 이동 애니메이션 */ background-color: #fff;}
.menuwrap.on {left: 0;}
#dimmed { position: fixed; top: 0; left: 0; z-index: 1100; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);}
#menu{position: relative; width:100%;} 
#menu > ul > li {border-bottom: 1px solid #dcdcdc;} 
#menu > ul > li > a{display:block; padding: 14px 35px 14px 15px; box-sizing: border-box; color:#333; font-weight: 400; font-size: 16px; background: url()no-repeat 95% 15px;} 
#menu > ul > li a:hover {color: #000;} 
#menu > ul > li.aa > a {color: #000; background: #e4e4e4 url()no-repeat 95% 14px;} 
#menu > ul > li ul {display: none;} 
/*#menu > ul > li > ul > li{border-bottom: 1px solid #f5f5f5;}*/
#menu > ul > li > ul > li > a {display: block; padding:10px 30px; box-sizing: border-box; color: #333; font-size:16px; background:#f0f0f0 url() no-repeat 95% 1px;}
#menu > ul li.noDepth a {background-image: none !important; }

/*section*/
#section{position:relative;}
.main_title{font-size: 35px; font-weight: 600; color:#282828; position: relative; margin-bottom: 20px;}
.main_title::before{position:relative; top:-10px; margin: auto; width: 61px; height: 14px; background: url(/img/before.png)no-repeat 0 0; display: block; content:'';}
.main_title_w{color:#fff;}
.main_title_w::before{background: url(/img/before_w.png)no-repeat 0 0; }

/*****************************************************************************/

/*mainimg*/
.mainimg{width: 100%; height: 250px; padding-top: 80px; position: relative; background-color: pink;}
.sub1.mainimg{background: url(/img/sub1/sub1_img.jpg)no-repeat center center; background-size: cover;}
.sub2.mainimg{background: url(/img/sub2/sub2_img.jpg)no-repeat center center;}
.sub3.mainimg{background: url(/img/sub3/sub3_img.jpg)no-repeat center center;}
.sub4.mainimg{background: url(/img/sub4/sub4_img.jpg)no-repeat center center;}
.sub5.mainimg{background: url(/img/sub5/sub5_img.jpg)no-repeat center center;}
.sub6.mainimg{background: url(/img/sub6_img.jpg)no-repeat center center;}
.sub_tle{text-align: left; color: #fff; font-size: 45px; font-weight: 500; margin: 0 auto; position: absolute; bottom: 70px; left: 190px;}

/*tabmenu*/
.tabmenu{background-color: #fff; position: absolute; top: 270px; padding-left: 180px; box-sizing: border-box;}
.tabmenu .tab > li{float: left; text-align: left; min-width: 150px; padding:0 40px 0 15px; box-sizing:border-box; margin: 20px 0; border-right:1px solid #c8c8c8; display: table; position: relative; cursor: pointer;}
.tabmenu .tab > li::before{position: absolute; top:36.5%; right:10px; display: block; content: ''; width: 16px; height: 16px; background: url(/img/sub1/down_btn.png)no-repeat center center;}
.tabmenu .tab > li > a{display: table-cell; vertical-align:middle; color: #646363; font-weight: 400;}
.tabmenu .tab > li:first-child{padding:5px 15px; min-width: initial;}
.tabmenu .tab > li:first-child::before{display: none;}
.tabmenu .tab > li:first-child img{display: table-cell; vertical-align:middle;}
.tabmenu .tab > li:last-child{border: none;}
.tabmenu .tab > li:last-child>a{color: #000; font-weight: 500;}
.tabmenu .sub_depth{display: none; width: 100%; position: absolute; top: 43px; left: 0; z-index: 100;}
.tabmenu .sub_depth1{width: 225px;}
.tabmenu .sub_depth li a{display: block; color: #fff; font-size: 15px; font-weight: 400; padding:5% 10%; box-sizing: border-box; background: rgba(241,89,41,0.8);}
.tabmenu .sub_depth li a:hover{background-color: #f15d2e;}

.tabmenu .tab > li.tab1{width: 225px; padding:0 0 0 15px;}

/*product*/
.p_tle{font-size: 30px; color: #282828; font-weight: 600; position: relative; padding: 30px 0 20px 30px;}
.p_tle span{font-size: 20px; color: #454545; font-weight: 400;}
.p_tle::before{position: absolute; top: 46px; left: 0; display: block; content: ''; width: 17px; height: 17px; background: url(/img/sub1/bluewon.png)no-repeat center center;}

.probox1 .fl{width: 30%;}
.probox1 .fl img{width: 100%; max-width:354px;}
.probox1 .fr{width: 70%; padding-left: 8%; box-sizing:border-box;}
.probox1 .fr img{width: 100%; max-width:442px;}
.basic_infor{width: 100%; border-top:2px solid #dbdbdb;}
.basic_infor tr{border-bottom:1px solid #dbdbdb;}
.basic_infor tr:last-child{border-bottom:2px solid #dbdbdb;}
.basic_infor tr td{padding: 2% 4%; box-sizing:border-box; font-size: 18px; color: #454545;}
.basic_infor tr td:first-child{border-right:1px solid #dbdbdb; text-align: center; font-weight: 400;}
.basic_infor_p{color:#444; line-height: 1.3; word-break: keep-all;}
.basic_infor_p span{font-size:18px; font-weight: 500; display:block; padding-bottom: 5px; margin-top: 15px;}
.mark{margin-top: 35px;}

.ingredient{width: 100%; border-top:2px solid #9e9e9e;}
.ingredient tr{border-bottom:1px solid #dbdbdb;}
.ingredient tr:last-child{border-bottom:2px solid #9e9e9e;}
.ingredient tr td{padding: 2% 0%; box-sizing:border-box; font-size: 18px; color: #454545; word-break: keep-all;}
.ingredient tr td:first-child{padding:2% 2% 2% 6%; font-weight: 500; color: #444; font-size: 22px; position: relative;}
.ingredient tr td:first-child::before{position: absolute; top: 39px; left: 45px; display: block; content: ''; background:#444444; width:6px; height:6px; border-radius: 3px;}
.ingredient tr .yongdo:before{position: absolute; top: 62px !important; left: 45px; display: block; content: ''; background:#444444; width:6px; height:6px; border-radius: 3px;}
.ingredient tr .yongdo_2:before{position: absolute; top: 50px !important; left: 45px; display: block; content: ''; background:#444444; width:6px; height:6px; border-radius: 3px;}
.ingredient tr .tp:first-child::before{position: absolute; top: 50px; left: 45px; display: block; content: ''; background:#444444; width:6px; height:6px; border-radius: 3px;}

.exm{width: 100%; border-top:2px solid #9e9e9e; padding: 20px 0 60px;}
.exm > .fl{width: 50%;}
.exm > .fr{width: 50%;} 
.exm > .fr img{width: 100%; max-width:472px;}
.exm .exm_in{width: 100%; margin-top: 85px;}
.exm .exm_in li{width: 100%; padding: 2.5% 12%; box-sizing: border-box; display: table;}
.exm .exm_in li .fl{width: 35%; display: table-cell; vertical-align: top; float: none !important}
.exm .exm_in li .fr{width: 65%; display: table-cell; vertical-align: middle; height: 120px; float: none !important}
.exm .exm_in li .fl img{/* display: table-cell; */ vertical-align: middle;}
.exm .exm_in li .fr p{/* display: table-cell;  */vertical-align: middle; color: #444; font-weight: 400; font-size:20px;}
.exm .exm_in li .fr p span{color:#888; font-size: 16px; line-height: 1.4; display: block; text-indent: -10px; word-break: keep-all;}
p.remark{text-align: center; width: 80%; margin: auto; font-size: 18px; color: #444; background:#f5f5f5; padding: 1.5% 2%; border-radius: 100px;}
p.remark span{font-weight: 400;}

.warning{width: 100%; border-top:2px solid #9e9e9e; padding: 20px 0 60px;}
.warning li{padding-bottom: 25px;}
.warning li p{font-size: 15px; line-height: 1.7;}
.warning li p.warn_tle{font-weight: 500; }

/*sub 공통 */
.s-visual {
    text-align: center;
    height: 330px;
    position: relative;
    padding-top: 80px;
  }
  #s-visual01 {
    background: url(/img/company_visual.jpg) no-repeat center center;
    background-size: cover;
  }
  #s-visual02 {
    background: url(/img/product_visual.png) no-repeat center center;
    background-size: cover;
  }
  #s-visual03 {
    background: url(/img/rnd_visual.jpg) no-repeat center center;
    background-size: cover;
  }
  #s-visual04 {
    background: url(/img/certi_visual.jpg) no-repeat center center;
    background-size: cover;
  }

  #contents {
    padding: 130px 0px;
    /* overflow: hidden; */
  }
  #contents .main_title {
    margin-bottom: 80px;
  }
  .post-tag {
    background-color: #eeeeee;
    border-radius: 14px;
    font-family: 'NanumSquareB';
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    letter-spacing: 1px;
    padding: 5px 15px;
    margin-bottom: 5px;
    display: inline-block;
  }

/*sub1_1*/
#sub1_1 #pt1 .layGrid{padding: 130px 0 60px;}
#sub1_1 #pt1 p{color: #282828; font-size: 35px; line-height: 1.3; margin-top: 80px; font-weight: 400;}
#sub1_1 #pt1 p span{font-weight: 500;}

#sub1_1 #pt2{word-break: keep-all; padding-bottom: 140px;}
#sub1_1 #pt2 .pt1_img{position: relative; height: 473px; margin-bottom: 42px;}
#sub1_1 #pt2 .pt1_img img{position: absolute;}
#sub1_1 #pt2 .pt1_img .img1{z-index: 99; bottom: 0; left: 50%; transform: translateX(-50%);}
#sub1_1 #pt2 .pt1_img .img2{right: 0;}
#sub1_1 #pt2 .fl{width: 35%; text-align: left;}
#sub1_1 #pt2 .fl img{padding: 30px 0 25px; display: block;}
#sub1_1 #pt2 .fl p{font-family: 'NanumSquare'; font-size:25px; font-weight: 400; color: #000;}
#sub1_1 #pt2 .fl p span{font-size: 35px; color: #000; line-height: 1.2;}
#sub1_1 #pt2 .fl span{font-size: 18px; font-weight: 400; color: #616161;}
#sub1_1 #pt2 .fl span.on{display: none;}
#sub1_1 #pt2 .fr{width: 60%;}
#sub1_1 #pt2 .fr p{font-size: 25px; font-weight: 400; color: #000; margin-bottom: 25px; line-height: 1.3;}
#sub1_1 #pt2 .fr span{font-size: 16px; font-weight: 300; color: #4e4e4e;}
#sub1_1 #pt2 .fr .name{font-size: 16px; font-weight: 400; color: #000; text-align: right;}
#sub1_1 #pt2 .fr .on{display: none;}

/*sub1_2*/
#sub1_2 #pt1{padding: 130px 0 60px;}
#sub1_2 #pt1 .layGrid{width: 1100px;}
#sub1_2 #pt1 h3{color: #656565; font-weight: 300;}
#sub1_2 #pt1 .banner{width:100%; margin-top:40px;}

#sub1_2 #pt2{padding:0 0 140px;}
#sub1_2 #pt2 .layGrid{width: 1100px;}
#sub1_2 #pt2 .layGrid .history{border-top: 1px solid #999; color: #000; display: flex; justify-content: space-between; padding: 30px 0 90px 0;}
#sub1_2 #pt2 .layGrid .history h3{width: 15%; font-size: 23px;}
#sub1_2 #pt2 .layGrid .history ul{width: 37%; word-break: keep-all; font-size: 16px; font-weight: 400; color:#666; margin-right: 40px;}
#sub1_2 #pt2 .layGrid .history ul li{margin-bottom: 25px; line-height: 25px;}
#sub1_2 #pt2 .layGrid .history ul .title{font-size: 20px; color: #000; font-weight: 600;}
#sub1_2 #pt2 .layGrid .history ul li span{display: block; color: #000; font-weight: 500;}
#sub1_2 #pt2 .layGrid .history .img{padding-top: 3px; display: flex; align-items: center; flex-direction: column;}
#sub1_2 #pt2 .layGrid .history .img img{border-radius: 7px;}
/* #sub1_2 #pt2 .setting{text-align: center;}
#sub1_2 #pt2 .setting p{font-size: 30px; font-weight: 500; color: #777;} */

/*sub1_3*/
#sub1_3 #pt1{padding: 130px 0 150px;}
#sub1_3 h2{margin-bottom: 75px;}
#sub1_3 .top{background: url(/img/sub1/sun1-3_line.jpg) no-repeat center center; background-size: contain; display: flex; align-items: center; justify-content: center;}
#sub1_3 .top li{display: inline-block;}
#sub1_3 .top .center{margin: 0 209px;}
#sub1_3 .bottom{display: flex; justify-content: center; margin: 95px 0 100px;}
#sub1_3 .bottom li{display: inline-block; margin: 0 -12px;}
#sub1_3 .txt{text-align: center; font-family: 'NanumSquare'; font-size: 22px; font-weight: 400; color: #000; border-top: 1px solid #fbcdbe; width: 1300px; margin: 0 auto; padding-top: 70px;}

/*sub1_5*/
#sub1_5 #pt1{padding: 130px 0 0 0;}
#sub1_5 #pt1 h3{color: #656565; font-weight: 300;}
#sub1_5 #pt1 iframe{margin: 40px 0;}
#sub1_5 #pt1 .layGrid .box{position: absolute; bottom: -80px; left: 35px; background-color: #f15928; color: #fff; display: inline-block; padding: 40px 30px; text-align: left;}
#sub1_5 #pt1 .layGrid .box div{font-size: 30px; font-weight: 700; margin-top: 70px;}

#sub1_5 #pt2{padding:0  0 140px 0;}
#sub1_5 #pt2>div{width: 1100px; margin-left: 340px;}
#sub1_5 #pt2>div .company_info li{display: flex; color: #000;}
#sub1_5 #pt2>div .company_info li span{font-size: 22px; font-weight: 400; border-bottom: 1px solid #b2b2b2; display: block; width: 740px; padding: 25px;}
#sub1_5 #pt2>div .company_info li .title{font-weight: 500; border-bottom: 1px solid #f15928; text-align: center; width: 170px; padding: 25px 0;}

/* #sub1_5 #pt2 .setting{text-align: center;}
#sub1_5 #pt2 .setting p{font-size: 30px; font-weight: 500; color: #777;} */


/*intro page*/
.introPage #pt1{padding: 100px 0;}
.introPage #pt1 h3{color: #656565; font-weight: 300; position: relative}
.introPage #pt1 h3::after{display: block; content: ''; position: relative; top: 20px; left: 50%; background: #959595; width: 1px; height: 100px;}
.introPage #pt2{padding-bottom: 150px;}
.introPage #pt2 .intro li{float: left; width: 44%; margin:3%; box-sizing: border-box; position: relative; cursor: pointer;}
.introPage #pt2 .intro li img{width: 100%; border: 1px solid #e6e6e6;}
.introPage #pt2 .intro li p{position: absolute; bottom: 75px; left: 170px; color: #303030; font-size: 20px; line-height: 1.3; text-align: left; z-index: 100;}
.introPage #pt2 .intro li:hover p{color: #fff;}
.introPage #pt2 .intro li p span{font-size: 30px; font-weight: 600;}
.introPage #pt2 .intro li .cover{position: absolute; z-index: 50;}
.cover{opacity: 0;}
.introPage #pt2 .intro li:hover .cover{opacity: 1; transition: all 0.8s;}

/*sub2*/
#sub2 #pt1{padding: 100px 0;}
#sub2 #pt1 h3{color: #656565; font-weight: 300; position: relative; padding-bottom: 30px;}
#sub2 #pt1 h3::after{display: block; content: ''; position: relative; top: 20px; left: 50%; background: #959595; width: 1px; height: 51px;}
#sub2 #pt1 h4{color: #444; font-size: 30px; font-weight: 400;}
#sub2 #pt2{padding: 0 0 150px;}
#sub2 #pt3{padding: 0 0 150px;}
#sub2 #pt4{padding: 0 0 120px;}
#sub2 #pt5{padding: 0 0 40px;}

/*sub3*/
#sub3 .sub_title2{display: none;}
#sub3 .sub_title{font-size: 33px; line-height: 1.3; font-weight: 600; color: #000;}
#sub3 #pt1{padding: 130px 0 60px;}
.sub3_3 .container {width:100%; margin:0 auto;}

#sub3 .pt2-1 .layGrid{display: flex; flex-wrap: wrap; padding-bottom: 120px;}
#sub3 .pt2-1 ul{width: 37%; word-break: keep-all;}
#sub3 .pt2-1 ul li{font-size: 18px; font-weight: 400;}
#sub3 .pt2-1 ul .icon img{width: 60px; margin: 0 0 20px;}
#sub3 .pt2-1 ul .title{font-size: 28px; font-weight: 600; color: #000;}
#sub3 .pt2-1 ul .title2{margin-top: 50px;}
#sub3 .pt2-1 .img{width: 63%; text-align: right;}
#sub3 .pt2-1 .img img{border-radius: 10px;}

#sub3 .pt2-1-2{background-color: #eee; padding: 120px 0;}
#sub3 .pt2-1-2 .layGrid{display: flex; flex-wrap: wrap;}
#sub3 .pt2-1-2 ul{width: 37%; word-break: keep-all;}
#sub3 .pt2-1-2 ul li{font-size: 18px; font-weight: 400;}
#sub3 .pt2-1-2 ul .icon img{width: 70px; margin: 0 0 20px;}
#sub3 .pt2-1-2 ul .title{font-size: 28px; font-weight: 700; color: #000;}
#sub3 .pt2-1-2 ul .title2{margin-top: 50px;}
#sub3 .pt2-1-2 .img{width: 63%; text-align: left; border-radius: 10px;}
#sub3 .pt2-1-2 .img img{border-radius: 10px;}

/*banner*/
#sub3 .banner{background: url(/img/sub3/banner_back.jpg) no-repeat center left; background-size: cover; font-size: 16px; font-weight: 500; word-break: keep-all; padding: 80px 0 80px 50%;}
#sub3 .banner .title{font-size: 28px; font-weight: 600; color: #000; margin-bottom: 10px;}
#sub3 .banner div{width: 550px;}
#sub3 .banner ul{display: flex; flex-wrap: wrap; margin-top: 30px;}
#sub3 .banner ul li{display: flex; flex-direction: column; align-items: center; margin-right: 23px;}
#sub3 .banner ul li img{width: 125px; margin-bottom: 10px;}
#sub3 .banner ul li span{font-size: 14px; text-align: center;}

/*탭메뉴*/
#sub3 .pt2-2{padding: 105px 0 155px;}
#sub3 .pt2-2 .tab_con{display: flex; justify-content: space-between; flex-wrap: wrap;}
#sub3 .pt2-2 .tab_con ul{list-style:none; margin:0; padding:0;}
#sub3 .pt2-2 .tab_con ul.title{display: flex; flex-direction: column;}
#sub3 .pt2-2 .tab_con ul.title li:first-child {margin-bottom: 50px;}
#sub3 .pt2-2 .tab_con ul.title li {width: 290px;}
#sub3 .pt2-2 .tab_con ul.title li a {display: block; font-size: 14px; width: 230px; padding:18px 10px; color:#000; transition: 0.2s; font-weight: 500; color: #888; border-bottom: 2px solid #888; box-sizing: border-box;}
#sub3 .pt2-2 .tab_con ul.title li a:hover{color: #f15929;}
#sub3 .pt2-2 .tab_con ul.title li a.show {border-bottom: 2px solid #f15929; box-sizing: border-box; color: #f15929; letter-spacing: 0;}
#sub3 .pt2-2 .tab_con ul.title:after {content:""; display:block; clear:both; }
#sub3 .pt2-2 .tab_con ul.panel{width:auto;}
#sub3 .pt2-2 .tab_con ul.panel li{display:none;}
#sub3 .pt2-2 .tab_con ul#tabmenu-1>li:first-child {display:block;}
#sub3 .pt2-2 .tab_con ul.panel .panel_title{font-size: 24px; line-height: 33px; font-weight: 600; color: #000; margin-bottom: 43px;}
#sub3 .pt2-2 .tab_con ul.panel li img{border: 1px solid #555;}
#sub3 .pt2-2 #row-1 {margin-top:30px;}

/* b2b */
#sub3.sub3_2 #pt1{padding-bottom: 0;}
#sub3.sub3_2{text-align: center;}
#sub3.sub3_2 .layGrid{padding: 60px 0;}
#sub3.sub3_2 .layGrid.ac{padding: 0 0 60px;}
#sub3.sub3_2 .first{padding: 0 0 60px;}
#sub3.sub3_2 .last{padding-bottom: 140px;}
#sub3.sub3_2 .layGrid div{display: flex; justify-content: center; flex-wrap: wrap;}
#sub3.sub3_2 .layGrid div img{border-radius: 10px; margin: 25px 8px 0;}
#sub3.sub3_2 .layGrid div img:first-child{margin-left: 0;}
#sub3.sub3_2 .layGrid div img:last-child{margin-right: 0;}
#sub3.sub3_2 h3{font-size: 25px; color: #000; font-weight: 600; padding: 5px 0 30px;}
#sub3.sub3_2 span{font-size: 18px; border: 1px solid #000; color: #000; font-weight: 500; padding: 2px 12px;}
#sub3.sub3_2 .btn_orange{background-color: #f15929; color: #fff; padding: 0 15px; font-size: 16px; border: none;}
#sub3.sub3_2 .layGrid p{width: 70%; margin: 0 auto; padding: 10px 0 25px; font-size: 18px; color: #555;}

/*sub4*/
#sub4 #pt1{padding: 100px 0;}
#sub4 #pt1 h3{color: #656565; font-weight: 300; position: relative; padding-bottom: 30px;}
#sub4 #pt1 h3::after{display: block; content: ''; position: relative; top: 20px; left: 50%; background: #959595; width: 1px; height: 51px;}
#sub4 #pt1 h4{color: #444; font-size: 30px; font-weight: 400;}
#sub4 #pt2{padding: 0 0 150px;}
#sub4 #pt3{padding: 0 0 150px;}
#sub4 #pt4{padding: 0 0 120px;}
#sub4 #pt5{padding: 0 0 40px;}

#sub4 .probox1 .fl{width:40%; padding-top: 55px;}
#sub4 .probox1 .fl img{max-width: 417px;}
#sub4 .probox1 .fr{width:60%; padding-left: 0;}

#sub4.sub4_4 #pt2{padding:0 0 80px;}
#sub4.sub4_4 .ingredient tr td:first-child::before{top: 49px;}

/*sub5*/
#sub5 #pt1{padding: 100px 0;}
#sub5 #pt1 h3{color: #656565; font-weight: 300; position: relative; padding-bottom: 30px;}
#sub5 #pt1 h3::after{display: block; content: ''; position: relative; top: 20px; left: 50%; background: #959595; width: 1px; height: 51px;}
#sub5 #pt1 h4{color: #444; font-size: 30px; font-weight: 400;}
#sub5 #pt2{padding: 0 0 150px;}
#sub5 #pt3{padding: 0 0 100px;}
#sub5 #pt4{padding: 0 0 120px;}
#sub5 #pt5{padding: 0 0 40px;}

#sub5 .probox1 .fl img{max-width: 382px;}
#sub5 #pt2 .p_tle{padding: 0 0 20px 30px;}
#sub5 #pt2 .p_tle::before{top:17px;}

#sub5.sub5_3 .probox1 .fl img{max-width: 341px;}
#sub5.sub5_4 .probox1 .fl img{max-width: 367px;}

/*sub6*/
#sub6 .main_title{font-family: 'Noto Sans KR', sans-serif;}
#sub6 #pt1{padding: 100px 0 80px;}
#sub6 #pt1 h3{font-family: 'Noto Sans KR', sans-serif; color: #656565; font-weight: 300; position: relative; padding-bottom: 30px;}
#sub6 #bo_list{margin-bottom: 150px;}
#sub6 #bo_v{margin-bottom: 150px;}
#sub6 #bo_w{margin-bottom: 150px;}
#sub6 #bo_gall{margin-bottom: 150px;}
#sub6 #bo_gall .gall_img{height: 180px !important; max-height: 180px !important;}

/*****************************************************************************/

/*footer*/
#footer{background-color:#2c2c2c; border-top: 5px solid #f15929; text-align: right; display: flex; align-items: flex-end; font-size: 14px;}
#footer .layGrid{text-align: center; margin: 0 auto; padding: 40px 0;}
#footer .layGrid ul{margin-top: 15px;}
#footer .layGrid ul li{color: #fefefe; line-height: 2;}
#footer .layGrid ul li span{color: #acacac;}
#footer .layGrid ul .copy{font-size: 12px; padding-top: 20px;}
#footer .top_btn{ padding: 10px;}

/*****************************************************************************************************************************/


@media screen and (max-width: 1500px){
    .layGrid{width: 80%;}
    .sub_tle{left: 10%;}
    .tabmenu{padding-left: 10%; width: auto;}
    .main_title{font-size: 32px;}

    #sub1_1 #pt1 .layGrid{padding: 130px 0 30px;}
    #sub1_1 #pt2 .pt1_img{position: static; text-align: center; width: 80%; margin: 0 auto; height: auto; margin-bottom: 30px;}
    #sub1_1 #pt2 .pt1_img .img1{position: static; transform: translateX(0); width: 100%;}
    #sub1_1 #pt2 .pt1_img .img2{display: none;}
    #sub1_1 #pt2 .fl p{font-size: 27px;}
    #sub1_1 #pt2 .fl p span{font-size: 32px;}

    #sub1_3 .top li{display: none;}
    #sub1_3 .top .center{display: block;}
    #sub1_3 .bottom{flex-wrap: wrap; padding: 0 30px; box-sizing: border-box; width: 70%; margin: 0 auto; margin-bottom: 50px; margin-top: 50px; text-align: center;}
    #sub1_3 .bottom li{width: 33.3%;}
    #sub1_3 .bottom img{width: 88%;}
    #sub1_3 .txt{width: 85%; word-break: keep-all;}

    #sub1_5 iframe{width: 100%; height: 600px;}
    #sub1_5 #pt2>div{width: 100%; margin-left: 0;}
    #sub1_5 #pt2>div .company_info{margin-top: 120px;}
    #sub1_5 #pt2>div .company_info li span{width: 100%;}

    #sub3 .banner{padding: 80px 0 80px 45%;}
}

@media screen and (max-width: 1300px){
    .layGrid{width: 85%;}
    .sub_tle{left: 8%;}
    .tabmenu{padding-left: 7%;}

    #sub1_1 #pt2 .pt1_img{width: 85%;}

    #sub1_2 #pt2 .layGrid{width: 85%;}

    #sub3 .pt2-1 .layGrid,#sub3 .pt2-1-2 .layGrid{justify-content: space-between;}
    #sub3 .pt2-1 .img,#sub3 .pt2-1-2 .img{width: 50%;}
    #sub3 .pt2-1 .img img,#sub3 .pt2-1-2 .img img{width: 100%;}
    #sub3 .pt2-1 ul .icon img,#sub3 .pt2-1-2 ul .icon img{margin: 0 0 20px;}
    #sub3 .pt2-1 ul,#sub3 .pt2-1-2 ul{width: 45%; padding-top: 20px;}
    #sub3 .pt2-1 ul .title,#sub3 .pt2-1-2 ul .title{font-size: 23px;}
    #sub3 .pt2-1 ul .title2,#sub3 .pt2-1-2 ul .title2{margin-top: 20px;}
    #sub3 .banner{background: url(/img/sub3/banner_back_m.jpg) no-repeat center left; background-size: cover; padding: 80px 0 80px; text-align: center;}
    #sub3 .banner div{width: 100%;}
    #sub3 .banner ul{justify-content: center;}

    #sub3 .pt2-2 .tab_con ul.title{flex-direction: inherit; flex-wrap: wrap;}
    #sub3 .pt2-2 .tab_con ul.title li:first-child{width: 100%;}
    #sub3 .pt2-2 .tab_con ul.title li{width: 20%;}
    #sub3 .pt2-2 .tab_con ul.title li a{border-bottom: none;}
    #sub3 .pt2-2 .tab_con ul.title li a.show{ border-bottom: 1px solid #f15929;}
    
    /* 게시판 반응형 */
    #pd-top .flexBox{background-color: #f2f0fe; height: 100%;}
    #pd-top .flexBox .flexItem3 img{opacity: 0;}
}

@media screen and (max-width: 1100px){
    .logo{padding: 1% 0 0; width: 120px;}
    .layGrid{width: 90%;}
    .sub_tle{left: 6%; font-size: 35px;}
    .tabmenu{padding-left: 5%;}
    .main_title::before{width: 45px; height: 11px; background-size: contain;}

    #header #navi{display:none; justify-content: center;}
    #header{background: rgba(256,256,256,1);}
    #header.f-nav{background:rgba(256,256,256,1);}
    .mobile-menu{display:block; top: 20px;}
    /* .language{display: none;} */
    
    #sub1_1 #pt2 .pt1_img{width: 90%;}

    #sub1_2{overflow: hidden;}
    #sub1_2 #pt1 .layGrid{width: 90%;}

    #sub1_3 .bottom{width: 90%;}

    #sub1_5 #pt1 .layGrid .box div{font-size: 25px; margin-top: 50px;}

    #sub3 .pt2-1-2 .layGrid{flex-direction: column-reverse;}
    #sub3 .pt2-1 .img, #sub3 .pt2-1-2 .img{width: 80%; margin: 0 auto;}
    #sub3 .pt2-1 ul, #sub3 .pt2-1-2 ul{width: 80%; margin: 0 auto; margin-bottom: 30px;}
    #sub3 .pt2-1 ul .title, #sub3 .pt2-1-2 ul .title{font-size: 20px;}
    #sub3 .pt2-1 ul li,#sub3 .pt2-1-2 ul li{font-size: 16px;}
    #sub3 .banner div{padding: 0 15px; box-sizing: border-box;}
    #sub3 .sub_title{display: none;}
    #sub3 .sub_title2{display: block; font-size: 28px; margin-bottom: 50px;}
    #sub3 .pt2-2 .tab_con ul.title{margin-bottom: 30px;}
    #sub3 .pt2-2 .tab_con ul.title li{width: 33.3%; text-align: center;}
    #sub3 .pt2-2 .tab_con ul.title li:nth-child(2){width: 100%; text-align: center;}
    #sub3 .pt2-2 .tab_con ul.panel li img{width: 100%;}

    /* 게시판 반응형 */
    #bo_gall #gall_ul{display: flex; flex-wrap: wrap;}
    #bo_gall .gall_li{width: 50%;}
    #qa-top{flex-wrap: wrap;}
    #qa-top h3{font-size: 20px !important;  word-break: keep-all; line-height: 25px !important;}
    #qa-top h3 span{font-size: 20px !important; line-height: 25px !important;}
    #qa-info tr{display: flex; flex-wrap: wrap;}
    #qa-info td{width: 100%; height:auto !important; border: none !important; padding: 0 !important;}
    #qa-info input, #qa-info select{margin-bottom: 10px;}
    #bo_w .btn_submit{font-size: 14px !important;}
    #certi-top .img-wrapper{background:url(/img/sub4/certi_main1_m.jpg) no-repeat center center !important;}
}

@media screen and (max-width: 820px){
    body{font-size: 14px;}

    #sub1_1 #pt1 .layGrid{padding: 100px 0 20px;}
    #sub1_1 #pt2 .fl p{font-size: 23px;}
    #sub1_1 #pt2 .fl span{font-size: 16px;}
    #sub1_1 #pt2 .fl p span{font-size: 28px;}
    #sub1_1 #pt2 .fl img{padding: 20px 0 15px;}
    #sub1_1 #pt2 .fr p{font-size: 20px; margin-bottom: 15px;}
    #sub1_1 #pt2 .fr span{font-size: 14px;}
    #sub1_1 #pt2 .fr .name{text-align: center; margin-top: 20px; font-size: 14px;}
    #sub1_1 #pt2 .fr .on{display: block;}
    #sub1_1 #pt2 .fr .hidden{display: none;}

    #sub1_2 #pt2 .layGrid .history{flex-wrap: wrap;}
    #sub1_2 #pt2 .layGrid .history h3{width: 100%; margin-bottom: 20px;}
    #sub1_2 #pt2 .layGrid .history ul{width: 40%; margin-right: 0; font-size: 14px;}
    #sub1_2 #pt2 .layGrid .history .img{width: 57%;}
    #sub1_2 #pt2 .layGrid .history .img img{width: 100%;}

    #sub1_3 .bottom{width: 90%; padding: 0;}
    #sub1_3 .bottom li{margin: 0 -10px;}
    #sub1_3 .bottom img{width: 100%;}
    #sub1_3 .txt{font-size: 18px; width: 70%; padding-top: 50px;}

    #sub1_5 #pt1 .layGrid .box div{font-size: 20px; margin-top: 30px;}
    #sub1_5 #pt2>div .company_info li .title{padding: 15px 0;}
    #sub1_5 #pt2>div .company_info li span{font-size: 16px; padding: 15px;}

    #sub3 .pt2-2 .tab_con ul.title{justify-content: center;}
    #sub3 .pt2-2 .tab_con ul.title li{width: auto;}
    #sub3 .pt2-2 .tab_con ul.title li a{padding: 18px 15px;}

    #sub3.sub3_2 h3{font-size: 20px;}
    #sub3.sub3_2 .layGrid p{font-size: 16px;}
    #sub3.sub3_2 .layGrid{padding: 40px 0;}
    #sub3.sub3_2 .layGrid.ac{padding: 0;}
    #sub3.sub3_2 .layGrid p{width: 80%;}

    #sub3.sub3_2 .layGrid div img{width: 50%;}


    /* 게시판 반응형 */
    .top-wrapper h3{font-size: 18px !important;}
    .top-wrapper h3 span{font-size: 18px !important;}
    .top-wrapper p{word-break: keep-all;}
    #certi-top h3{font-size: 18px !important; word-break: keep-all; text-align: center;}
    #certi-top h3 span{font-size: 23px !important;}
    #certi-top .img-wrapper{height: 200px !important;}
    #bo-pd-top{flex-wrap: wrap;}
    #bo-pd-top .bo-img-wrapper,#bo-pd-top .bo-top-text{width: 100% !important;}
    #bo-pd-top #bo-pd-data, #bo-pd-top #bo-price{width: 100% !important;}
    #bo-pd-top #bo-pd-data{margin-top: 20px !important;}
}

@media screen and (max-width: 500px){
    .logo{width: 80px;}
    .mobile-menu{top: 10px;}
    #header .language{padding-right: 40px;}
    #header .language li{padding-top: 7px;}
    .mainimg{height: 100px;}
    .sub_tle{left: 50%; transform: translateX(-50%); font-size: 20px; bottom: 40px; word-break: keep-all;}
    .tabmenu{display: none;}
    .sub1.mainimg{background: url(/img/sub1/sub1_img_m.jpg)no-repeat center center;}
    .main_title{font-size: 25px; margin-bottom: 0;}

    #sub1_1 #pt1 .layGrid{padding: 80px 0 20px;}
    #sub1_1 #pt2{padding-bottom: 70px;}
    #sub1_1 #pt2 .fl{width: 100%; text-align: center;}
    #sub1_1 #pt2 .fl img{margin: 0 auto; width: 50px;}
    #sub1_1 #pt2 .fl p{font-size: 18px;}
    #sub1_1 #pt2 .fl span{font-size: 14px;}
    #sub1_1 #pt2 .fl span.hidden{display: none;}
    #sub1_1 #pt2 .fl span.on{display: block; font-size: 20px;}
    #sub1_1 #pt2 .fr{width: 100%; text-align: center; margin-top: 30px;}
    #sub1_1 #pt2 .fr p{font-size: 16px;}

    #sub1_2 #pt1{padding: 80px 0 20px;}
    #sub1_2 #pt2 .layGrid .history{padding: 30px 0 40px;}
    #sub1_2 #pt2 .layGrid .history h3{font-size: 20px; margin-bottom: 15px;}
    #sub1_2 #pt2 .layGrid .history ul{width: 100%;}
    #sub1_2 #pt2 .layGrid .history ul li{margin-bottom: 12px;}
    #sub1_2 #pt2 .layGrid .history .img{width: 100%;}
    #sub1_2 #pt2 .layGrid .history ul .title{font-size: 16px;}

    #sub1_3 #pt1{padding: 80px 0 90px;}
    #sub1_3 h2{margin-bottom: 20px;}
    #sub1_3 .top .center img{width: 200px;}
    #sub1_3 .bottom{margin-top: 30px; margin-bottom: 30px;}
    #sub1_3 .bottom li{margin: 0 -5px;}
    #sub1_3 .bottom img{width: 100%;}
    #sub1_3 .txt{font-size: 14px; width: 80%; padding-top: 30px;}

    #sub1_5 #pt1{padding: 80px 0 0 0;}
    #sub1_5 #pt1 iframe{margin: 30px 0; height: 400px;}
    #sub1_5 #pt1 .layGrid .box{display: none;}
    #sub1_5 #pt2{padding: 0  0 100px 0;}
    #sub1_5 #pt2>div .company_info{margin-top: 0;}
    #sub1_5 #pt2>div .company_info li .title{font-size: 14px;}
    #sub1_5 #pt2>div .company_info li span{font-size: 14px; }

    .sub3.mainimg{background:url(/img/sub3/sub3_img_black.jpg)no-repeat center center;}
    #sub3 #pt1{padding: 80px 0 20px;}
    #sub3 .pt2-1 .layGrid{padding: 0 0 50px;}
    #sub3 .pt2-1-2{padding: 50px 0 65px;}
    #sub3 .pt2-1 ul, #sub3 .pt2-1-2 ul{text-align: center;}
    #sub3 .pt2-1 ul li, #sub3 .pt2-1-2 ul li{font-size: 14px;}
    #sub3 .pt2-1 ul .icon img, #sub3 .pt2-1-2 ul .icon img{width: 50px;}
    #sub3 .pt2-1 ul .title, #sub3 .pt2-1-2 ul .title{font-size: 16px;}
    #sub3 .banner{padding: 50px 0;}
    #sub3 .banner .title{font-size: 18px;}
    #sub3 .banner div{font-size: 14px;}
    #sub3 .pt2-2{padding: 50px 0 65px;}
    #sub3 .pt2-2 #row-1{margin-top: 0;}
    #sub3 .sub_title2{margin-bottom: 0; font-size: 18px;}
    #sub3 .pt2-2 .tab_con ul.title li a{font-size: 14px; padding: 5px 0;}
    #sub3 .pt2-2 .tab_con ul.panel .panel_title{text-align: center; font-size: 18px; margin-bottom: 15px; display: none;}
    
    #sub3.sub3_2 span{font-size: 16px;}
    #sub3.sub3_2 .btn_orange{font-size: 14px;}
    #sub3.sub3_2 .layGrid div img{width: 80%;}
    #sub3.sub3_2 h3{font-size: 18px;}
    #sub3.sub3_2 span{font-size: 14px;}
    #sub3.sub3_2 .layGrid p{font-size: 14px; width: 100%;}

    /* 게시판 반응형 */
    #s-visual01{height: 180px; background: url(/img/sub1/sub1_img_m.jpg)no-repeat center center;}
    #s-visual02{height: 180px; background: url(/img/sub2/product_visual_m.png) no-repeat center center;}
    #s-visual03{height: 180px; background: url(/img/sub3/sub3_img_black.jpg) no-repeat center center;}
    #s-visual04{height: 180px; background: url(/img/sub4/certi_visual_m.jpg) no-repeat center center;}
    #contents{padding: 80px 0;}
    #contents .main_title{margin-bottom: 20px;}
    .bo_sch_input{font-size: 14px; padding: 10px 30px 10px 15px;}
    #bo_gall .gall_li{width: 100%;}
    .top-wrapper h3{font-size: 15px !important; line-height: 18px !important; text-align: center !important; word-break: keep-all !important;}
    .top-wrapper h3 span{font-size: 15px !important;}
    .top-wrapper p{font-size: 14px !important; text-align: center !important;}
    .flexItem7{width: 100%; text-align: center; padding: 0 15px; box-sizing: border-box;}
    #bo_gall .gall_text_href a{text-align: center;}
    .bo_sch_input{font-size: 14px !important; padding: 10px 35px 10px 5px !important; border-radius: 0 !important;}
    #bo-pd-top #bo-pd-data{margin-top: 50px !important;}
    #bo_v_title .bo_v_tit{font-size: 20px !important;}
    #bo-pd-top #bo-pd-data td.name{font-size: 14px !important; width: 120px !important;}
    #bo-pd-top #bo-price thead td{font-size: 14px !important;}
    #bo-pd-top #bo-price tbody td{padding-top: 10px !important;}
    .mobile-menu{background: none;}

    #footer img{width: 80px;}
}