2024.02.14

css/collection.css

@@ -0,0 +1,70 @@
+section#collection {
+
+}
+section#collection .wrap {
+
+  height: 800px;
+  display: flex;
+  flex-direction: column;
+}
+section#collection .wrap h2 {
+  text-align: center;
+}
+section#collection .wrap ul.brand {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  text-align: center;
+  position: relative;
+}
+section#collection .wrap ul.brand li{
+
+}
+section#collection .wrap ul.brand li h3 {
+  border-bottom: 2px solid brown;
+  line-height: 5;
+}
+section#collection .wrap ul.brand li h3 a {
+
+}
+section#collection .wrap ul.brand li ul.list {
+  display: flex;
+  justify-content: center;
+}
+section#collection .wrap ul.brand li ul.list li {
+
+}
+section#collection .wrap ul.brand li ul.list li a {
+  padding: 0 20px;
+  line-height: 5;
+}
+section#collection .wrap ul.brand li ul.list li article {
+  position: absolute;
+  left: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  align-items: center;
+}
+section#collection .wrap ul.brand li ul.list li article img {
+
+  grid-column: 1;
+  grid-row: 1 / span 4;
+}
+section#collection .wrap ul.brand li ul.list li article h4 {
+  grid-column: 2;
+  grid-row: 1;
+}
+section#collection .wrap ul.brand li ul.list li article p {
+  grid-column: 2;
+  grid-row: 2;
+}
+section#collection .wrap ul.brand li ul.list li article span {
+  grid-column: 2;
+  grid-row: 3;
+}
+section#collection .wrap ul.brand li ul.list li article span a {
+
+}
+.art{
+
+}

css/common.css

@@ -0,0 +1,130 @@
+body{
+}
+.wrap{
+  margin: 0 auto;
+  max-width: 1520px;
+}
+
+/* 폰트 */
+li{
+  list-style: none;
+}
+.h1{
+  font-size: 64px;
+}
+.h2{
+  font-size: 54px;
+  font-family: "MavenProExtraBold";
+}
+.h3{
+  font-size: 44px;
+}
+.h4{
+  font-size: 34px;
+}
+.h5{
+  font-size: 24px;
+}
+.h6{
+  font-size: 14px;
+}
+.p{
+
+}
+.artH{
+
+}
+
+
+/* 패딩 */
+.paddingT100{
+  padding-top: 100px;
+}
+.paddingB50{
+  padding-bottom: 50px;
+}
+
+/* 마진 */
+.margin50{
+  margin: 50px;
+}
+.marginT50{
+  margin-top: 50px;
+}
+.marginR50{
+  margin-right: 50px;
+}
+.marginB50{
+  margin-bottom: 50px 
+}
+.marginL50{
+  margin-left: 50px;
+}
+
+/* 트랜스폼 */
+.t80{
+  transform: translateY(-20%);
+}
+
+/* 블럭,인라인 */
+.block{
+  display: block;
+}
+
+/* 정렬 */
+.flex{
+  display: flex;
+}
+.between{
+  justify-content: space-between;
+}
+.flex-wrap{
+  flex-wrap: wrap;
+}
+.center{
+  justify-content: center;
+}
+.column{
+  flex-direction: column;
+}
+.grid24{
+  display: grid;
+  grid-template-columns: 40% 60%;
+  grid-template-rows: auto auto auto auto;
+}
+.align-center{
+  align-items: center;
+}
+
+/* 텍스트정렬 */
+.text-center{
+  text-align: center;
+}
+
+/* 둥근모서리 */
+.borderR20{
+  border-radius: 20px
+}
+
+/* 라인 */
+.line{
+
+}
+
+/* 안보이게 */
+.hide{
+  display: none !important;
+}
+
+/* 높이 */
+.vh100{
+  height: 100vh;
+  box-sizing: border-box;
+}
+.h100{
+  height: 100%;
+}
+.max-w{
+  max-width: 1360px;
+}
+

css/footer.css

@@ -0,0 +1,71 @@
+footer {
+
+}
+footer .wrap {
+
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: repeat(3, auto);
+  column-gap: 100px;
+}
+footer .wrap h2 {
+
+  font-size: 0;
+  width: 119px;
+  height: 37px;
+  background: url(../img/logo.png) no-repeat center /contain;
+}
+footer .wrap ul {
+
+  display: flex;
+}
+footer .wrap ul li {
+
+}
+footer .wrap ul li a {
+  padding: 0 10px;
+  position: relative;
+}
+footer .wrap ul li:nth-child(-n+2) a::after{
+  content: "";
+  display: inline-block;
+  height: 8px;  
+  width: 1px;
+  background-color: black;
+  position: absolute;
+  right: 0;
+  top: 50%;
+}
+footer .wrap ul li:first-child a{
+  padding-left: 0;
+  font-weight: bold;
+}
+footer .wrap ul h3 li a {
+
+}
+footer .wrap address {
+  grid-column: 2;
+  line-height: 1.3;
+}
+footer .wrap address span {
+
+}
+footer .wrap p {
+
+  grid-column: 2;
+  line-height: 3;
+}
+footer .wrap select {
+
+  grid-row: 1;
+  grid-column: 3;
+}
+footer .wrap select h3 {
+
+}
+footer .wrap select p {
+
+}
+footer .wrap select option {
+
+}

css/header.css

@@ -0,0 +1,54 @@
+header {
+  width: 1903px;
+  height: 100px;
+  position: fixed;
+}
+header .wrap {
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  max-width: 1600px;
+}
+header .wrap h1 {
+  width: 146px;
+  height: 45px;
+  font-size: 0;
+  background-image: url(../img/logo.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+header .wrap ul.lang {
+
+}
+header .wrap ul.lang li {
+
+}
+header .wrap ul.lang li a {
+  font-size: 18px;
+  padding: 8px;
+  color: #999999;
+}
+header .wrap ul.menu {
+  height: 100%;
+}
+header .wrap ul.menu li {
+
+}
+header .wrap ul.menu li a {
+  font-size: 18px;
+  display: block;
+  height: 100%;
+  line-height: 100px;
+  padding: 0 20px;
+  color: #231916;
+}
+header .wrap ul.search {
+
+}
+header .wrap ul.search li {
+
+}
+header .wrap ul.search li a {
+
+  padding: 0 5px;
+}