@charset "utf-8";
/* CSS Document */
body{ font-size:14px; font-family:ng, sans-serif;}


#header .gnb_wrap .gnb {margin-left:1.1em; }
#header .gnb_wrap .gnb > li .dp1 { padding:0 12px;}	
.header .right_area .right_top > li.last_thn { margin-right:5px; }
.header .right_area .right_top > li > a { padding:5px 6px 0 6px; font-size:.813em; font-family:ng,sans-serif;}


.header .main_rightarea { position:absolute; top:0; right:0;  }



/*sub1*/
.con1_2_1 .p1 {margin-top:0; font-size:.938em; margin-bottom:15px;}
.con1_2_1 .p2 {font-size:1em;}
.process_box > ul > li .process_box_i .process_img {width:50%; height:50%; padding:20px;}

/*sub2*/
.sub2_1 .con3 .roast_Brand > li {width:150px;}
.con2_1_l > li {width:66%;}
.con2_1_l > li.size_s {width:31.8%;}
.con2_line {margin-top:0;}

/*제품리스트*/
.prod_gall { margin:40px 0 -15px -15px; }
.prod_gall > li .inner { margin:0 0 15px 15px}
.prod_gall_2 { margin:40px 0 0px 0px; }

/*제품 상세페이지*/
.goods .right_area .inner .deatil_list dl dt, .goods .right_area .inner .deatil_list dl dd {line-height:30px;}

/*order*/
.step_st .con {display:none;}



@media screen and (min-width:768px) and (max-width:1105px){
	
.header .logo {float:inherit !important; }	
#header .gnb_wrap { text-align:Center;}
#header .gnb_wrap .gnb { display:inline-block; float:inherit;}

#header .gnb_wrap .gnb > li .dp1 { border-top:none; line-height:60px; }
#header .gnb_wrap .gnb > li > a.dp1:hover, #header .gnb_wrap .gnb > li > a.dp1.on { border-top:none; }

.header .right_area .right_top { position:absolute; top:0px; left:2.5%; }
.header .right_area .menu {position:absolute; top:0px; right:2.5%;}


#contents .page_tit .tit {margin-top:160px}
#contents .page_tit .nav > li {margin-top:10px;}
.sub #contents .lnb_area {margin-top:15px;}
.sub #contents .lnb_area .gnb .dp2 > li > a {height:40px; line-height:40px; font-size:13px; }

}

@media screen and (max-width:767px){
body{ font-size:12px; font-family:ng, sans-serif;}

.header .logo {float:inherit !important; }	
.header .right_area .menu {position:absolute; top:0px; right:2.5%;}

#header .gnb_wrap, .header .right_area .right_top {display:none;}
#contents .page_tit_wrap {height:250px}

#footer .menu_wrap .etc {display:none;}
#footer .info > p span,  #footer .info > p a { display:inline-block;}	
#footer .info > p strong {display:block;}
#footer .info > p strong, 
#footer .info > p span, #footer .info > p a { padding-right:11px;}

.sub #contents .lnb_area .gnb .dp2 {display:none;}


.header .main_rightarea {display:none;}
 

/*sub1*/
.sub1_1 .con1 p { margin:auto;}
.sub1_1 .con1 .p1 {font-size:1.5em; padding-bottom:10px; width:60%; }
.sub1_1 .con1 .p2 {font-size:1em; width:80%; line-height:17px }

.sub1_1 .tit_box1 .sub_tit { font-size:1.438em; }
.sub1_1 .tit_box1 .sub_tit_icon {width:25px;}
.sub1_1 .tit_box1 .p1 { width:90%; margin:auto; margin-top:10px;}
.sub1_1 .tit_box1 .p1 .st1 { font-size:1.25em;}
.sub1_1 .con2 .con2_l, 
.sub1_1 .con2 .con2_r,
.sub1_1 .con4 .l_img,
.sub1_1 .con4 .r_img,
.sub1_1 .con5 .box1 ul li { float:inherit; width:100%; margin-bottom:5px; margin-left:0px;}
.sub1_1 .con5 .box1 ul li .top_txt > p {padding:25px;}
.sub1_1 .con5 .box1 ul li .bottom_txt p {font-size:1.375em}

.sub1_1 .map_name, .sub2_1 .map_name {display:block; margin-top:20px;}
.sub1_1 .con3_map, .sub2_1 .con3_map {display:none;}

.con_idx2 > .idx{ display:none}
.sub_location .detail_wrap.con_idx2 {width:100%; margin-top:20px; }
.detail_wrap.con_idx2 .detail .prod_m_top div.m_top_img,
.detail_wrap.con_idx2 .detail .prod_m_top div.m_top_table {width:100%;}
.detail_wrap.con_idx2 .detail .prod_m_top div.m_top_table {padding-top:0;}


/*1_2*/
.tit_box2_1 .sub_tit{ font-size:1.438em; }

.con1_2_r  { float:inherit; margin-left:-5px }
.con1_2_r > li:first-child {width:100%; margin-bottom:5px; }
.process_box > ul {margin-left:-10px;}
.process_box > ul.m_none { display:none; }
.process_box > ul.pc_none { display:block; }
.process_box > ul > li {width:33.33%}
.process_box > ul > li .process_box_i { margin:0 0 10px 10px;}
.process_box > ul > li .process_box_i .process_img {padding:10px;}
.process_box > ul > li .process_box_i .process_txt .proc_tit { font-size:1em;}
.process_box > ul > li .process_box_i .process_txt .proc_txt {line-height:16px}
.process_box > ul > li .process_box_r:after { font-size:17px !important; right:-15px !important;}
.process_box > ul > li .process_box_b:after { font-size:17px !important; position:absolute; bottom:0; right:41%; }
.process_box > ul > li .process_box_l:after { font-size:17px !important; left:-15px !important; }

.doc1_2 .con5 .box1 ul li { float:inherit; width:100%; margin-bottom:5px; margin-left:0px;}
.doc1_2 .con5 .box1 ul li .top_txt > p {padding:25px;}
.doc1_2 .con5 .box1 ul li .bottom_txt p {font-size:1.375em}


/*1_3*/
.sub1_3 .board_st tr th {font-size:0.87em; padding:5px;}
.sub1_3 .board_st tr td ul li {width:50%;}


/*sub2*/
.sub2_1 .con3 .con_tit {padding:30px 0;}
.sub2_1 .con3 .roast_Brand > li {width:100px;}
.buss ul li {width:100%; }

.con2_1_l, .con2_1_r { width:100%;}
.con2_line {display:none;}
.con2_1_r p {text-align:center;}


/*sub6*/
.sub6_1 .img_box ul li {width:33.33%;}
.sub6_1 .img_box ul li.txt_li > p {padding-top:15px;}

.sub6_1 .top_txt .p1 {font-size:1.313em;}
.sub6_1 .top_txt .p2 {font-size:1.5em;}


.sub6_6 {padding:0 10px;}
.greeting_p1 { margin-bottom:20px; line-height:25px; font-family:ns, sans-serif; margin-bottom:20px;}
.ceo_img { width:100%; text-align:center;}
.greeting_p4 {float:right;}


.sub_intro_menu_wrap > li {width:50%;}
.sub_intro_menu_wrap > li .sub_intro_menu {padding:10px 20px;}

.map_info.pc_none {display:block;}
.map_info.m_none {display:none;}


/*sub7*/
.m_prod_area > ul > li {width:50%;}
.site_banner > ul > li {width:100%;}


/*제품리스트*/
.cate_list > li {width:33.33%;}
.cate_list > li:nth-child(6) .inner > a, 
.cate_list > li:nth-child(7) .inner > a, 
.cate_list > li:nth-child(8) .inner > a, 
.cate_list > li:nth-child(9) .inner > a, 
.cate_list > li:nth-child(10) .inner > a {margin-top:0;}
.cate_list > li:first-child .inner > a, 
.cate_list > li:nth-child(4) .inner > a,
.cate_list > li:nth-child(7) .inner > a,
.cate_list > li:nth-child(10) .inner > a  { margin-left:0}
.cate_list > li .inner > a {padding:0 8px;}

.option_area .prod_count {float:inherit; text-align:center;}
.option_area > ul {float:inherit; text-align:center;}
.prod_gall > li {width:100%;}


.prod_gall_2 .prod_tit2 {margin-bottom:30px}
.prod_gall_2 ul.prod_gall2 > li {width:100%;}

/*제품 상세페이지*/
.goods .left_area {width:100%;}
.goods .right_area, .goods .right_area2 {width:100%;}
.goods .right_area .inner,.goods .right_area2 .inner {padding:20px 0 0 0;}
.goods .right_area .inner .deatil_list dl dt {width:45px;}
.goods .right_area .inner .deatil_list dl dt > p {font-size:0.813rem;}
.goods .right_area .inner .deatil_list dl dd {font-size:0.75rem;}
.goods .right_area .inner .deatil_list dl dd .prod_select {padding:2px 25px 2px 10px; width:auto;}
.goods .right_area .inner .p_btn_area > li .prod_btn { font-size:0.813rem; line-height:35px}


.view_wrap .view_tab > li { width:50%;}
.view_wrap .view_tab  > li:nth-child(3) > a,  
.view_wrap .view_tab  > li:nth-child(4) > a {margin-top:-1px;}
.view_wrap .view_tab > li:first-child > a,
.view_wrap .view_tab  > li:nth-child(3) > a {margin-left:0px;}

 

/*주문내역서*/
.sub_box_st {padding:10px;}

/*login*/
.sub_login_wrap .sub_login_box {width:90%;}
.sub_login_wrap .sub_login_box .sub_login {padding:20px 20px 20px 20px; margin-bottom:10px;}
.sub_login_wrap .sub_login_box .sub_login .login_inp .btn {font-size:14px;}
.sub_login_wrap .sub_login_box .sub_login .login_inp .inp {height:35px; line-height:35px;}

/**/
.sub_snack_wrap .pd{ padding:3em 0 5em 0}
.sub_snack_wrap .page_sec{ margin-top:3em}
.sub_snack_top .con{ width:100%; text-align:center}
.sub_snack_top .img{ top:auto; bottom:-1.5em; left:50%; transform:translate(-50%,0); width:60%}
.sub_snack_top .img img{ width:100%}
.sub_snack_wrap.con1 .img{ position:static; height:0; padding-bottom:30%; width:100%; margin-top:2em}
.sub_snack_wrap.con1 .con{ margin-left:0}
.snack_prod{ flex-wrap:wrap}
.snack_prod > li{ width:50%}
.snack_step .step{ flex-wrap:wrap}
.snack_step .step > li{ width:100%; flex:0 0 auto; margin:.5em 0}
.snack_step .step > li .in{ padding:1em; padding-left:6.5em; position:relative; text-align:left}
.snack_step .step > li .in .icon{ position:absolute; left:1.5em; top:50%; transform:translateY(-50%); width:3em; line-height:3em}
.snack_step .step > li .in .tt{ margin-bottom:1em}
.snack_step .line{ left:50%; top:-2em; transform:translate(-50%,0); width:.5em; height:calc(100% + 4em)}
.snack_step .dot{ left:50% !important; transform:translate(-50%,0)}
.snack_step .dot.left{ top:-2em}
.snack_step .dot.right{ top:auto; bottom:-2em}
}