CSS 스타일링

<section class="main_visual">
<div class="wrap">
<header>
<div class="logo">
<a href="https://yorien.com/img/logo.svg"></a>
</div>

<ul class="menu_wrap">
<li><a href="#">About</a></li>
<li><a href="#">Chablis</a></li>
<li><a href="#">Shop</a></li>
</ul>

<div class="util_menu">
<div class="cs_text">
<a href="#">고객상담센터</a>
</div>

<ul class="util_icon">
<li class="icon_login">
<a href="#">↪</a>
</li>
<li class="icon_user">
<a href="#">○</a>
</li>
<li class="icon_cart">
<a href="#">□</a>
<span class="cart_count">0</span>
</li>
</ul>
</div>
</header>
</div>
<!-- arrows -->
<div class="arrow_left">&#10094;</div>
<div class="arrow_right">&#10095;</div>

<!-- text -->
<div class="text_box">
<h2>요리에 품격을 더하다.</h2>
<p>
건강한 요리를 만드는 새로운 습관<br>
프리미엄 자연여과 정수기, 요리엔
</p>
</div>
<!-- header end -->
</section>


<!-- brand section -->
<section class="brand_section">
<div class="inner">
<div class="brand_title">
<h2>Brand Story</h2>
<p>깨끗한 물과 건강한 식문화를 위한 요리엔의 가치</p>
</div>

<div class="card_wrap">
<div class="brand_card">
<div class="card_img">
<img src="https://yorien.com/img/main_step01.jpg" alt="깨끗한 물">
</div>
<div class="card_text">
<h3>STEP 01 - Design</h3>
<p>
자연을 담은 예술의 경지

수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을
그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</div>
</div>

<div class="brand_card">
<div class="card_img">
<img src="https://yorien.com/img/main_step02.jpg" alt="건강한 요리">
</div>
<div class="card_text">
<h3>STEP 02 - Materials</h3>
<p>
자연을 생각한 깐깐한 소재

제품의 시작은 좋은 소재에서부터 시작됩니다. 환경과 사람을 생각하는 마음으로,
지속 가능한 아름다움이라는 철학을 바탕으로 깐깐하게 선정하였습니다.
</p>
</div>
</div>

<div class="brand_card">
<div class="card_img">
<img src="https://yorien.com/img/main_step03.jpg" alt="감각적인 주방">
</div>
<div class="card_text">
<h3>STEP 03 - Craftmanship</h3>
<p>
장인들의 완벽한 기술력

국내 최고의 금형 및 사출 장인들이 모여 까다로운 형태를 오차 없이 구현하며
투명하고 맑은 요리엔의 본질을 완벽하게 보여줍니다.
</p>
</div>
</div>

<div class="brand_card">
<div class="card_img">
<img src="https://yorien.com/img/main_step04.jpg" alt="감각적인 주방">
</div>
<div class="card_text">
<h3>Finish</h3>
<p>
최고를 위한 섬세한 마무리

직접 깎아 만든 북미산 오크나무와 최고급 독일산 원목 마감재인 아우로 오일을
사용하여 최상의 품질을 보장합니다.
</p>
</div>
</div>
</div>
</div>
</section>



<!-- brand section -->
<section class="brand_section">
<div class="inner">
<div class="brand_title">
<h2>Discover Whats New</h2>
<p>요리엔이 제안하는 프로모션과 새로운 소식을 확인하세요</p>
<p>자세히 보기 -></p>
</div>

<div class="card_wrap">
<div class="brand_card">
<div class="card_img">
<img src="https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_0JvF8VaS_8d70be995c7c9bf86a86b45618dee2ecfb574503_1000x500.jpg" alt="깨끗한 물">
</div>
<div class="card_text">
<h3>봄에 찾아온 요리엔의 새로운 설렘</h3>
<p>만개하는 꽃의 설렘을 담은 요리엔의 새로운 컬러를 소개합니다. </p>
<p>자세히 보기 -></p>
</div>
</div>

<div class="brand_card">
<div class="card_img">
<img src="https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_0JvF8VaS_8d70be995c7c9bf86a86b45618dee2ecfb574503_1000x500.jpg" alt="건강한 요리">
</div>
<div class="card_text">
<h3>새로운 요리엔을 만날 시간</h3>
<p>더 편안한 사용을 위한 디테일의 변화, 정교하게 통일된 다채로운 컬러까지.. </p>
<p>자세히 보기 -></p>
</div>
</div>

<div class="brand_card">
<div class="card_img">
<img src="https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_0JvF8VaS_8d70be995c7c9bf86a86b45618dee2ecfb574503_1000x500.jpg" alt="건강한 요리">
</div>
<div class="card_text">
<h3>요리엔 공식몰 리뉴얼 오픈</h3>
<p>새로운 요리엔 공식몰에서 주방의 품격을 높여 보세요 </p>
<p>자세히 보기 -></p>
</div>
</div>

</div>
</div>
</section>