반응형 / 레스토랑 오늘 메인 css 복습

body{
    font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
    font-size: 1.6rem;
    color: #000; line-height: 1;
}
#wrap{overflow: hidden; min-width: 320px; }
.inner{max-width: calc(100% - 10.416%); margin: 0 auto;}

#header{position: absolute; left: 0; top: 0; z-index: 999; width: 100%;}
#header .inner{display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 50px; align-items: center;}
/*줄이 넘어가도록 wrap항상 같이써주기*/
#header .gnb li{display: inline-block; font-size: 2.0rem; padding: 0 60px; position: relative;}
#header .gnb li a{color: #fff;}
#header .gnb li:not(:first-child):before{content: ''; width: 1px; height: 10px; background: #fff; position: absolute; left:  0; top: 5px; transform: skewX(-20deg);}

/*히든메뉴*/
#header .ham{width: 40px; height: 20px; position: relative; cursor: pointer; display: none;}
#header .ham span{font-size: 0; background: #fff; width: 100%; height: 2px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#header .ham:before{content: ''; background: #fff; width: 80%; height: 2px; position: absolute; right: 0; top: 0;}
#header .ham:after{content: ''; background: #fff; width: 80%; height: 2px; position: absolute; right: 0; bottom: 0;}

 

/*예약*/
#header .reservation{display: inline-block; border: 1px solid #fff; padding: 20px 20px 20px 60px; color: #fff; background: url('../images/icon_reservation.png') no-repeat 22px 18px;}

/*헤더 위치잡아줌*/
@media(max-width: 1400px){
    #header .gnb{display: none;}
    #header .reservation{position: absolute; left: 50%; top: 150px; transform: translateX(-50%);}
    #header .ham{display: block;}
}

/*mv*/
#main_visual{height: 960px;}
#main_visual .slick-list li{height: 960px;  position: relative; } 
/*slick작성전까지 먹히지않음. mv_txt를 작성한 기준 li에 relative값*/
#main_visual ul li.mv1{background: url('../images/visual01.jpg') no-repeat center center;}
#main_visual ul li.mv2{background: url('../images/visual02.jpg') no-repeat center center;}
#main_visual ul li.mv3{background: url('../images/visual03.jpg') no-repeat center center;}
/*mv안에 텍스트배치 */
#main_visual .mv_txt{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);  color: #fff; text-align: center; }
#main_visual .mv_txt h2{font-size: 10rem; font-family: 'Montaga';} /*line-height안넣으면 두줄로 내려감*/
#main_visual .mv_txt h3{font-size: 2.0rem; padding: 20px 0;}
#main_visual .mv_txt p{font-size: 1.4rem; opacity: 0.5;}


/*슬라이드 스타일*/
#main_visual .slick-arrow{position: absolute; top: 50%; font-size: 0; width: 50px; height: 50px; border-top: 3px solid #fff; border-left: 3px solid #fff;
border-bottom: 0; border-right: 0; background: none; ;
cursor: pointer; z-index: 99; margin-top: -25px;} 
/*margin-top으로 위치 위로 조금 이동*/
#main_visual .slick-prev{left: 10%; transform: rotate(-45deg)}
#main_visual .slick-next{right: 10%; transform: rotate(135deg)}

#main_visual .slick-dots{ position: absolute; left: 0; width: 100%; text-align: center; bottom: 100px;}
#main_visual .slick-dots li{display: inline-block; margin: 0 5px;}
#main_visual .slick-dots button{font-size: 0; border-radius: 50px; border: 0; width: 10px; height: 10px; background: #fff; cursor: pointer;}
#main_visual .slick-dots li.slick-active button{background: #c27a34;}

/*컨텐츠*/
#contents h2{font-family: 'Montaga'; font-size: 6.0rem;}
#contents h2::before{content: 'Restaurant o’neul'; display: block; font-size: 1.4rem; color: #c78647; letter-spacing: 5px;}
/*display block으로 줄넘김 해줬음 */

#value{padding: 10.416% 0 5.208%;} /*padding: 200px 0 100px;*/
#value .inner{display: flex; flex-wrap: wrap; align-items: center;
    max-width: calc(100% - 20.833%);  }
    /*inner의 max-width: calc(100% - 10.416%); 값을 맨 상단에 선언했지만 
    value에 들어가는 inner는 좀 더 간격을 좁히고 싶어서 준 값 사이즈를 모아준거 */

#value .inner div{width: calc(100% /2);}
/*위치잡아줌*/

#value .value_txt .txt_kr{line-height: 1.5; padding: 50px 0 30px; font-size: 1.8rem; color: rgba(0, 0, 0, 0.5); letter-spacing: -1px;}
#value .value_txt .txt_en{font-size: 1.4rem; color: rgba(0, 0, 0, 0.5);}
#value .value_txt .btn_more{display: inline-block; background: #000; color: #fff; padding: 15px 50px; margin-top: 20px;}


/*이미지 유동적으로 만들기*/
#value .value_img img{width: 100%;}

/*2단배치-div 50%씩 준거 100%로 주기*/
@media(max-width: 1400px){
    #value .inner div{width: 100%;}
    #value .value_txt{text-align: center; margin-bottom: 50px;}
    #value .value_txt .txt_kr .none{display: none;}  
    /*value글 br준거 클래스 줘서 화면을 줄였을때 텍스트 줄넘김 되지 않도록함 */
}
/*모바일에서는 다시 줄넘김 제대로 되도록함*/
@media(max-width: 900px){
    #value .value_txt .txt_kr .none{display: block;} 
}

#menu{padding: 5.208% 0 5.208%;} /*padding: 100px 0 100px;*/
#menu h2, #room h2{text-align: center;}

#menu .menu_list{
    display: flex; flex-wrap: wrap; 
    margin-top: 50px; justify-content: space-between;
}

/*li에 height를 100% 주는건 이미지태그라서 가능한거
(이미지높이가있기때문에-백그라운드는 안된다는 말 ) 
flex는 높은값을 따라가기때문에 height값 줘야
li:nth-childe(odd) marin-top준게 원래 크기대로 먹히는거 */
#menu .menu_list li{width: calc((100% - 60px) / 4); height: 100%; position: relative;}
#menu .menu_list li img{width: 100%; display: block;}
#menu .menu_list li a{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(rgba(194, 122, 52, 0) 50%,rgba(194, 122, 52, 1)); }
/*그라디언트 시작점을 50%로 잡아줌*/
/*이미지안의 텍스트를 h3태그로하고 이값도 포지션앱솔줘서 위치잡았음*/
#menu .menu_list li h3{font-size: 3.0rem; font-family: 'Montaga'; color: #fff; 
position: absolute; left: 0; bottom: 80px; width: 100%; text-align: center;}

/*transform주면 ani.css할때 애니메이션에 transform있어서 안먹히니까 margin-top*/
#menu .menu_list li:nth-child(odd){margin-top: 100px;}


/*아코디언배너-마우스호버시 변화, 트랜지션, 제이쿼리도 들어감, 사진은 백그라운드로함 이미지로하면 이미지크기 변화를줘야함 */
#room{padding: 5.208% 0 10.416%;}/*padding: 100px 0 200px;*/
#room .room_list{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px;}
/*호버시 늘어난 사이즈가 전체의 50%임 호버 전 상태로 크기를 먼저 주고 3개로 나눔 */
/*3개로 나누고 li중 하나에 width 50%주고 스타일 시작함*/
#room .room_list li{width: calc((50% - 60px) / 3); height: 620px; position: relative;}
#room .room_list li:nth-child(1){width: 50%; background: url('../images/room_img01.jpg') no-repeat center center;}
#room .room_list li:nth-child(2){background: url('../images/room_img02.jpg') no-repeat center center;}
#room .room_list li:nth-child(3){background: url('../images/room_img03.jpg') no-repeat center center;}
#room .room_list li:nth-child(4){background: url('../images/room_img04.jpg') no-repeat center center;}

/*li에 relative주고 dl 앱솔로 위치값잡음*/
#room .room_list dl{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; text-align: center;}
#room .room_list dl dt{font-size: 2.0rem; line-height: 2;}
#room .room_list dl dt span{font-size: 3.0rem; font-family: 'Montaga'; display: block;}
/*line-height로 글자간 간격잡음*/
#room .room_list dl dd{font-size: 1.8rem; opacity: 0.7; line-height: 1.5;}
#room .room_list dl dd .btn_view{display: inline-block; color: #fff; background: #c27a34; padding: 10px 50px; margin-top: 20px;}