@charset "utf-8";
/*CSS Document*/

/* Mobile RESET CSS  --------------------------------------------------*/
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

body{margin:0; padding:0; background-color:#fff;height: 100%;}
html{overflow-y:scroll;  margin: 0;}
body, table, th, td, input, select, textarea, div{
	font-family:'Noto Sans KR',"돋움",'Dotum',Helvetica,AppleGothic,Sans-serif;
	color:#333333;
}
a { color:#666; text-decoration:none; }
select{font-size:11px}
h1, h2, h3, h4, h5, h6, ol, ul, li, form, fieldset, input, textarea, hr, p, dl, dt, dd{margin:0; padding:0}
img, fieldset{border:0 none}
img{vertical-align:baseline}
ol, ul, li{list-style:none;}
table{border-spacing:0; border-collapse:collapse; border:0 none}
h1,h2,h3,h4,h5,h6{font-size:100%}
input{border:0 none;}
textarea{border:1px solid #ddd; width:95%; font-size:14px;}
.clearfix {*zoom:1}
.clearfix:after{display:block; clear:both; content:""}
.cl{clear:both;}

/* leftcat category */
body.on {position:fixed; width:100%;}
#M_Wrapper{transition:margin 0.7s;}
.catback {position:absolute; display:none; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9999;}
#leftcat {position:absolute; top:0; left:-55%; width:55%; height:100%; background:#fff; overflow:hidden; transition:left 0.7s; z-index:9999; overflow-y:scroll; -webkit-overflow-scrolling:touch;}
.on #leftcat {left:0;}
#leftcat .close {width:100%; height:84px; background:#db413a; font-size:1.3em; border:0; color:#fff;}
#leftcat button.close{background-image: url( "/m/common/images/button_logo.jpg" ); background-repeat:no-repeat;}
#leftcat > ul {padding:0;}
#leftcat > ul > li {border-bottom:1px solid #ddd;}
#leftcat > ul > li > a {display:block; padding:18px 0; font-size:1.38em; color:#222; text-align:center;}
#leftcat > ul > li > ul.dep2 {display:none; padding:21px 0; background:#eee; text-align:center;}
#leftcat > ul > li > ul.dep2 > li > a {display:block; padding-bottom:7px; font-size:1.28em; color:#333;}
#leftcat > ul > li > ul.dep2 > li:last-child > a {padding-bottom:0;}

/* Mobile 사이드메뉴  --------------------------------------------------*/
.M-header-wrap {position:fixed; top:0; z-index:999; width:100%; background:#fff;}
#M_Wrapper.open-sidebar {left:240px;}
#M_Wrapper .swipe-area {display:none;}
#M_Wrapper.open-sidebar .swipe-area { position:absolute; width:100%; left:0; top:0; height:100%; z-index:999; display:block; }
#M_Wrapper {position: relative;  width:100%; left: 0;
          -webkit-transition:  left 0.4s ease-in-out;
          -moz-transition:  left 0.4s ease-in-out;
          -ms-transition:  left 0.4s ease-in-out;
          -o-transition:  left 0.4s ease-in-out;
          transition:  left 0.4s ease-in-out; 
		  }
#sidebar {background: #666; position:absolute; width:240px; height:100%; left:-240px; box-sizing:border-box; -moz-box-sizing: border-box;  }
#sidebar ul {margin:0; padding:0; list-style:none; }
#sidebar ul li {margin:0;}
#sidebar ul li a {padding:15px 20px; font-size: 16px; display: block;  border-bottom: 1px solid #444; color:#fff;  }
#sidebar ul li:hover a {background: #333;}
.main-content {width:100%; height:100%; box-sizing: border-box; -moz-box-sizing:border-box; position:absolute; top:0;}

/* 헤더 */
#M_Header { position:relative; height:100px; overflow:hidden; border-bottom:1px solid #d4d4d4;}
#M_Header button.cat {position:absolute; display:block; left:34px; top:39px; background:none; border:none; z-index:9; padding:0;}
#M_Header h1 {position:absolute; padding-top:16px; padding-left:100px;}
#M_Header h1 img {}
#M_Header .btn_order {position:absolute; top:18px; right:173px;}
#M_Header .btn_search {position:absolute; top:18px; right:22px;}

/* 비쥬얼 */
#M_Visual {position:relative; margin:0 auto; margin-top:102px;}
#M_Visual img {width:100%; margin:0 auto;}

/* 서브상단 */
#M_SubWrap {margin-top:98px;}
#M_SubBody {margin:0 auto;}
#M_Subbar {background:#d13c34; text-align:left; padding: 0 10px;} 
#M_Subbar > ul:after {display:block; content:""; clear:both;}
#M_Subbar > ul > li {float:left; padding:15px 20px; border-right:1px solid #b9342d; font-size:18px; color:#fff;}
#M_Subbar > ul > li.on {position:relative; padding:0;}
#M_Subbar > ul > li i {position:absolute; right:10px;}
#M_Subbar > ul > li > a {display:block; padding:15px 15px; width:180px; color:#fff; font-size:19px;}
#M_Subbar > ul > li > .dep1 {position:absolute; left:0; width:100%; background:#323647; z-index:999;}
#M_Subbar > ul > li > .dep1 li a {display:block; padding:15px 20px; color:#fff; font-size:15px;}
#M_Subbar span {  padding-left:25x; }

/* Mobile Sub 메뉴 */
#M_submenu { position:relative; max-width:610px; padding:0 15px; margin:20px 0 0; }
#M_submenu ul { position:relative; overflow:hidden; }
#M_submenu li {}
#M_submenu a { display:block; float:left; width:25%; text-align:center; background:#fff; margin:0 2px; padding:9px 6px; font-size:13px; line-height:14px; letter-spacing:-0.05em;  }
#M_submenu li a { color:#333; border:1px solid #ddd; }
#M_submenu li.on a { color:#fff;background:#4068ad; border:1px solid #4068ad; font-weight:bold;}

/*2차탭메뉴*/
.tab{width:100%; overflow:hidden; margin-bottom:20px;}
.tab li{float:left; text-align:center; font-size:16px; border-bottom:2px solid #ececec; box-sizing:border-box;}
.tab li a{display:block; padding:24px 6px; color:#5a5a5a !important; font-weight:500; line-height:1;}
.tab li.hover{border-bottom:2px solid #d03b33;}
.tab li.hover a{color:#d03b33 !important; font-size:16px;}

/* Mobile Sub 타이틀 */
#M_subtitle { max-width:640px; margin:0 auto; font-size:1.8em; font-weight:400; letter-spacing:-2px; text-align:center; color:#262626;}
.subtxt { font-size:15px; padding: 0 15px 30px;}
.verline {margin:0 auto; margin-top:10px; width:1px; height:33px; background-color:#494949;}

/* 메인신메뉴 */
.new_menu {margin-top:15px; margin-bottom:38px;}
.slider-wrap button a {color:#fff;}

/*메인배너*/
.mbanner {width:96%; margin:0 auto; background:red;}
.mbanner ul li {float:left;}

/* 메뉴페이지 */
.prd_line {float:left; margin-left:10px; width:257px; border:1px solid #ddd; height:270px; padding:16px; overflow:hidden;}
.prd_box {border-collapse: separate; border-spacing: 0px; text-align:left;}
.prd_box .prd_img { width:100%; height:200px;}
.prd_box .prd_img img { max-width:257px; max-height:200px; width:257px; height:200px;}
.prd_box .prd_ct { padding:12px 0 0 9px; font-size:15px; color:#a0a0a0;}
.prd_box .prd_name { font-size:22px; padding-left:9px; color:#333; font-weight:500;}
.prd_box .prd_name a { color:#333; font-size:22px;}
.prd_box .prd_text { font-size:12px; padding:10px 0 0; color:#999; max-width:152px; line-height:35px;}
.effects {width:100%; height:270px;}
.effects .img {position:relative;width: 100%; height:270px; overflow: hidden;}
.effects .img:nth-child(n) {margin-right:5px;}
.effects .img:last-child { margin-right: 0;}
.overlay .txt {color:#fff; font-weight:400; font-size:15px; padding-top:4px; line-height:23px;}
.overlay {display: block;position: absolute; z-index: 20; background: rgba(0, 0, 0, 0.7); overflow: hidden;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
}
#effect-1 .overlay {bottom: 0;left: 0;right: 0; height: 0; padding:0 10px; text-align:center;}
#effect-1 .overlay a.expand {left: 0; right: 0; bottom: 20%; margin: 0 auto -30px auto; color:#fff;}
#effect-1 .img.hover .overlay {height:23%;  padding-top:8px;}
.overlay a:link{color:#ccc; text-decoration:none; text-align:center; font-size:13px;}
.overlay a:visited{color:#ccc; text-decoration:none; text-align:center; font-size:13px;}
.overlay a:active {color:#ccc; text-decoration:none; text-align:center; font-size:13px;}

/* 커뮤니티 */
.evtit_box .ev_title {margin:0 auto; text-align:center; font-size:24px; color:#272727; line-height:30px; padding-top:65px; background: url(/common/images/ev_icon01.gif) no-repeat center 10px;}
.evtit_box .ev_title span {color:#d1352d;}
.evtit_box .ev_txt {font-size:0.67em; color:#333; line-height:17px; text-align:center; margin-top:13px; margin-bottom:25px;}

/* member 개인정보취급방침 */
div.privacyText {border:5px solid #f2f2f2; padding:50px 30px; background:url("/hosigi/images/brand_bg.gif") center 70px no-repeat; margin:0 auto; font-size:13px; line-height:26px; text-align:justify;}
div.privacyText>h1 {font-size:18px; line-height:26px; margin-top:25px; color:#000;}
div.privacyText>h1:first-child {margin-top:0px;}
div.privacyText>p {margin-top:10px; font-size:14px; line-height:29px; text-align:justify; color:#333;}
div.privacyText>p>span {color:#c5171e; font-size:15px;}
div.privacyText table{width:50%; background-color:#ffffff; text-align:center;  margin-top:20px; margin-bottom:20px;}
div.privacyText table tr{border-bottom:1px solid; border-color:#dddddd; }
div.privacyText table th{padding:10px; font-weight:bold; border-bottom:2px solid;   border-color:#dddddd; line-height:20px;}
div.privacyText table td{padding:10px; line-height:20px;}

/* 이메일무단수집거부 */
div.emailText {border:5px solid #f2f2f2; background:url("/hosigi/images/brand_bg.gif") center 70px no-repeat; margin:0 auto; font-size:13px; line-height:26px; text-align:justify;}
div.emailText {padding:50px 30px;}
div.emailText h4 {margin:25px 0 30px; text-align:center; font-size:20px; line-height:26px; margin-top:25px; color:#000;}
div.emailText p { margin-top:10px; font-size:14px; line-height:29px; text-align:justify; color:#333;}

/*하단 footer-wp*/
.footer-wp {position:relative; margin-top:20px; height:258px; border-top:1px solid #dfdddd;}
.footer-wp .footer-list-wp {width:100%; padding:18px 0 14px 0; height:28px; border-bottom:1px solid #dfdddd;}
.footer-wp .footer-list-wp ul {width:455px; margin:0 auto; text-align:center; list-style:none;}
.footer-wp .footer-list-wp ul li {float:left; text-align:center; padding-left:13px;}
.footer-wp .footer-list-wp ul li a {font-size:17px; color:#282828;}
.footer-wp .footer-list-wp ul .point a {font-size:17px; color:#ff7800;}
.footer-wp .footer {margin:0 auto; padding-top:24px;} 
.footer-wp .footer .callnum {padding-top:13px; text-align:center;}
.footer-wp .footer .sns {width:180px; margin:0 auto; text-align:center;}
.footer-wp .footer .sns li {float:left; padding-left:8px;}
.footer-wp .footer .address {text-align:center; font-size:15px; line-height:185%; padding-top:13px;}
.topbtn { position:fixed; bottom:20px; right:-120px; width:60px; height:60px; border-radius:30px; padding:0; overflow:hidden; transition:right 1s; z-index:99; background:#df423a; text-align:center;}
.topbtn.on {right:20px; color:#fff;}
.topbtn a {display:block; color:#fff; line-height:60px;}

/* 마진 -------------------------------------------------------------------*/
.top5{margin-top:5px;}
.top10{margin-top:10px;}
.top15{margin-top:15px;}
.top20{margin-top:20px;}
.top25{margin-top:25px;}
.top30{margin-top:30px;}
.top35{margin-top:35px;}
.top40{margin-top:40px;}
.top50{margin-top:50px;}
.top60{margin-top:60px;}
.top70{margin-top:70px;}
.top80{margin-top:80px;}
.top90{margin-top:90px;}

.bottom20{margin-bottom:20px;}

.left5{margin-left:5px;}
.left8{margin-left:8px;}
.left10{margin-left:10px;}
.left15{margin-left:15px;}
.left20{margin-left:20px;}
.left25{margin-left:25px;}
.left30{margin-left:30px;}
.left35{margin-left:35px;}
.left40{margin-left:40px;}
.left50{margin-left:50px;}
.left60{margin-left:60px;}
.left70{margin-left:70px;}
.left80{margin-left:80px;}
.left90{margin-left:90px;}

.right5{margin-right:5px;}
.right10{margin-right:10px;}
.right15{margin-right:15px;}
.right20{margin-right:20px;}
.right25{margin-right:25px;}
.right30{margin-right:30px;}
.right40{margin-right:40px;}
.right50{margin-right:50px;}
.right60{margin-right:60px;}
.right70{margin-right:70px;}
.right80{margin-right:80px;}
.right90{margin-right:90px;}

.size12 { font-size:12px; }
.size13 { font-size:13px; }
.size14 { font-size:14px; }
.size15 { font-size:15px; }

/* Mobile 카테고리  --------------------------------------------------*/
.mCategory {width:100%; max-width:640px; margin:0 auto 10px; padding:15px; border:1px solid #ddd; background:#f8f8f8; font-size:14px; box-sizing:border-box; }

/* Mobile 이전글,다음글  --------------------------------------------------*/
.mNextPrev th { padding:12px 10px; text-align:left; color:#333; border-bottom:1px solid #ddd; background:#f7f7f7; font-size:12px; width:20%; }
.mNextPrev td { padding:12px 10px;  border-bottom:1px solid #ddd;text-align:left;  font-weight:normal; font-size:12px; }
#M_SubBody .mNextPrev td img { max-height:11px; width:11px; vertical-align:middle; }

/* Mobile 페이징  --------------------------------------------------*/
.mPaging td { padding:0 1px; }
.mPaging td a { color:#666; }

/* Mobile Sub 게시판 하단 검색  --------------------------------------------------*/
.mSch_select { padding:8px; border:1px solid #ddd; }
.mSch_input { padding:8px; border:1px solid #ddd; width:120px; }

/* Mobile Password 암호  --------------------------------------------------*/
#M_pw_wrap { border:1px solid #ddd; background:#f8f8f8; padding:25px 15px; }
#M_pw_wrap .mPw_txt { font-size:13px; padding:0px 0; }
#M_pw_wrap .mPw_input { padding:15px 0 5px; }
#M_pw_wrap .mPw_input input { border:1px solid #ddd; padding:4px 8px; width:180px; }

/* 하단배너 공통 */
.bottom-banner {margin:0 auto; width:100%; margin-top:3%; margin-bottom:10%; text-align:center;}
.bottom-banner .lnk {display:inline-block; text-align:center; margin:5px auto 0; width:80%; height:50%; border-radius:6px; line-height:30px; font-size:11px; font-weight:400; letter-spacing:-0.6px; background:#025e92; color:#fff;}



/* 매장찾기 탭 */
.search {padding-top:20px;}
.search .tab {width:70%; margin:0 auto; text-align:center; border-left:1px solid #2e2e2e;}
.search .tab li {float:left; width:49.7%; padding:13px 0; font-size:17px; cursor:pointer; border-top:1px solid #2e2e2e; border-bottom:1px solid #2e2e2e; border-right:1px solid #4a4a4a; font-weight:350; color:#2e2e2e;}
.search .tab li:hover {background:#ffad55; color:#fff; -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out;}
.search .tab li.active {background:#e52424; color:#fff; font-size:17px; font-weight:400;}
.search .tab_container {padding-top:25px;}
.search .tab_container #tab2 > img {width:100%; padding-top:30px;}

/* 해외매장안내*/
.search .com {width:100%; margin:0 auto;}
.search .com .ho_build {border:1px solid #e1e1e1; margin-top:60px;}
.search .com .ho_build th {width:100%; padding:25px 90px;}
.search .com .ho_build td {text-align:left; color:#6b6b6b; font-size:14px; font-weight:400; line-height:28px;}
.search .com .ho_build .b_tit {font-size:14px; color:#333; font-weight:400; padding-left:110px;}
.search .com .ho_build tr:last-child td {padding-bottom:25px;}

/*bottom_btn*/
.btnWrap {width: 100%; text-align: center; margin: 44px 0; }
ul.infoBtn {display:inline-block; text-align: center; margin: 0 auto;}
ul.infoBtn li { margin:0 6px; float: left; }