@charset "utf-8"; /*------------------------------------------------------------------------------------------------------------------------------------------ File : Content.CSS Company : The Webstyle co.,ltd Author : Woo Seok, Shin 2015-07 CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그 CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc --------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------- Common -----------------------------*/ h2 {font-family:"NotoSansRegular"; font-size:30px; color:#222;} h3.fs24 {margin-bottom:25px; font-family:"NotoSansRegular"; font-size:24px; color:#222;} .section {margin-bottom:40px;} .section h2 {margin-bottom:20px;} .h2_section {margin-bottom:70px;} .h2_section h2 {margin-bottom:30px;} .h2_section h2.white {color:#fff;} .h3_section {margin-bottom:30px;} .h3_section h3 {margin-bottom:15px; font-family:"NotoSansRegular"; font-size:18px; color:#222;} h2.hide, h3.hide, h4.hide {font-size:0px; line-height:0px;} h2.blueLine {margin-bottom:15px; padding-top:13px; font-family:"NotoSansRegular"; font-size:24px; color:#222; line-height:30px; background:url('/Images/Common/bg_h2_blueLine.gif') left top no-repeat;} h3.blueLine {margin-bottom:10px; padding-top:13px; font-family:"NotoSansRegular"; font-size:18px; line-height:24px; color:#222; background:url('/Images/Common/bg_h3_blueLine.gif') left top no-repeat;} .section_header {*zoom:1; position:relative; margin-bottom:10px;} .section_header:after {content:""; display:block; clear:both;} .section_txt {font-family:"NotoSansLight"; font-size:15px; line-height:24px; color:#555; word-break:keep-all;} .section_txt > ol ol li{text-indent:17px;} figure.section_img {text-align:center;} figcaption.hide {overflow:hidden; width:0px; height:0px;font-size:0px; line-height:0px;} @media all and (max-width:1024px) { figure.section_img img {width:100%; height:auto;} } /* Layer Popup */ .lp_modal {display:none;} .lp_wrap {min-width:300px;} .lp_wrap .lp_container {position:relative;} .lp_wrap.lp_black .lp_container {border:10px solid #222;} .lp_wrap.lp_blue .lp_container {border:10px solid #0078c2;} .lp_wrap .lp_header {height:60px; background-color:#0079c1;} .lp_wrap.lp_black .lp_header {background-color:#222;} .lp_wrap .lp_header h2 {padding-left:20px; font-family:"NotoSansRegular"; font-size:18px; line-height:60px; color:#fff;} /*.lp_wrap .lp_body {overflow-x:hidden; overflow-y:scroll; height:660px; padding:30px;}*/ .lp_wrap .lp_body {overflow-x:hidden; /* overflow-y:scroll; */ padding:0px;} .lp_wrap .lp_section {margin-bottom:10px;} .lp_wrap a.btn_lp_close {display:block; position:absolute; top:20px; right:20px; width:12px; height:12px; text-indent:-9999px; background:url('/Images/Common/btn_lp_close.png') center center no-repeat;} .lp_wrap a.btn_lp_close.big {width:21px; height:21px; background:url('/Images/Common/btn_lp_close_big.png') center center no-repeat;} .lp_wrap a.btn_lp_close.white {top:19px; width:25px; height:25px; background:url('/Images/Common/btn_lp_close_white.png') center center no-repeat;} @media all and (max-width:768px) { #layerPop .lp_wrap { width:84% !important; height:auto !important; left:8% !important; top:2% !important; padding-bottom:44px; } #layerPop .lp_wrap a img { width:100% !important; } } @media all and (max-width:600px) { .lp_main .lp_body a img {width:100%;} } /* Layer Popup */ .lp_allCategory {max-width:1200px;} /* 전체 카테고리 보기 */ .lp_brandProduct {max-width:1200px;} /* 브랜드별 제품보기 */ .lp_video {max-width:700px; min-height:698px;} /* 비디오 확대창 */ .lp_cooking {max-width:650px;} /* 조리과정 이미지 확대창 */ .lp_location {max-width:700px;} /* 지도확대창 */ .lp_socialLive {max-width:702px;} /* Social LIve 내부컨텐츠 */ .lp_allCategory .categoryList .cateItem { padding-left:15px; } .lp_allCategory, .lp_brandProduct { background-color:#fff; } /* Video Popup */ .video_wrap {position:relative; overflow:hidden;} .video_wrap .video_movie {max-width:640px; max-height:435px; height:auto; margin:15px auto;} .video_wrap .video_explain {display:none; margin-bottom:15px; padding:10px 0 20px 0; border-bottom:1px solid #ddd;} .video_wrap .video_tag {display:none; margin-bottom:15px;} .video_wrap .video_caption {overflow-y:scroll; max-width:640px; height:143px; padding:20px; border:1px solid #ddd; font-size:14px; line-height:22px;margin:0 auto;} @media \0screen {.video_wrap .video_caption {max-width:208px;}} /* @media all and (max-width:640px) { .video_wrap .video_movie {height:227px;} } @media all and (max-width:333px) { .video_wrap .video_movie {height:135px;} } */ /* Cooking Popup */ .cookingImg img {width:100%; height:auto;} /* Product List 공통 */ .prodList {*zoom:1; width:100%;} .main .prodList {display:inline-block; width:auto;} .prodList:after {content:""; display:block; clear:both;} .prodList>li.item {float:left; width:236px;} .prodList>li.item .prodItem {position:relative; width:235px; height:260px; background-color:#fff;} .prodList>li.item .prodItem:before {content:""; display:block; position:absolute; left:-1px; top:-1px; width:237px; height:261px; border:1px solid #e9e9e9;} .prodList>li.item .prodItem .prodTag_wrap {position:absolute; left:20px; top:20px; z-index:5; width:56px;} .prodList>li.item .prodItem .prodTag_wrap .prodTag {margin-bottom:7px;} .prodList>li.item .prodItem .prodImg {overflow:hidden; height:200px;} .prodList>li.item .prodItem .prodImg a {display:block; height:100%; padding:20px 35px 0; text-align:center;} .prodList>li.item .prodItem .prodImg a img {display:inline-block; width:100%; height:auto;} .prodList>li.item .prodItem .prodInfo {height:60px; padding:0 20px; text-align:center;} .prodList>li.item .prodItem .prodInfo h3 {font-family:"NotoSansLight"; font-size:15px; font-weight:normal; line-height:20px; color:#222; word-break:keep-all;} .prodList>li.item .prodItem .prodInfo a{display:block;} .prodList>li.item .prodItem .prodMenu_wrap {display:none; position:absolute; left:-1px; top:-1px; z-index:10; width:237px; height:261px;} .prodList>li.item .prodItem .prodMenu_wrap:after { content:""; display:block; position:absolute; left:0px; top:0px; width:100%; height:100%; background:url('/Images/Common/bg_black_alpha90.png') left top; } .prodList>li.item .prodItem:hover .prodMenu_wrap, .prodList>li.item .prodItem.on .prodMenu_wrap {display:block;} .prodList>li.item .prodItem .prodMenu_wrap .prodMenu {position:relative; z-index:20; padding:40px 15px;text-align:center;} .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dt {height:60px; margin-bottom:10px; font-family:"NotoSansRegular"; font-size:24px; line-height:28px; font-weight:normal; color:#fff;} .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd {padding-top:40px; background:url('/Images/Common/bg_prodMenu.png') center top no-repeat;} .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd .prodMenu_list {overflow:hidden; display:inline-block;} .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd .prodMenu_list li {float:left; width:48px; margin:0 6px;} .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd .prodMenu_list li a {display:block; padding-top:57px; font-family:"NotoSansRegular"; font-size:13px; color:#fff; background:url('/Images/Common/ico_btn_prodMenu.png') left top no-repeat;} .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd .prodMenu_list li a.btn_prodView {background-position:0 0;} .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd .prodMenu_list li a.btn_prodBuy {background-position:-61px 0;} .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd .prodMenu_list li a.btn_recipeView {background-position:-122px 0;} /* Recipe 공통 */ .recipeList {overflow:hidden;} .recipeList>li.item {float:left;} .recipeItem {position:relative; overflow:hidden;} .recipeItem .recipeImg {overflow:hidden;} .recipeItem .recipeImg a {display:block; height:100%; text-align:center;} .recipeItem .recipeImg a img {display:inline-block; width:auto; height:100%;} .recipeItem .recipeMenu_wrap { position:absolute; left:0px; bottom:0px; z-index:10; width:100%; height:43px; box-sizing:content-box; background:url('/Images/Common/bg_black_alpha70.png') left top; webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; } .recipeItem .recipeMenu_wrap .recipeMenu {position:relative; z-index:20; padding:10px 15px; text-align:center;} .recipeItem .recipeMenu_wrap .recipeMenu dt {height:60px; font-size:16px; line-height:20px; color:#fff;} .recipeItem .recipeMenu_wrap .recipeMenu dd {display:none; padding-top:35px; background:url('/Images/Common/bg_prodMenu.png') center top no-repeat;} .recipeItem .recipeMenu_wrap .recipeMenu dd a.btn_recipeView {display:inline-block; height:26px; padding-left:31px; font-size:14px; line-height:18px; color:#92d3f9; background:url('/Images/Common/ico_btn_recipeView.png') left bottom no-repeat;} .recipeItem .recipeMenu_wrap .recipeMenu dd a.btn_recipeView span {padding-bottom:5px; border-bottom:1px solid #7ab0d0;} .recipeItem:hover .recipeMenu_wrap, .recipeItem.on .recipeMenu_wrap {height:100%; background:url('/Images/Common/bg_black_alpha90.png') left top;} .recipeItem:hover .recipeMenu_wrap .recipeMenu, .recipeItem.on .recipeMenu_wrap .recipeMenu {padding-top:25px;} .recipeItem:hover .recipeMenu_wrap .recipeMenu dt, .recipeItem.on .recipeMenu_wrap .recipeMenu dt {font-size:20px; line-height:26px; text-align:center;} .recipeItem:hover .recipeMenu_wrap .recipeMenu dd, .recipeItem.on .recipeMenu_wrap .recipeMenu dd {display:block;} /*------------------------- Main -----------------------------*/ /* Main Section Common */ .main .section_wrap {position:relative;} .section_wrap.section_main02 {background:url('/Images/Main/bg_main_section02.jpg') center top no-repeat; background-size:cover;} .section_wrap.section_main04 {background:url('/Images/Main/bg_main_section04.jpg') center top no-repeat; background-size:cover;} .section_wrap.section_main05 {background:url('/Images/Main/bg_main_section05.gif') left top} .section_main {position:relative; max-width:1200px; margin:0 auto;} .section_main02 .section_main {min-height:670px;} .section_main03 .section_main {min-height:480px;} .section_main04 .section_main {min-height:509px;} .section_main05 .section_main {min-height:902px;} .main .section_wrap .section_header {display:inline-block; position:absolute; left:0px; top:70px; z-index:90; width:100%;} .main .section_wrap .section_header h2 {display:block; max-width:1200px; margin:0 auto; padding:0 10px;} .section_main02 .section_body {padding:130px 10px 20px 10px;} .section_main04 .section_body {padding:140px 10px 20px 10px;} .section_main05 .section_body {padding-top:160px;} /* Main Section01 - MainVisual */ .slider_mainVisual {overflow:hidden; width:100%; height:800px;} .slider_mainVisual .sliderPanel_wrap {display:block; width:100%;} .slider_mainVisual .sliderPanel_wrap .sliderPanel {position:relative; max-width:1200px; margin:0 auto;} .slider_mainVisual .sliderPanel_wrap.vedio .sliderPanel {height: 800px; max-width: 100%;} .slider_mainVisual .sliderPanel_wrap.vedio .sliderPanel .vedio_layout { width: 100%; height: 100%; object-fit: cover;} .slider_mainVisual .sliderPanel_wrap .sliderPanel a {display:block;} .slider_mainVisual .sliderPanel_wrap .sliderPanel img {margin:0 auto;} .section_main01 .slider_nav_wrap {position:absolute; left:0px; top:50%; z-index:111; width:100%;} .section_main01 .slider_nav {position:relative; max-width:1200px; margin:0 auto;} .section_main01 .slider_nav a.btn_slider_nav {display:block; position:absolute; top:0px; width:68px; height:68px; text-indent:-9999px; background:url('/Images/Common/bg_slider_control.png') 0 0 no-repeat;} .section_main01 .slider_nav a.btn_prev {left:10px; background-position:left 0;} .section_main01 .slider_nav a.btn_next {right:10px; background-position:right 0;} .section_main01 .slider_control {position:absolute; left:50%; bottom:32px; z-index:55; width:18px; height:18px; margin-left:-85px;} .section_main01 .slider_control a.btn_slider_control {display:inline-block; width:18px; height:19px; text-indent:-99999px;} .section_main01 .slider_control a.btn_play {background:url("/Images/Main/btn_play.png") center center no-repeat;} .section_main01 .slider_control a.btn_stop {background:url("/Images/Main/btn_stop.png") center center no-repeat;} /* 250519 비디오 스타일 */ .vedio_wrap { max-width: 100%; height: 100vh; transform: translateY(-140px); transition: all .3s;} .vedio_wrap .videoTag { width: 100%; height: auto; object-fit: cover;} @media screen and (max-width: 1700px) { .vedio_wrap { transform: unset;} .vedio_wrap .videoTag { height: 100%;} } @media screen and (max-width: 1472px) { .vedio_wrap { height: 800px;} } @media all and (max-width:768px) { .main #Container {padding-top:70px;} .main .section_wrap .section_header {top:40px;} .main .slider_nav_wrap {margin-top:-34px;} .slider_mainVisual .sliderPanel_wrap.vedio .sliderPanel {height: 100%;} .vedio_wrap { height: auto; transform: translateY(2px);} } @media all and (max-width:640px) { .main .section_header h2 img {width:auto; height:28px;} .section_main01 .slider_control {bottom:21px;} } @media all and (max-width:480px) { .section_main01 .slider_nav_wrap {top:auto; bottom:47px; margin-top:-17px;} .section_main01 .slider_nav a.btn_slider_nav {width:35px; height:35px; background:url('/Images/Common/bg_slider_control_sml.png') 0 0 no-repeat;} .section_main01 .slider_nav a.btn_prev {left:10px; background-position:left 0;} .section_main01 .slider_nav a.btn_next {right:10px; background-position:right 0;} } /* Main Section02 - Brand */ .slider_brand_wrap {position:relative; overflow:hidden; max-width:708px; margin:0 auto 10px;} .slider_brand_wrap .bx-viewport {overflow:visible !important;} .slider_brand {*zoom:1; overflow:hidden; height:170px; margin:0 auto;} .slider_brand:after {content:""; display:block; clear:both;} .slider_brand li {float:left;} .slider_brand li .brandItem { width:236px; height:170px; padding:30px 0; text-align:center; opacity:0.5; webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .slider_brand li .brandItem img {display:inline-block; width:auto; height:100%;} .slider_brand li.active .brandItem {padding:0px; opacity:1;} .slider_brand li.prev .brandItem {text-align:left;} .slider_brand li.next .brandItem {text-align:right;} .slider_brand_wrap .slider_nav_wrap {position:absolute; left:0px; top:50%; z-index:50; width:100%; margin-top:-34px;} .slider_brand_wrap .slider_nav {position:relative; max-width:360px; margin:0 auto;} .slider_brand_wrap .slider_nav a.btn_slider_nav {display:block; position:absolute; top:0px; width:68px; height:68px; text-indent:-9999px; background:url('/Images/Common/bg_slider_control.png') 0 0 no-repeat;} .slider_brand_wrap .slider_nav a.btn_prev {left:10px; background-position:left 0;} .slider_brand_wrap .slider_nav a.btn_next {right:10px; background-position:right 0;} .section_main02 .prodList_wrap {overflow:hidden; height:300px;} .section_main02 .prodList_wrap .productPanel .prodList {overflow:hidden; height:260px;} .section_main02 .prodList_wrap .productPanel .bx-wrapper .bx-pager {display:none; bottom:-30px;} @media all and (min-width:1024px) { .section_main02 .prodList_wrap .productPanel .bx-wrapper .bx-pager {display:none;} .section_main02 .prodList_wrap .productPanel .bx-wrapper .bx-controls-direction {display:none;} } @media all and (max-width:1024px) { .section_main02 .prodList_wrap .productPanel .bx-wrapper .bx-pager {display:block;} .section_main02 .prodList_wrap .productPanel .bx-wrapper .bx-controls-direction {display:block;} } @media all and (max-width:480px) { .slider_brand_wrap .slider_nav_wrap {margin-top:-17px;} .slider_brand_wrap .slider_nav a.btn_slider_nav {width:35px; height:35px; background:url('/Images/Common/bg_slider_control_sml.png') 0 0 no-repeat;} .slider_brand_wrap .slider_nav a.btn_prev {left:10px; background-position:left 0;} .slider_brand_wrap .slider_nav a.btn_next {right:10px; background-position:right 0;} } .productPanel {display:none;} .main .productPanel {text-align:center; width:100%;} .productPanel.on {display:block;} /* Main Section03 - Cooking&Story */ .section_main03 .slider_cookingStory {overflow:hidden; width:100%; height:580px;} .slider_cookingStory .sliderPanel_wrap {display:block; width:100%; height:100%;} .slider_cookingStory .sliderPanel_wrap .sliderPanel {position:relative; max-width:1200px; margin:0 auto; padding:50px 0;} .slider_cookingStory .sliderPanel_wrap .sliderPanel img {margin:0px auto;} .slider_cookingStory .sliderPanel_wrap .sliderPanel .sliderCaption {position:absolute; left:0px; top:38%; width:100%; text-align:center;} .slider_cookingStory .sliderPanel_wrap .sliderPanel .sliderCaption h4 {font-family:"NotoSansRegular"; font-size:35px; line-height:41px; color:#222;} .slider_cookingStory .sliderPanel_wrap .sliderPanel .sliderCaption a.goPage {display:inline-block; margin-top:25px; font-family:"NotoSansLight"; font-size:18px;} .slider_cookingStory .sliderPanel_wrap .sliderPanel .sliderCaption a.goPage span {display:inline-block; padding-bottom:8px; background:url('/Images/Common/bg_goPage_black.gif') left bottom repeat-x;} .section_main03 .slider_nav_wrap {position:absolute; left:0px; top:50%; z-index:50; width:100%;} .section_main03 .slider_nav {position:relative; max-width:1200px; margin:0 auto;} .section_main03 .slider_nav a.btn_slider_nav {display:block; position:absolute; top:0px; width:68px; height:68px; text-indent:-9999px; background:url('/Images/Common/bg_slider_control.png') 0 0 no-repeat;} .section_main03 .slider_nav a.btn_prev {left:10px; background-position:left 0;} .section_main03 .slider_nav a.btn_next {right:20px; background-position:right 0;} @media all and (max-width:480px) { .section_main03 .slider_nav_wrap {margin-top:-17px;} .slider_cookingStory .sliderPanel_wrap .sliderPanel .sliderCaption h4 {font-family:"NotoSansRegular"; font-size:26px; line-height:30px; color:#222;} .slider_cookingStory .sliderPanel_wrap .sliderPanel .sliderCaption a.goPage {display:inline-block; margin-top:20px; font-family:"NotoSansLight"; font-size:13px;} .section_main03 .slider_nav a.btn_slider_nav {width:35px; height:35px; background:url('/Images/Common/bg_slider_control_sml.png') 0 0 no-repeat;} .section_main03 .slider_nav a.btn_prev {left:10px; background-position:left 0;} .section_main03 .slider_nav a.btn_next {right:10px; background-position:right 0;} } /* Main Section04 - Dongwon F&B */ .dongwonFnb {*zoom:1; margin:0 auto;} .dongwonFnb:after {content:""; display:block; clear:both;} .dongwonFnb>li.item {position:relative; float:left; text-align:center;} .dongwonFnb>li.item .videoItem img {width:100%; height:auto;} .dongwonFnb>li.item .bannerItem {display:inline-block; height:148px;} .dongwonFnb>li.item .newsItem {posioverflow:hidden; width:295px; height:296px; margin:0 auto; padding:33px 20px 0 20px; text-align:left; background-color:#fff;} .dongwonFnb>li.item .newsItem h3 {margin-bottom:10px; font-family:"NotoSansRegular"; font-size:18px; color:#333;} .dongwonFnb>li.item .newsItem .articleLabel {left:inherit; right:20px;} @media all and (max-width:444px) { .dongwonFnb>li.item .newsItem .articleLabel {right:70px;} } @media all and (max-width:388px) { .dongwonFnb>li.item .newsItem .articleLabel {right:55px;} } @media all and (max-width:360px) { .dongwonFnb>li.item .newsItem .articleLabel {right:44px;} } @media all and (max-width:320px) { .dongwonFnb>li.item .newsItem .articleLabel {right:25px;} } .dongwonFnb>li.item .newsItem .newsArticle {padding-top:20px;} .dongwonFnb>li.item .newsItem .newsArticle dt.newsTit {overflow:hidden; height:50px;} .dongwonFnb>li.item .newsItem .newsArticle dt.newsTit h4 a {font-family:"NotoSansRegular"; font-size:16px; line-height:22px; color:#222;} .dongwonFnb>li.item .newsItem .newsArticle dd.newsCont {overflow:hidden; height:115px;} .dongwonFnb>li.item .newsItem .newsArticle dd.newsCont a {font-family:"NotoSansLight"; font-size:14px; line-height:18px; color:#555;} .dongwonFnb>li.item .newsItem .newsInfo {overflow:hidden; height:40px; border-top:1px solid #eaeaea; font-family:"NotoSansLight"; font-size:14px; line-height:38px; color:#555;} .dongwonFnb>li.item .newsItem .newsInfo .date {float:left;} .dongwonFnb>li.item .newsItem .newsInfo .readNum {display:inline-block; float:right; padding-left:24px; background:url('/Images/Common/ico_viewCount.gif') left center no-repeat;} @media all and (max-width:1024px) { .dongwonFnb {max-width:885px;} } @media all and (max-width:768px) { .dongwonFnb {max-width:590px;} } @media all and (max-width:610px) { .dongwonFnb>li.item {float:none; width:100%; margin-bottom:20px;} } /* Main Section05 - Social Live */ @media all and (max-width:768px) { .section_main05 .section_body {padding-top:135px;} } /*------------------------- Brand ----------------------------*/ /* Brand List */ .brandList_wrap {} .brandList {*zoom:1;} .brandList:after {content:""; display:block; clear:both;} .brandList li {float:left; overflow:hidden; width:236px; height:236px;} .brandList li a {display:block; position:relative; height:100%;} .brandList li a .caption {display:block; position:absolute; left:0px; bottom:0px; width:100%; height:75px; padding:0 30px; font-family:"NotoSansLight"; font-size:16px; linne-height:22px; color:#555; text-align:center;} @media all and (max-width:1024px) { .brandList_wrap.col12 {width:944px; margin:0 auto;} } @media all and (max-width:768px) { .brandList_wrap.col12 {width:708px;} } @media all and (max-width:640px) { .brandList_wrap.col12 {width:472px;} } @media all and (max-width:500px) { .brandList_wrap.col12 {width:236px;} } .slider_brandTab {overflow:hidden; max-width:1180px; margin:0 auto; padding:0 149px;} .slider_brandList {overflow:hidden; height:147px;} .slider_brandList li {float:left; width:147px;} .slider_brandList li a {display:block; position:relative; height:100%;} .slider_brandList li a span {display:none; position:absolute; left:0px; top:0px; z-index:2; width:100%; height:100%; padding-top:42%; text-align:center; font-family:"NotoSansRegular"; font-size:18px; color:#fff;} .slider_brandList li a:after {content:""; display:none; position:absolute; left:0px; top:0px; z-index:1; width:100%; height:100%; background:url('/Images/Common/bg_black_alpha75.png') left top;} .slider_brandList li:hover a:after, .slider_brandList li.on a:after {display:block;} .slider_brandList li:hover a span, .slider_brandList li.on a span {display:block; } .slider_brandList li a img {width:100%; height:auto;} .slider_brandTab .bx-wrapper .bx-controls-direction a {display:block; width:68px; height:68px; margin-top:-34px; text-indent:-9999px; background:url('/Images/Brand/ico_sliderBrand_nav.png') left top no-repeat; background-size:auto 100%;} .slider_brandTab .bx-wrapper .bx-controls-direction a.bx-prev {left:-108px; background-position:left top;} .slider_brandTab .bx-wrapper .bx-controls-direction a.bx-next {right:-108px; background-position:right top;} @media all and (max-width:1024px){ .slider_brandTab {overflow:hidden; padding:0 80px;} .slider_brandTab .bx-wrapper .bx-controls-direction a {width:40px; height:40px; margin-top:-20px;} .slider_brandTab .bx-wrapper .bx-controls-direction a.bx-prev {left:-60px;} .slider_brandTab .bx-wrapper .bx-controls-direction a.bx-next {right:-60px;} } @media all and (max-width:768px){ .slider_brandTab {overflow:hidden; padding:0 50px;} .slider_brandTab .bx-wrapper .bx-controls-direction a {width:30px; height:30px; margin-top:-15px;} .slider_brandTab .bx-wrapper .bx-controls-direction a.bx-prev {left:-40px;} .slider_brandTab .bx-wrapper .bx-controls-direction a.bx-next {right:-40px;} .slider_brandList li a span {font-size:14px;} } @media all and (max-width:640px){ .slider_brandList li a span {font-size:13px;} } .brandVisual {margin-bottom:50px;} .brandVisual .brandImg_wrap {position:relative; max-width:1180px; margin:0 auto;} .brandVisual .brandImg_wrap .brandImg {display:block;} .brandVisual .brandImg_wrap .brandImg img {display:block; width:100%; height:auto;} .brandVisual .brandImg_wrap .brandCaption {position:absolute; left:0px; bottom:0px; width:100%; min-height:120px;} .brandVisual .brandImg_wrap .brandCaption:after {content:""; position:absolute; left:0px; top:0px; width:100%; height:100%; background:url('/Images/Common/bg_black_alpha75.png') left top;} .brandVisual .brandImg_wrap .brandCaption .summary {position:relative; z-index:1; margin-right:250px; padding:40px; min-height:190px; font-family:"NotoSansLight"; font-size:18px; color:#fff; line-height:24px;} .brandVisual .brandImg_wrap .brandCaption .btn {position:absolute; right:40px; top:40px; z-index:1;} .brandVisual .brandImg_wrap .brandCaption .btn.blog {top:100px; border:1px solid rgba(255,255,255,0.3);} @media all and (max-width:768px){ .brandVisual .brandImg_wrap .brandCaption {position:static; padding-bottom:65px; background-color:#333333;} .brandVisual .brandImg_wrap .brandCaption:after {display:none;} .brandVisual .brandImg_wrap .brandCaption .summary {margin-right:0px; padding:20px; font-size:16px; line-height:22px;} .brandVisual .brandImg_wrap .brandCaption .btn {top:auto; right:20px; bottom:20px;} .brandVisual .brandImg_wrap .brandCaption .btn.blog {top:auto; bottom:20px; right:220px;} } .brandContents {position:relative; max-width:1200px; margin:0 auto 50px;} .brandContents .h3_wrap {position:relative; overflow:hidden; height:30px; margin-bottom:15px;} .brandContents .h3_wrap h3 {display:inline-block; font-family:"NotoSansRegular"; font-size:26px; font-weight:normal; color:#222; vertical-align:middle;} .brandContents .brand_product_total a.btn_goMore {display:inline-block; position:absolute; top: 0; left:170px; height:20px; margin:10px 0px 0 30px; padding-right:26px; color:#027ac2; background:url('/Images/Common/ico_btn_plus_blue2.png') right center no-repeat;} .brandContents .bx-wrapper .bx-controls-direction {display:inline-block; position:absolute; right:5px; top:-40px; height:22px; overflow:hidden; background:url('/Images/Common/ico_slider_control_black.png') center top no-repeat;} .brandContents .bx-wrapper .bx-controls-direction a {position:static; float:left; display:block; width:13px; height:22px; margin-top:0px; text-indent:-9999px; background:url('/Images/Common/ico_slider_control_black.png') left top no-repeat;} .brandContents .bx-wrapper .bx-controls-direction a.bx-prev {margin-right:13px; background-position:left top;} .brandContents .bx-wrapper .bx-controls-direction a.bx-prev.disabled {background-position:left -32px;} .brandContents .bx-wrapper .bx-controls-direction a.bx-next {margin-left:12px; background-position:right top;} .brandContents .bx-wrapper .bx-controls-direction a.bx-next.disabled {background-position:right -32px;} .brandContents .brand_prodList {position:relative; width:1182px; height:237px; margin-bottom:60px;} .brandContents .brand_prodList .prodList {height:237px;} .brandContents .brand_prodList .prodList>li.item {width:236px;} .brandContents .brand_prodList .prodList .prodItem {width:235px; height:235px;} .brandContents .brand_prodList .prodList>li.item .prodItem:before {width:237px; height:237px;} .brandContents .brand_prodList .prodList>li.item .prodItem .prodImg {height:235px;} .brandContents .brand_prodList .prodList>li.item .prodItem .prodImg a {padding-top:35px;} .brandContents .brand_prodList .prodList>li.item .prodItem .prodMenu_wrap {width:237px; height:237px; box-sizing:content-box;} .brandContents .brand_prodList .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dt {height:56px; font-size:20px; line-height:26px;} .brandContents .brand_prodList .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd a.btn_prodView {display:inline-block; height:26px; padding-left:31px; font-size:14px; line-height:18px; color:#92d3f9; background:url('/Images/Common/ico_btn_prodView.png') left bottom no-repeat;} .brandContents .brand_prodList .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd a.btn_prodView span {padding-bottom:5px; border-bottom:1px solid #7ab0d0;} .brandContents .brand_prodList .bx-wrapper {max-width:1182px !important;} .brandContents .brand_prodList .bx-viewport {padding:1px;} @media all and (max-width:1024px){ .brandContents .brand_prodList {width:auto;} } @media all and (max-width:480px) { .brandContents .h3_wrap a.btn_goMore {margin-left:20px; text-indent:-9999px;} .brandContents .bx-wrapper .bx-controls-direction {top:35%; right:0px; width:100%; overflow:visible; background:none;} .brandContents .bx-wrapper .bx-controls-direction a.bx-prev {float:none; position:absolute; left:-25px; margin-right:0px;} .brandContents .bx-wrapper .bx-controls-direction a.bx-next {float:none; position:absolute; right:-25px; margin-left:0px;} .brandVisual .brandImg_wrap .brandCaption .btn.blog {right:auto;left:20px;} } .brandContents .brand_contents {position:relative; overflow:hidden;} .brandContents .brand_contents:after {display:block;clear:both;content:'';} .brandContents .brand_contents > div { float:left; overflow:hidden; margin-left:66px; } .brandContents .brand_contents > div:first-child { margin-left:0; } .brandContents .brand_recipe.recipe1 {width:auto; max-width:504px;} .brandContents .brand_recipe.recipe2 {width:247px;} .brandContents .brand_recipeList {position:relative; height:163px;} .brandContents .recipeList {height:163px;} .brandContents .recipeList>li.item {width:247px;} .brandContents .recipeList>li.item .recipeItem {width:247px; height:163px;} .brandContents .brand_video {width:295px;} .brandContents .brand_video .h3_wrap {padding:0px;} .brandContents .brand_video .slider_nav {right:0px;} .brandContents .brand_videoList {position:relative; width:295px;} .brandContents .videoList {overflow:hidden; height:163px;} .brandContents .videoList>li.item {float:left;} .brandContents .videoList>li.item .videoItem {position:relative; max-width:295px; height:163px;} .brandContents .videoList>li.item .videoItem a {overflow:hidden; display:block; height:100%;} .brandContents .videoList>li.item .videoItem a img {width:auto; height:100%;} @media all and (max-width:1180px){ .brandContents .brand_recipe.recipe1 { max-width:none; width:247px; } } @media all and (max-width:1024px){ .brandContents .brand_product, .brandContents .brand_contents {padding:0 10px;} } @media all and (max-width:768px){ .brandContents .brand_recipe.recipe1 { width:100%; } .brandContents .brand_contents > div { margin:20px 0; float:none; } } @media all and (max-width:600px){ .brandContents .brand_product, .brandContents .brand_contents {padding:0 30px;} .brandContents .brand_recipe.recipe1, .brandContents .brand_recipe.recipe2, .brandContents .brand_contents .brand_video { width:247px; overflow:visible; } .brandContents .brand_videoList { width:100%; } } @media all and (max-width:480px){ .brandContents .brand_recipe.recipe1 { width:247px; } } /*------------------------ Product --------------------------*/ .prodList_wrap {} @media all and (max-width:1024px) { .prodList_wrap {width:944px; margin:0 auto;} } @media all and (max-width:768px) { .prodList_wrap {width:708px;} } @media all and (max-width:730px) { .prodList_wrap {width:472px;} } @media all and (max-width:500px) { .prodList_wrap {width:235px;} } /* 전체 카테고리 보기 */ .categoryList {overflow:hidden; padding:30px 0; border-top:1px solid #e4e4e4;} .categoryList:first-child {padding-top:10px; border-top:0px;} .categoryList>li.item {float:left; width:20%;} .categoryList>li.item .cateItem dt {margin-bottom:5px; font-family:"NotoSansRegular"; font-size:18px; line-height:40px; color:#222;} .categoryList>li.item .cateItem dd {padding-left:48px;} .categoryList>li.item .cateItem dd .cateItemList li {margin-bottom:5px;} .categoryList>li.item .cateItem dd .cateItemList li a {font-family:"NotoSansLight"; font-size:14px; color:#555;} .categoryList>li.item .cateItem dd .cateItemList li a:hover {color:#0079c1; text-decoration:underline;} @media all and (max-width:1024px) { .categoryList>li.item {width:25%; min-height:160px; margin-bottom:20px;} } @media all and (max-width:768px) { .categoryList>li.item {width:33.33333%;} } @media all and (max-width:640px) { .categoryList>li.item {width:50%;} } @media all and (max-width:480px) { .categoryList>li.item {width:100%; min-height:auto;} } /* 브랜드별 제품보기 */ .lp_brandProduct .lp_body {padding:0px;} .lp_brandProduct .brandProdList {overflow:hidden;} .lp_brandProduct .brandProdList>li {float:left; width:12.5%;} .lp_brandProduct .brandProdList>li a {display:block;} .lp_brandProduct .brandProdList>li a img {width:100%; height:auto;} @media all and (max-width:1024px) { .lp_brandProduct .brandProdList>li{width:25%;} } @media all and (max-width:768px) { .lp_brandProduct .brandProdList>li {width:33.33333%;} } @media all and (max-width:640px) { .lp_brandProduct .brandProdList>li {width:50%;} } /* Product View */ .prodInfo_wrap {overflow:hidden; border-top:2px solid #333;} .prodInfo_wrap .prodImg {position:relative; float:left; width:350px; height:350px; margin:0 auto; padding:50px;} .prodInfo_wrap .prodImg img {width:100%; height:auto;} .prodInfo_wrap .prodImg .prodTag_wrap {position:absolute; left:20px; top:20px; z-index:5; width:56px;} .prodInfo_wrap .prodImg .prodTag_wrap .prodTag {margin-bottom:7px;} .prodInfo_wrap .prodInfo {position:relative; float:left; width:829px; padding:49px 10px 50px 50px; border-left:1px solid #c1c1c1;} .prodInfo_wrap .prodInfo .prodDesc {width:450px;} .prodInfo_wrap .prodInfo .prodDesc h2.prodTit {margin-bottom:20px; font-family:"NotoSansRegular"; font-size:30px; color:#222;} .prodInfo_wrap .prodInfo .prodDesc .prodSummary {margin-bottom:15px; font-family:"NotoSansLight"; font-size:15px; line-height:24px; color:#222;} .prodInfo_wrap .prodInfo .prodSpec {position:absolute; right:0px; top:25px; width:290px;} .table_row_spec {border-top:1px solid #c1c1c1; border-left:1px solid #c1c1c1; border-right:1px solid #c1c1c1;} .table_row_spec th {height:63px; padding-left:18px; border-bottom:1px solid #c1c1c1; font-size:16px; text-align:left;} .table_row_spec td {height:63px; border-bottom:1px solid #c1c1c1; font-size:14px; line-height:20px; text-align:left;} .ico_prodSpec {display:inline-block; height:22px; padding-left:27px; line-height:22px; background:url('/Images/Common/ico_prodSpec.gif') left top no-repeat;} .ico_prodSpec.ico_type {background-position:0px 0px;} .ico_prodSpec.ico_weight {background-position:0px -30px;} .ico_prodSpec.ico_calorie {background-position:0px -60px;} .ico_prodSpec.ico_expire {background-position:0px -90px;} .prodInfo_wrap .tag_wrap {margin-top:43px;} .prodSpec .btn-origin { margin-bottom:10px; } .prodSpec .btn-origin, .prodSpec .btn-origin a { display:inline-block; width:100%; padding:0; } .prodSpec .btn-origin a { height:35px; line-height:35px; color:#fff; text-align:center; background-color:#0079c0; } .prodSpec .btn-origin a em { display:inline-block; position:relative; padding:0 25px 0 0; text-align:left; font-size:1.05rem; } .prodSpec .btn-origin a em:after { display:inline-block; position:absolute; width:6px; height:100%; top:0; right:0; background:url('/Images/Common/ico_btn_arrow_white.png') 0 center no-repeat; content:''; } .prodSpec .btn-origin a:hover, .prodSpec .btn-origin a:focus { background-color:#004e96; } @media all and (max-width:1024px) { .prodInfo_wrap .prodImg {width:40%; height:auto;} .prodInfo_wrap .prodInfo {width:60%;} .prodInfo_wrap .prodInfo .prodDesc {width:auto;} .prodInfo_wrap .prodInfo .prodSpec {position:static; width:100%; margin-bottom:20px;} } @media all and (max-width:640px) { .prodInfo_wrap .prodImg {float:none; width:350px;} .prodInfo_wrap .prodInfo {width:100%; border-left:0px; padding:20px;} } @media all and (max-width:360px) { .prodInfo_wrap .prodImg {width:100%;} .prodInfo_wrap .prodInfo {padding:10px;} } /* 연관 상품 */ .relateProduct_wrap {position:relative; overflow:hidden; padding:45px 40px; border:1px solid #c1c1c1; background-color:#f0f0f0;} .relateProduct_wrap .h3_wrap {position:relative; overflow:hidden; height:30px; margin-bottom:15px; padding:0 5px;} .relateProduct_wrap .h3_wrap h3 {display:inline-block; font-family:"NotoSansRegular"; font-size:26px; font-weight:normal; color:#222; vertical-align:middle;} .relateProduct_wrap .recipeMore a.btn_goMore {display:inline-block; position:absolute; top:0; right:0; height:20px; margin-top:10px; padding-right:26px; color:#027ac2; background:url('/Images/Common/ico_btn_plus_blue2.png') right center no-repeat;} .relateProduct_wrap .prodList {overflow:hidden; height:210px;} .relateProduct_wrap .prodList>li.item {width:210px;} .relateProduct_wrap .prodList>li.item .prodItem {width:210px; height:210px;} .relateProduct_wrap .prodList>li.item .prodItem:before {display:none;} .relateProduct_wrap .prodList>li.item .prodItem .prodImg {width:210px; height:210px;} .relateProduct_wrap .prodList>li.item .prodItem .prodImg a {padding:23px;} .relateProduct_wrap .prodList>li.item .prodItem .prodMenu_wrap {left:0px; top:0px; width:100%; height:100%;} .relateProduct_wrap .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dt {height:56px; font-size:18px; line-height:26px;} .relateProduct_wrap .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd a.btn_prodView {display:inline-block; height:26px; padding-left:31px; font-size:14px; line-height:18px; color:#92d3f9; background:url('/Images/Common/ico_btn_prodView.png') left bottom no-repeat;} .relateProduct_wrap .prodList>li.item .prodItem .prodMenu_wrap .prodMenu dd a.btn_prodView span {padding-bottom:5px; border-bottom:1px solid #7ab0d0;} .relateProduct_wrap .bx-wrapper .bx-controls-direction {display:inline-block; position:absolute; right:5px; top:-40px; height:22px; overflow:hidden; background:url('/Images/Common/ico_slider_control_black.png') center top no-repeat;} .relateProduct_wrap .bx-wrapper .bx-controls-direction a {position:static; float:left; display:block; width:13px; height:22px; margin-top:0px; text-indent:-9999px; background:url('/Images/Common/ico_slider_control_black.png') left top no-repeat;} .relateProduct_wrap .bx-wrapper .bx-controls-direction a.bx-prev {margin-right:13px; background-position:left top;} .relateProduct_wrap .bx-wrapper .bx-controls-direction a.bx-prev.disabled {background-position:left -32px;} .relateProduct_wrap .bx-wrapper .bx-controls-direction a.bx-next {margin-left:12px; background-position:right top;} .relateProduct_wrap .bx-wrapper .bx-controls-direction a.bx-next.disabled {background-position:right -32px;} @media all and (max-width:480px) { .relateProduct_wrap .bx-wrapper .bx-controls-direction {top:40%; right:0px; width:100%; overflow:visible; background:none;} .relateProduct_wrap .bx-wrapper .bx-controls-direction a.bx-prev {float:none; position:absolute; left:-25px; margin-right:0px;} .relateProduct_wrap .bx-wrapper .bx-controls-direction a.bx-next {float:none; position:absolute; right:-25px; margin-left:0px;} } /* 제품상세 연관제품 */ .relateProduct_wrap .relateProduct {margin-right:220px;} .relateProduct_wrap .relateProduct .relate_prodList {position:relative; max-width:880px; height:210px;} .relateProduct_wrap .relateRecipe {position:absolute; top:45px; right:40px; width:210px;} .relateProduct_wrap .relateRecipe .h3_wrap {padding:0px;} .relateProduct_wrap .relateRecipe .recipeItem {height:210px;} .relateProduct_wrap .relateRecipe .recipeItem .recipeImg {height:210px;} .relateProduct_wrap .relateRecipe .recipeItem:hover .recipeMenu_wrap .recipeMenu, .relateProduct_wrap .relateRecipe .recipeItem.on .recipeMenu_wrap .recipeMenu {padding-top:40px;} @media all and (max-width:1024px) { .relateProduct_wrap .relateProduct .relate_prodList {max-width:660px;} } @media all and (max-width:768px) { .relateProduct_wrap .relateProduct {margin-right:240px;} } @media all and (max-width:578px) { .relateProduct_wrap .relateProduct {margin-right:0px;} .relateProduct_wrap .relateRecipe {position:static; margin-top:30px;} } /* 쿠킹스토리 연관제품 */ .relateProduct_wrap .brand_product .h3_wrap a.btn_goMore {display:inline-block; height:20px; margin:10px 0px 0 30px; padding-right:26px; font-size:14px; line-height:20px; color:#027ac2; background:url('/Images/Common/ico_btn_plus_blue2.png') right center no-repeat;} .relateProduct_wrap .brand_prodList {position:relative; max-width:1100px; height:210px; margin-bottom:60px;} .relateProduct_wrap .brand_recipe {} .relateProduct_wrap .brand_recipeList {position:relative; max-width:1100px; height:175px;} .relateProduct_wrap .brand_recipeList .recipeList {height:175px;} .relateProduct_wrap .brand_recipeList .recipeList>li.item {width:265px;} .relateProduct_wrap .brand_recipeList .recipeList>li.item .recipeItem {width:265px; height:175px;} .relateProduct_wrap .brand_recipeList .recipeList>li.item .recipeItem .recipeImg {width:265px; height:175px;} @media all and (max-width:480px) { .relateProduct_wrap .brand_product .h3_wrap a.btn_goMore {margin-left:20px; text-indent:-9999px;} } /* 상품상세 특징 */ .feature_list {overflow:hidden;} .feature_list>li {float:left; width:33.33333%;} .feature_list>li .featureItem {height:420px; margin:10px; padding:40px 35px; border:1px solid #047ac3;} .feature_list>li .featureItem .itemImg {margin-bottom:30px; text-align:center;} .feature_list>li .featureItem dl {text-align:center;} .feature_list>li .featureItem dt {margin-bottom:25px; font-family:"NotoSansRegular"; font-size:24px; color:#333;} .feature_list>li .featureItem dd {font-family:"NotoSansLight"; font-size:16px; line-height:24px; color:#555; word-break:keep-all;} @media all and (max-width:768px) { #ProductInfo .table_wrap {margin-left:0.8333%; margin-right:0.8333%;} .feature_list>li {width:50%;} .feature_list>li .featureItem {margin:1.96666%;} } @media all and (max-width:680px) { .feature_list>li {width:100%;} .feature_list>li .featureItem {height:auto; margin:10px 0.8333%;} } /*-------------------- 쿠킹 & 스토리 ---------------------*/ /* Dongwon Story */ .promotionList {overflow:hidden;} .promotionList>li.item {float:left; margin:0 10px 20px 10px;} .promotionItem {display:block; width:380px; height:470px; padding:30px; border:1px solid #0078c2; background-color:#fff;} .promotionItem .promotionHeader {position:relative; *zoom:1; margin-bottom:30px; border-bottom:2px solid #0078c2;} .promotionItem .promotionHeader:after {content:""; display:block; clear:both;} .promotionItem .promotionHeader h2 {argin-bottom:15px; font-family:"NotoSansRegular"; font-size:24px; color:#333;} .promotionItem .promotionHeader .selectBox {position:absolute; right:0px; top:-5px;} .promotionItem .article {position:relative; width:100%; min-height:330px;} .promotionItem .articleImg {overflow:hidden; max-height:160px; margin-bottom:10px;} .promotionItem .articleImg img {width:100%; height:auto;} .promotionItem .articleTit {margin-bottom:5px;} .promotionItem .articleTit h3 a {font-family:"NotoSansRegular"; font-size:17px; line-height:24px; color:#222;} .promotionItem .articleBody {width:100%; padding-bottom:50px; font-family:"NotoSansLight"; font-size:14px; line-height:24px; color:#666;} .promotionItem .articleFoot {position:absolute; left:0px; bottom:0px; overflow:hidden; width:100%; border-top:1px solid #eaeaea; padding-top:15px; font-size:14px; color:#555;} .promotionItem .articleFoot .date {float:left;} .promotionItem .slider_wrap {width:230px; position:relative; margin:0 auto;} .promotionItem .slider_wrap .bx-wrapper .bx-controls-direction a {display:block; width:20px; height:34px; margin-top:-17px; background:url('/Images/Common/ico_slider_nav.png') left top no-repeat;} .promotionItem .slider_wrap .bx-wrapper .bx-controls-direction a.bx-prev {left:-44px; background-position:left -40px;} .promotionItem .slider_wrap .bx-wrapper .bx-controls-direction a.bx-prev.disabled {background-position:left top;} .promotionItem .slider_wrap .bx-wrapper .bx-controls-direction a.bx-next {right:-44px; background-position:right -40px;} .promotionItem .slider_wrap .bx-wrapper .bx-controls-direction a.bx-next.disabled {background-position:right top;} .promotionItem .slider_wrap .sliderList {overflow:hidden; height:330px;} .promotionItem .sliderList li.item {float:left;} .promotionItem .sliderList li.item .slideItem {width:230px; height:330px;} .promotionItem .sliderList .imgItem {margin-bottom:18px;} .promotionItem .sliderList .imgItem .itemImg {overflow:hidden; width:100%; height:127px;} .promotionItem .sliderList .imgItem .itemImg a {display:block; height:100%;} .promotionItem .sliderList .imgItem .itemImg a img {width:auto; height:100%;} .promotionItem .sliderList .imgItem .itemCaption {margin-top:8px; font-family:"NotoSansRegular"; font-size:16px; color:#222; text-align:center;} .promotionItem .slider_wrap2 {position:relative;} .promotionItem .slider_wrap2 .bx-wrapper .bx-controls-direction {display:inline-block; position:absolute; right:0px; top:-75px; height:22px; overflow:hidden; background:url('/Images/Common/ico_slider_control_black.png') center top no-repeat;} .promotionItem .slider_wrap2 .bx-wrapper .bx-controls-direction a {position:static; float:left; display:block; width:13px; height:22px; margin-top:0px; text-indent:-9999px; background:url('/Images/Common/ico_slider_control_black.png') left top no-repeat;} .promotionItem .slider_wrap2 .bx-wrapper .bx-controls-direction a.bx-prev {margin-right:13px; background-position:left top;} .promotionItem .slider_wrap2 .bx-wrapper .bx-controls-direction a.bx-prev.disabled {background-position:left -32px;} .promotionItem .slider_wrap2 .bx-wrapper .bx-controls-direction a.bx-next {margin-left:12px; background-position:right top;} .promotionItem .slider_wrap2 .bx-wrapper .bx-controls-direction a.bx-next.disabled {background-position:right -32px;} .promotionItem .slider_wrap2 .sliderList2 {overflow:hidden; height:340px;} /*.promotionItem .sliderList2 li.item {float:left;}*/ .promotionItem .sliderList2 li.item .slideItem {height:340px;} .promotionItem .sliderList2 .slideItem .videoSummary {margin-bottom:20px; font-family:"NotoSansLight"; font-size:16px; line-height:24px; color:#333; text-align:center;} .promotionItem .sliderList2 .slideItem .videoItem {border-top:1px solid #c1c1c1; border-left:1px solid #c1c1c1; border-right:1px solid #c1c1c1;} .promotionItem .sliderList2 .slideItem .videoItem li {border-bottom:1px solid #c1c1c1;} .promotionItem .sliderList2 .slideItem .videoItem li a {display:block; padding:20px 63px; font-family:"NotoSansRegular"; font-size:18px; line-height:30px; color:#222;} .promotionItem .sliderList2 .slideItem .videoItem li a span.ico_video {display:inline-block; width:40px; height:30px; background:url('/Images/Story/ico_video.gif') left center no-repeat; vertical-align:middle;} .promotionItem .sliderList2 .slideItem .videoItem li a span.en {font-family:"NotoSansLight"; font-size:15px;} .promotionItem .sliderList2 .slideItem .brochureItem li {margin-top:8px;} .promotionItem .sliderList2 .slideItem .brochureItem li:first-child {margin-top:0px;} .promotionItem .sliderList2 .slideItem .brochureItem li a {display:block; position:relative; height:73px; padding-left:129px; border:1px solid #c1c1c1; font-family:"NotoSansRegular"; font-size:18px; line-height:73px; color:#222;} .promotionItem .sliderList2 .slideItem .brochureItem li a span.ico_pdf {position:absolute; left:-1px; top:-1px; display:inline-block; width:73px; height:73px; background:url('/Images/Story/ico_download_pdf.gif') left top no-repeat;} .promotionItem .sliderList2 .slideItem .brochureItem li a span.en {font-family:"NotoSansLight"; font-size:15px;} @media all and (max-width:1024px) { .promotionList_wrap {max-width:800px; margin:0 auto;} } @media all and (max-width:768px) { .promotionList_wrap {max-width:400px;} } @media all and (max-width:420px) { .promotionList_wrap {max-width:300px;} .promotionList>li.item {float:none; margin:0 0 20px 0;} .promotionItem {width:300px; height:auto;} .promotionItem .slider_wrap .bx-wrapper .bx-controls-direction a.bx-prev {left:-27px;} .promotionItem .slider_wrap .bx-wrapper .bx-controls-direction a.bx-next {right:-27px;} .promotionItem .sliderList2 .slideItem {height:auto;} .promotionItem .sliderList2 .slideItem .videoItem li a {padding:20px;} .promotionItem .sliderList2 .slideItem .brochureItem li a {padding-left:85px;} } /* Cooking Story */ .bestRecipe_wrap {margin-bottom:65px;} .bestRecipe {display:block; position:relative; overflow:hidden; height:190px;} .bestRecipe .caption_wrap {display:block; position:absolute; z-index:1; top:0px; right:0px; width:410px; height:100%;} .bestRecipe .caption_wrap:before {content:""; display:block; position:absolute; left:0px; top:0px; z-index:-1; width:100%; height:100%; background:url('/Images/Common/bg_white_alpha75.png') left top;} .bestRecipe .caption_wrap .caption {display:table-cell; height:190px; padding:30px 48px; vertical-align:middle;} .bestRecipe .caption_wrap .caption strong {display:block; margin-bottom:10px; font-family:"NotoSansRegular"; font-size:30px; line-height:36px; color:#222; font-weight:normal;} .bestRecipe .caption_wrap .caption a.goView {font-size:17px; color:#222;} .bestRecipe .caption_wrap .caption a.goView span {padding-bottom:3px; border-bottom:1px solid #6c6966;} .checkList {overflow:hidden; width:100%;} .checkList li {float:left; width:12.5%; margin:5px 0;} .checkList li .checkBox {position:relative; height:72px; margin:0 5px;} .checkList li .checkBox label {display:inline-table; position:absolute; left:0px; top:0px; z-index:2; width:100%; height:100%; border:1px solid #c1c1c1; cursor:pointer; background-color:#fff;} .checkList li .checkBox label span {display:table-cell; height:58px; padding:5px 15px; font-family:"NotoSansRegular"; font-size:16px; color:#222; line-height:18px; text-align:center; vertical-align:middle;} .checkList li .checkBox label.on {border:7px solid #0079c1;} .board_search.searchRecipe .boardColD label {padding-right:10px;} .posterImg img {width:100%; height:auto;} @media all and (max-width:1024px){ .board_search.searchRecipe {display:block;} .board_search.searchRecipe .boardColD {display:block; width:100%; padding-left:80px;} .board_search.searchRecipe .boardColD:first-child {margin-bottom:10px;} .board_search.searchRecipe .boardColD>label {position:absolute; left:0px; top:0px; display:inline-block; width:80px; line-height:40px;} .board_search.searchRecipe .boardColD.w293 {width:100%;} } @media all and (max-width:768px){ .bestRecipe .caption_wrap {width:50%;} .checkList li {width:25%;} .checkList li .checkBox {height:60px; margin:0 3px;} .checkList li .checkBox label span {height:50px; font-size:14px; line-height:16px;} .checkList li .checkBox label.on {border:5px solid #0079c1;} .board_search.searchRecipe .boardColD {padding-left:70px;} .board_search.searchRecipe .boardColD>label {width:70px;} .board_search.searchRecipe .boardColD select {width:100%;} } @media all and (max-width:640px){ .bestRecipe .caption_wrap .caption {padding:20px;} .bestRecipe .caption_wrap .caption strong {font-size:24px; line-height:30px;} .bestRecipe .caption_wrap .caption a.goView {font-size:14px;} .boardRow.checkRecipe {display:block;} .boardRow.checkRecipe .boardColH {display:block; height:auto; padding:10px 0 10px 5px;} } @media all and (max-width:480px){ .bestRecipe .caption_wrap {width:55%;} .checkList li .checkBox {height:37px; margin:0 3px;} .checkList li .checkBox label span {height:31px; font-size:11px; line-height:14px; padding:4px 6px;} .checkList li .checkBox label.on {border:3px solid #0079c1;} } /* Recipe 상세 */ .recipeInfo_wrap {position:relative; overflow:hidden; border-top:2px solid #222; border-bottom:1px solid #c1c1c1;} .recipeInfo_wrap .recipeImg {float:left; overflow:hidden; width:50%; text-align:center;} .recipeInfo_wrap .recipeImg img {width:100%; height:auto;} .recipeInfo_wrap .recipeInfo {float:left; width:50%; min-height:390px; padding:40px 20px 20px 50px; border-left:1px solid #c1c1c1;} .recipeInfo_wrap .recipeInfo h2 {margin-bottom:20px; font-family:"NotoSansRegular"; font-size:30px; color:#222;} .recipeInfo_wrap .recipeInfo .recipeSummary {margin-bottom:10px; font-family:"NotoSansLight"; font-size:15px; color:#222;} .recipeInfo_wrap .recipeSpec {min-height:155px; margin-bottom:20px;} .table_row_recipe th {height:32px; padding:6px 0 5px; font-size:15px; line-height:22px; color:#222; text-align:left; vertical-align:top;} .table_row_recipe td {height:32px; padding:5px 0; font-size:15px; line-height:22px; color:#555; text-align:left; vertical-align:middle;} .ico_recipeSpec {display:inline-block; height:23px; padding-left:27px; line-height:22px; background:url('/Images/Common/ico_recipeSpec.gif') left center no-repeat;} .ico_recipeSpec.ico_level {background-position:0px 0px;} .ico_recipeSpec.ico_time {background-position:0px -32px;} .ico_recipeSpec.ico_material {background-position:0px -64px;} .recipeInfo_wrap .recipeEval {margin-bottom:20px; font-size:14px; color:#555;} .recipeInfo_wrap .recipeEval .goodNum {display:inline-block; height:20px; padding-left:25px; font-family:"NotoSansRegular"; font-size:14px; color:#555; background:url('/Images/Common/ico_good.gif') left top no-repeat;} .recipeInfo_wrap .recipeEval .btn_good {margin-left:5px;} @media all and (max-width:1024px){ .recipeInfo_wrap .recipeImg {float:none; width:auto; padding:0px;} .recipeInfo_wrap .recipeInfo {float:none; width:auto; padding:45px 20px 20px; border-left:0px;} } @media all and (max-width:768px){ .recipeInfo_wrap .recipeInfo {padding:45px 10px 20px;} } @media all and (max-width:480px){ .recipeInfo_wrap .recipeEval .btn_good {margin-top:10px; margin-left:0px;} } /* 조리과정 */ .cookFlowList_wrap {padding-top:20px; background:url('/Images/Common/bg_line_dot.gif') left top repeat-x;} .cookFlowList {display:inline-table; width:100%;} .cookFlowList li.item {display:table-row; width:100%;} .cookFlowList li.item .cookItem {display:table-cell; position:relative; width:50%; height:163px; padding-bottom:40px;} .cookFlowList li.item .cookItem .cookImg {display:block; position:absolute; left:0px; top:0px; width:247px; text-align:center;} .cookFlowList li.item .cookItem .cookDesc {min-height:163px; margin-left:247px; padding:0 20px 10px 15px; font-size:15px; line-height:24px; color:#555;} .cookFlowList li.item .cookItem .cookItemLabel {position:absolute; left:10px; top:10px; z-index:1; width:47px; height:46px; font-family:"NotoSansRegular"; font-size:20px; line-height:44px; color:#fff; text-align:center; background:url('/Images/Story/bg_label_cookItem.png') center center no-repeat;} @media all and (max-width:1024px){ .cookFlowList {display:block;} .cookFlowList li.item {display:block;} .cookFlowList li.item .cookItem {display:block; width:100%; height:auto; margin-bottom:30px; padding-bottom:0px;} } @media all and (max-width:540px){ .cookFlowList li.item .cookItem .cookImg {position:static; width:100%;} .cookFlowList li.item .cookItem .cookDesc {min-height:auto; margin-left:0px; margin-top:20px; padding-bottom:0px;} } @media all and (max-width:380px){ .cookFlowList li.item .cookItem .cookImg img {width:100%; height:auto;} } /*--------------------------- Social LIve ---------------------------*/ .articleList {*zoom:1;} .articleList:after {content:""; display:block; clear:both;} .articleList>li.item {float:left; margin:0px 10px 20px;} .articleList>li.item .articleItem {display:inline-block; position:relative; z-index:1; width:380px; border:1px solid #0078c2; background-color:#fff;} .articleList>li.item:hover .articleItem:before {content:""; display:block; position:absolute; left:-6px; top:-6px; z-index:-1; width:100%; height:100%; border:6px solid #0079c1; box-sizing:content-box;} .articleList>li.item .articleItem .articleLabel {display:block; position:absolute; left:19px; top:19px; text-indent:-9999px;} .articleList>li.item .articleItem .articleImg a {display:block;} .articleList>li.item .articleItem .articleImg {overflow:hidden; width:100%; min-height:60px;} .articleList>li.item .articleItem .articleImg img {width:100%; height:auto;} .articleList>li.item .articleItem .article {position:relative; padding:30px;} .articleList>li.item .articleItem .articleTit {margin-bottom:20px;} .articleList>li.item .articleItem .articleTit h3, .articleList>li.item .articleItem .articleTit h3 a {font-family:"NotoSansRegular"; font-size:24px; line-height:30px; color:#333;} .articleList>li.item .articleItem .articleBody {min-height:85px; padding-bottom:30px; font-family:"NotoSansLight"; font-size:14px; line-height:24px; color:#666;} .articleList>li.item .articleItem .articleBody .tag_wrap {display:block; width:100%; margin-top:15px;} .articleList>li.item .articleItem .articleFoot {overflow:hidden; border-top:1px solid #eaeaea; padding-top:15px; font-size:14px; color:#555;} .articleList>li.item .articleItem .articleFoot .date {float:left;} .articleList>li.item .articleItem .articleFoot .good {display:inline-block; float:right; height:20px; padding-left:25px; background:url('/Images/Common/ico_good.gif') left top no-repeat;} @media all and (max-width:1024px) { .articleList_wrap {max-width:800px; margin:0 auto;} } @media all and (max-width:768px) { .articleList_wrap {max-width:400px; margin:0 auto;} } @media all and (max-width:440px) { .articleList_wrap {max-width:380px; margin:0 auto;} .articleList>li.item {margin:0px 0.83333% 20px;} .articleList>li.item .articleItem {width:auto; min-width:280px;} } /*----------------------- Company ----------------------------*/ .subVisual {margin-bottom:60px;} .subVisual_ci {position:relative; padding:147px 20px 20px 20px; background-color:#f4f4f4; text-align:center;} .subVisual_ci .caption {position:absolute; left:0px; top:57px; width:100%; padding:0 20px; font-family:"NotoSansRegular"; font-size:25px; line-height:30px; color:#222; text-align:center;} @media all and (max-width:1024px){ .subVisual img {width:100%; height:auto;} } /* 서브메인 */ .section_wrap {overflow:hidden;} .section_wrap.section_company01 {background:url('/Images/Company/bg_company_section01.jpg') center top no-repeat;} .section_wrap.section_company02 {background:url('/Images/Company/bg_company_section02.jpg') center top no-repeat;} .section_wrap.section_company03 {background:url('/Images/Company/bg_company_section03.jpg') center top no-repeat;} .section_subMain {position:relative; width:1200px; margin:0 auto;} .section_subMain .section_header {display:inline-block; position:absolute; left:10px; top:185px; font-family:"NotoSansRegular";} .section_company01 .section_subMain, .section_company02 .section_subMain {min-height:911px;} .section_company03 .section_subMain {min-height:676px;} .section_company01 .section_subMain .section_header {top:88px;} .section_subMain .section_header h1 {margin-bottom:23px; font-size:20px; color:#222;} .section_subMain .section_header h2 {font-size:50px; color:#fff;} .section_subMain .section_header .headLine {font-size:30px; line-height:45px; color:#fff;} .section_subMain .section_header .headLine strong {font-size:50px; line-height:60px;} .section_subMain .section_body {padding:206px 10px 0;} .sectionList li.item {float:left;} .sectionList li.item.oneCol {width:236px;} .sectionList li.item.twoCol {width:472px;} .sectionList li.item.threeCol {width:708px;} .sectionList li.item .sectionItem {position:relative; height:235px; padding:30px;} .sectionList li.item .sectionItem.item_white {background-color:#ffffff;} .sectionList li.item .sectionItem.item_black {background-color:#222222;} .sectionList li.item .sectionItem.item_gray {background-color:#eeeeee;} .sectionList li.item .sectionItem.item_blue {background-color:#0079c1;} .sectionList li.item .sectionItem.iten_white1_hover:hover {background-color:#f8f8f8} .sectionList li.item .sectionItem.iten_black_hover:hover {background-color:#000} .sectionList li.item .sectionItem.item_gray_hover:hover {background-color:#d6d6d6} .sectionList li.item .sectionItem h3 {margin-bottom:13px; font-family:"NotoSansMedium"; font-size:30px; line-height:35px; color:#222;} .sectionList li.item .sectionItem h3.blue {color:#1a87c7;} .sectionList li.item .sectionItem .itemCont {font-family:"NotoSansLight"; font-size:15px; line-height:24px; color:#555; word-break:keep-all;} .sectionList li.item .sectionItem.item_black h3, .sectionList li.item .sectionItem.item_black .itemCont, .sectionList li.item .sectionItem.item_blue h3, .sectionList li.item .sectionItem.item_blue .itemCont {color:#fff;} .sectionList li.item .sectionItem .itemCont .money {display:block; margin-top:18px; font-family:"NotoSansMedium"; font-size:50px;} .sectionList li.item .sectionItem a.btn_goPage {position:absolute; left:30px; bottom:30px;} a.btn_goPage {display:inline-block; height:23px; padding-right:12px; background:url('/Images/Common/ico_btn_arrow.gif') right 6px no-repeat;} a.btn_goPage span {padding-bottom:3px; font-family:"NotoSansRegular"; font-size:15px; color:#000; background:url('/Images/Common/bg_goPage_black.gif') left bottom repeat-x;} a.btn_goPage.white {background-position:right -17px;} a.btn_goPage.white span {color:#fff; background:url('/Images/Common/bg_goPage_white.gif') left bottom repeat-x;} .sectionList li.item .sectionItem a.btn_goPage2 {position:absolute; right:30px; bottom:30px;} a.btn_goPage2 {display:inline-block; height:23px; padding-right:12px; background:url('/Images/Common/ico_btn_arrow.gif') right 6px no-repeat;} a.btn_goPage2 span {padding-bottom:3px; font-family:"NotoSansRegular"; font-size:15px; color:#000; background:url('/Images/Common/bg_goPage_black.gif') left bottom repeat-x;} a.btn_goPage2.white2 {background-position:right -14px;} a.btn_goPage2.white2 span {color:#fff; background:url('/Images/Common/bg_goPage_white.gif') left bottom repeat-x;} @media all and (max-width:1024px) { .section_subMain {width:100%;} .section_wrap.section_company01, .section_wrap.section_company02, .section_wrap.section_company03 {background-size:cover;} .section_wrap.section_company01 .section_subMain .section_body {padding-top:336px;} .sectionList li.item .sectionItem {margin-bottom:1px;} .sectionList li.stamp {display:none;} } @media all and (max-width:768px) { .section_subMain .section_header {top:88px;} .sectionList li.item.oneCol {width:33.3%;} .sectionList li.item.twoCol {width:66.6%;} } @media all and (max-width:700px) { .section_subMain .section_header h2 {font-size:40px;} .section_subMain .section_header .headLine {font-size:20px; line-height:30px;} .section_subMain .section_header .headLine strong {font-size:40px; line-height:50px;} .section_wrap.section_company01 .section_subMain .section_body {padding-top:300px;} .sectionList li.item.oneCol {width:100%;} .sectionList li.item.twoCol {width:100%;} .sectionList li.item .sectionItem {height:auto; margin-bottom:10px; padding-bottom:70px;} } @media all and (max-width:480px) { .section_subMain .section_header h2 {font-size:30px;} .section_subMain .section_header .headLine {font-size:16px; line-height:28px;} .section_subMain .section_header .headLine strong {font-size:28px; line-height:40px;} .section_wrap.section_company01 .section_subMain .section_body {padding-top:270px;} .sectionList li.item .sectionItem .itemCont .money {font-size:36px;} } .vision_wrap h2 span {display:block;} /* Vision, CI소개, 지속가능경영 */ @media all and (max-width:768px) { .vision_wrap .col.col4, .manage_wrap .col.col4, .manage_wrap .col.col12, .ci_wrap .col.col4, .ci_wrap .col.col8 {float:none; width:100%;} .vision_wrap h2 span, .manage_wrap h2 span {display:inline;} } @media all and (max-width:480px) { .img_logoType img {width:100%; height:auto;} } /* 사회공헌 */ .contributeList li.item {margin-bottom:60px;} .contributeList li.item .contributeItem {overflow:hidden;} .contributeList li.item .contributeItem .itemImg img {width:100%; height:auto;} .contributeList li.item .contributeItem .itemInfo dt {margin-bottom:17px; font-family:"NotoSansRegular"; font-size:24px; line-height:30px; color:#222; word-break:keep-all;} .contributeList li.item .contributeItem .itemInfo dt span.itemKind {display:block; margin:4px 0; font-size:18px; line-height:1; color:#0079c1;} .contributeList li.item .contributeItem .itemInfo dd {font-family:"NotoSansLight"; font-size:15px; line-height:24px; color:#555; word-break:keep-all;} @media all and (max-width:760px) { .contributeList li.item {padding-top:30px; background:url('/Images/Common/bg_line_dot.gif') left top repeat-x;} .contributeList li.item:first-child {padding-top:0px; background:none;} .contributeList li.item .contributeItem .col {float:none;} .contributeList li.item .contributeItem .itemImg.col4 {width:380px;} .contributeList li.item .contributeItem .itemDesc {width:auto; margin:20px 0.833333% 0;} } @media all and (max-width:480px) { .contributeList li.item .contributeItem .itemImg.col4 {width:auto; margin:0 0.833333%;} } /*지속가능경영*/ .tit_wrap {width:100%; margin-bottom:50px;} .manage_wrap .tit_wrap p {font-family:'NotoSansRegular'; line-height:1.5; width:100%; margin:0 auto; color:#555; font-size:16px; letter-spacing:-1px; font-weight:normal; text-align:center; word-break:keep-all; word-wrap:break-word; overflow-wrap:break-word; white-space:normal;} .manage_wrap .tit_wrap p + p{padding-top:30px} .manage_wrap .col4 .section {margin-bottom:0;} .manage_wrap .col4 h3 {width:100%; line-height:50px; font-size:22px; color:#222; text-align:center; background-color:#f4f4f4; padding:0; font-family:'NotoSansRegular';} .manage_wrap .col4 .section_txt {padding-top:140px; margin-top:60px;} .manage_wrap .col4 .ico-bg01 {background:url('/Images/Common/ic_01.png') center 0 no-repeat;} .manage_wrap .col4 .ico-bg02 {background:url('/Images/Common/ic_02.png') center 0 no-repeat;} .manage_wrap .col4 .ico-bg03 {background:url('/Images/Common/ic_03.png') center 0 no-repeat;} .manage_propel7 {margin-top:80px;} .manage_propel7 .tit_wrap {text-align:center; color:#fff; background-color:#0078c2; line-height:50px; font-size:24px;} .manage_propel7 > ul {display:table; width:100%;} .manage_propel7 > ul > li {display:table-cell; width:33.33%; text-align:center; vertical-align:top; padding-top:10px;} .manage_propel7 > ul > li + li {border-left:1px solid #dfdfdf;} .manage_propel7 > ul > li ol {display:inline-block; *display:inline; *zoom:1; text-align:left;} .manage_propel7 > ul > li ol li {line-height:1.5; position:relative; padding-left:35px; font-size:17px; color:#222; font-family:'NotoSansRegular'; margin-bottom:25px;} .manage_propel7 > ul > li ol li em {display:inline-block; *display:inline; *zoom:1; position:absolute; top:0; left:0; font-family:'NotoSansMedium'; color:#0078c2; font-size:24px; letter-spacing:-1px; line-height:1;} .table-layout-web {display:block;} .table-layout-mob {display:none;} .table-layout-web table {width:100%; border:0; padding:0;} .table-layout-web table th, .table-layout-web table td {vertical-align:top; text-align:left;} .table-layout-web table th {padding:20px; background-color:#0078c2; color:#fff; text-align:center; font-size:16px;} .table-layout-web table td {padding:30px 50px; font-size:15px; line-height:1.3; font-family:"NotoSansRegular";} .table-layout-web table td:first-child {padding-left:70px;} .table-layout-web table td.pd_None {padding:0;} .table-layout-web table td strong {font-size:26px; color:#0078c2; font-family:'NotoSansMedium';} .table-layout-web table td span {display:inline-block; *display:inline; *zoom:1; padding-left:13px; position:relative; line-height:1.4; color:#555;} .table-layout-web table td span + span {margin-top:15px;} .table-layout-web table td span:before {display:inline-block; *display:inline; *zoom:1; position:absolute; left:0; top:10px; content:''; width:3px; height:3px; background:url('/Images/Common/ico-dot.gif') 0 0 no-repeat;} .table-layout-web table tr:nth-of-type(even) td {background-color:#f4f4f4;} .tbl_p{font-size:17px;line-height:25px;margin-bottom:20px;} .manage_tbl .table_col_type2 td{padding:16px 0;line-height:24px;font-size:15px} .manage_tbl.img_tbl .table_col_type2 td{padding:0} .manage_tbl.img_tbl .table_col_type2 td img:first-child{display:block;margin:0 auto} .manage_tbl.img_tbl .table_col_type2 td img:last-child{display:none;} /* 지속가능경영 > 안전보건 */ .manage_wrap .tit_wrap p + p + .comp_btn{margin-top:30px} .comp_btn{display: flex;justify-content: center;} .comp_btn a{display:inline-block;font-size:16px;color:#fff;padding:13px 25px;background-color:#0078C2} .comp_btn a:last-child{background-color:#174978} .comp_btn a + a{margin-left:20px;} .orgin{width:100%;padding:50px 40px;background-color:#F4F4F4;display: flex;flex-direction: column;align-items: center;} .orgin p{position:relative;text-align:center;font-size:16px;color:#fff;width:112px;height:112px;line-height:112px;border-radius:100%;background-color:#0079C0;margin-bottom:30px;} .orgin p::after{content:'';clear:both;position:absolute;bottom: -30px;width: 1px;height: 30px;border-left: 1px dashed #aaa;left: 50%;transform: translateX(-50%);box-sizing: border-box;} .orgin ul{display:flex;position:relative;width:100%;} .orgin ul li{position:relative;padding:13px 0;font-size:16px;border-radius:28px;text-align: center;} .orgin ul li + li{margin-left:20px;} .orgin ul li::after{content:'';clear:both;position:absolute;bottom: -30px;width: 1px;height: 30px;border-left: 1px dashed #aaa;left: 50%;transform: translateX(-50%);box-sizing: border-box;} .orgin ul.fir{justify-content: flex-end;margin-bottom:30px} .orgin ul.sec{margin-top:30px; justify-content: center;} .orgin ul.sec::after{content:'';clear:both;position:absolute;top:-31px;left:50%;width:55%;height:1px;border-top:1px dashed #aaa; transform: translateX(-50%);} .orgin ul.fir li{width:calc(100% / 3 - 12.5px);max-width:360px;background-color:#565656;;color:#fff;} .orgin ul.fir li:last-child::after{bottom:0;top:50%;left:-10px;width:20px;height:1px;border-left:none;border-top:1px dashed #aaa;} .orgin ul.sec li{width:calc(100% / 6);background-color:#ddd;color:#666666} .orgin ul.sec li::after{bottom:0;top:-30px;} .orgin span{width:100%;background-color:#fff;border-radius:28px;text-align:center;line-height:24px;padding:13px 0;font-size:16px;color:#666;margin-top:30px} .edu div + div{margin-top:20px} .edu div p{font-size:20px;line-height:29px;color:#222;margin-bottom:15px;font-weight:bold} .edu div ul{display:flex;border:1px solid #ddd;} .edu div ul li{position:relative;width:25%;font-size:16px;line-height:24px;text-align:center;padding:13px 0;} .edu div ul li + li:before{content:'';clear:both;position:absolute;width:1px;height:30px;background-color:#ddd;top:10px;left:0;} .training ul{ display: flex;border:1px solid #ddd;} .training ul li{width:calc(100% / 3);display:flex;padding:27px 25px 24px 25px;flex-direction: column;align-items: center;} .training ul li + li{border-left:1px solid #ddd;} .training ul li .img{width:100%;max-width:400px;} .training ul li .img img{display:block;width:100%;} .training ul li span{font-size:16px;color:#222;margin-top:20px;} .health div img.pc{display:block} .health div img.mob{display:none} .txt_wrap ul{display:flex;} .txt_wrap ul li{width:50%;} .txt_wrap ul li + li{margin-left:20px;} .txt_wrap ul li strong{position:relative;display:block;font-size:16px;line-height:24px;padding:12px 0 6px} .txt_wrap ul li strong::before{content:'';clear:both;position:absolute;top:0;left:0;width:41px;height:3px;background-color:#0078C2} .txt_wrap ul li p{line-height:24px;word-break: keep-all;} .manage_popup{position:fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width:500px;border:1px solid #000;z-index:999} .manage_popup .pop_img{width:100%;} .manage_popup .pop_img img{display:block;width:100%} .manage_popup .pop_btm{display:flex;justify-content: flex-end;padding:10px 20px;background-color:#000;width:100%;} .manage_popup .pop_btm a{padding:0 8px;height:24px;font-size:13px;line-height:23px;background-color:#fff;} .manage_popup.popup01{display:none;} .manage_popup.popup01.on{display:block} .manage_popup.popup02{display:none;} .manage_popup.popup02.on{display:block} /* 지속가능경영 > 지역사회 공헌정책 */ #Container .manage_new_header.contents_header h1{padding-top:35px} .manage_wrap .policy{display:flex;margin-top:20px} .manage_wrap .policy li{display:flex;flex-direction: column;width:50%;} .manage_wrap .policy li + li{margin-left:10px} .manage_wrap .policy li .img_wrap{width:100%;} .manage_wrap .policy li .img_wrap img{display:block;width:100%;} .manage_wrap .policy li .txt_wrap{width:100%;padding-top:10px;} .manage_wrap .policy li .txt_wrap p{text-align:center;color:#555;font-size:20px;line-height:29px;} /* 윤리경영 */ .blueLine + .sub_txt{display:block;font-size:16px;line-height:24px;margin-bottom:6px;} .section_txt li span{color:#0079C1;font-weight:bold} .canon li + li{margin-top:20px;} .canon li strong{display:block;font-size:18px;line-height:27px;padding-bottom:9px;} .canon li p{display:block;} /* 인권경영 */ .human_img_wrap{width:100%;background-color:#F4F4F4;padding:50px;margin-top:30px} .human_img_wrap img.pc{display:block;width:100%;max-width:832px;margin:0 auto} .human_img_wrap img.mob{display:none} .human_wrap .col4 .section_txt{min-height:96px} /* 환경경영정책 */ .system_wrap{display:flex; flex-direction: column;} .system_wrap li{display:flex;} .system_wrap > li + li{margin-top:20px} .system_wrap li .sy_left{width:185px;border-top:1px solid #555;} .system_wrap li .sy_left span{display:block;font-size:16px;color:#555555;padding-top:4px;} .system_wrap li .sy_right{width:calc(100% - 205px);margin-left:20px} .system_wrap li .sy_blue_box{background-color:#0078C2;padding:7px 53px;} .system_wrap li .sy_blue_box p{font-size:24px;line-height:36px;text-align:center;color:#fff} .system_wrap li .sy_firUl,.system_wrap li .sy_secUl{display:flex;} .system_wrap li .sy_firUl li,.system_wrap li .sy_secUl li{display:flex;width:calc(100% / 3);flex-direction: column;} .system_wrap li .sy_right li + li{margin-left:8px;} .system_wrap li .sy_firUl li > p{display:block;text-align:center;padding:8px 0;width:100%;background-color:#F4F4F4;line-height:24px;font-weight:bold} .system_wrap li .sy_firUl li > div{padding-top:30px;} .system_wrap li .sy_firUl li > div img{display:block;width:100%;max-width:180px;margin:0 auto} .system_wrap li .sy_secUl li{padding:15px 20px;background-color:#F4F4F4;} .system_wrap li .sy_secUl li p{position:relative;padding-left:10px;color:#555;line-height:24px;letter-spacing:-0.5px;word-break: keep-all;font-weight:600} .system_wrap li .sy_secUl li p::before{content:'·';clear:both;position:absolute;top:0;left:0;} .system-tit{font-size:18px;line-height:27px;padding-top:30px;} .dedicated{display:flex;padding:41.5px;background-color:#F4F4F4} .dedicated .mob_dn{display:block;} .dedicated .mob_db{display:none;} .dedicated li{position:relative;width:calc(100% / 3);display: flex;flex-direction: column;align-items: center;text-align:center;} .dedicated li:not(:last-child):after{content:'';clear:both;position:absolute;top:-41.5px;right:-55px;width:110px;height:200px;background:url('/Images/Company/dedicated_arr.png') center center no-repeat;} .dedicated li *{line-height:24px;display:block} .dedicated li .blue{color:#0078C2;padding:10px 0;text-align:center;} .manage_wrap .envir_act.col4 .section_txt{padding-top:0;margin-top:0} .mob_db{display:none} @media all and (max-width:1050px) { /* 인권경영 */ .human_wrap .col4 .section_txt{min-height:130px} } @media all and (max-width:768px) { .manage_wrap .tit_wrap p br {display:none;} .manage_wrap .col4 .section_txt {margin:40px 0 65px; padding:0 0 0 190px; position:relative;} .manage_wrap .col4 .ico-bg01, .manage_wrap .col4 .ico-bg02, .manage_wrap .col4 .ico-bg03 {background:none;} .manage_wrap .col4 .ico-bg01:before, .manage_wrap .col4 .ico-bg02:before, .manage_wrap .col4 .ico-bg03:before {display:block; position:absolute; top:0; left:0; width:190px; height:100%; content:''; } .manage_wrap .col4 .ico-bg01:before {background:url('/Images/Common/ic_01.png') center center no-repeat;} .manage_wrap .col4 .ico-bg02:before {background:url('/Images/Common/ic_02.png') center center no-repeat;} .manage_wrap .col4 .ico-bg03:before {background:url('/Images/Common/ic_03.png') center center no-repeat;} .manage_propel7 > ul {display:block; position:relative;} .manage_propel7 > ul:before {display:block; width:1px; height:100%; background-color:#dfdfdf; position:absolute; left:50%; top:0; content:'';} .manage_propel7 > ul:after {display:block; clear:both; content:'';} .manage_propel7 > ul > li {display:block; width:49%; float:left; padding:0;} .manage_propel7 > ul > li + li {margin-left:2%; border-left:none;} .manage_propel7 > ul > li:first-child ol {padding-left:0;} .manage_propel7 > ul > li:last-child {float:right;} .manage_propel7 > ul > li ol {display:block; padding-left:15px;} .manage_propel7 > ul > li ol li {word-break:keep-all; word-wrap:break-word; overflow-wrap:break-word; white-space:normal;} .table-layout-web {display:none;} .table-layout-mob {display:block;} .table-layout-mob dl {width:100%; display:table; border-color:#dfdfdf; border-width:1px 1px 1px 0; border-style:solid;} .table-layout-mob dl + dl {border-width:0 1px 1px 0;} .table-layout-mob dl dt, .table-layout-mob dl dd {display:table-cell; width:auto; vertical-align:top;} .table-layout-mob dl dt {width:8%; background-color:#0078c2; color:#fff; text-align:center; padding:20px 0; font-size:24px; font-family:'NotoSansMedium';} .table-layout-mob dl dd ul li {width:100%; display:table;} .table-layout-mob dl dd ul li + li {border-top:1px solid #dfdfdf;} .table-layout-mob dl dd ul li:after {display:block; clear:both; content:'';} .table-layout-mob dl dd ul li div {display:table-cell; width:auto; padding:20px 15px 20px 20px; font-size:1rem; border-left:1px solid #ccc; vertical-align:top; color:#555; font-size:16px;} .table-layout-mob dl dd ul li div:first-child {width:20%; min-width:72px; text-align:center; border:none; background-color:#f4f4f4; color:#222; padding:20px 0;} .table-layout-mob dl dd ul li div span {display:inline-block; *display:inline; *zoom:1; line-height:1.1; word-break:keep-all; word-wrap:break-word; overflow-wrap:break-word; white-space:normal;} .table-layout-mob dl dd ul li div + div span {padding-left:13px; position:relative; line-height:1.3; width:100%;} .table-layout-mob dl dd ul li div + div span + span {margin-top:10px;} .table-layout-mob dl dd ul li div + div span:before {display:inline-block; *display:inline; *zoom:1; position:absolute; left:0; top:9px; content:''; width:3px; height:3px; background:url('/Images/Common/ico-dot.gif') 0 0 no-repeat;} /* 지속가능경영 > 안전보건 */ .manage_tbl .table_col_type2 td{padding:40px 0;line-height:24px;font-size:13px} .manage_tbl.img_tbl .table_col_type2 td img:first-child{display:none} .manage_tbl.img_tbl .table_col_type2 td img:last-child{display:block;width:100%;min-width:71px;} .manage_wrap .tit_wrap p + p{padding-top:20px;} .comp_btn{flex-direction: column;align-items: center;} .comp_btn a{max-width:172px; text-align: center;} .comp_btn a + a{margin-left:0;margin-top:8px;} .orgin{padding:20px 10px;} .orgin p{width:72px;height:72px;font-size:13px;line-height:72px;margin-bottom:10px;} .orgin ul li{font-size:13px;} .orgin ul li::after{bottom:-10px;height:10px;} .orgin ul.fir{margin-bottom:10px;} .orgin ul.fir li{width:calc(100% / 3 - 6.5px);height:48px;line-height:48px;padding:0;border-radius:15px;} .orgin ul.sec{margin-top:10px;} .orgin ul.sec li{height:95px;padding: 0 6px;display: flex;align-items: center;justify-content: center;line-height:18px;} .orgin ul.sec::after{top:-11px;left:50%;width:54%;} .orgin ul.sec li::after{top:-10px} .orgin ul li + li{margin-left:9px;} .orgin span{font-size:13px;margin-top:20px;border-radius:15px;} .edu div p{font-size:16px;} .edu div ul{flex-wrap: wrap;} .edu div ul li{width:50%;font-size:14px;padding:10px 0;letter-spacing: -0.5px;} .edu div ul li + li:before{display:none;} .edu div ul li:first-child,.edu div ul li:nth-child(2){border-bottom:1px solid #ddd;} .edu div ul li:last-child, .edu div ul li:nth-child(2){border-left:1px solid #ddd} .training ul li{padding:9px 7px 8px;} .training ul li span{margin-top:5px;font-size:14px;line-height:20px;} .health div img.pc{display:none} .health div img.mob{display:block;width:100%;} .txt_wrap ul{flex-direction: column;} .txt_wrap ul li{width:100%;} .txt_wrap ul li + li{margin-left:0;margin-top:10px;} .txt_wrap ul li strong{padding-top:5px;} /* 지속가능경영 > 지역사회 공헌정책 */ #Container .manage_new_header.contents_header h1{padding-top:24px} .manage_wrap .policy{flex-direction: column;} .manage_wrap .policy li{width:100%} .manage_wrap .policy li + li{margin-left:0;margin-top:20px} .manage_wrap .policy li .txt_wrap p{font-size:14px;line-height:20px;} /* 인권경영 */ .human_wrap .col4 .section_txt{min-height:auto} .human_wrap h2.blueLine{font-size:18px;line-height:27px;padding-top:12px;margin-bottom:9px} /* 환경경영정책 */ .system_wrap > li + li:last-child{margin-top:10px} .system_wrap li .sy_left{width:52px;} .system_wrap li .sy_right{width:calc(100% - 60px);margin-left:8px;} .system_wrap li .sy_left span{font-size:13px;padding-top:0;line-height:19px} .system_wrap li .sy_blue_box p{font-size:14px;line-height:20px;word-break: keep-all;} .system_wrap li .sy_firUl li > p{font-size:13px;padding:3px 0;line-height:19px;} .system_wrap li .sy_right li + li{margin-left:3px} .system_wrap li .sy_firUl li > div{padding-top:10px;} .system_wrap li .sy_firUl li > div img{max-width:50px;} .system_wrap li .sy_secUl li{padding:11px 4px} .system_wrap li .sy_secUl li p{font-size:13px;} .system-tit{padding-top:0} .section_txt + .system-tit{padding-top:20px} .dedicated{flex-wrap: wrap;padding:0;background-color:#fff} .dedicated .mob_dn{display:none;} .dedicated .mob_db{display:block;} .dedicated li{padding:20px;background-color:#F4F4F4} .dedicated li:not(:last-child){width:50%} .dedicated li:last-child{width:100%;margin-top:10px} .dedicated li:not(:last-child):after{top:44px;right:8px;width:25px;height:42px;background-size:contain} .dedicated li:first-child:after{right:0} .dedicated li *{line-height:20px;font-size:14px;} .dedicated li .blue{padding:5px 0} .mob_db{display:block} .manage_wrap .envir_act.col4 .section_txt{padding:0;margin:0} .manage_wrap .envir_act.col4 + .envir_act.col4{margin-top:40px} .manage_wrap .envir_act.col4 h2.blueLine{font-size:18px;line-height:27px;margin-bottom:10px} } @media all and (max-width:516px) { .manage_wrap .col4 .section_txt {padding-left:140px;} .manage_wrap .col4 .ico-bg01:before, .manage_wrap .col4 .ico-bg02:before, .manage_wrap .col4 .ico-bg03:before {width:140px;} .manage_propel7 .tit_wrap {font-size:20px;} .manage_propel7 > ul > li ol li {font-size:14px; margin-bottom:15px;} .manage_propel7 > ul > li ol li em {font-size:20px;} .table-layout-mob dl dt {font-size:20px; min-width:38px; vertical-align:middle;} /* 인권경영 */ .human_img_wrap{padding:40px;margin-top:20px} .human_img_wrap img.pc{display:none;} .human_img_wrap img.mob{display:block;width:100%;max-width:242px;margin:0 auto;} /* 안전보건 팝업 */ .manage_popup{max-width:unset;width:80%} } /* CEO 인사말 */ .greeting_headLine {font-family:"NotoSansRegular"; font-size:30px; line-height:36px; text-align:center; color:#222;} .headLine2 {font-family:"NotoSansRegular"; font-weight:normal; font-size:24px; line-height:30px; color:#222;} .greeting_wrap {overflow:hidden;} .greeting_wrap .ceoImg {padding-left: 13%;} .greeting_wrap .ceoImg img {width:100%; height:auto;} .greeting_wrap .ceoMsg .author {display:inline-block; position:relative; height:55px; margin-bottom:20px; padding-right:53px; line-height:55px;} .greeting_wrap .ceoMsg .author .sign {display:inline; position:absolute; top:0px; right:0px;} .box_profile {position:relative; padding:29px 40px 30px 140px; border:1px solid #dddddd; background-color:#f4f4f4;} .box_profile h2 {display:block; position:absolute; left:40px; top:35px; width:67px; font-family:"NotoSansRegular"; font-size:18px; line-height:22px; color:#222;} .box_profile .profile {padding-left:10px;} .box_profile .profile dl {position:relative; overflow:hidden; margin-top:5px; padding-left:65px;} .box_profile .profile dl dt {display:inline-block; position:absolute; left:0px; top:0px; padding:4px 0; font-family:"NotoSansRegular"; font-size:15px; color:#555;} .box_profile .profile dl dd ul.history {display:inline-table; width:100%;} .box_profile .profile dl dd ul.history li {display:table-row;} .box_profile .profile dl dd ul.history li span {display:table-cell; padding:5px 0; font-family:"NotoSansLight"; font-size:15px; line-height:18px; color:#555; text-align:left; vertical-align:top; word-break:keep-all;} .box_profile .profile dl dd ul.history li span.date {width:140px; padding-right:20px;} @media all and (max-width:768px){ .greeting_wrap .ceoMsg {padding-left:10px;} .greeting_wrap .box_profile {clear:both; float:none; width:auto;} } @media all and (max-width:640px){ .greeting_wrap .ceoImg, .greeting_wrap .ceoMsg {float:none; width:auto; padding-left:0px;} .greeting_wrap .ceoImg {margin-bottom:20px;} .box_profile {padding-left:40px;} .box_profile h2 {position:static; width:100%; margin-bottom:20px;} .box_profile .profile {padding-left:0px;} } @media all and (max-width:480px){ .box_profile {padding:30px 25px;} .box_profile .profile dl {padding-left:0px;} .box_profile .profile dl dt {position:static; width:100%; margin-bottom:5px; font-size:16px;} .box_profile .profile dl dd {margin-bottom:20px;} .box_profile .profile dl dd ul.history li span {font-size:14px;} .box_profile .profile dl dd ul.history li span.date {width:130px; padding-right:10px;} } /* 기업연혁 */ .history_wrap {margin-top:60px; padding-left:200px; padding-bottom:250px;} .history_container {display:inline-block; width:100%; padding-left:50px; border-left:2px solid #222;} .history_container .historyItem {position:relative; width:100%; margin-top:50px;} .history_container .historyItem:first-child {margin-top:0px;} .history_container .historyItem h2 {margin-bottom:10px; font-family:"NotoSansRegular"; font-size:24px; color:#0079c1;} .history_container .historyItem .historyList {display:inline-table; width:100%;} .history_container .historyItem .historyList li {display:table-row; font-size:14px; line-height:20px; color:#555;} .history_container .historyItem .historyList li strong {display:table-cell; width:65px; padding:4px 0; font-family:"NotoSansRegular"; font-weight:normal;} .history_container .historyItem .historyList li span {display:table-cell; padding:4px 0; font-family:"NotoSansLight"; word-break:keep-all;} .history_container .historyItem .historyNews_wrap {display:inline-block; position:absolute; left:-641px; padding-right:59px; background:url('/Images/Company/bg_historyNews_pointer.png') right 45px no-repeat;} .history_container .historyItem .historyNews_wrap.news2014 {top:0px; background-position:right 45px;} .history_container .historyItem .historyNews_wrap.news2008 {top:-4px; background-position:right 48px;} .history_container .historyItem .historyNews_wrap.news2003 {top:-295px; background-position:right 340px;} .history_container .historyItem .historyNews_wrap.news2000 {top:-105px; background-position:right 115px;} .history_container .historyItem .historyNews_wrap.news1996 {top:-270px; background-position:right 315px;} .history_container .historyItem .historyNews_wrap.news1986 {top:-120px; background-position:right 190px;} .history_container .historyItem .historyNews_wrap.news1969 {top:10px; background-position:right 45px;} .history_container .historyItem .historyNews {width:536px; border:10px solid #0079c1; background-color:#fff;} .history_container .historyItem .historyNews .newsCont {padding:30px;} .history_container .historyItem .historyNews .newsCont h3 {margin-bottom:15px; font-family:"NotoSansRegular"; font-size:24px; line-height:30px; color:#222;} .history_container .historyItem .historyNews .newsCont .newsBody {font-family:"NotoSansLight"; font-size:13px; line-height:20px; color:#555;} @media all and (max-width:1024px) { .history_wrap {width:100%; padding:0px; text-align:center;} .history_container {width:600px; padding:0px; border-left:0px;} .history_container .historyItem .historyNews_wrap {position:static; margin-top:20px; padding-right:0px; background-image:none;} .history_container .historyItem {text-align:left;} } @media all and (max-width:640px) { .history_wrap {text-align:left;} .history_container {width:auto;} .history_container .historyItem .historyNews {width:auto;} .history_container .historyItem .historyNews img {width:100%; height:auto;} } /* 사업장소개 */ .box_businesses {overflow:hidden; padding:30px; border:1px solid #ddd; background-color:#f4f4f4;} .box_businesses .mapImg {display:inline-block; float:left; padding:0 50px; text-align:center;} .box_businesses .intro_wrap {float:left; width:680px; padding:10px 30px;} .box_businesses .intro_wrap .intro {margin-bottom:40px;} .box_businesses .intro_wrap .intro h2 {font-family:"NotoSansRegular"; font-size:25px; line-height:30px; color:#222;} .box_businesses .intro_wrap .intro .summary {font-family:"NotoSansLight"; font-size:15px; line-height:20px; color:#555;} .box_businesses .intro_wrap .anchorMenu {*zoom:1; margin-left:-10px;} .box_businesses .intro_wrap .anchorMenu:after {content:""; display:block; clear:both;} .box_businesses .intro_wrap .anchorMenu li {float:left; margin:2px 0;} .box_businesses .intro_wrap .anchorMenu li a {display:block; position:relative; min-width:90px; height:23px; padding-left:10px;} .box_businesses .intro_wrap .anchorMenu li a span {display:inline-block; height:100%; padding-bottom:8px; font-size:15px;} .box_businesses .intro_wrap .anchorMenu li a:hover {color:#0078c2; background:url('/Images/Common/bu_anchorMenu_arrow.gif') left 6px no-repeat;} .box_businesses .intro_wrap .anchorMenu li a:hover span {background:url('/Images/Common/bg_anchorMenu_span.gif') left bottom repeat-x;} .box_businesses.foreign .mapImg {padding:0 30px;} .box_businesses.foreign .intro_wrap {width:540px; padding-top:40px;} .box_businesses.sales .intro_wrap {padding-top:40px;} /* 사업장소개 - laypopup */ #map_canvas .gm-style > div:last-child > a{display:block !important;} @media all and (max-width:1045px) { .box_businesses .mapImg {padding-left:0px;} .box_businesses.foreign .mapImg {padding:0px 20px;} .box_businesses .intro_wrap {width:640px;} .box_businesses.foreign .intro_wrap {width:380px;} .box_businesses .intro_wrap .anchorMenu li {width:25%;} } @media all and (max-width:768px) { .box_businesses.foreign .mapImg, .box_businesses .mapImg {float:none; width:100%; margin-bottom:20px; padding:0px;} .box_businesses .intro_wrap {float:none; width:540px; margin:0 auto; padding:10px 0;} } @media all and (max-width:650px) { .box_businesses .intro_wrap, .box_businesses.foreign .intro_wrap {width:auto;} } @media all and (max-width:620px) { .box_businesses.foreign .mapImg img {width:100%; height:auto;} } @media all and (max-width:540px) { .box_businesses .intro_wrap .anchorMenu li {width:33.33333%;} .box_businesses.foreign .intro_wrap .anchorMenu li {width:25%;} } @media all and (max-width:420px) { .box_businesses {padding:20px;} .box_businesses .intro_wrap .anchorMenu li {width:50%;} .box_businesses.foreign .intro_wrap .anchorMenu li {width:25%;} } .businessesList {overflow:hidden;} .businessesList li.item {float:left; margin:10px 0;} .businessesList li.item .businessesItem {position:relative; width:380px; /*height:250px;*/ margin:0 10px;} .businessesList li.item:nth-child(3n+1) {clear:both;} .businessesList li.item .businessesItem h3 {margin-bottom:8px; padding-bottom:9px; font-family:"NotoSansRegular"; font-size:18px; line-height:30px; color:#222; border-bottom:1px solid #d2d2d2} .businessesList li.item .businessesItem .businessesDesc {margin-bottom:10px; font-family:"NotoSansLight"; font-size:14px; line-height:20px; color:#555; text-align:left; word-break:keep-all;} .businessesList li.item .businessesItem .businessesInfo {display:inline-table; width:100%;} .businessesList li.item .businessesItem .businessesInfo li {display:table-row;} .businessesList li.item .businessesItem .businessesInfo li strong {display:table-cell; width:75px; padding:2px 0; font-family:"NotoSansRegular"; font-size:14px; font-weight:normal; line-height:20px; color:#222; } .businessesList li.item .businessesItem .businessesInfo li span {display:table-cell; padding:2px 0; font-family:"NotoSansLight"; font-size:14px; line-height:20px; color:#555; text-align:left; vertical-align:top;} .businessesList li.item .businessesItem a.btn_mapView {position:absolute; right:0px; top:0px; font-size:14px;} @media all and (max-width:1045px) { .businessesList li.item {width:50%;} .businessesList li.item .businessesItem {width:auto;} .businessesList li.item:nth-child(2n+1) {clear:both;} .businessesList li.item:nth-child(3n+1) {clear:none;} } @media all and (max-width:640px) { .businessesList li.item {float:none; width:100%; margin-bottom:40px;} .businessesList li.item .businessesItem {height:auto; margin:0 0.83333%;} } /*@media all and (max-width:1024px) { .businessesList_wrap {max-width:800px; margin:0 auto;} } @media all and (max-width:768px) { .businessesList_wrap {max-width:400px; margin:0 auto;} } @media all and (max-width:420px) { .businessesList li.item .businessesItem {width:auto; height:auto; margin:0px 0.83333% 30px;} }*/ .map {width:100%; height:440px;} .map.store_map {width:100%; height:100%;max-height:330px;} .map_caption {overflow:hidden; height:0px; font-size:0px; } /*해외사업장*/ .businessesList2 {overflow:hidden;} .businessesList2 li.item {float:left; width:50%; margin-bottom:20px;} .businessesList2 li.item .businessesItem {height:250px; margin:0 10px;} .businessesList2 li.item .businessesItem h3 {margin-bottom:8px; padding-bottom:9px; font-family:"NotoSansRegular"; font-size:18px; line-height:30px; color:#222; border-bottom:1px solid #d2d2d2} .businessesList2 li.item .businessesItem .businessesInfo {overflow:hidden; width:100%;} .businessesList2 li.item .businessesItem .businessesInfo li.cell2 {float:left; width:50%;} .businessesList2 li.item .businessesItem .businessesInfo li .tRow {display:inline-table; width:100%} .businessesList2 li.item .businessesItem .businessesInfo li .tRow strong {display:table-cell; width:75px; padding:2px 0; font-family:"NotoSansRegular"; font-size:14px; font-weight:normal; line-height:20px; color:#222; } .businessesList2 li.item .businessesItem .businessesInfo li .tRow span {display:table-cell; padding:2px 0; font-family:"NotoSansLight"; font-size:14px; line-height:24px; color:#555; text-align:left; vertical-align:text-bottom;} .businessesList2 li.item .businessesItem .businessesInfo li .tRow .addr {vertical-align:top;} .map {width:100%; height:440px;} @media all and (max-width:768px) { .businessesList2 li.item {float:none; width:100%; margin-bottom:50px;} .businessesList2 li.item .businessesItem {height:auto; margin:0 0.83333%;} } @media all and (max-width:430px) { .businessesList2 li.item .businessesItem .businessesInfo li.cell2 {float:none; width:100%;} } /* 영업/판매점 소개 */ .section_sales {*zoom:1;} .section_sales:after {content:""; display:block; clear:both;} .salesList_wrap {float:left; margin-bottom:20px;} .salesList_wrap h2 {margin:0 10px 30px 10px; padding-bottom:15px; border-bottom:2px solid #0079c1; font-family:"NotoSansRegular"; font-size:25px; color:#0078c2;} .salesList {overflow:hidden;} .salesList li.item {float:left; margin-bottom:40px;} .salesList li.item .salesItem {position:relative; width:380px; height:150px; margin:0 10px;} .salesList li.item .salesItem h3 {margin-bottom:8px; padding-bottom:9px; font-family:"NotoSansRegular"; font-size:18px; line-height:30px; color:#222; border-bottom:1px solid #d2d2d2;} .salesList li.item .salesItem .salesInfo {display:inline-table; width:100%;} .salesList li.item .salesItem .salesInfo li {display:table-row;} .salesList li.item .salesItem .salesInfo li strong {display:table-cell; width:75px; padding:2px 0; font-family:"NotoSansRegular"; font-size:14px; font-weight:normal; line-height:20px; color:#222; } .salesList li.item .salesItem .salesInfo li span {display:table-cell; padding:2px 0; font-family:"NotoSansLight"; font-size:14px; line-height:20px; color:#555; text-align:left; vertical-align:top;} .salesList li.item .salesItem a.btn_mapView {position:absolute; right:0px; top:0px; font-size:14px;} @media all and (max-width:1045px) { .salesList_wrap {float:none;} .salesList {width:100%;} .salesList li.item {width:50%;} .salesList li.item .salesItem {width:auto;} } @media all and (max-width:640px) { .salesList li.item {float:none; width:100%;} .topsection .rightSide img {width: 100%;height: 100%;object-fit: cover;} .Introduce.type2 > ul li img {width: 100%;height: 100%;object-fit: cover;} .safetyBr {display: none;} } /* 250318 식품안전센타 */ .topsection {padding: 30px; background: #f4f4f4; border: 1px solid #dddddd;} .topsection figure {display: flex;gap: 5px;} .topsection figure img {display: block;width: 100%;} .topsection .ment {margin-top: 5px;display: flex;justify-content: space-between;} .topsection .leftSide {padding-left: 60px;display: flex;flex-direction: column;justify-content: center;} .topsection .leftSide h2 {margin-bottom: 28px; line-height: 1.4; font-size: 25px;color: #222;} .topsection .leftSide span {line-height: 1.5;font-size: 16px; font-weight: 600; color: #555;} .topsection .rightSide {display: grid;grid-template-columns: repeat(2, 1fr);gap: 5px;} .Introduce {margin-top: 40px;} .Introduce h2 {padding-bottom: 15px;font-size: 25px;color: #0078c2;border-bottom: 2px solid #0078c2;} .Introduce .safeCenter {margin-top: 30px;display: flex;flex-wrap: wrap;border: 1px solid #ddd;} .Introduce .safeCenter li {padding: 25px;width: 50%;display: flex;flex-direction: column;justify-content: center;border-bottom: 1px solid #ddd;} .Introduce .safeCenter li:nth-child(odd) {border-right: 1px solid #ddd;} .Introduce .safeCenter li:nth-child(5), .Introduce .safeCenter li:nth-child(6) { border-bottom: 0;} .Introduce .safeCenter li p {margin-bottom: 22px;font-size: 18px;font-weight: 600;} .Introduce .safeCenter li span {line-height: 1.5;font-size: 16px; font-weight: 600; color: #555; word-break: keep-all;} .Introduce .safeCenter li span strong {color: #0078c2;font-weight: 600;} .Introduce.type2 > p {margin-top: 30px;line-height: 1.4;font-size: 16px;font-weight: 600;color: #555;} .Introduce.type2 > ul {margin-top: 30px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;} .Introduce.type2 > ul li {display: flex;flex-direction: column;justify-content: center;} .Introduce.type2 > ul li.bg {padding-left: 60px;background: #f8f8f8;} .Introduce.type2 > ul li p {margin-bottom: 24px;position: relative;font-size: 20px;color: #222;font-weight: 600;} .Introduce.type2 > ul li p::before {content: "";display: block;width: 30px; height: 3px;background: #0078c2;position: absolute;left: 0; top: -16px;} .Introduce.type2 > ul li span {margin-bottom: 8px; font-size: 16px; font-weight: 600; color: #555;} .Introduce.type2 > ul li span:last-child {margin-bottom: 0;} .Introduce.type2 > ul li span::before {content: "";display: inline-block;width: 3px; height: 3px;background: #555;vertical-align: super;margin-right: 15px;} .Introduce.document ul {margin-top: 30px;display: flex;gap: 40px;} .Introduce.document li {flex: 1;} .Introduce.document li img { width: 100%;height: 100%;object-fit: cover;} /* 반응형 */ @media all and (max-width:768px) { .topsection figure { flex-direction: column;} .topsection .ment { flex-direction: column; margin-top: 30px;} .topsection .leftSide { padding-left: 0;} .topsection .rightSide { margin-top: 30px;} .topsection .rightSide li { text-align: center;} .Introduce.document ul { flex-wrap: wrap; gap: 10px;} .Introduce.document li { flex: unset; width: calc(50% - 5px);} } @media all and (max-width:650px) { .Introduce .safeCenter li { width: 100%;} .Introduce .safeCenter li:nth-child(5), .Introduce .safeCenter li:nth-child(6) { border-bottom: 0;} .Introduce .safeCenter li:nth-child(odd) { border-right: 0;} .Introduce .safeCenter li:nth-child(3) { order: 4;} .Introduce .safeCenter li:nth-child(4) { order: 3;} .Introduce .safeCenter li:nth-child(5) { order: 5; border-bottom: 1px solid #ddd;} .Introduce .safeCenter li:nth-child(6) { order: 6;} .Introduce.type2 > ul { grid-template-columns: repeat(1, 1fr);} .Introduce.type2 > ul li.bg { padding: 36px 12px;} .Introduce.type2 > ul li:nth-child(1) { order: 2;} .Introduce.type2 > ul li:nth-child(2) { order: 1;} .Introduce.type2 > ul li:nth-child(3) { order: 3;} .Introduce.type2 > ul li:nth-child(4) { order: 4;} .Introduce.type2 > ul li:nth-child(5) { order: 6;} .Introduce.type2 > ul li:nth-child(6) { order: 5;} .Introduce.type2.analyze > ul li:nth-child(1) { order: 1;} .Introduce.type2.analyze > ul li:nth-child(2) { order: 2;} .Introduce.type2.analyze > ul li:nth-child(3) { order: 4;} .Introduce.type2.analyze > ul li:nth-child(4) { order: 3;} .Introduce.type2.analyze > ul li:nth-child(5) { order: 5;} .Introduce.type2.analyze > ul li:nth-child(6) { order: 6;} .Introduce.type2.analyze > ul li:nth-child(7) { order: 8;} .Introduce.type2.analyze > ul li:nth-child(8) { order: 7;} } /* 250318 식품안전센타 END */ /* 동반성장 */ /* 동반성장 - 동반성장 */ dl.growVision {display:inline-table; position:relative; width:100%; height:118px; margin-bottom:30px;} dl.growVision dt {display:block; position:absolute; left:0px; top:0px; width:118px; height:118px; text-align:center;} dl.growVision dd {display:table-cell; width:100%; height:100%; padding-left:118px; text-align:center; vertical-align:middle; background:url('/Images/Company/bg_growing_vision.png') right center no-repeat;} dl.growVision dd .ulList {display:inline-block;} dl.growVision .txt_vision {font-family:"NotoSansRegular"; font-size:26px; line-height:32px; color:#0079c1; word-break:keep-all;} dl.growVision .strategy {overflow:hidden;} dl.growVision .strategy li {float:left; width:33.33334%; font-family:"NotoSansRegular"; font-size:24px; color:#222; background:url('/Images/Company/bg_strategy_division.gif') left center no-repeat;} dl.growVision .strategy li:first-child {background:none;} @media all and (max-width:768px) { dl.growVision .txt_vision {font-size:22px;} dl.growVision .strategy li {font-size:18px;} } @media all and (max-width:680px) { dl.growVision {display:block; height:auto; padding:20px; background-color:#f8f8f8;} dl.growVision dt {position:static; width:100%; margin-bottom:20px;} dl.growVision dd {display:block; padding-left:0px; background-image:none;} } @media all and (max-width:640px) { dl.growVision .strategy {display:inline-block;} dl.growVision .strategy li {float:none; width:auto; font-size:18px; margin-bottom:10px; text-align:left; background:none;} dl.growVision .strategy li:last-child {margin-bottom:0px;} dl.growVision .row {display:inline-block;} dl.growVision .col {display:inline-block; float:none;} dl.growVision .col.col4 {width:170px; margin:0 20px 20px; text-align:left;} dl.growVision .col.col4:last-child {margin-bottom:0px;} dl.growVision dd h4 {margin-bottom:10px; font-family:"NotoSansRegular"; font-size:18px; line-height:24px; color:#222;} dl.growVision dd .ulList {margin-bottom:20px;} } @media all and (max-width:480px) { dl.growVision .txt_vision {font-size:20px;} } .guideLine_wrap {text-align:center;} .guideLine {display:inline-block; position:relative; width:302px; height:302px;} .guideLine .guideLineItem {position:absolute; left:0px; top:0px; z-index:10; width:100%; height:100%;} .guideLine .guideLineItem li.item {position:absolute; width:340px; height:108px; padding:27px 30px; font-family:"NotoSansRegular"; font-size:18px; color:#fff; text-align:left;} .guideLine .guideLineItem li.item.item01 {left:-339px; top:29px; background:url('/Images/Company/bg_growing_guideLine01.png') left top no-repeat;} .guideLine .guideLineItem li.item.item02 {left:-339px; bottom:29px; background:url('/Images/Company/bg_growing_guideLine02.png') left top no-repeat;} .guideLine .guideLineItem li.item.item03 {right:-339px; top:29px; padding-left:119px; background:url('/Images/Company/bg_growing_guideLine03.png') left top no-repeat;} .guideLine .guideLineItem li.item.item04 {right:-339px; bottom:29px; padding-left:119px; background:url('/Images/Company/bg_growing_guideLine04.png') left top no-repeat;} .guideLine .guideLineItem li.item .tit {display:block; margin-bottom:8px;} a.btn_guideLine {display:inline-block; height:23px; padding-right:12px; background:url('/Images/Common/ico_btn_arrow.gif') right -39px no-repeat;} a.btn_guideLine span {padding-bottom:3px; border-bottom:1px solid #9ccff1; font-family:"NotoSansRegular"; font-size:14px; color:#bce6ff;} @media all and (max-width:768px) { .guideLine_wrap {text-align:left;} .guideLine {overflow:hidden; width:100%; height:auto;} .guideLine h4 {display:block; float:left; width:302px; height:auto; padding-top:80px;} .guideLine .guideLineItem {position:static; float:left; width:auto; height:auto;} .guideLine .guideLineItem li.item {position:static; margin-bottom:10px;} .guideLine .guideLineItem li.item.item01 {padding-left:119px; background:url('/Images/Company/bg_growing_guideLine03.png') left top no-repeat;} .guideLine .guideLineItem li.item.item02 {padding-left:119px; background:url('/Images/Company/bg_growing_guideLine04.png') left top no-repeat;} } @media all and (max-width:690px) { .guideLine h4 {width:50%; padding-right:20px; padding-top:7%;} .guideLine h4 img {width:100%; height:auto;} .guideLine .guideLineItem {width:50%;} .guideLine .guideLineItem li.item {width:auto; height:auto;} .guideLine .guideLineItem li.item.item01, .guideLine .guideLineItem li.item.item02, .guideLine .guideLineItem li.item.item03, .guideLine .guideLineItem li.item.item04 {padding:20px; background-image:none; background-color:#0079c1;} } @media all and (max-width:480px) { .guideLine h4 {display:none;} .guideLine .guideLineItem {float:none; width:100%;} .guideLine .guideLineItem li.item {overflow:hidden;} .guideLine .guideLineItem li.item .tit {float:left; margin-bottom:0px; font-size:17px;} .guideLine .guideLineItem li.item .btn_guideLine {float:right; margin-top:-3px;} } /* 동반성장 - 지원제도 */ .dl_guide {margin-bottom:15px;} .dl_guide dt {margin-bottom:5px; font-family:"NotoSansRegular"; font-size:18px; color:#0078c2;} .dl_guide dd {font-family:"NotoSansLight"; font-size:15px; line-height:22px; color:#555;} .dl_guide2 dt {margin-bottom:5px; font-family:"NotoSansRegular"; font-size:15px; line-height:22px; color:#222;} .dl_guide2 dd {font-family:"NotoSansLight"; font-size:15px; line-height:22px; color:#555;} .dl_guide2 dd ol.olList>li {margin-top:10px;} .dl_guide2 dd ol.olList>li:first-child {margin-top:0px;} .box_table {display:inline-table; width:100%; margin-bottom:20px;} .box_table .boxCol {display:table-cell; position:relative; padding:26px 30px; border-left:10px solid #fff; border-right:10px solid #fff; font-family:"NotoSansLight"; font-size:15px; color:#555; line-height:22px; background-color:#f8f8f8;} .box_table .boxCol.tamp {background-color:inherit;} .box_table .boxCol8 {width:66.66666%;} .box_table .boxCol4 {width:33.33334%;} .box_table .boxCol6 {width:50%;} .box_table .boxCol12 {height:200px;} .box_table h4 {margin-bottom:10px; font-family:"NotoSansRegular"; font-size:18px; color:#222;} .box_table .prodCompare {overflow:hidden; padding-top:10px;} .box_table .prodCompare .oldProd {float:left; width:65%; padding-right:40px; background:url('/Images/Company/ico_arrow_right.png') right 40px no-repeat;} .box_table .prodCompare .newProd {float:left; width:35%; padding-left:15px;} .box_table ul.ulList>li {margin-top:10px;} .box_table ol.olList>li {margin-top:10px;} .box_table .process {overflow:hidden;} .box_table .process li {float:left; width:20%;} .box_table .process li span {position:relative; display:block; height:89px; mar-right:18px; padding:20px 18px; text-align:center; background-color:#eee;} .box_table .process li span:after {content:""; display:block; position:absolute; right:-18px; top:0px; z-index:2; width:36px; height:100%; background:url('/Images/Company/bg_process.png') right center no-repeat;} .box_table .process li:first-child span {padding-left:20px;} .box_table .process li.last span:after {display:none;} .box_table .terms_wrap {position:absolute; left:0px; top:60px; width:100%;} .box_table .terms_wrap .terms_cont {overflow-y:scroll; height:130px; padding:0 30px; scrollbar-arrow-color:#9f9f9f; scrollbar-highlight-color:#f3f3f3;} @media all and (max-width:1024px) { .box_table .terms_wrap .terms_cont {height:190px;} .box_table .process li span {height:80px; font-size:14px;} } @media all and (max-width:768px) { .box_table, .box_table .boxCol {display:block; border:0px; margin-top:20px;} .box_table .boxCol:first-child {margin-top:0px;} .box_table .boxCol8 {width:100%;} .box_table .boxCol4 {width:100%;} .box_table .boxCol6 {width:100%;} .box_table .boxCol.tamp {display:none;} .box_table .terms_wrap {position:static;} .box_table .terms_wrap .terms_cont {height:130px; padding-left:0px;} } @media all and (max-width:680px) { .box_table .boxCol {padding:21px 25px;} .box_table .process li {width:33.33334%; margin-bottom:3px;} .box_table .process li span {height:70px; margin-right:0px; padding:13px 25px 0 0px;} .box_table .process li span:after {right:10px; top:50%; width:15px; height:30px; margin-top:-15px;} } @media all and (max-width:640px) { .box_table .prodCompare .oldProd {float:none; width:100%; padding-right:0px; padding-bottom:40px; background:url('/Images/Company/ico_arrow_down.png') center bottom no-repeat;} .box_table .prodCompare .newProd {float:none; width:100%; padding-left:0px; padding-top:15px;} } @media all and (max-width:500px) { .box_table .process li {width:50%;} .box_table .process li:last-child {width:100%;} .box_table .process li:last-child span {padding-right:0px; font-size:13px;} } /* 동반성장 - 구매프로세스 */ .buyRule {overflow:hidden; margin-top:5px;} .buyRule li {float:left; width:20%; margin-bottom:20px; padding:0 10px;} .buyRule li img {width:100%; height:auto;} @media all and (max-width:768px) { .buyProcess .col {float:none;} .buyProcess .col.col6 {width:100%;} } @media all and (max-width:640px) { .buyRule li {width:33.33333%;} } @media all and (max-width:480px) { .buyRule li {width:50%;} } /*---------------------- Invest ---------------------- */ /* 재무정보 */ .graph_asset img {width:100%; height:auto;} .graph_income_wrap {*zoom:1; position:relative; margin-bottom:70px;} .graph_income_wrap:after {content:""; display:block; clear:both;} .graph_income_wrap .tab_wrap4 {float:left; width:251px;} .graph_income_wrap .tab_container {float:right; position:relative;} .graph_income_wrap .tab_container .tableInfo {display:inline; position:absolute; right:0px; top:-25px; font-family:"NotoSansLight"; font-size:13px; color:#555;} @media all and (max-width:1045px) { .graph_income_wrap .tab_wrap4 {overflow:hidden; float:none; width:100%; margin-bottom:30px;} .graph_income_wrap .tab_wrap4 .tab_type4 li {float:left; width:16.66666%; margin:0px;} .graph_income_wrap .tab_container {float:none;} .graph_income_wrap .tab_cont img {width:100%; height:auto;} } @media all and (max-width:768px) { .tab_type4 li:hover a, .tab_type4 li.on a {font-size:14px;} } @media all and (max-width:680px) { .graph_income_wrap .tab_wrap4 .tab_type4 li {width:33.33333%;} } @media all and (max-width:480px) { .graph_income_wrap .tab_wrap4 .tab_type4 li {width:50%;} } /* 전자공고 */ .bulletinList li.item {margin-top:10px;} .bulletinList li.item:first-child {margin-top:0px;} .bulletinList li.item .bulletinItem {padding:20px 30px; border:1px solid #dfdfdf;} .bulletinList li.item .bulletinItem .itemYear {padding:10px 0; font-family:"NotoSansRegular"; font-size:16px; color:#222;} .bulletinList li.item .bulletinItem .itemInfo {display:inline-table; width:100%; background:url('/Images/Common/bg_line_dot.gif') left top repeat-x;} .bulletinList li.item .bulletinItem .itemInfo.first {background:none;} .bulletinList li.item .bulletinItem .itemInfo>div {display:table-cell; padding:10px 0; font-family:"NotoSansLight"; color:#555; vertical-align:middle;} .bulletinList li.item .bulletinItem .itemInfo .itemTit {font-size:16px;} .bulletinList li.item .bulletinItem .itemInfo .itemDate {width:100px; font-size:14px;} .bulletinList li.item .bulletinItem .itemInfo .itemDownload {width:240px;} @media all and (max-width:640px){ .bulletinList li.item .bulletinItem .itemInfo {display:block;} .bulletinList li.item .bulletinItem .itemInfo>div {display:block;} } /* IR공고 */ .irList li.item {margin-top:10px;} .irList li.item:first-child {margin-top:0px;} .irList li.item .irItem {padding:20px 30px; border:1px solid #dfdfdf;} .irList li.item .irItem .itemYear {padding:10px 0; font-family:"NotoSansRegular"; font-size:16px; color:#222;} .irList li.item .irItem .itemInfo {display:inline-table; width:100%; background:url('/Images/Common/bg_line_dot.gif') left top repeat-x;} .irList li.item .irItem .itemInfo.first {background:none;} .irList li.item .irItem .itemInfo>div {display:table-cell; padding:10px 0; font-family:"NotoSansLight"; color:#555; vertical-align:middle;} .irList li.item .irItem .itemInfo .itemTit {font-size:16px;} .irList li.item .irItem .itemInfo .itemDate {width:100px; font-size:14px;} .irList li.item .irItem .itemInfo .itemDownload {width:240px;} @media all and (max-width:640px){ .irList li.item .irItem .itemInfo {display:block;} .irList li.item .irItem .itemInfo>div {display:block;} } /*---------------- Customer Service -----------------*/ /* Customer Sub Main */ .faqList_wrap {position:relative;} .faqList_wrap a.btn_goFaq {display:inline-block; position:absolute; right:0px; top:-50px; height:26px; padding-left:36px; background:url('/Images/Common/ico_btn_goFaq.png') left center no-repeat;} .faqList_wrap a.btn_goFaq span {padding-bottom:7px; border-bottom:1px solid #fff; font-family:"NotoSansRegular"; font-size:15px; color:#fff;} .faqList_wrap .faqList {overflow:hidden;} .faqList_wrap .faqList li {float:left; width:50%;} .faqList_wrap .faqList li a {display:block; position:relative; min-height:72px; padding:16px 70px 16px 76px; border-bottom:1px solid #ddd; color:#222; background-color:#fff;} .faqList_wrap .faqList li.even a {border-left:1px solid #ddd;} .faqList_wrap .faqList li a strong {position:absolute; left:27px; top:18px; display:inline-block; width:30px; font-family:"NotoSansLight"; font-size:30px; text-align:center;} .faqList_wrap .faqList li a span {display:table-cell; height:39px; font-family:"NotoSansLight"; font-size:14px; line-height:18px; vertical-align:middle;} .faqList_wrap .faqList li a:hover {color:#fff; background:url('/Images/Common/btn_faqList_open.png') right center no-repeat; background-color:#191919;} @media all and (max-width:768px) { .faqList_wrap .faqList li {float:none; width:100%;} } .service_wrap {margin-bottom:10px; padding:47px 40px; background-color:#fff;} .service_wrap .headLine {margin-bottom:17px; font-family:"NotoSansLight"; font-size:18px; line-height:24px; color:#222;} .service_wrap .summary {font-family:"NotoSansLight"; font-size:15px; line-height:24px; color:#555;} .service_wrap .service_flow {margin-top:35px; text-align:center;} .service_wrap .service_flow .stepList {overflow:hidden; display:inline-block;} .service_wrap .service_flow .stepList li {float:left; width:269px; height:249px; background:url('/Images/Customer/bg_serviceFlow_arrow.png') 221px 87px no-repeat;} .service_wrap .service_flow .stepList li.last {background:none;} .service_wrap .service_flow .stepList .stepItem {width:261px; height:249px;} .service_wrap .service_flow .stepList .stepItem.step01 {background:url('/Images/Customer/bg_serviceFlow01.png') center top no-repeat;} .service_wrap .service_flow .stepList .stepItem.step02 {background:url('/Images/Customer/bg_serviceFlow02.png') center top no-repeat;} .service_wrap .service_flow .stepList .stepItem.step03 {background:url('/Images/Customer/bg_serviceFlow03.png') center top no-repeat;} .service_wrap .service_flow .stepList .stepItem.step04 {background:url('/Images/Customer/bg_serviceFlow04.png') center top no-repeat;} .service_wrap .service_flow .stepList .stepItem .txt {width:189px; padding-top:92px; font-family:"NotoSansRegular"; font-size:18px; line-height:22px; color:#222; text-align:center;} @media all and (max-width:680px) { .service_wrap .service_flow .stepList {margin-left:14%;} .service_wrap .service_flow .stepList li {float:none; background:url('/Images/Customer/bg_serviceFlow_arrow_ver.png') 87px 210px no-repeat;} } @media all and (max-width:370px) { .service_wrap .service_flow .stepList {margin-left:10%;} } @media all and (max-width:320px) { .service_wrap .service_flow .stepList {margin-left:0px;} } /* 고객의 소리 */ .service_type .typeList {overflow:hidden;} .service_type .typeList>li {float:left; width:25%;} .service_type .typeList>li .typeItem {height:332px; margin:10px; text-align:center; background-color:#fff;} .service_type .typeList>li .typeItem .itemImg {padding-top:42px;} .service_type .typeList>li .typeItem dl {padding:20px;} .service_type .typeList>li .typeItem dl dt {margin-bottom:30px; font-family:"NotoSansRegular"; font-size:24px; color:#222;} .service_type .typeList>li .typeItem dl dd {font-family:"NotoSansLight"; font-size:14px; line-height:20px; color:#555;} .service_type .typeList>li .typeItem dl dd a.tel {font-family:"NotoSansThin"; font-size:32px; color:#0079c1;} .service_type .typeList>li .typeItem dl dd a.email {padding-bottom:5px; border-bottom:1px solid #0079c1; font-family:"NotoSansLight"; font-size:18px; color:#0079c1;} .service_type .typeList2 {overflow:hidden;} .service_type .typeList2>li {width:100%;} .service_type .typeList2>li .typeItem {position:relative; height:155px; margin:10px; text-align:left; background-color:#fff; display: flex; align-items: center; padding-left: 40px; gap: 40px;} .service_type .typeList2>li .typeItem .itemImg {height: 60px;} .service_type .typeList2>li:nth-child(1) .typeItem dl {display: flex; align-items: center; gap: 24px;;} .service_type .typeList2>li .typeItem dl dt {margin-bottom:15px; font-family:"NotoSansRegular"; font-size:24px; color:#222;} .service_type .typeList2>li .typeItem dl dd {font-family:"NotoSansLight"; font-size:14px; line-height:20px; color:#555;} .service_type .typeList2>li:nth-child(2) .typeItem { height: auto; padding: 24px 40px;} .service_type .typeList2>li:nth-child(2) .typeItem .new_layout { display: flex; align-items: center; justify-content: space-between; width: 100%;} .service_type .typeList2>li:nth-child(2) .typeItem .new_layout tr td { padding: 10px 20px;} .service_type .typeList2>li:nth-child(2) .typeItem .new_layout tr td p { margin-bottom: 4px;} .service_type .typeList2>li:nth-child(2) .typeItem .new_layout tr td p:last-of-type { margin-bottom: 0;} .service_type .typeList2>li:nth-child(2) .typeItem .new_layout tr td:nth-child(1) { text-align: left;} .tableBox small { display: block; margin-top: 6px; line-height: 1.4;} @media all and (max-width:768px) { .service_type .typeList>li {width:50%;} .service_type .typeList2>li {width:100%;} .service_type .typeList>li .typeItem {margin:10px 1.96666%;} .service_type .typeList2>li .typeItem {margin:10px 0.83333%;} } @media all and (max-width:640px) { .service_type .typeList>li {width:100%;} .service_type .typeList>li .typeItem {height:auto; margin:10px 0.83333%;} } @media all and (max-width:480px) { .service_type .typeList2>li .typeItem { flex-direction: column; padding: 28px 20px; gap: 20px; height:auto;} .service_type .typeList2>li .typeItem .itemImg {left:20px; top:35px;} .btn.blue.mid { height: 34px; line-height: 34px;} .service_type .typeList2>li:nth-child(2) .typeItem { flex-direction: column; padding: 24px 0;} .service_type .typeList2>li:nth-child(2) .typeItem .new_layout { flex-direction: column; padding: 0 20px;} .service_type .typeList2>li .typeItem dl dt { font-size: 16px;} .service_type .typeList2>li .typeItem dl dd { word-break: keep-all;} .service_type .typeList2>li:nth-child(2) .typeItem .new_layout tr td:nth-child(1), .service_type .typeList2>li:nth-child(2) .typeItem .new_layout tr td:nth-child(2) { padding: 10px; font-size: 13px;} .tableBox small { word-break: keep-all;} .pcBr { display: none;} .table_col_type2 { margin: 12px 0;} } /* News & Notice */ .newsList {overflow:hidden;} .newsList>li.item {float:left; width:300px; margin-bottom:20px;} .newsList>li.item .newsItem {position:relative; border:1px solid #ddd; height:455px; margin:0 10px; background-color:#fff;} .newsList.subMain>li.item .newsItem {border:0px;} .newsList>li.item .newsItem .newsImg {overflow:hidden; width:278px;} .newsList.subMain>li.item .newsItem .newsImg {width:280px; height:280px;} .newsList.subMain>li.item .newsItem .newsImg img {/*position:relative; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%);*/width:100%; height:100%;} .newsItem .newsImg.img_none {width:280px; height:70px} .newsList>li.item .newsItem .newsArticle dt.newsTit {padding:15px 20px 0 20px;} .newsList>li.item .newsItem .newsArticle dt.newsTit h3 a {font-family:"NotoSansRegular"; font-size:16px; line-height:22px; font-weight:normal; color:#222;} .newsList>li.item .newsItem .newsArticle dd.newsCont {overflow:hidden; padding:4px 20px 60px 20px;} .newsList>li.item .newsItem .newsArticle dd.newsCont a {font-family:"NotoSansLight"; font-size:14px; line-height:18px; color:#555;} .newsList>li.item .newsItem .newsInfo {position:absolute; left:20px; bottom:0; overflow:hidden; width:240px; height:40px; border-top:1px solid #eaeaea; font-family:"NotoSansLight"; font-size:14px; line-height:38px; color:#555;} .newsList>li.item .newsItem .newsInfo .date {float:left;} .newsList>li.item .newsItem .newsInfo .readNum {display:inline-block; float:right; padding-left:24px; background:url('/Images/Common/ico_viewCount.gif') left center no-repeat;} .newsList>li.item .newsItem .newsInfo .readNum {display:none;} /*관리자에서만 노출*/ @media all and (max-width:1024px) { .newsList_wrap {width:900px; margin:0 auto;} .newsList>li.item {width:300px;} } @media all and (max-width:768px) { .newsList_wrap {width:600px;} } @media all and (max-width:600px) { .newsList_wrap {width:300px;} } /* 자주찾는 질문 */ .bestFaqList {overflow:hidden;} .bestFaqList>li.item {float:left; width:33.33333%; /*width:380px; */} .bestFaqList>li.item .faqItem {height:240px; border:1px solid #ddd; margin:0 10px 10px; background-color:#fff;} .bestFaqList>li.item .faqItem dt {display:inline-table; width:100%; border-bottom:1px solid #ddd;} .bestFaqList>li.item .faqItem strong {display:block; position:absolute; left:0px; top:0px; width:72px; height:71px; font-family:"NotoSansThin"; font-size:40px; line-height:68px; text-align:center;} .bestFaqList>li.item .faqItem dt strong {color:#fff; background-color:#0079c1;} .bestFaqList>li.item .faqItem dd strong {color:#898989; border-right:1px solid #ddd; border-bottom:1px solid #ddd; background-color:#f4f4f4;} .bestFaqList>li.item .faqItem dt .question {display:table-cell; position:relative; height:71px; padding:10px 27px 10px 98px; font-family:"NotoSansRegular"; font-size:17px; line-height:24px; color:#0079c1; vertical-align:middle; word-break:keep-all;} @media \0screen {.bestFaqList>li.item .faqItem dt .question {width:378px;}} .bestFaqList>li.item .faqItem dd {display:block; width:100%;} .bestFaqList>li.item .faqItem dd .answerCont {position:relative; overflow:hidden; height:146px; padding:25px 27px 25px 98px; font-family:"NotoSansLight"; font-size:14px; line-height:24px; color:#222;} .bestFaqList>li.item .faqItem dd .answerCont a.btn_more {display:inline-block; position:absolute; right:25px; bottom:0px; font-family:"NotoSansRegular"; font-size:14px; color:#0079c1;} @media all and (max-width:1024px) { .bestFaqList>li.item {width:50%;} } @media all and (max-width:768px) { .bestFaqList>li.item .faqItem {height:300px;} .bestFaqList>li.item .faqItem dd .answerCont {height:206px;} } @media all and (max-width:680px) { .bestFaqList>li.item {width:100%;} .bestFaqList>li.item .faqItem {height:auto;} .bestFaqList>li.item .faqItem dt .question {padding:5px 27px 5px 85px;} .bestFaqList>li.item .faqItem dd .answerCont {height:auto; padding:25px 27px 40px 85px;} .bestFaqList>li.item .faqItem dd .answerCont a.btn_more {bottom:10px;} } /* 고객의 소리 */ .qnaMain .box h3 {margin-bottom:10px; font-family:"NotoSansRegular"; font-size:24px; color:#222;} .qnaMain .box_request {background:url('/Images/Customer/bg_box_request.gif') right bottom no-repeat;} .qnaMain .box_request .request_wrap {width:285px; font-family:"NotoSansLight"; font-size:14px; line-height:20px; color:#555;} .qnaMain .box_request .btn_wrap {margin-top:40px;} .qnaMain .box {height:320px; padding:50px; border:1px solid #dddddd; background-color:#ffffff;} .qnaMain .box_confirm {margin-bottom:20px;} .qnaMain .confirm_wrap {position:relative; margin-top:40px;} .qnaMain .confirm_wrap ul {width:350px;} .qnaMain .confirm_wrap li {overflow:hidden; position:relative; margin-bottom:10px; padding-left:65px;} .qnaMain .confirm_wrap li label {position:absolute; left:0px; top:0px; display:inline-block; width:65px; height:40px; font-family:"NotoSansLight"; font-size:14px; line-height:40px; color:#555;} .qnaMain .confirm_wrap .btn_qnaConfirm {position:absolute; top:0px; right:0px; width:122px; height:140px; font-family:"NotoSansLight"; font-size:18px; line-height:140px;} .qnaGuide {*zoom:1; position:relative; min-height:62px; margin-left:45px; padding-left:62px; background:url('/Images/Customer/bg_qnaGuide.png') left top no-repeat} .qnaGuide:after {content:""; display:block; clear:both;} .qnaGuide dl {float:left;} .qnaGuide dt {margin-bottom:10px; padding-top:10px; font-family:"NotoSansRegular"; font-size:16px; color:#555;} .qnaGuide dd {font-family:"NotoSansLight"; font-size:14px; line-height:18px; color:#555;} .qnaGuide .btn {float:left; margin:10px 0 0 20px;} /* 가정배달주문 */ .qnaMain.brand .box {border:none; padding:50px 40px;} .qnaMain.brand .col {float:none; margin:0 auto;} .qnaMain.brand .col .desc {padding:0 40px; font-weight:600; line-height:1.4;} .qnaMain.brand .col .desc * {vertical-align:top;} @media all and (max-width:1040px) { .qnaMain .confirm_wrap ul {overflow:hidden; width:auto; margin-right:135px;} .qnaMain .confirm_wrap ul .size280 {width:98.7%; margin:0 0.7%;} .qnaMain .confirm_wrap ul .size90 {width:32.1%; float:left; margin:0 0.6%;} } @media all and (max-width:768px) { .qnaMain .col.col6 {float:none; width:auto;} .qnaMain .box_request {margin-bottom:20px;} .qnaGuide {margin-left:0px;} .qnaGuide .btn {margin-left:0px;} } @media all and (max-width:640px) { .qnaMain .box {height:auto; padding:30px;} } @media all and (max-width:500px) { .qnaMain .box_request {background-image:none;} .qnaMain .box_request .request_wrap {width:auto;} .qnaMain .box_request .btn {width:100%;} .qnaMain .confirm_wrap ul {margin-right:0px;} .qnaMain .confirm_wrap .btn_qnaConfirm {position:static; width:100%; height:50px; line-height:50px;} } /* 고객의 소리 작성 */ .qnaStep_wrap {margin-bottom:65px; text-align:center;} .qnaStep_wrap .stepList {display:inline-block; overflow:hidden;} .qnaStep_wrap .stepList>li {float:left; padding-left:55px; background:url('/Images/Customer/bg_serviceFlow_arrow.png') 20px center no-repeat;} .qnaStep_wrap .stepList>li:first-child {padding-left:0px; background:none;} .qnaStep_wrap .stepList>li .stepItem {width:155px; height:154px; text-align:center; background:url('/Images/Customer/bg_stepItem.gif') center center no-repeat;} .qnaStep_wrap .stepList>li .stepItem dl {display:inline-block; margin-top:30px; width:130px;} .qnaStep_wrap .stepList>li .stepItem dl dt {margin-bottom:15px; font-family:"NotoSansLight"; font-size:16px; color:#ccc;} .qnaStep_wrap .stepList>li .stepItem dl dd {font-family:"NotoSansRegular"; font-size:18px; line-height:24px; color:#fff;} .terms_header {height:51px; padding:16px 0 16px 35px; border-bottom:1px solid #e1e1e1;} .terms_header label {margin-left:10px;} .termsList>li .tit {position:relative; height:51px; padding:16px 0 16px 35px; border-bottom:1px solid #e1e1e1;} .termsList>li .tit button {position:absolute; right:0; top:0;} .termsList>li .tit label {margin-left:10px;} .termsList>li .tit label.ast {padding-left:10px; background:url('/Images/Common/bu_ast.gif') left 8px no-repeat;} .termsList>li .agreeContent {display:none; padding:30px 20px 30px 75px; font-size:14px; line-height:20px; color:#555; background:#efefef;} .termsList>li .agreeContent ol li {margin-bottom:23px;} .termsList>li .agreeContent ol li dl {padding-left:42px;} .termsList>li .agreeContent ol li dl dd {padding-left:14px;} @media all and (max-width:768px) { .qnaStep_wrap .stepList>li {margin-bottom:20px;} .qnaStep_wrap .stepList>li:first-child {padding-left:55px;} .termsList>li .agreeContent {padding-left:30px} } @media all and (max-width:480px) { .terms_header {padding-left:5px;} .termsList>li .tit {padding-left:15px; padding-bottom:45px;} .termsList.eDit>li .tit {padding: 22px 134px 22px 14px; height: auto;} .termsList.eDit>li .tit button {top: 50%; transform: translateY(-50%);} .termsList.eDit>li .tit label.ast {background: url(/Images/Common/bu_ast.gif) left 6px no-repeat;} .termsList .ui_group {padding-right:0;} .termsList .ui_group .ui_group_check {position:absolute; left:-10px; top:0px;} .termsList.eDit .ui_group .ui_group_check {top: -2px;} .termsList>li .tit label {float:left; width:100%; padding-right:70px;} .termsList.eDit>li .tit label {padding-right:0;} .termsList>li .tit button.btn {float:right; text-indent:-9999px; padding-left:0px;} .termsList.eDit>li .tit button.btn {text-indent: 0; width: 130px; padding: 0 18px; text-align: left;} .termsList>li .tit button.btn>span {padding-right:18px;} .termsList.eDit>li .tit button.btn > span {padding-right: 0; overflow: unset; font-size: 15px;} .termsList.eDit>li .tit button.btn .ico {right: -14px;} .termsList.eDit>li .tit button.btn .ico.ico_bottom, .btn_wrap.eDit .ico.ico_write {background-size: 70%;} .termsList>li:first-child .tit label {padding-right:0} .termsList>li .agreeContent {padding-left:20px} .btn_wrap.eDit .btn.big a {width: 150px;} .btn_wrap.eDit .btn.big.ico_right > span {overflow: unset;} } @media all and (max-width:460px) { .qnaStep_wrap .stepList {display:inline-block; width:155px;} .qnaStep_wrap .stepList>li {float:none; width:100%; padding:0 0 37px 0; background:url('/Images/Customer/bg_serviceFlow_arrow_ver.png') center bottom no-repeat;} .qnaStep_wrap .stepList>li:first-child {padding-left:0px; background:url('/Images/Customer/bg_serviceFlow_arrow_ver.png') center bottom no-repeat;} .qnaStep_wrap .stepList>li:last-child {margin-bottom:0px; padding-bottom:0px; background:none;} } /*-------------------------- Etc ----------------------------*/ /* 통합검색 */ .totalSearch {display:inline-block; position:relative; top:-30px; height:45px; padding-right:32px; border-bottom:1px solid #ffffff;} .totalSearch input.input_totalSearch {border:0px; width:368px; height:32px; padding:0px; font-family:"NotoSansRegular"; font-size:24px; line-height:24px; color:#fff; background:transparent;} .totalSearch .btn_totalSearch {position:absolute; right:0px; top:0px; width:32px; height:32px; text-indent:-9999px; background:url('/Images/Common/ico_btn_totalSearch.png') left top no-repeat;} @media all and (max-width:480px) { .totalSearch input.input_totalSearch {width:248px;} } /* FAQ */ .faqSearchList {border-top:1px solid #bdbdbd;} .faqSearchList li.item {border-bottom:1px solid #bdbdbd;} .faqSearchList li.item .faqItem {padding:25px 0; } .faqSearchList li.item .faqItem h3 {margin-bottom:10px; font-family:"NotoSansRegular"; font-size:15px; line-height:24px; color:#333;} .faqSearchList li.item .faqItem .faqCont {font-family:"NotoSansLight"; font-size:15px; line-height:24px; color:#333; word-break:keep-all;} /* 이용약관, 개인정보취급방침 */ .document p {margin-bottom:8px;} /* 사이트맵 */ .sitemapList {display:inline-table; width:100%; margin-bottom:60px;} .sitemapList li.item {display:table-cell; width:25%; /* height:100px; */} .sitemapList li.item.w2 {width:50%;} .sitemapList li.item .sitemapItem {height:100%; padding-left:30px; background:url('/Images/Common/bg_line_dot_ver.gif') left top repeat-y;} .sitemapList li.item:first-child .sitemapItem {padding-left:0px; background-position:-20px top;} .sitemapList li.item .sitemapItem h2 {margin-bottom:25px;} .sitemapList li.item .sitemapItem .menuList li {margin-bottom:5px;} .sitemapList li.item .sitemapItem .menuList li a {display:inline-block; font-family:"NotoSansLight"; font-size:15px;} .sitemapList li.item .sitemapItem .menuList li>a span {display:inline-block; padding-bottom:8px;} .sitemapList li.item .sitemapItem .menuList.list3Col {min-height:195px;} .sitemapList li.item .sitemapItem .menuList.list3Col>li {position:relative; width:33.33333%;} .sitemapList li.item .sitemapItem .menuList.list3Col>li.arr2 {margin-left:38%; margin-top:-195px;} .sitemapList li.item .sitemapItem .menuList.list3Col>li.arr3 {margin-left:70%;} .sitemapList li.item .sitemapItem .menuList.list3Col>li.arr3.first {margin-top:-101px;} .sitemapList li.item .sitemapItem .menuList .subMenuList {margin-bottom:18px;} .sitemapList li.item .sitemapItem .menuList .subMenuList li a {font-size:13px;} @media all and (max-width:768px) { .sitemapList li.item .sitemapItem .menuList.list3Col>li {position:relative; width:100%;} .sitemapList li.item .sitemapItem .menuList.list3Col>li.arr2 {margin-left:0; margin-top:inherit;} .sitemapList li.item .sitemapItem .menuList.list3Col>li.arr3 {margin-left:0;} .sitemapList li.item .sitemapItem .menuList.list3Col>li.arr3.first {margin-top:inherit;} } @media all and (max-width:767px) { .sitemapList {display:block;} .sitemapList li.item {display:block; float:left; width:50%; height:auto; margin-bottom:40px;} .sitemapList li.item .sitemapItem {min-height:170px;} .sitemapList li.item:first-child .sitemapItem {padding-left:30px; background-position:left top;} } @media all and (max-width:480px) { .sitemapList {padding-left:52px;} .sitemapList li.item.w2, .sitemapList li.item {float:none; width:100%; height:auto; margin-bottom:40px;} .sitemapList li.item .sitemapItem {min-height:inherit;} } .sliderPanel a{display:block;} /*메인레이어팝업*/ .lp_popup {display:none; width:100%; background-color:#fff; position:relative;} .lp_popup .lp_footer {padding:10px 20px; background-color:#222; width:100%; position:absolute; bottom:0px; left:0px;} .lp_popup .lp_footer {overflow:hidden;} .lp_popup .lp_footer .todayClose {float:left; font-family:"NotoSansLight"; font-size:15px; color:#fff;} .lp_popup .lp_footer .btn_popup_close {float:right;} @media all and (max-width:640px) { .lp_popup {left:0 !important;} .lp_popup .lp_header h2 {font-size:16px; letter-spacing:-1px;} .lp_popup .lp_body img {width:100%;} } /*메인원도우팝업*/ .wp_popup {width:100%; background-color:#fff;} .wp_popup .wp_container {position:relative;} .wp_popup .wp_header {height:60px; background-color:#0079c1;} .wp_popup .wp_header h2 {padding-left:20px; font-family:"NotoSansRegular"; font-size:18px; line-height:60px; color:#fff;} .wp_popup .wp_body {overflow:hidden; padding:30px;} .wp_popup .wp_section {margin-bottom:10px;} .wp_popup .wp_footer {padding:10px 20px; background-color:#222;} .wp_popup .wp_footer {overflow:hidden;} .wp_popup .wp_footer .todayClose {float:left; font-family:"NotoSansLight"; font-size:15px; color:#fff;} .wp_popup .wp_footer .btn_popup_close {float:right;} @media all and (max-width:640px) { .wp_popup .wp_header h2 {font-size:16px; letter-spacing:-1px;} .wp_popup .wp_body img {width:100%;} }