/* reset */
* { margin: 0; padding:0; }
li { list-style:none; }
a { text-decoration: none !important; color:inherit; }
img { vertical-align: top; }

/* common */
html { overflow-x: hidden; }
html.fix { overflow: hidden; }
.wrap { width:1400px; margin:0 auto; position: relative; font:18px/1.6 stm;  }
.wrap * { word-break: keep-all; }
.wrap:after, ul:after, .cl:after { content:""; clear:both; display: block; }
.blind { position:absolute; width:0; height:0; font-size:0; overflow: hidden; }
.fl { display: flex; align-items: center; justify-content: center; }
.fld { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.fl:after, .fld:after { display:none; }
.dn { display:none !important; }
.shd { box-shadow: 2px 2px 8px rgba(0,0,0,0.2); border-radius: 16px; overflow: hidden; }
.cp { color:#e55627; }
.mt { font:36px/1.4 steb; }
.st { font:18px/1.4 steb; }
.himg:before { transition:0.3s; }
.himg:hover:before { transform: scale(1.05); }
.swiper-container { width: 100%; height: 100%; }
.swiper-slide { width: 100%; height: 100%; background-position: center;  background-size: cover; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 

/* header & footer */
#w_header { position: fixed; left: 0; top: 0; width: 100%; z-index: 99; transition:0.3s; height: 80px; overflow: hidden; color:#fff; }
#w_header.fix, #w_header.down { background: rgba(0,0,0,0.7); border-bottom:1px solid #333; }
#w_header.down { height: 300px; background: #131313; }

#w_header h1 { position: absolute; left: 0; top:18px; z-index:1; }
#w_header h1 img { height: 44px; }

#w_header #w_gnb { align-items: flex-start; text-align: center; padding-top: 29px; }
#w_header #w_gnb > li:first-child { margin-left: 40px; }
#w_header #w_gnb > li > a { padding:0 50px; font-size:16px; font-family: stb; }
#w_header #w_gnb ul { padding-top: 20px; }
#w_header #w_gnb ul li { line-height: 40px; }

#w_header .lang { position: absolute; right: 0; top:30px; z-index:1; font-size:14px; }
#w_header .lang li { float:left; }
#w_header .lang li:after { content:"|"; font-size:11px; position: relative; top:-1px; margin:0 4px; }
#w_header .lang li:last-child:after { display: none; }
#w_header .lang li a { opacity: 0.5; }
#w_header .lang li.select a { opacity: 1; }

#w_footer { background: #212121; color:#999; padding:60px 0; }
#w_footer img { position: absolute; left: 0; top: 0; }
#w_footer address { padding-left: 240px; font-style: normal; font-size:16px; line-height:1.8; }
#w_footer address a:nth-last-child(1), 
#w_footer address a:nth-last-child(2) { margin-left: 30px; }

.pdf { position:fixed; right:100px; top:100px; z-index: 99; }
.pdf img { width: 120px; }

/* index */
#w_main { overflow: hidden; position: relative; }
#w_main .wrap { height: 100vh; }
#w_main:before { content:""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index:1; }
#w_main .yt { width:2400px; height:120vh; position: absolute; left:calc(50% - 1200px); top:calc(50% - 60vh); }
#w_main .ment { display: none; position: absolute; top:350px; left:calc(50% - 700px); color:#fff; z-index:10; }
#w_main .ment h2 { font:54px/1.2 stb; color:#fff; }
#w_main .ment p { font:24px stsb; margin-top: 30px; }

/* 스와이퍼 
#w_main .swiper-slide img { height: 980px; }
#w_main .ment { position: absolute; top:350px; left:calc(50% - 700px); color:#fff; z-index:10; }
#w_main .ment h2 { font:54px/1.2 stb; color:#fff; }
#w_main .ment p { font:24px stsb; margin-top: 30px; }
#w_main .page { position: absolute; top:700px; left:calc(50% - 700px); color:#fff; z-index:10;  }
#w_main .page .swiper-pagination { width: 400px; background:rgba(255,255,255,0.4); height: 2px; }
#w_main .page .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #fff; }
#w_main .page .swiper-button-next, 
#w_main .page .swiper-button-prev { width: 40px; height: 40px; border-radius: 40px; color:#fff; background: #e55627; }
#w_main .page .swiper-button-prev { left:430px; }
#w_main .page .swiper-button-next { right:auto; left:490px; }
#w_main .page .swiper-button-next:after, 
#w_main .page .swiper-button-prev:after { font-size:20px; }
*/

#w_brand { padding:160px 0; }
#w_brand .fl { justify-content: space-between; }
#w_brand article h2 { font:40px/1.4 stb; margin-bottom: 100px; }

#w_fresh { padding-bottom: 160px; }
#w_fresh .top { height: 600px; background:url(/images/bg_fresh.png) no-repeat center/cover; }
#w_fresh .top h2 { color:#fff; font:40px/1.4 steb; text-align: center; padding-top: 160px; }
#w_fresh ul.fl { justify-content: space-between; align-items: flex-start; margin-top:-120px;  }
#w_fresh ul.fl li { width:calc((100% - 80px) / 3); text-align: center; }
#w_fresh ul.fl li figure { width: 240px; height: 240px; background: #fff; border-radius: 240px; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); margin:0 auto; }
#w_fresh ul.fl li dl { margin-top: 60px; }
#w_fresh ul.fl li dl dt { font:32px/1.4 steb; }
#w_fresh ul.fl li dl dd { font:16px/1.6 stm; color:#666; margin-top: 20px;  }

#w_prd { background: #e55627; color:#fff; }
#w_prd .wrap { justify-content: space-between; }
#w_prd article { align-items: flex-start; }
#w_prd article h2 { font:40px steb; margin-bottom: 100px; }
#w_prd article p { font:20px/1.8 stm; margin-bottom: 180px; }
#w_prd article a { width: 240px; line-height: 50px; background: #fff; color:#e55627; border-radius: 100px; text-align: center; font-size:16px; }
#w_prd .prdSlide { width: 700px; padding-bottom: 80px; margin:0; }
#w_prd .prdSlide .page { position:relative; margin-top: 30px; }
#w_prd .prdSlide .page div { position: static; color:#fff; margin:0 20px; }
#w_prd .prdSlide .page div:after { font-size:30px; font-weight: bold; }

#w_food { padding:160px 0; }
#w_food h2 { text-align: center; margin-bottom: 100px; font:32px stb; }
#w_food .swiper-slide { width:auto; }
#w_food img { height: 350px; width:auto; }

#w_contact { padding:160px 0; background: #f4f4f4; }
#w_contact dl { margin-right: 140px; }
#w_contact dl dt { font:40px stb; margin-bottom: 60px; }
#w_contact dl dd { font:20px/1.6 stm; }
#w_contact ul li { margin-bottom: 20px; display:flex; align-items:center; justify-content:flex-start;  }
#w_contact ul li:last-child { margin-bottom: 0; }
#w_contact ul li img { margin-right: 20px; }

/* sublayout */
.sv { height: 420px; position: relative; overflow: hidden; }
.sv:before { content:""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; animation: sv 3s forwards; }
.sv h2 { font:34px steb; position: relative; padding-top: 80px; }

@keyframes sv {
    0% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

#sv1:before { background:url(/images/bg_sub1.jpg) no-repeat center/cover; }
#sv2:before { background:url(/images/bg_sub2.png) no-repeat center/cover; }
#sv3:before { background:url(/images/bg_sub3.png) no-repeat center/cover; }
#sv4:before { background:url(/images/bg_sub4.png) no-repeat center/cover; }

.sm { height: 50px; border-bottom:1px solid #ddd; background: #f4f4f4; }
.sm ul li a { padding:0 30px; font:16px/50px stm; opacity: 0.7; }
.sm ul li.select a { opacity: 1; color: #e55627; }

.left { width: 440px; float:left; }
.right { width: 920px; float:right; } 


/* 회사소개 sub1_1 */
#sub1_1 .cont1 { background:url(/images/cloud.png) no-repeat center/cover; position: relative; }
#sub1_1 .cont1:before { content:""; position: absolute; left: 0; top: 0; background:rgba(0,0,0,0.15); width: 100%; height: 100%;  }
#sub1_1 .cont1 .fld { height: 1000px; text-align: center; color:#fff; position: relative; }
#sub1_1 .cont1 h2 { font:32px/1.4 stl; margin-top: 80px; }
#sub1_1 .cont1 h2 b { font-family: stb; }
#sub1_1 .cont1 p { margin-top: 80px; line-height:1.8; }
#sub1_1 .cont1 p b { font:20px stb; }

#sub1_1 .cont2, #sub1_1 .cont3, #sub1_1 .cont4, #sub1_1 .cont5 { padding:160px 0; }
#sub1_1 .cont2 .left h2 { line-height:254px; }
#sub1_1 .cont2 ul { justify-content: space-between; align-items: flex-start; }
#sub1_1 .cont2 ul li strong { width: 254px; height: 254px; background: #e55627; color:#fff; display:flex; align-items:center; justify-content:center; font:18px steb; border-radius: 300px;  margin:0 auto; position: relative; }
#sub1_1 .cont2 ul li strong:after { content:"X"; font-size:20px; color:#e55627; position: absolute; top:calc(50% - 10px); right:-19%;  }
#sub1_1 .cont2 ul li:last-child strong:after { display: none; }
#sub1_1 .cont2 ul li p { text-align: center; margin-top: 40px; }

#sub1_1 .cont3 { background:#f4f4f4; }
#sub1_1 .cont3 .history > li { margin-bottom: 60px; padding-left: 80px; position: relative; }
#sub1_1 .cont3 .history > li:last-child { margin-bottom: 0; }
#sub1_1 .cont3 .history > li .cp { font-family: steb; position: absolute; left: 0;  }
#sub1_1 .cont3 .history ul li { padding-left: 60px; position: relative; margin-bottom: 10px;  }
#sub1_1 .cont3 .history ul li span { position: absolute; left: 0; font-family: steb; }

#sub1_1 .cont4 ul li { border-top:1px solid #e55627; padding-top:10px; height: 130px; padding-left: 240px; position: relative;  }
#sub1_1 .cont4 ul li strong { font:20px/1.6 steb; position: absolute; left: 0; }
#sub1_1 .cont4 .right > div { font:32px/1.6 stl; margin-top: 40px; }

#sub1_1 .cont5 .right .circle { width: 400px; height: 400px; box-sizing: border-box; border:2px solid #d42c0f; border-radius: 400px; text-align: center; }

#sub1_1 .cont5 .right ul { justify-content: space-between; position: relative; }
#sub1_1 .cont5 .right ul:before { content:"X"; width: 180px; height: 180px; background:#e55627; color:#fff; font-size:20px; font-family: steb; display:flex; align-items:center; justify-content:center; position: absolute; left:calc(50% - 90px); top:calc(50% - 90px); border-radius: 200px; z-index:-1; }
#sub1_1 .cont5 .right ul:after { content:""; height: 200px; border:1px solid #e55627; position: absolute; left: calc(50% - 1px); top:70%; display: block; }
#sub1_1 .cont5 .right .circle span { display: inline-block; padding-top: 40px; color:#666; font:16px stsb; margin-bottom: 40px; }
#sub1_1 .cont5 .right .circle h3 { font:20px/1.6 stb; height: 80px;margin-bottom: 20px; }
#sub1_1 .cont5 .right .circle p { font:16px/1.6 stm; color:#666; }

#sub1_1 .cont5 .right div.circle { background: #e55627; color:#fff; margin:80px auto 0; border:none; }
#sub1_1 .cont5 .right div.circle p { color:#fff; }
#sub1_1 .cont5 .right div.circle img { height: 49px; margin-bottom: 40px; margin-top: 60px;  }

/* b2b sub2_1 */
#sub2_1 { padding:160px 0; }
#sub2_1 .cont1 h2 { font:32px stb; position: absolute; }
#sub2_1 .cont1 figure { width: 920px; margin-bottom: 160px; } 
#sub2_1 .cont1 figure:nth-child(2n) { margin-left: auto; }
#sub2_1 .cont1 figure figcaption { font:18px/1.6 stm; margin-top: 30px; }

#sub2_1 .cont2 ul.ch > li { float:left; width: calc((100% - 80px) / 5); text-align: center; margin-right: 20px;  }
#sub2_1 .cont2 ul.ch > li:last-child { margin-right: 0; }
#sub2_1 .cont2 ul.ch > li strong { font:normal 18px stb;}
#sub2_1 .cont2 ul.ch ul li { background: #f4f4f4; border-radius: 10px; margin-top: 20px; width: 100%; height: 60px; display:flex; align-items:center; justify-content:center; }

/* b2c sub2_2 */ 
#sub2_1 .cont3 ul { width: 2150px; margin-left: -375px; } 
#sub2_1 .cont3 ul li { width: 500px; height: 500px; border-radius: 20px; background: #f4f4f4; overflow: hidden; float:left; margin-right: 50px; margin-bottom: 50px;  }
#sub2_1 .cont3 ul li:nth-child(4n) { margin-right: 0; }
#sub2_1 .cont3 ul li img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; mix-blend-mode: multiply; }

/* sub2_3 */
#sub2_3 { padding:160px 0; }
#sub2_3 .cont1 h2 { font:32px stb; }
#sub2_3 .cont1 strong { font:20px stb; display: block; margin-bottom: 40px; } 
#sub2_3 .cont1 .right > img:nth-of-type(1) { margin:50px 0 100px; width: 100%; }
#sub2_3 .cont1 .right > img:nth-of-type(2) { display: block; margin-left: auto; margin-bottom: 200px; }
#sub2_3 .cont1 .right > p { letter-spacing: -0.5px; }
#sub2_3 .cont1 .right ul:nth-of-type(1) { margin-top: 30px; margin-bottom: 200px; line-height:1.8;  }
#sub2_3 .cont1 .right ul:nth-of-type(1) li:before { margin-right: 4px;  }
#sub2_3 .cont1 .right ul { text-indent: -20px;  padding-left: 20px;}
#sub2_3 .cont1 .right ul.fl { flex-wrap: wrap; justify-content: space-between; }
#sub2_3 .cont1 .right ul.fl li { margin-top: 40px; }


/* sub3_1 */
#sub3_1 > div { padding:160px 0; }
#sub3_1 h2 { font:32px stb;}
#sub3_1 article { position: relative; padding-left:300px; }
#sub3_1 article h3 { position: absolute; left: 0; }
#sub3_1 article h3 img {margin-top: 0px;}
#sub3_1 img { width: 100%; margin-top: 60px; margin-bottom: 60px; }
#sub3_1 #seafood { background:#f4f4f4; }
#sub3_1 #inno a { margin-top: 50px;  width: 240px; line-height: 50px; background: #e55627; color:#fff; border-radius: 100px; text-align: center; font-size:16px; }

/* sub4_1 */
#sub4_1 { padding:160px 0; }
#sub4_1 .left h2 { font:32px stb; }
#sub4_1 .left p { margin-top: 40px; }
#sub4_1 .left ul { margin-top: 40px; font:20px/1.8 stb; }
#sub4_1 form ul li { width:calc((100% - 80px) / 3); float:left; margin:0 40px 20px 0; }
#sub4_1 form ul li:nth-child(3) { margin-right: 0; }
#sub4_1 form ul li:nth-child(4) { width: 100%; margin-right: 0; }
#sub4_1 form ul li input { border:none; width:100%; height:50px; background: #f4f4f4; border-radius: 50px; padding:0 20px; font:18px stm; outline:none;  }
#sub4_1 form ul li textarea { border:none; width:100%; height:300px; background: #f4f4f4; border-radius: 20px; padding:20px; font:18px/1.6 stm; outline:none;  }
#sub4_1 form > input { background: #e55627; color:#fff; width: 250px; height: 40px; border:none; border-radius: 50px; outline:none; font:16px stm; }

/* sub4_2 */
#sub4_2 { padding:160px 0; }
#sub4_2 .left h2 { font:32px stb; }
#sub4_2 .left p { margin-top: 40px; }
#sub4_2 #bo_btn_top { display: none; }
#sub4_2 .tbl_wrap table { border-top:1px solid #e55627; }

/* sub4_3 */
#sub4_3 { padding:160px 0; }
#sub4_3 .left h2 { font:32px stb; }
#sub4_3 article { margin-bottom: 80px; }
#sub4_3 article:last-child { margin-bottom: 0; }
#sub4_3 article iframe { border-radius: 20px; }
#sub4_3 article strong { display: block; margin-top: 20px; font-size:20px; }
#sub4_3 article a { font:20px steb; }