@charset "utf-8";
@import url("slider.css");
@import url("mnav.css");

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption, summary, mark, meter, output, progress, time, video 
{ display: block; }
body,form,th,td,p { margin:0;padding:0; -webkit-text-size-adjust:none; }
html { font-family:"Malgun Gothic","Dotum","Gulim,Helvetica","sans-serif";}
a:link, a:visited, a:active, a:focus { text-decoration:none; color:inherit; cursor:pointer; }
a:hover{ text-decoration:none; color:#333; cursor:pointer; }
a { text-decoration:none;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, 
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, article, aside, hgroup, 
header, footer, figure, figcaption, nav, section { margin:0; padding:0; border:0;  vertical-align:baseline; background:transparent;}




/*****************************PC화면***********************************[진퉁CSS]***********************/

@media all and (min-width:960px)  { 
body { font-size:16px; overflow-x:hidden;  color:#340707  }
#wrap {max-width:100%; margin:0 auto; position:relative; }
#top {  border-bottom:0px solid #343848;    }
#topBox { margin:0 auto; max-width:1050px !important;  position:relative;}
div.top_mask {width:100%; } 

/* HOME / LOGIN / JOIN */
#toparea {width:100%; background-color:#ffe200;} /*-----------------------------------------최상단 바 컬러조정----------------------------------------*/
aside.util { width:99%; margin:0 auto; font-size:12px; display:block;   z-index: 15;border-bottom:0px solid #dfdfdf; }
aside.util div.util_Area { color:#ffffff; right:0px;   margin:0 auto;  text-align:right; padding:6px 0px 0px 0; height:30px; box-sizing:border-box; }
aside.util div.util_Area a{  padding:0px 9px 0 5px; border-left:0px solid #ccc;  }
aside.util div.util_Area a:hover {color:#340707;}
aside.util div.util_Area a.first{ border-left:0px; }
/* HOME / LOGIN / JOIN */


#header div.logo { position:absolute; padding:3px 15px;   box-sizing:border-box;   z-index:23; }
.button_container {display:none;}

/*상단 메뉴바*/
.gnb{ position:absolute; top:30px ; background-color:#ffffff; left:0; width:100%;  z-index:13;  border-bottom:0px solid #ffe200;  margin:0px auto 0 auto; text-align:center; transition: all 0.5s ; }
.gnb a {color:#340707;}
.gnb > ul{overflow:hidden; list-style-type:none; width:1000px; padding-left:350px; box-sizing:border-box; margin:0 auto;}
.gnb .menu{float:left; width:20%; text-align:center;}
.gnb .menu:first-child{margin:0}
.gnb .depth1{padding:0; font-size:21px; font-weight:bold; display:block; padding:32px 0 28px 0; height:90px; box-sizing:border-box;}
.gnb .depth2{height:0 ;overflow:hidden;  font-size:15px; font-weight:bold; border-left:0px solid #ffe200;  }
.gnb .menu:first-child .depth2{border-left:0px solid #ffe200; }
.gnb .depth2 ul{overflow:hidden; } /*depth2 높이 css/menu.js 에서 조절*/
.gnb .depth2 ul li{margin-top:15px;}
.gnb .depth2 ul li:first-child{margin-top:10px}
.gnb .depth2 ul li a:hover {text-decoration:none; color:#FFFFFF !important;}/*----------------------------메뉴바 메뉴폰트 마우스오버 컬러 조정------------------------------------------------*/
.gnb:hover {background-color:#340707; color:#333; }
.gnb:hover a {color:#ffe200;}
.gnb .menu:hover {background-color:#ffe200;  } /*--------------------------------------메뉴바 메뉴 마우스오버 컬러 조정-------------------------------------------------*/
.gnb .menu:hover a{ color:#340707 !important; border-bottom:2px solid #ffe200;  padding-bottom:7px;}
.gnb .menu:hover .depth2 ul li a {border-bottom:0;}
.gnb:hover .depth2 {}
/*상단 메뉴바*/


/*visual 슬라이드*/
section.slider {position:relative;  width:100%;  margin: 0 auto; padding-top:90px;  }
div.flexslider {width:100%;    position: relative; min-height:500px;  max-height:946px; overflow: hidden;}

div.img_box img{vertical-align:top; max-width:100%; border:0; }

#main{max-width:100%; margin:0 auto; position:relative; overflow:hidden;  }
#main div.main_left section{float:left; width:24%; padding:0 1.33333333% 0 0;  text-align:center; }
div.main_left {clear:both; margin:20px 0; overflow:hidden;}

/*company??????????????????????????????????????????????*/
section.Box_01 {display:none; text-align: center; padding:60px 0 70px 0; background-color:#ffe200; background-image:url("../../img/main/bg_line.png"); background-position:center top; background-repeat:no-repeat; }
section.Box_01 p.com_txt1{ font-size:35px; padding-bottom:20px;}
section.Box_01 p.com_txt2{font-size:28px; }



/*우주라이크 스토어 매장안내 */
section.Box_02 {clear:both; overflow:hidden;  width:100%;  padding:160px 0; }
section.Box_02 div.pro {width:1100px; margin:0 auto;}
section.Box_02 div.pro_img { float:left; width:50%; }
section.Box_02 div.pro_txt {float:right; width:45%;}
section.Box_02 div.pro_txt h1 {font-size:30px; padding:10px 0; letter-spacing:-1px;}
section.Box_02 div.pro_txt h1 img {margin-top:50px;}
section.Box_02 div.pro_txt p {font-size:15px; line-height:24px; padding-bottom:70px; letter-spacing:-1px;}
section.Box_02 .btn{ border:1px solid #ffe200;	padding: 10px 16px 12px 16px; font-size: 16px;		border-radius: 2xl ;color:#ffe200;} /*----------------매장찾기박스 폰트 컬러 조정------#bf995b--------*/
section.Box_02 .btn:hover {	color: #ffe200;	background-color: #340707;} /*----------------매장찾기박스 마우스오버 폰트 컬러 조정---------------*/
/*우주라이크 스토어 매장안내 */



/* 회사소개/공지사항/가맹안내/상담문의 */  
section.Box_03 { width:100%; overflow:hidden; font-size:20px; border-bottom:1px solid #333; font-weight: bold; color:#340707;} /*----------------회사소개,공지사항,가맹안내,상담문의 폰트 컬러 조정---------------*/
section.Box_03 ul {padding:0; width:1100px; margin:0px auto;}
section.Box_03 ul li {float:left;  width:25%; list-style-type:none; padding:25px 0;}
section.Box_03 ul li a{display:block; height:200px; text-align: center; padding-top:135px; box-sizing:border-box; }
section.Box_03 ul li.ico1 a:hover,section.Box_03 ul li.ico2 a:hover,section.Box_03 ul li.ico3 a:hover,section.Box_03 ul li.ico4 a:hover{
		background-position:center 25%; transition: all 0.3s;}
section.Box_03 ul li.ico1 a{ background:url("../../img/main/bg_01.jpg")no-repeat center 35%; transition: all 0.3s;}
section.Box_03 ul li.ico2 a{ background:url("../../img/main/bg_02.jpg")no-repeat center 35%; transition: all 0.3s; }
section.Box_03 ul li.ico3 a{ background:url("../../img/main/bg_03.jpg")no-repeat center 35%;  transition: all 0.3s;}
section.Box_03 ul li.ico4 a{ background:url("../../img/main/bg_04.jpg")no-repeat center 35%; transition: all 0.3s;}
/* 회사소개/공지사항/가맹안내/상담문의 */  



/*우주라이크 프랜차이즈*/
section.Box_04 { overflow:hidden; text-align: center; padding:160px 0 100px 0; background-color:#340707; color:#ffffff;} /*------------------섹션 배경색 조정구간--------------------------*/
section.Box_04 ul {padding:0; width:1100px; margin:0px auto; color:#340707;}
section.Box_04 ul li {float:left;  width:50%; list-style-type:none; }
section.Box_04 ul li a{display:block; transition: all 0.3s; padding:20px 0; background-color:#ffe200; margin:0 45px; text-align: center;  box-sizing:border-box; }
section.Box_04 ul li a h1 {font-size:20px;}
section.Box_04 ul li a p{padding-top:15px; font-size:13px; }
section.Box_04 ul li a:hover {background-color:#ffffff; color:#340707; transition: all 0.3s;} /*----------------------------------------클릭박스 마우스오버 컬러 조정-------------------------------------- */
p.sub2{font-size: 15px; line-height:25px; padding-bottom: 60px; margin-top: 50px; text-align: center; color:#fff;}     
div.Box_03_tit {float:left; width:100%; text-align: center; padding: 50px auto; }   
/*우주라이크 프랜차이즈*/
    



/*SNS에서도 우주라이크를 만나보세요*/ 
section.Box_05 { width:920px; margin:0 auto; padding:110px 0px 100px 0px;  box-sizing:border-box; min-height:500px; }
section.Box_05 td.board_output_gallery_img {text-align:center;padding-top: 3px;}
section.Box_05 span.board_output_gallery_subject a {font-size:14px !important; display:block; padding-top:15px;}
table.main_gallery table {width:100%;  margin:0 auto !i

mportant; text-align:center; box-sizing:border-box; padding:0;}
.board_output_gallery_subject {width:100% !important;}
div.Box_05_tit {float:left; width:100%; text-align: center; padding: 50px auto;}
p.tit{font-size: 40px; font-weight: bold; line-height:40px;}    
p.sub{font-size: 15px; line-height:25px; padding-bottom: 60px;padding-top: 5px; text-align: center; color:#333;} 
/*SNS에서도 우주라이크를 만나보세요*/ 
    
    

/*우주라이크 메뉴*/
section.Box_08 {color:#ffffff; width:100%; text-align:center;  height:800px; background-attachment:fixed; 
background-image:url("../../img/main/bg_menu2.jpg"); background-size:cover; background-position:center center; 
background-repeat:no-repeat;  box-sizing:border-box; padding:45px 5px 10px 5px; } /*----------------------------------메뉴보기 커피배경화면 조정-------------------------------------*/

section.Box_08 strong.tit01{ font-size:24px; font-weight:normal;  margin:0 auto; width:70%;  opacity:1;}
section.Box_08 span.num{display:block; font-size:30px; padding:30px 0 0 0;  font-weight:bold;  }
section.Box_08 span.txt01{display:block; color: #fff;  padding-top:30px; font-size:16px; line-height: 26px; }
div.Box_08_tit {padding-top: 200px;}    
div.Box_08_bt{padding-top: 50px;}    
section.Box_08 .btn2{border:1px solid #ffffff;	padding: 10px 16px 12px 16px; font-size: 16px;	border-radius: 2px; color:#ffffff;}
section.Box_08 .btn2:hover {color: #ffe200;	background-color: #340707;}  /*----------------------------------메뉴보기박스 컬러 조정-------------------------------------*/
/*우주라이크 메뉴*/

    
    

    
/*우주라이크 빈*/
section.Box_07 {color:#fff; width:100%; text-align:center;  height:600px; background-attachment:fixed; background-image:url("../../img/main/bg_tel2.jpg"); background-size:cover; background-position:center center; background-repeat:no-repeat;  box-sizing:border-box; padding:45px 5px 10px 5px; }
section.Box_07 strong.tit01{ font-size:24px; font-weight:normal;  margin:0 auto; width:70%;  opacity:1; }
section.Box_07 span.num{display:block; font-size:30px; padding:30px 0 0 0;  font-weight:bold; letter-spacing:-1px; }
section.Box_07 span.txt01{display:block;  padding-top:30px; font-size:15px; line-height: 26px; }
div.Box_07_txt {padding-top: 30px; letter-spacing:-1px;}    
div.Box_07_sub {height:auto; padding-top:80px;} 
/*우주라이크 빈*/



/* quick - 모듈인데 ??????????????????????????????? */
section.quick {display:none;}


#footer {text-align:center; width:100%; background-color:#340707; border-top:0px solid #ffe200; box-sizing:border-box; color:#ffe200; font-weight: 800;} /*------------------------------푸터전체 컬러조정---------------------------------*/
#footer div.guide { width:100%; background-color:#340707;   padding:30px 0 0px 0; overflow:hidden; border-top:0px solid #3c3c3c; border-bottom:0px solid #3c3c3c;}/*------------------------------푸터상단 SNS영역 컬러조정---------------------------------*/
#footer div.guide ul {list-style-type:none;  width:100%; }
#footer div.guide ul li {display:inline-block; padding:0px 20px; border-left:1px solid #ccc;  }
#footer div.guide ul li:first-child {border-left:0; padding:0 20px 0 0 ;}
#footer div.guideBox {width:100%; margin:0 auto;}
#footer div.guide div.sns {padding-bottom:50px;}
#footer div.guide div.sns a{padding:0 5px;}
#footer footer.copy {width:100%; margin:0 auto; clear:both; padding:15px 0 30px 0; overflow:hidden; }
#footer div.copyL{  margin:0 auto;  display:inline-block; padding-bottom:8px;}
#footer div.copyL h3 {display:none; padding:1px 0 0 0; margin:0; float:left; font-size:19px;  }
#footer div.copyL ul { list-style-type:none;  padding:0 0 0 0px; margin:0;  line-height:20px; }
#footer div.copyL ul li{float:left; /*background:url("../../img/main/li_arrow.png") left 6px no-repeat;*/   }
#footer div.copyL ul li:before {content:"/"; padding:0 10px; color:#ffe200; } /*-------------------------------------------슬래시 컬러조정----------------------------------*/
#footer div.copyL ul li:first-child:before {content:""; border-left:0; padding:0; }
#footer div.copyB { clear:both; border-top:0px solid #3c3c3c; padding:1px 0 20px 0; }

} /* 반응형 PC 괄호 닫음 min-width:960px */







/***********************************************모바일 화면*****************[진퉁CSS]*******************************************************************/

@media not all and (min-width:960px){
#menu {	display:none;}
.slicknav_menu { }/*모바일 메뉴*/
.flex-direction-nav a  {display:none;}
body { font-size:12px;  color:#ffe200; overflow-x:hidden; }
#wrap {max-width:100%; margin:0 auto; position:relative; padding:0; }
aside.util { display:none; }
div.logo img {height:85px; width:auto;}
div.button_container div.txt{display:none;}
.gnb{ display:none; }

/*visual 슬라이드*/
section.slider {position:relative;  width:100%;  margin: 0 auto;  }
div.flexslider {width:100%;    position: relative;  max-height:600px; overflow: hidden;      }

div.img_box img{vertical-align:top; max-width:100%; border:0; }

#main{width:100%;  position:relative; overflow:hidden; }
div.main_left {width:100%; clear:both;}


/*company??????????????????????????????????????????????*/
section.Box_01 { display:none; text-align: center; padding:60px 15px 50px 15px; background-color:#f1f1f1; background-image:url("../../img/main/bg_line.png"); background-position:center top; background-repeat:no-repeat; }
section.Box_01 p.com_txt1{ font-size:2em; padding-bottom:20px;}
section.Box_01 p.com_txt2{font-size:1.5em; }



/*우주라이크 매장안내 */
section.Box_02 {clear:both; overflow:hidden; text-align: center;  padding:120px 15px 140px 15px;  }
section.Box_02 div.pro {width:100%; margin:0 auto;}
section.Box_02 div.pro_img {clear:both; }
section.Box_02 div.pro_img img {max-width:100%; padding-bottom:50px 0;}
section.Box_02 div.pro_txt {clear:both; }
section.Box_02 div.pro_txt h1 {font-size:25px; padding:5px 0; letter-spacing:-1px;}  
section.Box_02 div.pro_txt h1 img {padding-top:50px; width:80%;}      
section.Box_02 div.pro_txt p {font-size:14px; line-height:22px; margin-top:20px; margin-bottom: 50px; letter-spacing:-1px; }
section.Box_02 .btn{ border:1px solid #bf995b;	padding: 10px 16px 12px 16px; font-size: 14px;	border-radius: 2px; color:#bf995b;}
section.Box_02 .btn:hover { color: #fff;	background-color: #bf995b; }
/*우주라이크 매장안내 */



/* 회사소개/공지사항/가맹안내/상담문의 */      
section.Box_03 { width:100%; overflow:hidden; font-size:15px; padding:50px 0 60px 0; border-bottom:1px solid #dfdfdf; font-weight:bold; color:#340707; }/*--------------회사소개,공지사항,가맹안내,상담문의 폰트 컬러 조정--------------*/
section.Box_03 ul { padding:0; }
section.Box_03 ul li { float:left;  width:50%; list-style-type:none; padding:40px 0; }
section.Box_03 ul li a{ display:block;  text-align: center; padding-top:105px; box-sizing:border-box; }
section.Box_03 ul li.ico1{ background:url("../../img/main/bg_01.jpg")no-repeat center 20%; }
section.Box_03 ul li.ico2{ background:url("../../img/main/bg_02.jpg")no-repeat center 20%; }
section.Box_03 ul li.ico3{ background:url("../../img/main/bg_03.jpg")no-repeat center 20%; }
section.Box_03 ul li.ico4{ background:url("../../img/main/bg_04.jpg")no-repeat center 20%; }
/* 회사소개/공지사항/가맹안내/상담문의 */  




/*우주라이크 프랜차이즈*/    
section.Box_04 { overflow:hidden; text-align: center; padding:15px 0 20px 0; background-color:#340707;} /*--------------------------------------섹션 배경색 조정구간----------------------------------*/
section.Box_04 ul {padding:0;}
section.Box_04 ul li { width:100%; list-style-type:none; }
section.Box_04 ul li a{display:block; padding:20px 20px;transition: all 0.3s;  background-color:#ffe200; margin:50px 25px; text-align: center; border:2px solid #340707; box-sizing:border-box; }
section.Box_04 ul li a h1 {font-size:26px; background-color:#340707}
section.Box_04 ul li a p{padding-top:15px; font-size:13px; }
section.Box_04 ul li a:hover {background-color:#340707; color:#fff; transition: all 0.3s;}  /*----------------------------------------클릭박스 마우스오버 컬러 조정-------------------------------------- */
div.Box_03_tit {float:left; width:100%; text-align: center; padding: 50px auto; }  
div.Box_03_tit img {margin-top: 50px; width:80%; height: auto; padding:20px; auto;}     
p.sub2{font-size: 14px; color:#ffe200; line-height:24px; padding-bottom: 0;margin-top: 30px; text-align: center;}
/*우주라이크 프랜차이즈*/




    
/*SNS에서도 우주라이크를 만나보세요*/ 
section.Box_05 {clear:both; width:100%; margin:0 auto; padding:60px 0 50px; }
section.Box_05 td.board_output_gallery_img {text-align:center; width:33.33333%;}
section.Box_05 td.board_output_gallery_img img {width:100%; height:auto;}
section.Box_05 span.board_output_gallery_subject {font-size:15px; padding-top:5px; display:block; text-align:center; width:100%; }
table.main_gallery table {width:100%;  margin:0 auto !important; box-sizing:border-box; padding:10px 0;}
div.Box_05_tit {float:left; width:100%; text-align: center; padding: 50px auto;}
p.tit{font-size: 36px; font-weight: bold; line-height:40px;}    
p.sub{font-size: 14px; line-height:30px; padding-bottom: 40px;padding-top: 5px; text-align: center;} 
div.Box_05_tit {width:100%;}    
div.Box_05_tit img {margin-top: 50px; width:80%; height: auto; padding:0 auto;} 
/*SNS에서도 우주라이크를 만나보세요*/ 




/*우주라이크 빈*/
section.Box_07 {color:#fff; width:100%; text-align:center;  height:450px;  background-image:url("../../img/main/bg_tel2.jpg"); background-size:cover; background-position:center center; background-repeat:no-repeat;  box-sizing:border-box; padding:45px 5px 10px 5px; }
section.Box_07 strong.tit01{ font-size:20px; font-weight:normal;  margin:0 auto; width:70%;  opacity:1;}
section.Box_07 span.num{display:block; font-size:26px; padding:15px 0 0 0;  font-weight:bold;  }
section.Box_07 span.txt01{display:block;  padding-top:12px; font-size:14px; line-height: 24px;}
div.Box_07_txt {padding-top: 30px; letter-spacing:-2px;}    
div.Box_07_tit img {margin-top: 50px; width:80%; height: auto; padding:0 auto;}   
div.Box_07_tit {width:100%;}
/*우주라이크 빈*/
    
    
    
/* quick - 모듈인데 ??????????????????????????????? */
section.quick {display:none;}



/*우주라이크 메뉴*/
section.Box_08 {color:#000; width:100%; text-align:center;  height:600px;  background-image:url("../../img/main/bg_menu2_m.jpg"); background-size:cover; background-position:center center; background-repeat:no-repeat;  box-sizing:border-box; padding:45px 5px 10px 5px; }
section.Box_08 strong.tit01{ font-size:20px; font-weight:normal;  margin:0 auto; width:70%;  opacity:1;}
section.Box_08 span.num{display:block; font-size:26px; padding:15px 0 0 0;  font-weight:bold;  }
section.Box_08 span.txt01{display:block; color:#fff; padding-top:12px; font-size:14px; line-height: 22px;}
div.Box_08_tit img {margin-top: 100px; width:80%; height: auto; padding:0 auto;}   
div.Box_08_tit {width:100%;}
div.Box_08_bt{padding-top: 30px;}    
section.Box_08 .btn2{border:1px solid #fff;	padding: 10px 16px 12px 16px; font-size: 14px;	border-radius: 2px; color:#fff;}
section.Box_08 .btn2:hover {color: #bf995b;	background-color: #fff;	}
/*우주라이크 메뉴*/
    
    
    
    
/*footer*/
#footer {text-align:center;  background-color:#340707; border-top:0px solid #340707; box-sizing:border-box; padding:0 15px; color:#ffe200; font-weight: 500;} /*------------------------------푸터전체 컬러조정---------------------------------*/
#footer div.guide { background-color:#340707;  padding:30px 0 0px 0; overflow:hidden; border-top:0px solid #ffe200; border-bottom:0px solid #ffe200;}/*------------------------------푸터상단 SNS영역 컬러조정---------------------------------*/
#footer div.guide ul {list-style-type:none;  width:100%; }
#footer div.guide ul li {display:inline-block; padding:0px 20px; border-left:1px solid #ccc;  }
#footer div.guide ul li:first-child {border-left:0; padding:0 20px 0 0 ;}
#footer div.guideBox {width:100%; margin:0 auto;}
#footer div.guide div.sns {padding-bottom:50px;}
#footer div.guide div.sns a{padding:0 5px;}
#footer footer.copy {clear:both; padding:20px 0 30px 0; overflow:hidden; }
#footer div.copyL{   display:inline-block; padding-bottom:8px; }
#footer div.copyL h3 {display:none; padding:1px 0 0 0; margin:0; float:left; font-size:19px;  }
#footer div.copyL ul { list-style-type:none;  padding:0 0 0 0px; margin:0;  line-height:20px; }
#footer div.copyL ul li{display:inline-block; line-height:25px; /*background:url("../../img/main/li_arrow.png") left 6px no-repeat;*/   }
#footer div.copyL ul li:before {content:"/"; padding:0 10px; color:#ffe200; }  /*-------------------------------------------슬래시 컬러조정----------------------------------*/
#footer div.copyL ul li:first-child:before {content:""; border-left:0; padding:0; }
#footer div.copyB { clear:both; border-top:0px solid #3c3c3c; padding:10px 0 20px 0; }

} /* 반응형 모바일 괄호 닫음 min-width:960px */