@charset "utf-8";
/* CSS Document */

/* wrap */
#wrapper {width:100%; height:100%; background-color:#fff; font-family:'Nanum Gothic'; }
#wrapper .inBox{width: 1250px;margin:0 auto;}
/*common */
.orange{color:#f27300;}
.fw_bold{font-family:'Nanum Gothicbold';}


/* header */

#header{width:100%;}
#header .inner  { width: 1250px; margin: 0 auto; position:relative;}
#header .logo {width:196px; height:64px; padding:28px 0; margin:0 auto;}

#header #gnb {position:absolute; top:56px; left:0; font-family:'Nanum Gothic';}
#header #gnb li { display: inline-block; margin: 0px 0 0 0px; }
#header #gnb li:first-child{background:none;}
#header #gnb li:last-child{padding-right:0;}
#header #gnb li a { display: inline-block; font-size: 14px;  vertical-align: top; color:#888; position: relative; padding: 0 9px;}
#header #gnb li:first-child a{padding-left: 0;}
#header #gnb li:first-child a:after{display: none;}
#header #gnb li a:after {position: absolute; width: 1px; height: 10px; background-color: #e1e1e1; top: 4px; left: 0; content: ""; }
#header #gnb li a img { vertical-align: top; }
#header .ad{ position:absolute; left:0px; top:16px;  line-height:0; font-size:0; }

.search_area {position: absolute; right: 0; top: 28px; }
.search_area  p{text-align: right;font-size: 14px; margin-bottom: 10px; letter-spacing: -1px;}
.search_area .inputBox:after {display:block; clear:both; content:"";}
.search_area .inputBox{background-color: #f3efe6;}
.search_area input { float: left; width: 245px; height: 40px; padding-left:10px ; margin:0;  line-height: 40px; color: #9e9e9e; font-size:13px;  border: 0; background-color: #f3efe6;}
.search_area span { float: left; width: 40px; height: 40px; font-size: 0; line-height: 0; background: url(/mall/images/header/btn_search.png) no-repeat center 10px; text-indent: 100%; overflow: hidden; cursor:pointer; position:relative; top:-2px }

.lnb_pos{ width:100%; height:50px;background:url(/mall/images/header/lnb_bg.jpg) left top repeat-x; z-index: 100;}
#header .lnbArea{position:relative; margin:0 auto; width:1250px;}
#header #lnb { z-index: 1; width:100%;   position:absolute; right:0; }
#header #lnb .lnb_inner{width:100%;}
#header #lnb .lnb_inner > ul:after { content: ""; display: block; clear: both; }
#header #lnb .lnb_inner > ul > li { float: left; background:url(/mall/images/header/lnb_bg.jpg) right top no-repeat; }
#header #lnb .lnb_inner > ul > li:first-child { margin: 0; }
#header #lnb .lnb_inner > ul > li > a { display: block; padding:15px 18.45px 17px;}
#header #lnb .lnb_inner > ul > li a:hover,#header #lnb .lnb_inner > ul > li a.on {  }
#header #lnb .lnb_inner > ul > li.last a {  background-color: #5a1419;}
#header #lnb ul li.on ul { display: block; }


/* 메인 비주얼*/
#main_visual{overflow:hidden; width: 2000px; margin: 0 auto; position: relative; left:50%; margin-left: -1000px; height: 499px;}
#main_visual .bx-controls-direction{display: none;}
#main_visual .bx-pager{position: absolute; bottom: 30px;left: 50%; z-index: 100;}
#main_visual .dot{z-index:9999 !important;}

/* PAGER */

#main_visual .bx-wrapper .bx-pager {text-align: center;font-size: .85em;font-family: Arial;font-weight: bold;color: #666;padding-top: 20px;}
#main_visual .bx-wrapper .bx-pager .bx-pager-item,#main_visual .bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;*zoom: 1;*display: inline;}
#main_visual .bx-wrapper .bx-pager.bx-default-pager a {background: #b6b6b6;text-indent: -9999px;display: block;width: 16px;height: 16px;margin: 0 5px;outline: 0;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}
#main_visual .bx-wrapper .bx-pager.bx-default-pager a:hover,#main_visual .bx-wrapper .bx-pager.bx-default-pager a.active {background: #bf8631;}
#main_visual .lst_visual {z-index:-9899;}
#main_visual .lst_visual button{position: absolute; color: #fff; border: 2px solid #fff; width: 137px; height: 45px; font-size: 17px; line-height: 21px; letter-spacing: -1px;transition: .4s ease; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease;}
#main_visual .lst_visual button:hover{background-color: #902229;color: #fff; border-color: #902229;}
#main_visual .lst_visual .btn_more1{ top: 314px; left: 378px; }
#main_visual .lst_visual .btn_more2{ top: 314px; left: 378px; }
#main_visual .lst_visual .btn_more3{ top: 314px; left: 378px; }

span.h100{ display: inline-block;height: 100%;vertical-align: middle;}

.lst_pro ul:after {display:block; clear:both; content:"";}
.lst_pro ul{display: block;margin-left: -29px; margin-top: -20px;}
.lst_pro ul li{width: 280px;margin-top: 20px; float: left;display: block;margin-left: 29px; text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.lst_pro ul li .img{width: 100%;height: 190px; border: 1px solid #ddd; }
.lst_pro .cont{background-color: #fff;padding: 20px 0; text-align: center; font-family:'Nanum Gothic'; }
.lst_pro .cont strong.ti{display: block; color: #333;font-size: 15px; font-weight: bold;     margin-bottom: 5px;}
.lst_pro .cont span.price{display: block; color: #9f1416;font-size: 15px; font-weight: bold; }
.lst_pro .cont .tag{margin-top: 5px;	}
.proView.tag{display: inline-block;}


/* 메인 공지사항 */

#m_notice{background-color: #f7f7f7; position: relative; border-bottom: 1px solid #e2e2e2;}
#m_notice >.inner{padding: 15px 0; position: relative; }
#m_notice >.inner:after {display:block; clear:both; content:"";}
#m_notice >.inner strong{font-size: 20px; float: left; display: block; margin-right: 20px; }
#m_notice >.inner p{width: 1100px;font-size: 15px; float: left;color: #888; padding-left: 20px; line-height: 25px; position: relative; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
#m_notice >.inner p:after{position: absolute; width: 1px; height: 20px; background-color: #e2e2e2; top: 2px; left: 0; content: "";}
#m_notice .btn_more{position: absolute; top: 15px; right: 0px;}

/* 메인 제품 컨테이너 */
#m_pro_container{background-color: #fbfaf5; padding: 30px 0;}

/* 메인 탑 배너 */

#m_top_ban{margin-bottom: 30px;}
#m_top_ban ul:after {display:block; clear:both; content:"";}
#m_top_ban ul li{float: left; margin-left: 30px;}
#m_top_ban ul li:first-child{margin-left: 0;}

/* 메인 떡맛스러움(베스트)*/

#m_bestPro {background-color: #f2efe4;}
#m_bestPro > .inner{padding: 20px 45px; position: relative;}
#m_bestPro h2{margin-bottom: 22px;}
#m_bestPro .lst_best{width: 1161px; position: relative;}
#m_bestPro .bx-wrapper{max-width: 100% !important;}
#m_bestPro .lst_best ul:after {display:block; clear:both; content:"";}
#m_bestPro .lst_best ul{display: block;}
#m_bestPro .lst_best ul li{width: 220px; float: left;display: block;}
#m_bestPro .cont{background-color: #fff;padding: 20px 0; text-align: center; font-family:'Nanum Gothic'; }
#m_bestPro .cont strong.ti{display: block; color: #333;font-size: 15px; font-weight: bold;margin-bottom: 5px;}
#m_bestPro .cont span.price{display: block; color: #9f1416;font-size: 15px; font-weight: bold;margin-bottom: 5px;}

#m_bestPro .bx-pager{display: none;}
#m_bestPro .bx-controls-direction a{text-indent: -9999px; display: block; position: absolute;top: 50%	; margin-top: -31px;}
#m_bestPro .bx-controls-direction a.bx-prev{width: 62px; height: 63px; background: url(/mall/images/main/btn_best_prev.png) left top no-repeat; left: -30px;}
#m_bestPro .bx-controls-direction a.bx-next{width: 62px; height: 63px; background: url(/mall/images/main/btn_best_next.png) left top no-repeat; right: -30px;}

/* 메인 : 떡 BEST */

.best_rice{border: 1px solid #e2e2e2; margin-top: 30px;background-color: #fff; padding: 20px;}
.best_rice h2{position: relative; }
.best_rice h2:after{position: absolute; width: 88%; height: 1px; background: url(/mall/images/bg/bg_dot.gif) repeat-x right center ; top: 50%; right: 0; content: "";}
.best_rice .lst_pro{margin-top: 20px;}
.best_rice .lst_pro ul li{cursor: pointer;}

/* 메인 : 떡명장 */

#m_mid_container{margin: 40px 0;}
#myungJang { margin-bottom: 95px;}
#myungJang h2{text-align: center;}
#myungJang .lst_myungJang{margin-top: 46px;}
#myungJang .lst_myungJang ul:after {display:block; clear:both; content:"";}
#myungJang .lst_myungJang ul li{width: 276px; float: left; margin-left: 47px; text-align: center;}
#myungJang .lst_myungJang ul li:first-child{margin-left: 0;}
#myungJang .lst_myungJang ul li .img{margin-bottom: 20px;}
#myungJang .lst_myungJang ul li .cont strong{font-size: 22px;font-weight: bold; display: block;margin-bottom: 10px;color: #333;}
#myungJang .lst_myungJang ul li .cont p{font-size: 15px;line-height: 22px; font-weight: 600;color: #888;}


/* 메인 : 하단 컨테이너 */

#m_bot_container{margin: 48px 40px;}
#m_bot_container .inner>ul:after {display:block; clear:both; content:"";}
#m_bot_container .inner>ul > li{float: left;width: 33.3%;height: 240px;background-color: #f1f1f1; }
#m_bot_container .inner>ul > li.bg{background-color: #565656;}
#m_bot_container .inner>ul > li.bg.review{background: url(/mall/images/main/bg_m_review.jpg) left top no-repeat #565656;}
#m_bot_container .inner>ul > li h2 {color: #000; }
#m_bot_container .inner>ul > li h2 a{color: #000;}
#m_bot_container .inner>ul > li.bg h2{color: #fff;}
#m_bot_container .inner>ul > li.bg h2 a{color: #fff;}
#m_bot_container .inner>ul > li h2{font-size: 24px; font-weight: 500; letter-spacing: -1px;}

.m_notice{padding: 30px 40px; position: relative; background: url(/mall/images/main/bg_notice.png) bottom 43px right 34px no-repeat;}
.m_notice h2{margin-bottom: 18px;}
.m_notice .lst_notice ul li{font-size: 14px; margin-top: 12px; position: relative; padding-left: 10px;}
.m_notice .lst_notice ul li:after{position: absolute; width: 3px; height:3px;background-color: #d4d4d4; top: 6px;left: 0;	content:" ";}
.m_notice .lst_notice ul li a{color: #d4d4d4; font-family: 'Nanum Gothic';}
.m_notice .btn_more{position: absolute; top: 34px;right: 46px;}

.m_faq{padding: 30px 40px; position: relative; background: url(/mall/images/main/bg_faq.png)  bottom 39px right 43px no-repeat ;}
.m_faq h2{margin-bottom: 18px;}
.m_faq .lst_faq ul li{font-size: 14px; margin-top: 12px; position: relative; padding-left: 10px;}
.m_faq .lst_faq ul li:after{position: absolute; width: 3px; height:3px;background-color: #353535; top: 6px;left: 0;	content:" ";}
.m_faq .lst_faq ul li a{color: #888; font-family: 'Nanum Gothic';}
.m_faq .btn_more{position: absolute; top: 34px;right: 46px;}

.m_review{padding:30px 28px ; }
.m_review h2{margin-bottom: 18px;}
.m_review p {font-size: 14px; font-weight: 400; line-height: 22px; color: #fff;}
.m_review p > span{color: #dbc986;}

.m_customer{padding: 30px 40px;}
.m_customer h2{margin-bottom: 13px;}
.m_customer h2 a{color: #000;}
.lst_customer ul li:first-child{margin-top: 0;}
.lst_customer ul li{margin-top: 15px;}
.lst_customer ul li.last{font-weight: bold;     padding-left: 60px;font-size: 14px;}

.m_bank{padding: 30px 45px 18px 28px;background: url(/mall/images/main/bg_bank.png) right 28px top 30px no-repeat;}
.m_bank h2{margin-bottom:7px;}
.bankNum {margin-bottom: 13px;}
.bankNum .num{color: #dbc986; font-size: 27px; font-family:'Myriad Pro' ; font-weight: normal;}
.bankNum .bank_name{color: #fff; font-size: 14px;margin-top: 5px;}



.search_inp {height:32px; width:166px; border-right: 0; font-size: 12px; } 
.goodheader {border-bottom:1px solid #ccc; position:relative; margin-bottom:30px; height: 40px;border-top: 1px solid #333;padding-top: 12px;box-sizing: border-box;}
.goodheader:after {display:block; clear:both; content:"";}
.goodheader ul.align_list {display:inline-block; position:relative;float: left;}
.goodheader ul.align_list:after {display:block; clear:both; content:"";}
.goodheader ul.align_list li {position:relative;float:left; width: auto;line-height: 30px; text-align:center;margin-right:10px; text-align: center; width:100px}
.goodheader ul.align_list li a {color:#656766; display:inline-block;height: 27px; display:block;font-size: 13px; display: block;}
.goodheader ul.align_list li a:hover,.goodheader ul.align_list li.on a {color:#000;}
.goodheader ul.align_list li:hover span.line,.goodheader ul.align_list li.on span.line {display:block;}
.goodheader ul.align_list li a span {display: block; border-left: 1px solid #ddd; line-height: 13px;}
.goodheader ul.align_list li:first-child a span {border-left: 0;}
.goodheader ul.align_list li.on{color: #333;font-weight: bold; background: url(/mall/images/common/ico_arr.gif) right 5px top 5px no-repeat;}
.goodheader .search{float: right; margin-bottom: 10px;}

/* 푸터 */

#footer{}

.comp_info{position: relative; background-color: #383838; padding: 26px 0 26px 0;}
.comp_info .inner:after{display: block;clear: both;content: "";}
.f_logo{ float: left; margin-top: 19px;}
.lst_info{float: left; margin-left: 60px;width: 398px;}
.lst_info ul li{font-size: 13px; line-height: 20px;color: #888;}
.ecro{float: left;margin-left: 199px;}
.btn_top{position: fixed; display: block; bottom: 50px;left:50%; margin-left: 565px; z-index: 100;}

.f_utill{background-color: #575757;}
.f_utill ul:after{display: block;clear: both;content: "";}
.f_utill ul li{float: left;}
.f_utill ul li a{display: block; color: #c2c2c2; font-size: 14px; padding: 15px 15px; position: relative;}
.f_utill ul li a:after {position: absolute; width: 1px; height: 10px; background-color: #797979; top: 20px; left: 0; content: ""; }
.f_utill ul li:first-child a:after{display: none;} 


/*서브 컨테이너*/
#sub_container{}
#sub_container > .inner {min-height: 1000px;}
#sub_container > .inner { width: 1250px;margin: 0 auto;position: relative;}




/*추천상품 */

#recommand_product h2{font-size:20px ; color: #3b3b3b; font-weight: bold; padding-bottom: 20px; border-bottom: 1px solid #e5e5e5;margin-bottom: 30px;}

.goods_list {}
.goods_list ul {}
.goods_list ul:after {display:block; clear:both; content:"";}
.goods_list ul li {height: 242px;cursor:pointer;float:left; width:311px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;  margin-bottom: 30px;}
.goods_list ul li .inner {text-align: center;}
.goods_list ul li .inner .img {    height: 190px;margin-bottom: 20px;text-align: center; display:table;width: 100%;}
.goods_list ul li .inner .img .inbox {display:table-cell; vertical-align: middle;}

.goods_list ul li .inner .ico { text-align: center; margin-bottom: 15px;     height: 15px;}
.goods_list ul li .inner p.tit {color: #4c4845;font-size: 15px; font-weight: bold; margin-bottom: 5px; letter-spacing: -0.5px;}
.goods_list ul li .inner p.price {color: #9f1416; font-size: 15px;font-weight: bold; }


.goods_list.lst_br ul{margin-left: -25px;}
.goods_list.lst_br ul li{margin-left: 23px; width: 280px; height: inherit; margin-bottom: 0;}
.goods_list.lst_br ul li .img{height: 190px; border: 1px solid #ddd;}


#eventBan{margin-bottom: 30px;}

.reviewTable {border-top: 1px solid #ddd;border-bottom: 1px solid #ddd; margin-bottom: 30px;}
.reviewTable table {width:100%;}
.reviewTable table tbody tr th {color:#545454;font-family:'Dotum'; padding-left:6px;font-size:12px; font-weight:normal;}
.reviewTable table tbody tr td {padding:10px 0;}
.n_input {border:1px solid #e1e1e1; height:26px}
.textarea textarea {border:1px solid #e1e1e1; width:100%; border-top:1px solid #abadb3; overflow:auto;}
.review_title h2{font-size:20px; color:#272727;padding:20px 0 0 0; font-weight:bold; font-family:dotum;}

.tab_list {border-bottom:1px solid #202020; margin-bottom:30px;text-align:center;}
.tab_list ul {}
.tab_list ul:after {display:block; clear:both; content:"";}
.tab_list ul li {float:left; width:129px;  border: 1px solid #c4c2c0;border-bottom: 0; margin-left: -1px;position: relative; top:1px}
.tab_list ul li.fixed,.division_list ul li:hover {top:1px;position:relative;  border: 1px solid #202020;border-bottom: 0; background: #fff; padding-bottom: 1px;z-index:10;}
.tab_list ul li a {display:block; padding:10px 0;font-weight: 400;}
.tab_list ul li a span {display:block; border-right:1px solid #ccc;color:#888; }
.tab_list ul li.fixed a ,.division_list ul li:hover a {color:#222;font-weight: bold;}

.goods_view_pos {padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #e1e1e1;}
.goods_view_left {float:left; width:470px; text-align:center;}
.goods_view_img {display:inline-block; height:380px; line-height:380px; vertical-align:middle; text-align:center; margin-bottom:20px; *zoom:1; *display:inline;}
.goods_view_img a {text-align:center;}
.goods_view_img img {max-width:100%;}
.goods_view_right {float:right; width:415px;}

.galleryBox {display: block; position: relative;}
.galleryBox:hover .over {display: table;}
.gall_select {position: absolute; top:10px; left:10px;z-index:90;}
.galleryBox .over {display: none;position: absolute; width: 100%; height: 320px; top:0; left:0;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.6+0,0.6+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
}
.galleryBox .over .inner {display:table-cell; vertical-align: middle;}
.galleryBox .over .inner .tit {color: #fff; font-size: 13px; border-bottom: 1px solid #fff; display: inline-block; padding:0 22px 13px 22px; letter-spacing:8px; margin-bottom: 45px;}
.galleryBox .over .inner .txt{font-size: 15px; line-height:23px; color: #fff; letter-spacing:2px; display: block;}
.tab_list_inner {margin-bottom: 30px;  }
.tab_list_inner:after {display:block; clear:both; content:"";}
.tab_list_inner ul{float:right;}
.tab_list_inner ul:after {display:block; clear:both; content:"";}
.tab_list_inner li {float:left; margin:0 10px 0 0;}
.tab_list_inner li a{display:block; color:#a1a1a1; font-size:12px; font-weight:bold; padding:0 0 0 6px; background:url(/mall/oktomato_g4/default/button/bg_tab.gif) left center no-repeat;}
.tab_list_inner li.fixed a {color:#ff7a22; text-decoration:underline;}



.layerPopup {position: fixed; display: none; top:50%; left:50%; margin-top: -360px;}
.layerPopup .close {position: absolute; right:30px; top:30px;}
#pop1 {display: none;}

.basket_table_02 img {width: 100%;}


.btn_deliveryTable{width: 100px; height: 28px;background-color: #575757; font-size: 13px; color: #fff; text-align: center;}



.layerPopup {display:none; position:absolute;  z-index:120; width:1180px;   top:0;     background-color: #fff;}
.summaryBox {position:relative;}
.summaryBox .inner {background-color: #fff;}
.summaryBox .inner h1{color: #fff; font-size: 20px; font-weight: bold; padding: 20px; background-color: #505050;}
.summaryBox .inner:after {display:block; clear:both; content:"";}
.summaryBox .btn {position:absolute; right:20px; top:20px;}





.deliveryLayer > .inner{display:none;}
.deliveryLayer > .inner{position:absolute;width:100%;height:100%;top:0px;left:0px;z-index:99;
  background:rgb(0,0,0);
    background: transparent\9;
    background:rgba(0,0,0,0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
    zoom: 1;
}
.deliveryLayer .inner_box{position:relative;width:80%; margin:0px auto;background:#fff; }
.deliveryLayer .inner_box > .inner{padding:20px;}
.deliveryLayer .btn_close{position:absolute;top:8px;right:-38px; z-index: 99;}


