+
+ 
+
+
+
+
+
+## ☕ **아쉬운 점**
+
+> - #### 스크롤 다루기
+> > - 13인치 노트북에서 스크롤을 할 때 페이지가 두 칸씩 넘어가는 문제를 발견
+> > - footer 부분이 다른 페이지와 크기가 달라서 스크롤을 다 내렸을 경우, 흰색 공간이 생김 (footer 위치를 내려서 임시로 해결)
+> - flex는 많이 사용했는데 grid 활용을 안한 점
+> - js에 아직 미숙해서 구현하고 싶은 기능을 못 넣은 게 아쉽다.
+> - css코드가 정리가 안 된 느낌이라서 아쉽다. 공통적인 부분은 합치고 겹치는 부분은 제거해야 해야 할 필요가 있다.
+
+## ☕ **느낀 점**
+
+> - 전체적으로 웹페이지의 구성과 구조를 꼼꼼히 분석해 보는 기회가 되었다.
+> - 전체적으로 간단해 보이는 것도 기능 구현이 생각보다 쉽지 않다.
+> - CSS부분에서 하나의 기능도 여러 가지 방식을 시도해 보고 더 편리하고 효율적인 것을 비교해 봐야겠다.
diff --git a/css/common.css b/css/common.css
new file mode 100644
index 00000000..c50f2e54
--- /dev/null
+++ b/css/common.css
@@ -0,0 +1,32 @@
+/* COMMON */
+body {
+ background: transparent;
+
+ font-family: 'Noto Sans KR', sans-serif;
+ /* font-family: 'Noto Sans', sans-serif; */
+ color: #333;
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 1.5;
+
+ overflow-x: hidden;
+}
+
+img {
+ display: inline-block;
+}
+
+a {
+ text-decoration: none;
+}
+
+button {
+ padding: 0;
+
+ border: 0;
+
+ font-family: inherit;
+ background-color: transparent;
+
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/css/footer.css b/css/footer.css
new file mode 100644
index 00000000..7b9bb147
--- /dev/null
+++ b/css/footer.css
@@ -0,0 +1,260 @@
+/* FOOTER */
+.main-section-footer {
+ width: 100%;
+
+ display: table-cell;
+ table-layout: fixed;
+
+ position: relative;
+ overflow: hidden;
+
+ text-align: center;
+}
+
+.main-section-footer #footer {
+ width: 100vw;
+
+ margin-top: 400px;
+ padding: 48px 0;
+
+ display: block;
+
+ background-color: #222;
+
+ color: #fff;
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.main-section-footer .container {
+ width: 100%;
+ max-width: 1312px;
+
+ margin: 0 auto;
+ padding: 0 48px;
+
+ display: inline-block;
+ text-align: left;
+
+ position: relative;
+}
+
+.footer-top::after {
+ clear: both;
+ content: ' ';
+
+ display: table;
+}
+
+.footer-top-menu li {
+ margin-top: 16px;
+
+ display: block;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+
+}
+
+.footer-top-menu li:first-child {
+ margin-top: 0;
+}
+
+.footer-top-menu ul li {
+ display: block;
+
+ font-size: 24px;
+ font-weight: 600;
+ color: #fff;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.footer-top-menu ul li:hover {
+ text-decoration: underline;
+}
+
+.footer-top-cs {
+ position: absolute;
+ top: 10px;
+ right: 100px;
+}
+
+.footer-top-cs dl:first-child {
+ margin-top: 0;
+ margin-bottom: 34px;
+}
+
+.footer-top-cs dl {
+ display: block;
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.footer-top-cs dt {
+ margin-bottom: 6px;
+
+ display: block;
+
+ font-family: 'Mark Pro';
+ font-size: 16px;
+ font-weight: 600;
+ color: #fff;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.footer-top-cs dd {
+ display: block;
+
+ font-size: 14px;
+ font-weight: 400;
+ color: #777;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.footer-top-cs dd li:first-child {
+ margin-left: 0;
+}
+
+.footer-top-cs dd li {
+ margin-left: 20px;
+
+ display: inline-block;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.footer-bottom {
+ margin: 48px 0;
+ padding-top: 48px;
+
+ border-top: 1px solid rgba(255, 255, 255, 0.15);
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+
+.footer-bottom-menu ul li {
+ font-size: 14px;
+ font-weight: 600;
+ color: #fff;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.footer-bottom-menu ul li:hover {
+ text-decoration: underline;
+}
+
+.footer-bottom-menu li {
+ margin-right: 40px;
+ margin-bottom: 30px;
+
+ display: inline-block;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.footer-bottom-menu ul li strong {
+ color: #f5ce3e;
+}
+
+.footer-bottom-info {
+ font-size: 14px;
+ font-weight: 400;
+ color: #777;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.footer-bottom-info ul {
+ margin-bottom: 8px;
+
+ display: flex;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+
+.footer-bottom-info__address li {
+ vertical-align: middle;
+}
+
+.footer-bottom-info li:before {
+ width: 1px;
+ height: 11px;
+
+ margin-left: 12px;
+ margin-right: 12px;
+
+ content: '';
+ display: inline-block;
+
+ border-left: 1px solid #777;
+
+ line-height: 1;
+}
+
+.footer-bottom-info li:first-child::before {
+ content: none;
+}
+
+.footer-bottom-copy {
+ margin-top: 16px;
+ margin-bottom: 24px;
+
+ display: block;
+
+ font-family: 'Mark Pro';
+ font-size: 12px;
+ font-weight: 400;
+ color: #777;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.footer-bottom-copy span {
+ margin-right: 4px;
+
+ display: inline-block;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.footer-bottom-sns {
+ display: flex;
+
+ position: absolute;
+ right: 100px;
+}
+
+.footer-bottom-sns i {
+ padding: 10px;
+}
+
+.icon-foot-sns-insta {
+ width: 32px;
+ height: 32px;
+
+ background: url(../images/icon/ico_foot_sns_insta.svg) 50% 50% no-repeat;
+}
+
+.icon-foot-sns-youtube {
+ width: 32px;
+ height: 32px;
+
+ background: url(../images/icon/ico_foot_sns_youtube.svg) 50% 50% no-repeat;
+}
+
+.icon-foot-sns-twitter {
+ width: 32px;
+ height: 32px;
+
+ background: url(../images/icon/ico_foot_sns_twitter.svg) 50% 50% no-repeat;
+}
+
+.footer-bottom::after {
+ clear: both;
+
+ content: ' ';
+ display: table;
+}
\ No newline at end of file
diff --git a/css/header.css b/css/header.css
new file mode 100644
index 00000000..7cf15800
--- /dev/null
+++ b/css/header.css
@@ -0,0 +1,151 @@
+/* HEADER */
+header {
+ width: 100%;
+
+ position: fixed;
+ top: 0;
+ left: 0;
+
+ z-index: 1;
+}
+
+header:hover {
+ height: 424px;
+
+ background-color: #fff;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+header .logo-container {
+ background-image: url(/images/logo/logo_white.svg);
+
+ width: 216px;
+ height: 30px;
+
+ margin: auto 0;
+
+ position: fixed;
+ top: 35px;
+ left: 60px;
+}
+
+header:hover .logo-container {
+ background-image: url(/images/logo/logo_black.svg);
+}
+
+header .main-menu {
+ width: 100%;
+
+ padding-left: 30px;
+
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+
+ position: fixed;
+}
+
+/* 상단 고정 메뉴 */
+header .main-menu .item .item__name {
+ padding: 37px 70px 37px 0;
+
+ display: flex;
+ justify-content: flex-start;
+
+ font-size: 100%;
+ font-weight: 700;
+ color: #fff;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+header:hover .main-menu .item .item__name {
+ color: #333;
+}
+
+header .main-menu .item .item__contents {
+ display: none;
+}
+
+header:hover .main-menu .item .item__contents {
+ display: block;
+}
+
+/* header .main-menu .item .item__contents .contents__menu {
+ background-color: #ffffff00;
+} */
+
+/* header .main-menu .item .item__contents .contents__menu{
+ padding-right: 50px;
+} */
+
+/* header:hover .main-menu .item .item__contents .contents__menu{
+ transition: all 3s ease;
+} */
+
+/* 메뉴 세부 사항 */
+header .main-menu .item .item__contents .contents__menu .depth-01 {
+ margin-left: 5px;
+ padding-right: 25px;
+
+ font-size: 16px;
+ font-weight: bold;
+ line-height: 250%;
+ color: rgb(55, 55, 55);
+}
+
+header .main-menu .item .item__contents .contents__menu .depth-01 .depth-02 {
+ font-size: small;
+ font-weight: 400;
+ line-height: 230%;
+ color: rgb(144, 144, 144);
+}
+
+/* BUTTON */
+header button {
+ position: fixed;
+}
+
+header .btn-language {
+ width: 100px;
+ height: 30px;
+
+ margin: 38px 40px 0 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ float: right;
+ right: 60px;
+
+ border: 1px solid #fff;
+ border-radius: 15px;
+
+ text-align: center;
+ line-height: 30px;
+
+ color: #fff;
+}
+
+header:hover .btn-language {
+ border: 1px solid #333;
+ color: #333;
+}
+
+header .btn-allmenu {
+ width: 24px;
+ height: 24px;
+
+ margin-top: 38px;
+
+ float: right;
+
+ right: 30px;
+
+ background: url(../images/icon/ico_allmenu_white.svg);
+}
+
+header:hover .btn-allmenu {
+ background-image: url(../images/icon/ico_allmenu_black.svg);
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 00000000..89c44b1a
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,692 @@
+@import url(common.css);
+@import url(header.css);
+@import url(footer.css);
+
+/* 타이틀마다 있는 마침표 */
+.main-title::after {
+ content: '';
+ width: 20px;
+ height: 20px;
+
+ margin-left: 16px;
+
+ display: inline-block;
+
+ background-color: #d50037;
+}
+
+/* main-quick-container - 기업 단체 구매 버튼 */
+.main-quick-container {
+ display: flex;
+ align-items: flex-end;
+
+ position: fixed;
+ right: 32px;
+ bottom: 32px;
+
+ transition: all .3s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+ transition-delay: 0.5s;
+
+ z-index: 1; /* fullpage-wrapper 위로 올라와야 함 */
+}
+
+.main-quick {
+ width: 200px;
+ height: 72px;
+
+ float: right;
+ display: flex;
+ overflow: hidden;
+
+ border-radius: 72px;
+
+ background-color: rgba(213, 0, 55, 0.9);
+
+ align-items: center;
+ justify-content: center;
+
+ transition: all .5s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+.main-quick-text {
+ margin-right: 12px;
+
+ white-space: nowrap;
+
+ color: white;
+ font-size: 18px;
+ font-weight: 600;
+ line-height: 1.1;
+}
+
+/* fullpage-wrapper */
+.fullpage-wrapper {
+ width: 100%;
+ height: 100%;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ transform: translate(-50%, -50%);
+}
+
+.fullpage-wrapper .fp-section {
+ height: 100vh;
+}
+
+/* =================== VISUAL =================== */
+
+.main-section-visual img {
+ width: auto;
+ max-width: inherit;
+ height: 100%;
+
+ display: block;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ transform: translate(-50%, -50%);
+}
+
+/* swiper-pagination-wrap */
+.main-section-visual .swiper-pagination-wrap {
+ width: 240px;
+ height: 56px;
+
+ margin-left: -120px;
+
+ display: flex;
+
+ position: absolute;
+ left: 50%;
+ bottom: 32px;
+ transform: translate(0, 0);
+
+ border-radius: 56px;
+
+ background: rgba(0, 0, 0, 0.6) !important;
+
+ align-items: center;
+ justify-content: center;
+}
+
+.main-section-visual .swiper-pagination-wrap img {
+ height: 24px;
+}
+
+.main-section-visual .swiper-pagination-wrap img:first-child {
+ left: 40px;
+}
+
+.main-section-visual .swiper-pagination-wrap img:last-child {
+ left: 200px;
+}
+
+/* =================== MAIN STORY =================== */
+
+.main-section-story {
+ position: relative;
+}
+
+.main-section-story .container {
+ width: 1312px;
+ height: 540px;
+
+ margin: 0 auto;
+ padding: 0 48px;
+
+ display: flex;
+ flex-direction: column;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.main-section-story .container .main-title {
+ height: fit-content;
+
+ margin-top: 28px;
+ margin-bottom: 32px;
+
+ display: inline-block;
+
+ position: relative;
+
+ opacity: 1;
+
+ line-height: 1;
+
+ font-family: 'Noto Sans', sans-serif;
+ font-size: 96px;
+ font-weight: 800;
+ color: #000;
+
+ z-index: 1;
+}
+
+.main-section-story .container .tablist {
+ width: fit-content;
+}
+
+.main-section-story .container .tablist button {
+ display: flex;
+ flex-direction: column;
+
+ align-items: flex-start;
+}
+
+.main-section-story .container .tablist .tablist__text {
+ display: none;
+
+ font-size: 16px;
+ color: #000000;
+}
+
+.main-section-story .container .tablist .tablist__title {
+ margin-bottom: 40px;
+
+ font-family: 'Noto Sans', sans-serif;
+ font-size: 32px;
+ font-weight: 800;
+ color: #6d6d6d;
+}
+
+.main-section-story .container .tablist-button.clicked .tablist__title {
+ display: inline-block;
+
+ text-decoration: underline;
+ color: #000000;
+}
+
+.main-section-story .container .tablist-button.clicked .tablist__text {
+ display: inline-block;
+
+ color: #000000;
+}
+
+/* 슬라이드 컨테이너 */
+.main-section-story .container .tabpanel {
+ margin-top: -350px;
+ margin-left: 520px;
+
+ position: relative;
+
+ z-index: 0;
+}
+
+.main-section-story .container .tabpanel .swiper {
+ width: 1500px;
+}
+
+.main-section-story .container .tabpanel .swiper .swiper-wrapper {
+ display: flex;
+ align-items: flex-end;
+ /* Flexbox 사용 */
+}
+
+.main-section-story .container .tabpanel .swiper .swiper-slide {
+ /* 슬라이드의 너비를 고정하여 일정하게 설정. */
+ width: 190px;
+
+ margin-right: 20px;
+
+ text-align: center;
+}
+
+.main-section-story .container .tabpanel .swiper-slide img {
+ /* 이미지가 슬라이드 안에 꽉 차도록 조절합니다. */
+ width: 40%;
+ height: 40%;
+ object-fit: cover;
+}
+
+/* 활성화된 슬라이드의 이미지 크기 조정 */
+.main-section-story .container .tabpanel .swiper-slide-active img {
+ width: 100%;
+ height: 100%;
+ overflow: visible;
+}
+
+.main-section-story .tabpanel .swiper-pagination-wrap {
+ width: 424px;
+ height: 56px;
+
+ margin-left: -120px;
+
+ background: #000;
+
+ display: block;
+ overflow: hidden;
+
+ position: absolute;
+ left: 152px;
+ bottom: 0;
+
+ border-radius: 0;
+
+ z-index: 1;
+}
+.main-section-story .tabpanel .swiper-pagination-wrap img:first-child {
+ position: absolute;
+ top:13px;
+ right: 15px;
+}
+.main-section-story .tabpanel .swiper-pagination-wrap img:nth-child(2) {
+ position: absolute;
+ left: 15px;
+ top:13px;
+}
+
+.main-section-story .tabpanel .swiper-pagination-wrap .swiper-pagination {
+ right: 130px;
+ bottom: 15px;
+
+ align-items: center;
+ justify-content: center;
+ white-space: nowrap;
+ background-color: #000;
+
+ position: absolute;
+ text-align: center;
+
+ font-size: 16px;
+ font-weight: 400;
+ color: #fff;
+}
+
+/* =================== 에이리스트 =================== */
+
+.main-section-alist {
+ background-image: url(/images/main/main_alist_pc.jpg);
+ background-size: cover;
+ background-position: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+.main-section-alist .container {
+ width: 1216px;
+
+ margin: 0 auto;
+ padding: 0 48px;
+
+ display: inline-block;
+
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ text-align: left;
+}
+
+.main-section-alist .main-title {
+ margin-top: 20vh;
+ margin-bottom: 72px;
+
+ display: inline-block;
+
+ opacity: 1;
+
+ font-family: 'Noto Sans KR';
+ font-size: 96px;
+ font-weight: 800;
+ line-height: 1;
+ color: #000;
+}
+
+.main-section-alist .main-desc {
+ display: block;
+
+ margin-bottom: 40px;
+
+ font-family: 'Noto Sans KR';
+ font-size: 32px;
+ font-weight: 800;
+ line-height: 1.3;
+ color: #000;
+}
+
+.main-section-alist .main-subtitle {
+ margin-bottom: 16px;
+
+ display: block;
+
+ font-size: 24px;
+ font-weight: 600;
+ color: #000;
+}
+
+.main-section-alist .main-text {
+ width: 44%;
+
+ margin-bottom: 19vh;
+
+ display: block;
+
+ font-family: 'Noto Sans KR';
+ font-size: 18px;
+ font-weight: 400;
+ color: #534d49;
+
+ word-break: keep-all;
+ word-wrap: break-word;
+}
+
+/* =================== BRAND SURPORT =================== */
+
+.main-section-support .container{
+ width: 1216px;
+
+ margin: 0 auto;
+ padding: 0 48px;
+
+ display: inline-block;
+ text-align: left;
+
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ position: relative;
+}
+
+.main-section-support .container .main-title{
+ margin-top: 8vh;
+
+ display: inline-block;
+
+ opacity: 1;
+
+ font-family: 'Noto Sans', sans-serif;
+ font-size: 96px;
+ font-weight: 800;
+ line-height: 1;
+ color: #000;
+}
+
+.main-section-support .container .flex-left img{
+ height: 552px;
+
+ margin-top: -100px;
+ margin-left: 270px;
+
+ position: relative;
+
+ z-index: -1;
+}
+
+.main-section-support .flex-right{
+ height: 552px;
+
+ margin-top: -290px;
+ margin-left: 900px;
+
+ position: absolute;
+}
+
+.main-section-support .flex-right u{
+ margin-bottom: 20px;
+
+ display: inline-block;
+
+ font-family: 'Noto Sans KR';
+ font-size: 30px;
+ font-weight: 800;
+}
+.main-section-support .flex-right .swiper {
+ width: 312px;
+ height: 56px;
+ background: #000;
+
+ margin-bottom: 20px;
+ margin-top: 30px;
+
+ display: inline-block;
+
+ position: absolute;
+}
+.main-section-support .flex-right .swiper img:first-child{
+ margin-top: 15px;
+ margin-left: 270px;
+
+ display: inline;
+}
+.main-section-support .flex-right .swiper img:nth-child(2){
+ top: 15px;
+ right: 270px;
+
+ position: absolute;
+}
+
+.main-section-support .flex-right .swiper .swiper-pagination {
+ top: 15px;
+ right: 136px;
+
+ position: absolute;
+
+ color: white;
+}
+
+/* =================== FRANCHISE =================== */
+
+.main-section-franchise {
+ background-color: #f5f5f5;
+}
+
+.main-section-franchise .container {
+ width: 1312px;
+
+ margin: 0 auto;
+ padding: 0 48px;
+
+ position: relative;
+ top: 30%;
+
+ text-align: center;
+}
+
+.main-section-franchise .main-title{
+ margin-top: 20px;
+ margin-bottom: 32px;
+ opacity: 1;
+
+ display: inline-block;
+
+ font-family: 'Noto Sans', sans-serif;
+ font-size: 96px;
+ font-weight: 800;
+ line-height: 1;
+ color: #000;
+}
+
+.main-section-franchise .main-desc{
+ margin-bottom: 32px;
+
+ display: block;
+
+ font-family: 'Noto Sans KR';
+ font-size: 24px;
+ font-weight: 700;
+ color: #000;
+}
+
+.main-section-franchise .main-text {
+ margin-bottom: 48px;
+
+ display: block;
+
+ font-family: 'Noto Sans KR';
+ font-size: 18px;
+ font-weight: 400;
+ color: #333;
+}
+
+.main-section-franchise .buttons {
+ margin-bottom: 10vh;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.main-section-franchise .buttons button{
+ min-width: 240px;
+ height: 64px;
+
+ margin-right: 16px;
+ padding-left: 24px;
+ padding-right: 24px;
+
+ background-color: #fff;
+ align-items: center;
+
+ border: 2px solid #333;
+ border-color: #000;
+
+ cursor: pointer;
+ vertical-align: middle;
+ text-align: center;
+
+ font-size: 20px;
+ font-weight: 700;
+
+ transition: color .5s cubic-bezier(0.16, 0.04, 0.03, 0.95);
+}
+
+
+.main-section-franchise .buttons button:hover{
+ background-color: #000;
+ color: #fff;
+}
+
+/* =================== NEWS & NOTICE =================== */
+
+.main-section-news .container {
+ display: inline-block;
+ width: 100%;
+ text-align: left;
+
+ position: relative;
+ margin: 0 auto;
+ padding: 0 48px;
+ width: 1216px;
+
+ top: 25%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.main-section-news .main-title{
+ margin-top: 56px;
+ opacity: 1;
+ line-height: 1;
+
+ display: inline-block;
+
+ font-family: 'Noto Sans', sans-serif;
+ font-size: 96px;
+ font-weight: 800;
+ color: #000;
+}
+
+.main-section-news .main-news-container{
+ width: 590px;
+
+ position: absolute;
+ top: 120px;
+ right: 0px;
+
+ display: flex;
+
+ font-size: 30px;
+}
+
+.main-section-news .subtitle {
+ width: 590px;
+ font-weight: bold;
+
+ position: absolute;
+ top: 300px;
+ right: 660px;
+
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+}
+
+.main-section-news .main-news-container .type{
+ margin-bottom: 14px;
+
+ font-size: 16px;
+ font-weight: 400;
+ color: #d50037;
+}
+.main-section-news .main-news-container ul li{
+ padding: 30px;
+}
+.main-section-news .main-news-container ul li strong {
+ width: auto;
+ max-width: 100%;
+ height: 36px;
+
+ padding-top: 0.2em;
+
+ overflow: hidden;
+ display: inline-block;
+
+ font-size: 24px;
+ font-weight: 600;
+ line-height: 1.1;
+ color: #000;
+
+ word-wrap: normal;
+ word-break: break-all;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.main-section-news .main-news-container ul li .date {
+ margin-top: 1px;
+
+ display: block;
+
+ font-size: 16px;
+ color: #333;
+}
+
+.main-section-news .main-news-container ul hr {
+ margin: 0;
+
+ border: 0.1px solid #efefef;
+}
+
+.main-section-news .main-news-illust {
+ width: 320px;
+ height: 203px;
+
+ display: block;
+
+ position: absolute;
+ top: 400px;
+
+ background-size: 100% auto;
+ background-repeat: no-repeat;
+ background-image: url(../images/main/main_news_illust.svg);
+}
+
+.main-section-news .main-news-container ul li:hover {
+ background-color: #0f0f0f;
+}
+
+.main-section-news .main-news-container ul li:hover strong{
+ color: white;
+}
+
+.main-section-news .main-news-container ul li:hover .date{
+ color: white;
+}
+
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 00000000..d3fa06bd
Binary files /dev/null and b/favicon.ico differ
diff --git a/images/icon/ico_allmenu_black.svg b/images/icon/ico_allmenu_black.svg
new file mode 100644
index 00000000..497e0820
--- /dev/null
+++ b/images/icon/ico_allmenu_black.svg
@@ -0,0 +1,28 @@
+
diff --git a/images/icon/ico_allmenu_white.svg b/images/icon/ico_allmenu_white.svg
new file mode 100644
index 00000000..bc6b2502
--- /dev/null
+++ b/images/icon/ico_allmenu_white.svg
@@ -0,0 +1,28 @@
+
diff --git a/images/icon/ico_foot_sns_insta.svg b/images/icon/ico_foot_sns_insta.svg
new file mode 100644
index 00000000..3e494d24
--- /dev/null
+++ b/images/icon/ico_foot_sns_insta.svg
@@ -0,0 +1,20 @@
+
diff --git a/images/icon/ico_foot_sns_twitter.svg b/images/icon/ico_foot_sns_twitter.svg
new file mode 100644
index 00000000..a071b340
--- /dev/null
+++ b/images/icon/ico_foot_sns_twitter.svg
@@ -0,0 +1,9 @@
+
diff --git a/images/icon/ico_foot_sns_youtube.svg b/images/icon/ico_foot_sns_youtube.svg
new file mode 100644
index 00000000..956758bf
--- /dev/null
+++ b/images/icon/ico_foot_sns_youtube.svg
@@ -0,0 +1,11 @@
+
diff --git a/images/logo/logo_black.svg b/images/logo/logo_black.svg
new file mode 100644
index 00000000..c913bda2
--- /dev/null
+++ b/images/logo/logo_black.svg
@@ -0,0 +1,40 @@
+
diff --git a/images/logo/logo_white.svg b/images/logo/logo_white.svg
new file mode 100644
index 00000000..abd0cde8
--- /dev/null
+++ b/images/logo/logo_white.svg
@@ -0,0 +1,40 @@
+
diff --git a/images/main/ico_arrow_left.svg b/images/main/ico_arrow_left.svg
new file mode 100644
index 00000000..9e812a68
--- /dev/null
+++ b/images/main/ico_arrow_left.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/main/ico_arrow_right.svg b/images/main/ico_arrow_right.svg
new file mode 100644
index 00000000..d7b32644
--- /dev/null
+++ b/images/main/ico_arrow_right.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/main/ico_brand4.svg b/images/main/ico_brand4.svg
new file mode 100644
index 00000000..3a54a877
--- /dev/null
+++ b/images/main/ico_brand4.svg
@@ -0,0 +1,32 @@
+
diff --git a/images/main/ico_floating.svg b/images/main/ico_floating.svg
new file mode 100644
index 00000000..28cb86e9
--- /dev/null
+++ b/images/main/ico_floating.svg
@@ -0,0 +1,54 @@
+
+
diff --git a/images/main/main_alist_pc.jpg b/images/main/main_alist_pc.jpg
new file mode 100644
index 00000000..012efd20
Binary files /dev/null and b/images/main/main_alist_pc.jpg differ
diff --git a/images/main/main_brand4.jpg b/images/main/main_brand4.jpg
new file mode 100644
index 00000000..7a0b85d7
Binary files /dev/null and b/images/main/main_brand4.jpg differ
diff --git a/images/main/main_news_illust.svg b/images/main/main_news_illust.svg
new file mode 100644
index 00000000..28413ddc
--- /dev/null
+++ b/images/main/main_news_illust.svg
@@ -0,0 +1,117 @@
+
diff --git a/images/main/menu_coffee1.jpg b/images/main/menu_coffee1.jpg
new file mode 100644
index 00000000..d110bce6
Binary files /dev/null and b/images/main/menu_coffee1.jpg differ
diff --git a/images/main/menu_coffee2.jpg b/images/main/menu_coffee2.jpg
new file mode 100644
index 00000000..485970ec
Binary files /dev/null and b/images/main/menu_coffee2.jpg differ
diff --git a/images/main/menu_coffee3.jpg b/images/main/menu_coffee3.jpg
new file mode 100644
index 00000000..9386b783
Binary files /dev/null and b/images/main/menu_coffee3.jpg differ
diff --git a/images/main/menu_coffee4.jpg b/images/main/menu_coffee4.jpg
new file mode 100644
index 00000000..fe651d10
Binary files /dev/null and b/images/main/menu_coffee4.jpg differ
diff --git a/images/twosome_seo.png b/images/twosome_seo.png
new file mode 100644
index 00000000..c0668da7
Binary files /dev/null and b/images/twosome_seo.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..08d9ecd1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,392 @@
+
+
+
+
+
+
+
+ 
+ 
+ 1/2
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ TWOSOME
+
+ IN YOUR MUG, A LIST
+
언제 어지서나 여유롭게 즐기는 에이리스트
++ 좋은 커피를 마셔야 비로소 하루가 시작되는 느낌이라면 + 하루에도 몇 번씩 그윽한 커피 향이 생각난다면 마음속 우선순위에 + 언제나 커피가 있는 당신이라면 잊지 말고 챙겨야 할 단 하나의 + 리스트, 투썸플레이스 에이리스트. +
+
+ 
+ 투썸플레이스 SEP센터는 브랜트 가치를
+
만들어 내는 전문가 육성 센터입니다.
+
+
+
+ 당신의 창업 성공 스토리,
+
+ 투썸플레이스가 함께합니다.
+
+ 향기로운 커피와 달콤한 디저트가 함께하는 프리미엄 디저트
+
+ 카페 투썸플레이스. 투썸플레이스의 축적된 경험과 노하우를
+
+ 바탕으로 여러분의 성공창업을 약속 드립니다.
+