<style rel="stylesheet" type="text/css">

.head { background-color: #327a81; color: white; font-size: 1.5em; padding: 1rem; text-align: center; text-transform: uppercase;}

.head1 { display: none; }

.price1 img { border-radius: 50%; height: 60px; width: 60px;}

.table-users { background-color: #91ced4; border: 1px solid #327a81; border-radius: 10px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); max-width: calc(100% - 2em); margin: 1em auto; overflow: hidden; width: 100%;}

.price1 { width: 100%;}

.price1 td, .price1 th { color: #2b686e; padding: 10px;}

.price1 td, .price1 th { text-align: center; vertical-align: middle;}

.price1 td:last-child { font-size: 0.95em; line-height: 1.4;}

.price1 th { background-color: #ceeaec; font-size:13px;}

.price1 tr:nth-child(2n) { background-color: white;}

.price1 tr:nth-child(2n+1) { background-color: #edf7f8;}

.bottom { background-color: #327a81; color: white; font-size: 12px; padding: 5px; text-align: left; text-transform: uppercase;}

 

@media screen and (max-width: 479px) {

.head1 { display: block; }

.head1 { background-color: #327a81; color: white; font-size: 1em; padding: 0 0 5px 70px; text-align: left; text-transform: uppercase;}

.price1, tr, td { display: block; }

.price1 td:first-child { position: absolute; top: 50%; -webkit-transform: translateY(-50%);   transform: translateY(-50%); }

.price1 td:not(:first-child) { clear: both; margin-left: 100px; padding: 4px 20px 4px 90px; position: relative; text-align: left; }

.price1 td:not(:first-child):before { color: #91ced4; content: ''; display: block; left: 0; position: absolute; }

.price1 td:last-child { text-align: left; width:300px;}

.price1 td:nth-child(2):before { content: '평형:'; }

.price1 td:nth-child(3):before { content: '입실인원:'; }

.price1 td:nth-child(4):before { content: '비수기:'; }

.price1 td:nth-child(5):before { content: '준성수기:'; }

.price1 td:nth-child(6):before { content: '성수기:'; }

.price1 tr { padding: 10px 0; position: relative; }

.price1 tr:first-child { display: none; }}

</style>

 

<div class="table-users">

<div class="head">이용 요금 안내</div>

 

<div class="head1">준성수기 : 7/1~7/14, 8/16~8/30<br />

성&nbsp;수&nbsp;기 : 7/15~8/15</div>

 

<table class="price1">

<tbody>

<tr>

<th>객실명</th>

<th>평형</th>

<th>입실인원<br />

기준/최대</th>

<th>비수기</th>

<th>준성수기<br />

7/1~7/14<br />

8/16~8/30</th>

<th>성수기<br />

7/15~8/15</th>

</tr>

<tr>

<td>101</td>

<td>20평<br />

67m²</td>

<td>6인/10인</td>

<td>주중:20만<br />

주말:23만</td>

<td>주중:23만<br />

주말:26만</td>

<td>30만</td>

</tr>

<tr>

<td>102</td>

<td>10평<br />

34m²</td>

<td>2인/4인</td>

<td>주중:7만<br />

주말:9만</td>

<td>주중:9만<br />

주말:14만</td>

<td>16만</td>

</tr>

<tr>

<td>103</td>

<td>12평<br />

40m²</td>

<td>2인/5인</td>

<td>주중:8만<br />

주말:10만</td>

<td>주중:10만<br />

주말:15만</td>

<td>17만</td>

</tr>

<tr>

<td>104</td>

<td>12평<br />

40m²</td>

<td>2인/5인</td>

<td>주중:8만<br />

주말:10만</td>

<td>주중:10만<br />

주말:15만</td>

<td>17만</td>

</tr>

<tr>

<td>105</td>

<td>15평<br />

50m²</td>

<td>2인/6인</td>

<td>주중:10만<br />

주말:12만</td>

<td>주중:12만<br />

주말:16만</td>

<td>18만</td>

</tr>

</tbody>

</table>

 

<div class="bottom">- 기준인원 초과시 성인(10,000원), 아동유아(10,000원)이 추가됩니다.</div>

</div>

 

 

img { border:1px solid #D4D4D4; padding:5px; }
img:hover{ border:1px solid #666666; filter:alpha(opacity=70); opacity:.7; box-shadow:0 0 10px rgba(0,0,0,.2);filter:alpha(opacity=100);opacity:1; -ms-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg);transition:opacity .3s;-webkit-transition:opacity .3s;transition:opacity .3s; }