diff --git a/README.md b/README.md index cc6a3b23..70c735c0 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,44 @@ -[참고 내용] +# 디아블로4 홈페이지 클론 코딩 -👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +## 사이트 주소 ++ 원본 링크 : https://diablo4.blizzard.com/ko-kr/ ++ 클론 코딩 배포 링크 : https://gleaming-mooncake-584e00.netlify.app/ -과제 수행 및 제출 방법 +## 작업 기간 +2023년 7월 27일 ~ (진행중) +(과제 제출 후에도 보완 할 예정) -1. 현재 저장소를 로컬에 클론(Clone)합니다. -2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) -3. 자신의 본명 브랜치에서 과제를 수행합니다. -4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) -5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) +## 기술 스택 ++ HTML ++ CSS ++ Javascript ++ Jquery -- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! +## 구현 내용 -필수 요구사항 ++ 시멘틱 태그 사용 ++ CSS만을 이용한 드롭다운 메뉴 ++ 동영상 재생 클릭 시, 연령 확인 후 쿠키 저장 -> 연령 미달 시 동영상 재생 불가 구현 ++ 새소식 반응형을 고려하여 슬라이더로 대체 ++ 마우스를 따라가는 백그라운드 이미지 설정 ++ 비주얼 백그라운드 동영상 재생/정지 버튼 커스텀 ++ 탭 기능 구현 (게임플레이/이야기) -- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! -- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. +## 아쉬운 점 -선택 요구사항 ++ 반응형을 고려하여 작업 진행했으나, 클론 코딩 사이트를 급하게 변경해 시간 부족으로 반응형 미구현 ++ ~~사이트 로딩에 오래걸림, 최적화 작업 필요~~ 해결(2) ++ 콘솔 오류 확인 필요 ++ 구매하기 모달 창 및 메뉴 버튼 스크롤 js 미구현 ++ swiper.js 사용하면 한 슬라이더에서 두개의 pagination 작동 불가, 다른 슬라이더 대체 또는 해결 방안 연구 필요 ++ ~~크롬 외 모바일 / 맥OS 사파리 등 타 브라우저에서 연령 확인 js가 동작하지 않음~~ 해결(1) -- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. -- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- 부분적으로 BEM 방법론을 도입해보세요. -- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) -손쉬운 이미지 추출 방법 +## 해결 내용 -사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. +1. 크롬 외 타 브라우저에서 required 적용되지 않음
+→ button onclick으로 연령 인증 스크립트 구현하는 방식을 form action으로 변경 +1. 사이트 로딩에 오래걸림, 최적화 작업 필요
+→ Img Loading lasy 추가, iframe 탭 활성화 시 src값 입력, window load 후 html fadeIn 효과 -1. 원하는 사이트 접속 -2. Image Downloader 확장 프로그램 실행 -3. 다운로드 원하는 이미지 선택 -4. 서브 폴더 이름(Save to subfolder) 명시 -5. 다운로드! diff --git a/asset/.DS_Store b/asset/.DS_Store new file mode 100644 index 00000000..7c835f4d Binary files /dev/null and b/asset/.DS_Store differ diff --git a/asset/img/18.0ZgFc.png b/asset/img/18.0ZgFc.png new file mode 100644 index 00000000..22493384 Binary files /dev/null and b/asset/img/18.0ZgFc.png differ diff --git a/asset/img/58N0OYWESR9S1689830796149.avif.avif.avif b/asset/img/58N0OYWESR9S1689830796149.avif.avif.avif new file mode 100644 index 00000000..61138263 Binary files /dev/null and b/asset/img/58N0OYWESR9S1689830796149.avif.avif.avif differ diff --git a/asset/img/Chicklet.svg b/asset/img/Chicklet.svg new file mode 100644 index 00000000..d5324053 --- /dev/null +++ b/asset/img/Chicklet.svg @@ -0,0 +1,9 @@ + + + + Nav/Chicklet + Created with Sketch. + + + + \ No newline at end of file diff --git a/asset/img/D4-Launch_Class-Section-BG_001.webp b/asset/img/D4-Launch_Class-Section-BG_001.webp new file mode 100644 index 00000000..1ca9021c Binary files /dev/null and b/asset/img/D4-Launch_Class-Section-BG_001.webp differ diff --git a/asset/img/D4-Launch_Class-Section-Barbarian_001.webp b/asset/img/D4-Launch_Class-Section-Barbarian_001.webp new file mode 100644 index 00000000..4bd1d767 Binary files /dev/null and b/asset/img/D4-Launch_Class-Section-Barbarian_001.webp differ diff --git a/asset/img/D4-Launch_Class-Section-Druid_001.avif b/asset/img/D4-Launch_Class-Section-Druid_001.avif new file mode 100644 index 00000000..e24f4c5c Binary files /dev/null and b/asset/img/D4-Launch_Class-Section-Druid_001.avif differ diff --git a/asset/img/D4-Launch_Class-Section-Druid_001.png b/asset/img/D4-Launch_Class-Section-Druid_001.png new file mode 100644 index 00000000..7be18449 Binary files /dev/null and b/asset/img/D4-Launch_Class-Section-Druid_001.png differ diff --git a/asset/img/D4-Launch_Class-Section-Necromancer_001.avif b/asset/img/D4-Launch_Class-Section-Necromancer_001.avif new file mode 100644 index 00000000..8caa59fe Binary files /dev/null and b/asset/img/D4-Launch_Class-Section-Necromancer_001.avif differ diff --git a/asset/img/D4-Launch_Class-Section-Necromancer_001.png b/asset/img/D4-Launch_Class-Section-Necromancer_001.png new file mode 100644 index 00000000..a3bd4139 Binary files /dev/null and b/asset/img/D4-Launch_Class-Section-Necromancer_001.png differ diff --git a/asset/img/D4-Launch_Class-Section-Rogue_001.avif b/asset/img/D4-Launch_Class-Section-Rogue_001.avif new file mode 100644 index 00000000..7a3722ea Binary files /dev/null and b/asset/img/D4-Launch_Class-Section-Rogue_001.avif differ diff --git a/asset/img/D4-Launch_Class-Section-Rogue_001.png b/asset/img/D4-Launch_Class-Section-Rogue_001.png new file mode 100644 index 00000000..2b36401e Binary files /dev/null and b/asset/img/D4-Launch_Class-Section-Rogue_001.png differ diff --git a/asset/img/D4-Launch_Class-Section-Sorcerer_001.avif b/asset/img/D4-Launch_Class-Section-Sorcerer_001.avif new file mode 100644 index 00000000..64ffbbfc Binary files /dev/null and b/asset/img/D4-Launch_Class-Section-Sorcerer_001.avif differ diff --git a/asset/img/D4-Launch_Class-Section-Sorcerer_001.png b/asset/img/D4-Launch_Class-Section-Sorcerer_001.png new file mode 100644 index 00000000..9da16a11 Binary files /dev/null and b/asset/img/D4-Launch_Class-Section-Sorcerer_001.png differ diff --git a/asset/img/D4-Launch_Class-Section_Mobile_Barbarian_002.webp b/asset/img/D4-Launch_Class-Section_Mobile_Barbarian_002.webp new file mode 100644 index 00000000..b604f34b Binary files /dev/null and b/asset/img/D4-Launch_Class-Section_Mobile_Barbarian_002.webp differ diff --git a/asset/img/D4-Launch_Class-Section_Mobile_Druid_002.webp b/asset/img/D4-Launch_Class-Section_Mobile_Druid_002.webp new file mode 100644 index 00000000..5752331c Binary files /dev/null and b/asset/img/D4-Launch_Class-Section_Mobile_Druid_002.webp differ diff --git a/asset/img/D4-Launch_Class-Section_Mobile_Necromancer_002.webp b/asset/img/D4-Launch_Class-Section_Mobile_Necromancer_002.webp new file mode 100644 index 00000000..e52d4178 Binary files /dev/null and b/asset/img/D4-Launch_Class-Section_Mobile_Necromancer_002.webp differ diff --git a/asset/img/D4-Launch_Class-Section_Mobile_Rogue_002.webp b/asset/img/D4-Launch_Class-Section_Mobile_Rogue_002.webp new file mode 100644 index 00000000..ac8f7f50 Binary files /dev/null and b/asset/img/D4-Launch_Class-Section_Mobile_Rogue_002.webp differ diff --git a/asset/img/D4-Launch_Class-Section_Mobile_Sorcerer_002.avif b/asset/img/D4-Launch_Class-Section_Mobile_Sorcerer_002.avif new file mode 100644 index 00000000..84865670 Binary files /dev/null and b/asset/img/D4-Launch_Class-Section_Mobile_Sorcerer_002.avif differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Character-Creation_700.avif b/asset/img/D4-Launch_Media-Thumbs_Character-Creation_700.avif new file mode 100644 index 00000000..483a684b Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Character-Creation_700.avif differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Character-Creation_700.webp b/asset/img/D4-Launch_Media-Thumbs_Character-Creation_700.webp new file mode 100644 index 00000000..8568996a Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Character-Creation_700.webp differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Dungeons_1600.avif b/asset/img/D4-Launch_Media-Thumbs_Dungeons_1600.avif new file mode 100644 index 00000000..d2e30215 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Dungeons_1600.avif differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Dungeons_1600.webp b/asset/img/D4-Launch_Media-Thumbs_Dungeons_1600.webp new file mode 100644 index 00000000..9f48b5df Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Dungeons_1600.webp differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Dungeons_640.jpg b/asset/img/D4-Launch_Media-Thumbs_Dungeons_640.jpg new file mode 100644 index 00000000..eab0966d Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Dungeons_640.jpg differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Gear_700.avif b/asset/img/D4-Launch_Media-Thumbs_Gear_700.avif new file mode 100644 index 00000000..8da1dd2d Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Gear_700.avif differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Gear_700.jpg b/asset/img/D4-Launch_Media-Thumbs_Gear_700.jpg new file mode 100644 index 00000000..bd22dae6 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Gear_700.jpg differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Mounts_1600.avif b/asset/img/D4-Launch_Media-Thumbs_Mounts_1600.avif new file mode 100644 index 00000000..b7617ceb Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Mounts_1600.avif differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Mounts_1600.webp b/asset/img/D4-Launch_Media-Thumbs_Mounts_1600.webp new file mode 100644 index 00000000..fe620e07 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Mounts_1600.webp differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Mounts_640.jpg b/asset/img/D4-Launch_Media-Thumbs_Mounts_640.jpg new file mode 100644 index 00000000..54fe3db1 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Mounts_640.jpg differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Paragon-Boards_700.avif b/asset/img/D4-Launch_Media-Thumbs_Paragon-Boards_700.avif new file mode 100644 index 00000000..3ccd92e4 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Paragon-Boards_700.avif differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Paragon-Boards_700.jpg b/asset/img/D4-Launch_Media-Thumbs_Paragon-Boards_700.jpg new file mode 100644 index 00000000..198ca15a Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Paragon-Boards_700.jpg differ diff --git a/asset/img/D4-Launch_Media-Thumbs_PvP_1600.avif b/asset/img/D4-Launch_Media-Thumbs_PvP_1600.avif new file mode 100644 index 00000000..d0b4d2e5 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_PvP_1600.avif differ diff --git a/asset/img/D4-Launch_Media-Thumbs_PvP_1600.webp b/asset/img/D4-Launch_Media-Thumbs_PvP_1600.webp new file mode 100644 index 00000000..337b8305 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_PvP_1600.webp differ diff --git a/asset/img/D4-Launch_Media-Thumbs_PvP_640.jpg b/asset/img/D4-Launch_Media-Thumbs_PvP_640.jpg new file mode 100644 index 00000000..0a670ee0 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_PvP_640.jpg differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Skill-Trees_700.avif b/asset/img/D4-Launch_Media-Thumbs_Skill-Trees_700.avif new file mode 100644 index 00000000..fb9abf1e Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Skill-Trees_700.avif differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Skill-Trees_700.jpg b/asset/img/D4-Launch_Media-Thumbs_Skill-Trees_700.jpg new file mode 100644 index 00000000..5d28022d Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Skill-Trees_700.jpg differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Strongholds_1600.avif b/asset/img/D4-Launch_Media-Thumbs_Strongholds_1600.avif new file mode 100644 index 00000000..fd79bd77 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Strongholds_1600.avif differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Strongholds_1600.webp b/asset/img/D4-Launch_Media-Thumbs_Strongholds_1600.webp new file mode 100644 index 00000000..93908b35 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Strongholds_1600.webp differ diff --git a/asset/img/D4-Launch_Media-Thumbs_Strongholds_640.jpg b/asset/img/D4-Launch_Media-Thumbs_Strongholds_640.jpg new file mode 100644 index 00000000..21afa049 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_Strongholds_640.jpg differ diff --git a/asset/img/D4-Launch_Media-Thumbs_World-Bosses_1600.jpg b/asset/img/D4-Launch_Media-Thumbs_World-Bosses_1600.jpg new file mode 100644 index 00000000..36c5c471 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_World-Bosses_1600.jpg differ diff --git a/asset/img/D4-Launch_Media-Thumbs_World-Bosses_640.avif b/asset/img/D4-Launch_Media-Thumbs_World-Bosses_640.avif new file mode 100644 index 00000000..4d7101ee Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_World-Bosses_640.avif differ diff --git a/asset/img/D4-Launch_Media-Thumbs_World-Bosses_640.webp b/asset/img/D4-Launch_Media-Thumbs_World-Bosses_640.webp new file mode 100644 index 00000000..f29992d6 Binary files /dev/null and b/asset/img/D4-Launch_Media-Thumbs_World-Bosses_640.webp differ diff --git a/asset/img/D4_Gampeplay-Launch-Trailer_Thumb_global.webp b/asset/img/D4_Gampeplay-Launch-Trailer_Thumb_global.webp new file mode 100644 index 00000000..043d3732 Binary files /dev/null and b/asset/img/D4_Gampeplay-Launch-Trailer_Thumb_global.webp differ diff --git a/asset/img/D4_Story-Class-Trailer-Barbarian_Thumb_global.webp b/asset/img/D4_Story-Class-Trailer-Barbarian_Thumb_global.webp new file mode 100644 index 00000000..c67f7db5 Binary files /dev/null and b/asset/img/D4_Story-Class-Trailer-Barbarian_Thumb_global.webp differ diff --git a/asset/img/D4_Story-Class-Trailer-Druid_Thumb_global.webp b/asset/img/D4_Story-Class-Trailer-Druid_Thumb_global.webp new file mode 100644 index 00000000..791e15c5 Binary files /dev/null and b/asset/img/D4_Story-Class-Trailer-Druid_Thumb_global.webp differ diff --git a/asset/img/D4_Story-Class-Trailer-Necromancer_Thumb_global.webp b/asset/img/D4_Story-Class-Trailer-Necromancer_Thumb_global.webp new file mode 100644 index 00000000..6e8c78d8 Binary files /dev/null and b/asset/img/D4_Story-Class-Trailer-Necromancer_Thumb_global.webp differ diff --git a/asset/img/D4_Story-Class-Trailer-Rogue_Thumb_global.webp b/asset/img/D4_Story-Class-Trailer-Rogue_Thumb_global.webp new file mode 100644 index 00000000..2440cb91 Binary files /dev/null and b/asset/img/D4_Story-Class-Trailer-Rogue_Thumb_global.webp differ diff --git a/asset/img/D4_Story-Class-Trailer-Sorcerer_Thumb_global.webp b/asset/img/D4_Story-Class-Trailer-Sorcerer_Thumb_global.webp new file mode 100644 index 00000000..9608724f Binary files /dev/null and b/asset/img/D4_Story-Class-Trailer-Sorcerer_Thumb_global.webp differ diff --git a/asset/img/D4_Story-Launch-Trailer_Thumb_global.avif b/asset/img/D4_Story-Launch-Trailer_Thumb_global.avif new file mode 100644 index 00000000..85f38c2d Binary files /dev/null and b/asset/img/D4_Story-Launch-Trailer_Thumb_global.avif differ diff --git a/asset/img/D4_Story-Launch-Trailer_Thumb_global.jpg b/asset/img/D4_Story-Launch-Trailer_Thumb_global.jpg new file mode 100644 index 00000000..e14f41f3 Binary files /dev/null and b/asset/img/D4_Story-Launch-Trailer_Thumb_global.jpg differ diff --git a/asset/img/Diablo_IV_KR.png b/asset/img/Diablo_IV_KR.png new file mode 100644 index 00000000..c902f2c5 Binary files /dev/null and b/asset/img/Diablo_IV_KR.png differ diff --git a/asset/img/PM41L0JLEGJA1689791749843.avif.avif.avif b/asset/img/PM41L0JLEGJA1689791749843.avif.avif.avif new file mode 100644 index 00000000..04a2606a Binary files /dev/null and b/asset/img/PM41L0JLEGJA1689791749843.avif.avif.avif differ diff --git a/asset/img/PM41L0JLEGJA1689791749843.png b/asset/img/PM41L0JLEGJA1689791749843.png new file mode 100644 index 00000000..6bac0ffe Binary files /dev/null and b/asset/img/PM41L0JLEGJA1689791749843.png differ diff --git a/asset/img/QX7XWY3883PR1690471228129.jpg b/asset/img/QX7XWY3883PR1690471228129.jpg new file mode 100644 index 00000000..fd077b63 Binary files /dev/null and b/asset/img/QX7XWY3883PR1690471228129.jpg differ diff --git a/asset/img/UCA6W0AZUREM1685750636109.avif.avif.avif b/asset/img/UCA6W0AZUREM1685750636109.avif.avif.avif new file mode 100644 index 00000000..67d1a8aa Binary files /dev/null and b/asset/img/UCA6W0AZUREM1685750636109.avif.avif.avif differ diff --git a/asset/img/UCA6W0AZUREM1685750636109.jpg b/asset/img/UCA6W0AZUREM1685750636109.jpg new file mode 100644 index 00000000..b36394d4 Binary files /dev/null and b/asset/img/UCA6W0AZUREM1685750636109.jpg differ diff --git a/asset/img/Y4IUKYPTBHLD1689978150874.avif.avif.avif b/asset/img/Y4IUKYPTBHLD1689978150874.avif.avif.avif new file mode 100644 index 00000000..a84783fc Binary files /dev/null and b/asset/img/Y4IUKYPTBHLD1689978150874.avif.avif.avif differ diff --git a/asset/img/Y4IUKYPTBHLD1689978150874.jpg b/asset/img/Y4IUKYPTBHLD1689978150874.jpg new file mode 100644 index 00000000..efea78cb Binary files /dev/null and b/asset/img/Y4IUKYPTBHLD1689978150874.jpg differ diff --git a/asset/img/bnet-logo-01.svg b/asset/img/bnet-logo-01.svg new file mode 100644 index 00000000..5fb2dd98 --- /dev/null +++ b/asset/img/bnet-logo-01.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/asset/img/circle-frame.webp b/asset/img/circle-frame.webp new file mode 100644 index 00000000..f5670afb Binary files /dev/null and b/asset/img/circle-frame.webp differ diff --git a/asset/img/d4-base-edition.webp b/asset/img/d4-base-edition.webp new file mode 100644 index 00000000..78a324cb Binary files /dev/null and b/asset/img/d4-base-edition.webp differ diff --git a/asset/img/d4-button-filigree-center.webp b/asset/img/d4-button-filigree-center.webp new file mode 100644 index 00000000..089e1c9b Binary files /dev/null and b/asset/img/d4-button-filigree-center.webp differ diff --git a/asset/img/d4-button-filigree-left.webp b/asset/img/d4-button-filigree-left.webp new file mode 100644 index 00000000..17c80130 Binary files /dev/null and b/asset/img/d4-button-filigree-left.webp differ diff --git a/asset/img/d4-button-filigree-right.webp b/asset/img/d4-button-filigree-right.webp new file mode 100644 index 00000000..47f63907 Binary files /dev/null and b/asset/img/d4-button-filigree-right.webp differ diff --git a/asset/img/d4-button-primary-left-base.webp b/asset/img/d4-button-primary-left-base.webp new file mode 100644 index 00000000..52dc633c Binary files /dev/null and b/asset/img/d4-button-primary-left-base.webp differ diff --git a/asset/img/d4-button-primary-left-hover.webp b/asset/img/d4-button-primary-left-hover.webp new file mode 100644 index 00000000..9a59546c Binary files /dev/null and b/asset/img/d4-button-primary-left-hover.webp differ diff --git a/asset/img/d4-button-primary-right-base.webp b/asset/img/d4-button-primary-right-base.webp new file mode 100644 index 00000000..9c45d40e Binary files /dev/null and b/asset/img/d4-button-primary-right-base.webp differ diff --git a/asset/img/d4-button-primary-right-hover.webp b/asset/img/d4-button-primary-right-hover.webp new file mode 100644 index 00000000..a19f0d8e Binary files /dev/null and b/asset/img/d4-button-primary-right-hover.webp differ diff --git a/asset/img/d4-button-primary-tile-base.webp b/asset/img/d4-button-primary-tile-base.webp new file mode 100644 index 00000000..1ac9184f Binary files /dev/null and b/asset/img/d4-button-primary-tile-base.webp differ diff --git a/asset/img/d4-button-primary-tile-hover.webp b/asset/img/d4-button-primary-tile-hover.webp new file mode 100644 index 00000000..8fb6ef00 Binary files /dev/null and b/asset/img/d4-button-primary-tile-hover.webp differ diff --git a/asset/img/d4-button-secondary-left-base.webp b/asset/img/d4-button-secondary-left-base.webp new file mode 100644 index 00000000..73c08a9f Binary files /dev/null and b/asset/img/d4-button-secondary-left-base.webp differ diff --git a/asset/img/d4-button-secondary-left-hover.webp b/asset/img/d4-button-secondary-left-hover.webp new file mode 100644 index 00000000..eceee255 Binary files /dev/null and b/asset/img/d4-button-secondary-left-hover.webp differ diff --git a/asset/img/d4-button-secondary-right-base.webp b/asset/img/d4-button-secondary-right-base.webp new file mode 100644 index 00000000..eff55683 Binary files /dev/null and b/asset/img/d4-button-secondary-right-base.webp differ diff --git a/asset/img/d4-button-secondary-right-hover.webp b/asset/img/d4-button-secondary-right-hover.webp new file mode 100644 index 00000000..e9709048 Binary files /dev/null and b/asset/img/d4-button-secondary-right-hover.webp differ diff --git a/asset/img/d4-button-secondary-tile-base.webp b/asset/img/d4-button-secondary-tile-base.webp new file mode 100644 index 00000000..e46b842c Binary files /dev/null and b/asset/img/d4-button-secondary-tile-base.webp differ diff --git a/asset/img/d4-button-secondary-tile-hover.webp b/asset/img/d4-button-secondary-tile-hover.webp new file mode 100644 index 00000000..e0304035 Binary files /dev/null and b/asset/img/d4-button-secondary-tile-hover.webp differ diff --git a/asset/img/d4-classes-icon-barbarian-base.avif b/asset/img/d4-classes-icon-barbarian-base.avif new file mode 100644 index 00000000..196907dc Binary files /dev/null and b/asset/img/d4-classes-icon-barbarian-base.avif differ diff --git a/asset/img/d4-classes-icon-barbarian-base.webp b/asset/img/d4-classes-icon-barbarian-base.webp new file mode 100644 index 00000000..43a08f96 Binary files /dev/null and b/asset/img/d4-classes-icon-barbarian-base.webp differ diff --git a/asset/img/d4-classes-icon-barbarian-hover.avif b/asset/img/d4-classes-icon-barbarian-hover.avif new file mode 100644 index 00000000..86e8a24c Binary files /dev/null and b/asset/img/d4-classes-icon-barbarian-hover.avif differ diff --git a/asset/img/d4-classes-icon-barbarian-hover.webp b/asset/img/d4-classes-icon-barbarian-hover.webp new file mode 100644 index 00000000..727d8df5 Binary files /dev/null and b/asset/img/d4-classes-icon-barbarian-hover.webp differ diff --git a/asset/img/d4-classes-icon-druid-base.avif b/asset/img/d4-classes-icon-druid-base.avif new file mode 100644 index 00000000..1c180867 Binary files /dev/null and b/asset/img/d4-classes-icon-druid-base.avif differ diff --git a/asset/img/d4-classes-icon-druid-base.webp b/asset/img/d4-classes-icon-druid-base.webp new file mode 100644 index 00000000..be749586 Binary files /dev/null and b/asset/img/d4-classes-icon-druid-base.webp differ diff --git a/asset/img/d4-classes-icon-druid-hover.avif b/asset/img/d4-classes-icon-druid-hover.avif new file mode 100644 index 00000000..18978aef Binary files /dev/null and b/asset/img/d4-classes-icon-druid-hover.avif differ diff --git a/asset/img/d4-classes-icon-druid-hover.webp b/asset/img/d4-classes-icon-druid-hover.webp new file mode 100644 index 00000000..a3e229da Binary files /dev/null and b/asset/img/d4-classes-icon-druid-hover.webp differ diff --git a/asset/img/d4-classes-icon-dungeons-base.avif b/asset/img/d4-classes-icon-dungeons-base.avif new file mode 100644 index 00000000..a3fba9e9 Binary files /dev/null and b/asset/img/d4-classes-icon-dungeons-base.avif differ diff --git a/asset/img/d4-classes-icon-dungeons-base.webp b/asset/img/d4-classes-icon-dungeons-base.webp new file mode 100644 index 00000000..0eecd4ff Binary files /dev/null and b/asset/img/d4-classes-icon-dungeons-base.webp differ diff --git a/asset/img/d4-classes-icon-dungeons-hover.avif b/asset/img/d4-classes-icon-dungeons-hover.avif new file mode 100644 index 00000000..a6983624 Binary files /dev/null and b/asset/img/d4-classes-icon-dungeons-hover.avif differ diff --git a/asset/img/d4-classes-icon-dungeons-hover.webp b/asset/img/d4-classes-icon-dungeons-hover.webp new file mode 100644 index 00000000..9d24def9 Binary files /dev/null and b/asset/img/d4-classes-icon-dungeons-hover.webp differ diff --git a/asset/img/d4-classes-icon-mounts-base.avif b/asset/img/d4-classes-icon-mounts-base.avif new file mode 100644 index 00000000..68b6d055 Binary files /dev/null and b/asset/img/d4-classes-icon-mounts-base.avif differ diff --git a/asset/img/d4-classes-icon-mounts-base.webp b/asset/img/d4-classes-icon-mounts-base.webp new file mode 100644 index 00000000..c5e4dfca Binary files /dev/null and b/asset/img/d4-classes-icon-mounts-base.webp differ diff --git a/asset/img/d4-classes-icon-mounts-hover.avif b/asset/img/d4-classes-icon-mounts-hover.avif new file mode 100644 index 00000000..9ba4ea88 Binary files /dev/null and b/asset/img/d4-classes-icon-mounts-hover.avif differ diff --git a/asset/img/d4-classes-icon-mounts-hover.webp b/asset/img/d4-classes-icon-mounts-hover.webp new file mode 100644 index 00000000..9aaa086a Binary files /dev/null and b/asset/img/d4-classes-icon-mounts-hover.webp differ diff --git a/asset/img/d4-classes-icon-necromancer-base.webp b/asset/img/d4-classes-icon-necromancer-base.webp new file mode 100644 index 00000000..86e03fe0 Binary files /dev/null and b/asset/img/d4-classes-icon-necromancer-base.webp differ diff --git a/asset/img/d4-classes-icon-necromancer-hover.avif b/asset/img/d4-classes-icon-necromancer-hover.avif new file mode 100644 index 00000000..04228c19 Binary files /dev/null and b/asset/img/d4-classes-icon-necromancer-hover.avif differ diff --git a/asset/img/d4-classes-icon-necromancer-hover.webp b/asset/img/d4-classes-icon-necromancer-hover.webp new file mode 100644 index 00000000..cbc45e48 Binary files /dev/null and b/asset/img/d4-classes-icon-necromancer-hover.webp differ diff --git a/asset/img/d4-classes-icon-pvp-base.webp b/asset/img/d4-classes-icon-pvp-base.webp new file mode 100644 index 00000000..616ebba4 Binary files /dev/null and b/asset/img/d4-classes-icon-pvp-base.webp differ diff --git a/asset/img/d4-classes-icon-pvp-hover.avif b/asset/img/d4-classes-icon-pvp-hover.avif new file mode 100644 index 00000000..b069a2d1 Binary files /dev/null and b/asset/img/d4-classes-icon-pvp-hover.avif differ diff --git a/asset/img/d4-classes-icon-pvp-hover.webp b/asset/img/d4-classes-icon-pvp-hover.webp new file mode 100644 index 00000000..0bb77aaa Binary files /dev/null and b/asset/img/d4-classes-icon-pvp-hover.webp differ diff --git a/asset/img/d4-classes-icon-rogue-base.avif b/asset/img/d4-classes-icon-rogue-base.avif new file mode 100644 index 00000000..b7999d9c Binary files /dev/null and b/asset/img/d4-classes-icon-rogue-base.avif differ diff --git a/asset/img/d4-classes-icon-rogue-base.webp b/asset/img/d4-classes-icon-rogue-base.webp new file mode 100644 index 00000000..f2bc71eb Binary files /dev/null and b/asset/img/d4-classes-icon-rogue-base.webp differ diff --git a/asset/img/d4-classes-icon-rogue-hover.avif b/asset/img/d4-classes-icon-rogue-hover.avif new file mode 100644 index 00000000..bed5a853 Binary files /dev/null and b/asset/img/d4-classes-icon-rogue-hover.avif differ diff --git a/asset/img/d4-classes-icon-rogue-hover.webp b/asset/img/d4-classes-icon-rogue-hover.webp new file mode 100644 index 00000000..905c0f66 Binary files /dev/null and b/asset/img/d4-classes-icon-rogue-hover.webp differ diff --git a/asset/img/d4-classes-icon-sorcerer-base.avif b/asset/img/d4-classes-icon-sorcerer-base.avif new file mode 100644 index 00000000..f81ae680 Binary files /dev/null and b/asset/img/d4-classes-icon-sorcerer-base.avif differ diff --git a/asset/img/d4-classes-icon-sorcerer-base.webp b/asset/img/d4-classes-icon-sorcerer-base.webp new file mode 100644 index 00000000..573ff206 Binary files /dev/null and b/asset/img/d4-classes-icon-sorcerer-base.webp differ diff --git a/asset/img/d4-classes-icon-sorcerer-hover.webp b/asset/img/d4-classes-icon-sorcerer-hover.webp new file mode 100644 index 00000000..e7d2ccfb Binary files /dev/null and b/asset/img/d4-classes-icon-sorcerer-hover.webp differ diff --git a/asset/img/d4-classes-icon-strongholds-base.avif b/asset/img/d4-classes-icon-strongholds-base.avif new file mode 100644 index 00000000..1732cb86 Binary files /dev/null and b/asset/img/d4-classes-icon-strongholds-base.avif differ diff --git a/asset/img/d4-classes-icon-strongholds-base.webp b/asset/img/d4-classes-icon-strongholds-base.webp new file mode 100644 index 00000000..bdd8f633 Binary files /dev/null and b/asset/img/d4-classes-icon-strongholds-base.webp differ diff --git a/asset/img/d4-classes-icon-strongholds-hover.webp b/asset/img/d4-classes-icon-strongholds-hover.webp new file mode 100644 index 00000000..db98ec52 Binary files /dev/null and b/asset/img/d4-classes-icon-strongholds-hover.webp differ diff --git a/asset/img/d4-classes-icon-worldbosses-base.avif b/asset/img/d4-classes-icon-worldbosses-base.avif new file mode 100644 index 00000000..3a4bd8f1 Binary files /dev/null and b/asset/img/d4-classes-icon-worldbosses-base.avif differ diff --git a/asset/img/d4-classes-icon-worldbosses-base.webp b/asset/img/d4-classes-icon-worldbosses-base.webp new file mode 100644 index 00000000..29bfb646 Binary files /dev/null and b/asset/img/d4-classes-icon-worldbosses-base.webp differ diff --git a/asset/img/d4-classes-icon-worldbosses-hover.avif b/asset/img/d4-classes-icon-worldbosses-hover.avif new file mode 100644 index 00000000..39fcf91a Binary files /dev/null and b/asset/img/d4-classes-icon-worldbosses-hover.avif differ diff --git a/asset/img/d4-classes-icon-worldbosses-hover.webp b/asset/img/d4-classes-icon-worldbosses-hover.webp new file mode 100644 index 00000000..09f71d21 Binary files /dev/null and b/asset/img/d4-classes-icon-worldbosses-hover.webp differ diff --git a/asset/img/d4-deluxe-edition.webp b/asset/img/d4-deluxe-edition.webp new file mode 100644 index 00000000..5f74a341 Binary files /dev/null and b/asset/img/d4-deluxe-edition.webp differ diff --git a/asset/img/d4-lilith-bg-light.webp b/asset/img/d4-lilith-bg-light.webp new file mode 100644 index 00000000..461cbbec Binary files /dev/null and b/asset/img/d4-lilith-bg-light.webp differ diff --git a/asset/img/d4-season-1-emblem-logo-kokr-2.avif.avif.avif b/asset/img/d4-season-1-emblem-logo-kokr-2.avif.avif.avif new file mode 100644 index 00000000..35204e13 Binary files /dev/null and b/asset/img/d4-season-1-emblem-logo-kokr-2.avif.avif.avif differ diff --git a/asset/img/d4-season-1-emblem-logo-kokr-2.png b/asset/img/d4-season-1-emblem-logo-kokr-2.png new file mode 100644 index 00000000..b763080f Binary files /dev/null and b/asset/img/d4-season-1-emblem-logo-kokr-2.png differ diff --git a/asset/img/d4-tab-underline-2.webp b/asset/img/d4-tab-underline-2.webp new file mode 100644 index 00000000..655e5bd0 Binary files /dev/null and b/asset/img/d4-tab-underline-2.webp differ diff --git a/asset/img/d4-ultimate-edition.webp b/asset/img/d4-ultimate-edition.webp new file mode 100644 index 00000000..63ab9c21 Binary files /dev/null and b/asset/img/d4-ultimate-edition.webp differ diff --git a/asset/img/d4_season1_narrative_trailer_thumbnail_agnostic.webp b/asset/img/d4_season1_narrative_trailer_thumbnail_agnostic.webp new file mode 100644 index 00000000..b34a96b0 Binary files /dev/null and b/asset/img/d4_season1_narrative_trailer_thumbnail_agnostic.webp differ diff --git a/asset/img/favi.png b/asset/img/favi.png new file mode 100644 index 00000000..83416f42 Binary files /dev/null and b/asset/img/favi.png differ diff --git a/asset/img/foot-blizzard.svg b/asset/img/foot-blizzard.svg new file mode 100644 index 00000000..f55b421b --- /dev/null +++ b/asset/img/foot-blizzard.svg @@ -0,0 +1 @@ +Blizzard Entertainment \ No newline at end of file diff --git a/asset/img/header-arrow.svg b/asset/img/header-arrow.svg new file mode 100644 index 00000000..c85f3861 --- /dev/null +++ b/asset/img/header-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/header-icon.svg b/asset/img/header-icon.svg new file mode 100644 index 00000000..ca5fb82c --- /dev/null +++ b/asset/img/header-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/header-icon2.svg b/asset/img/header-icon2.svg new file mode 100644 index 00000000..dcb82f9b --- /dev/null +++ b/asset/img/header-icon2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/header-icon3.svg b/asset/img/header-icon3.svg new file mode 100644 index 00000000..c8c7dd35 --- /dev/null +++ b/asset/img/header-icon3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/header-icon4.svg b/asset/img/header-icon4.svg new file mode 100644 index 00000000..05593c8c --- /dev/null +++ b/asset/img/header-icon4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/header-icon5.svg b/asset/img/header-icon5.svg new file mode 100644 index 00000000..53e94ca4 --- /dev/null +++ b/asset/img/header-icon5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/header-logo-blizzard.svg b/asset/img/header-logo-blizzard.svg new file mode 100644 index 00000000..c01a8a53 --- /dev/null +++ b/asset/img/header-logo-blizzard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/header-logo.svg b/asset/img/header-logo.svg new file mode 100644 index 00000000..a1bc34c5 --- /dev/null +++ b/asset/img/header-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/header-mem.svg b/asset/img/header-mem.svg new file mode 100644 index 00000000..624024a1 --- /dev/null +++ b/asset/img/header-mem.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/header-more.svg b/asset/img/header-more.svg new file mode 100644 index 00000000..63904908 --- /dev/null +++ b/asset/img/header-more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/header_battel.svg b/asset/img/header_battel.svg new file mode 100644 index 00000000..0f68206b --- /dev/null +++ b/asset/img/header_battel.svg @@ -0,0 +1 @@ +Battle.net \ No newline at end of file diff --git a/asset/img/icon-arrow-down.svg b/asset/img/icon-arrow-down.svg new file mode 100644 index 00000000..214fe030 --- /dev/null +++ b/asset/img/icon-arrow-down.svg @@ -0,0 +1,9 @@ + + + + Nav/Arrow + Created with Sketch. + + + + \ No newline at end of file diff --git a/asset/img/icon-play.svg b/asset/img/icon-play.svg new file mode 100644 index 00000000..b02b1f3e --- /dev/null +++ b/asset/img/icon-play.svg @@ -0,0 +1,9 @@ + + + + Nav/Tooltip/Play + Created with Sketch. + + + + \ No newline at end of file diff --git a/asset/img/lang-bg.svg b/asset/img/lang-bg.svg new file mode 100644 index 00000000..202878e8 --- /dev/null +++ b/asset/img/lang-bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/lang-icon.svg b/asset/img/lang-icon.svg new file mode 100644 index 00000000..c71bb5ab --- /dev/null +++ b/asset/img/lang-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/leather-texture_800.webp b/asset/img/leather-texture_800.webp new file mode 100644 index 00000000..40211b8e Binary files /dev/null and b/asset/img/leather-texture_800.webp differ diff --git a/asset/img/link-over.svg b/asset/img/link-over.svg new file mode 100644 index 00000000..87eca940 --- /dev/null +++ b/asset/img/link-over.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/main-visual-logo.webp b/asset/img/main-visual-logo.webp new file mode 100644 index 00000000..74358bb2 Binary files /dev/null and b/asset/img/main-visual-logo.webp differ diff --git a/asset/img/odd.svg b/asset/img/odd.svg new file mode 100644 index 00000000..e038b8bb --- /dev/null +++ b/asset/img/odd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/violence.1pDPe.png b/asset/img/violence.1pDPe.png new file mode 100644 index 00000000..19fcd420 Binary files /dev/null and b/asset/img/violence.1pDPe.png differ diff --git a/asset/img/visual-logo01.svg b/asset/img/visual-logo01.svg new file mode 100644 index 00000000..2f4de38e --- /dev/null +++ b/asset/img/visual-logo01.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/visual-logo02.svg b/asset/img/visual-logo02.svg new file mode 100644 index 00000000..54178204 --- /dev/null +++ b/asset/img/visual-logo02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/visual-logo03.svg b/asset/img/visual-logo03.svg new file mode 100644 index 00000000..814cf5bb --- /dev/null +++ b/asset/img/visual-logo03.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/visual-logo04.svg b/asset/img/visual-logo04.svg new file mode 100644 index 00000000..e02bd89e --- /dev/null +++ b/asset/img/visual-logo04.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/visual_pause.svg b/asset/img/visual_pause.svg new file mode 100644 index 00000000..36587455 --- /dev/null +++ b/asset/img/visual_pause.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/img/visual_play.svg b/asset/img/visual_play.svg new file mode 100644 index 00000000..b686daa0 --- /dev/null +++ b/asset/img/visual_play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/video/main_video.mp4 b/asset/video/main_video.mp4 new file mode 100644 index 00000000..c95a63e2 Binary files /dev/null and b/asset/video/main_video.mp4 differ diff --git a/asset/video/main_video.webm b/asset/video/main_video.webm new file mode 100644 index 00000000..acc3ccce Binary files /dev/null and b/asset/video/main_video.webm differ diff --git a/css/common.css b/css/common.css new file mode 100644 index 00000000..5c4aa39b --- /dev/null +++ b/css/common.css @@ -0,0 +1,470 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;line-height:175%;letter-spacing:normal} /* delete vertical-align,font:inherit; */ +body,html{width:100%;} +ol,ul,li{list-style:none;} +blockquote,q{quotes:none;} +blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} +table {border-collapse:separate;border-spacing:0;} +table caption {overflow:hidden; font-size:0; line-height:0; } +tbody,tfoot,thead,tr,th,td {margin:0;line-height:160%;letter-spacing:normal;} +dt{display:block;} +hr{display:none;} +a{cursor:pointer;text-decoration:none;color:inherit;} +a, a:hover{transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);} +address{font-style:normal;} +input,select,img{vertical-align:middle;} +input:focus, textarea:focus, button:focus {outline:none;} /* 크롬에서 커서 클릭시 파란색 테두리 제외*/ + +select { border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; } +select::-ms-expand {display:none} +input[type=text]::-ms-clear {display: none;} +input::-webkit-input-placeholder {color:#ababab; } +input:-ms-input-placeholder {color:#ababab; } +input::placeholder {color:#ababab; } + +span, b, strong{line-height:inherit; font-family:inherit;} + +body { min-width: 1300px; background-color: #000;} +.wrap { display:none; opacity: 1;} + +/* header */ + +#header, #header a{font-family: "Poppins",Helvetica,Arial,sans-serif;} +#header {width:calc(100% - 30px); min-width:1270px; height:72px; display:flex; position:fixed; z-index:9999; top:15px; left:50%; transform: translateX(-50%); backdrop-filter: blur(20px); background:rgba(36, 37, 38, 0.8); border-radius: 8px;} +#header .left-section {width:144px; height:100%; background-color: rgba(0,0,0,0.3);} +#header .left-section h1 {width:100%; height:100%; display:flex; justify-content:center; align-items: center;} +#header .left-section h1 a {display:block;} +#header .left-section h1 a:hover {filter: brightness(1.3);} +#header .left-section h1 img {width:80px;} + +#header .center-section {display: flex; height:100%; align-items: center;} +#header .center-section h2 {padding-left:16px; justify-content: center; display: flex; width:58px;} +#header .center-section h2 a:hover {filter: brightness(1.6);} +#header .center-section nav > ul {display: flex; position:relative; top:13px} +#header .center-section nav > ul > li > a {display:block; padding:8px 16px; color:#fff; font-size:18px; font-family: "Poppins",Helvetica,Arial,sans-serif; font-weight:600; border-radius: 8px;} +#header .center-section nav > ul > li > a:hover {background:rgba(255,255,255,0.05)} +#header .center-section nav > ul > li.menu-more > a {width:48px; height:48px; box-sizing:border-box; padding:0; text-align:center; line-height:48px; margin-left:15px; background:rgba(255,255,255,0.05);} +#header .center-section nav > ul > li.menu-more > a:hover {background: rgba(255,255,255,0.1);} +#header .center-section nav .inner-nav {position:relative; padding-top:25px; opacity: 0; visibility: hidden; transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);} +#header .center-section nav > ul > li.menu-more:hover .inner-nav {opacity: 1; visibility: visible;} +#header .center-section nav .inner-nav-list {background:#18191B; position:absolute; left:50%; top:15px; transform: translateX(-50%); margin-left:5px; width:300px; border-radius: 8px; padding:12px;} +#header .center-section nav .inner-nav-list::before { content:''; display:block; background:#18191B; border-color: transparent; border-radius: 4px; border-style: solid; border-width: 0px; + height: 16px; + left: 50%; + position: absolute; + top: -2px; + transform: rotate(45deg) translate(-50%); + transform-origin: center center; + transition: opacity 0.1s ease; + width: 16px; + z-index: 1;} + +#header .center-section nav .inner-nav-list li {width:100%; border-radius: 4px;} +#header .center-section nav .inner-nav-list li a {display: block; padding:8px 12px; color:#fff; font-size:18px; border-radius:4px; } +#header .center-section nav .inner-nav-list li a:hover {background:rgba(255,255,255,0.05);} +#header .center-section nav .inner-nav-list li a i { + font-size:0; + width:12px; + height:12px; + display: inline-block; + background-image: url('../asset/img/link-over.svg'); + background-repeat: no-repeat; + background-size: 14px; + background-position: center center; + position: relative; + top:-12px; + +} + +#header .customer > a { + font-size:16px; + display: block; + padding: 10px 16px 10px 46px; + color: #fff; + font-family: "Poppins",Helvetica,Arial,sans-serif; + font-weight: 600; + border-radius: 8px; + box-sizing: border-box; + width:112px; + background-image: url(../asset/img/header-mem.svg), url(../asset/img/header-arrow.svg); + background-position: 13px center, right 15px center; + background-size: 24px, 14px; + background-repeat: no-repeat; + transition: all 0.1s ease; +} + +#header .customer > a:hover { + background-color: rgba(255,255,255,0.05); +} + +#header .customer .inner-nav {position:relative; padding-top:25px; opacity: 0; visibility: hidden; transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);} +#header .customer:hover .inner-nav {opacity: 1; visibility: visible;} +#header .customer .inner-nav-wrap {background:#18191b; position:absolute; overflow:hidden; left:50%; top:15px; transform: translateX(-50%); margin-left:5px; width:300px; border-radius: 8px;} +#header .customer .inner-nav::before { content:''; display:block; background:#18191B; border-color: transparent; border-radius: 4px; border-style: solid; border-width: 0px; + height: 16px; + left: 50%; + position: absolute; + top: 13px; + transform: rotate(45deg) translate(-50%); + transform-origin: center center; + transition: opacity 0.1s ease; + width: 16px; + z-index: 1;} + +#header .customer .inner-nav-wrap .nav-top{ + width:100%; + padding:12px; + box-sizing: border-box; +} + +#header .customer .inner-nav-wrap .nav-top > a{ + display: block; + width: calc(100% - 30px); + box-sizing: border-box; + font-size:16px; + text-align: center; + border-radius: 8px; + transition: all 0.1s ease; + color: #fff; + background-color: #0074e0; + height:48px; + line-height: 48px; + background-image: url(../asset/img/header_battel.svg); + background-repeat: no-repeat; + background-position: 37.5% center; + background-size: 24px; + text-indent: 20px; + margin:15px auto; + + +} + +#header .customer .inner-nav-wrap .nav-top > a:hover { + background-color: #009dff; +} + +#header .customer .inner-nav-wrap .nav-top ul li:nth-child(1){ + background-image: url(../asset/img/header-icon.svg); +} +#header .customer .inner-nav-wrap .nav-top ul li:nth-child(2){ + background-image: url(../asset/img/header-icon2.svg); +} + +#header .customer .inner-nav-wrap .nav-bottom{ + width:100%; + padding:12px; + background-color:#111113 ; + box-sizing: border-box; +} + +#header .customer .inner-nav-wrap .nav-bottom li:nth-child(1){ + background-image: url(../asset/img/header-icon3.svg); +} +#header .customer .inner-nav-wrap .nav-bottom li:nth-child(2){ + background-image: url(../asset/img/header-icon4.svg); +} +#header .customer .inner-nav-wrap .nav-bottom li:nth-child(3){ + background-image: url(../asset/img/header-icon5.svg); +} + +#header .customer .inner-nav-wrap > div li { + width:100%; + box-sizing:border-box; + border-radius: 4px; + background-repeat: no-repeat; + background-position: 15px center; +} + +#header .customer .inner-nav-wrap > div li a { + display: block; padding:8px 12px 8px 50px; color:#fff; font-size:18px; border-radius:4px; +} + +#header .customer .inner-nav-wrap > div li a:hover {background:rgba(255,255,255,0.05);} + +#header .right-section {display: flex; margin-top: 12px; gap: 15px; position: absolute; right:10px} +.right-section button.header-buy{ + width:112px; height:48px; line-height:48px; + font-size:16px; text-align: center; border: 0; + background-color: #850000; + color:#fff; + border-radius: 8px; + font-weight: 600; + transition: all 0.1s ease; + cursor: pointer; +} +.right-section button.header-buy:hover { + background-color: #B60000; +} + +#modal button.red_button { + padding:0 32px; + height: 85px; + font-size:22.5px; + filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.66)); + color: #fff; + font-family: "Kenris"; +} + +#modal > div { + position: fixed; + z-index: 99999; + width:100%; + height:100vh; + top:0; + left:0; + display: none; + justify-content: center; + box-sizing: border-box; + align-items: center; + backdrop-filter: blur(20px); + background: rgba(0, 0, 0, 0.8); +} +#modal >div .content{ + width:800px; + height: auto; + text-align: center; + background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.084) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 24.58%, rgba(0, 0, 0, 0) 49.58%, rgba(0, 0, 0, 0) 76.15%, #000000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)), url(../asset/img/leather-texture_800.webp); + box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.24), inset 0px 2px 0px rgba(255, 255, 255, 0.06), inset 0px -1px 0px rgba(0, 0, 0, 0.24), inset 0px -2px 0px rgba(255, 255, 255, 0.06); + background-repeat: repeat; + padding-bottom:88px; +} + +#modal > div .modal-text{ + margin-top:10px; +} +#modal > div h3.title { + font-family: "Kenris"; + font-size:32px; +} + +#modal > div p.white-text { + color:#fff; + font-family: "Kenris"; + font-size: 22px; + +} + +#modal > div .top-bar { + align-items: center; + display: flex; + justify-content: end; + padding: 8px; + position: sticky; + top: 0px; + width: 100%; + z-index: 2; + box-sizing: border-box; +} + +#modal > div .top-bar button { + width: 40px; + height:40px; + background-color: hsla(0,0%,100%,.05); + border:0; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} +#modal > div .top-bar button:hover{ + background-color: hsla(0,0%,100%,.1); +} +#modal > div .top-bar button svg { + width:24px; + height:24px; + color:hsla(0,0%,100%,.7); +} + +#modal > div .inner-content { + padding:20px; +} +#modal > div form { + column-gap: 16px; + display: grid; + grid-template-columns: repeat(3, minmax(0px, 1fr)); + justify-items: center; + margin: 0px auto; + max-width: 480px; +} +#modal > div form select{ + font-family: "Montserrat", sans-serif; + background: #484645; + box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.66); + --color-content-600: rgba(255, 255, 255, 0.5); + --color-content-900: rgba(255, 255, 255, 0.5); + margin-top: 48px; + text-transform: capitalize; + width: 100%; + height: 56px; + padding: 0 calc(4px + 24px + 8px) 0 16px; + border: 2px solid transparent; + color:rgba(255, 255, 255, 0.5); + border-radius: 4px; + font-size:18px; + +} + +#modal > div form select option{ + background-color: #3a465f; + color: rgba(255, 255, 255, 0.5); + font-family: "Yoon Myungjo", sans-serif; + font-weight:500; + font-size:19px; +} + +#modal > div form .submit-box { + grid-column: span 3 / auto; + justify-self: center; + margin-top: 48px; + max-width: 320px; + width: 100%; + +} + +#footer { + padding:30px 0 140px 0; +} + +#footer .langcont {text-align: center;} +#footer .langcont #selector-toggler { + color: hsla(0,0%,100%,.7); + cursor: pointer; + display: inline-block; + font-family: "Blizzard",Helvetica,Arial,sans-serif,"Microsoft YaHei"; + font-weight: 400; + height: 24px; + line-height: 24px; + margin: 0px auto; + transition: color 200ms,background-color 200ms; + vertical-align: middle; + background-image:url(../asset/img/lang-bg.svg); + background-repeat: no-repeat; + background-size: 15px; + background-position: right 12px; + padding-right: 15px; +} + +#footer .langcont #selector-toggler svg {width:24px; height:24px; color:#009dff; fill: currentColor; position: relative; top:7px;} + +#footer .langcont #selector-toggler:hover { + filter: brightness(1.4); + color:#fff; + transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1); +} + +#footer .langcont #dropdown {display: none;} + +#footer .blizzard-logo {text-align: center; margin:30px 0;} +#footer .blizzard-logo a:hover {filter: brightness(1.3);} + +#footer .footer-link {text-align: center;} +#footer .footer-link a{ + font-size:16px; + font-family: "Blizzard",Helvetica,Arial,sans-serif,"Microsoft YaHei"; + font-style: normal; + line-height: 1.4; + transition: color 0.1s ease,background-color 0.1s ease,filter 0.1s ease,border-color 0.1s ease; + color: hsla(0,0%,100%,.7); +} + +#footer .footer-link a:after { + width:1px; height:9px; + background-color: rgba(255, 255, 255, 0.3); + content: ""; + display: inline-block; + margin: 0 5px 0 10px; + position: relative; +} + +#footer .footer-link a:last-child::after{ + display: none; +} + +#footer .footer-link a:hover { + color:#fff +} + +#footer .battlenet { + font-size:16px; + font-family: "Blizzard",Helvetica,Arial,sans-serif,"Microsoft YaHei"; + font-style: normal; + line-height: 1.4; + color: hsla(0,0%,100%,.7); + text-align: center; + margin:40px 0; +} + +#footer .battlenet a { + color:#009dff; + text-decoration:underline; + transition: color 0.1s ease,background-color 0.1s ease,filter 0.1s ease,border-color 0.1s ease; + padding-left:18px; + background-image: url(../asset/img/bnet-logo-01.svg); + background-repeat: no-repeat; + background-size: 14px; + background-position: left center; + display:inline-block; +} + +#footer .battlenet a:hover { + color:#33b1ff; +} + + +#footer .inc { + text-align: center; +} + +#footer .inc p { + font-size:12px; + color: hsla(0,0%,100%,.5); + line-height: 1.2; +} + +#footer .inc span a{ + font-size: 12px; + color: hsla(0,0%,100%,.7); + transition: color 0.1s ease,background-color 0.1s ease,filter 0.1s ease,border-color 0.1s ease; +} + +#footer .inc span a:hover { + color:#fff; +} + +#footer .inc span a::after { + width:1px; height:10px; + background-color: rgba(255, 255, 255, 0.3); + content: ""; + display: inline-block; + margin: 0 5px 0 10px; + position: relative; +} + +#footer .inc span a:last-child:after { + display: none; +} + +#footer .inc span a:first-child { + font-weight: 600; +} + +#footer .company { + margin: 25px 0; +} +#footer .company, #footer .company a { + text-align: center; + font-size:10px; + line-height: 1.4; + color: hsla(0,0%,100%,.7); +} +#footer .company a { + font-weight: 600; + transition: color 0.1s ease,background-color 0.1s ease,filter 0.1s ease,border-color 0.1s ease; +} +#footer .company a:hover { + color:#fff; +} + +#footer .foot-img { + text-align: center; +} diff --git a/css/font.css b/css/font.css new file mode 100644 index 00000000..bfd19599 --- /dev/null +++ b/css/font.css @@ -0,0 +1,71 @@ +@font-face{font-display:swap;font-family:Roboto;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf) format("truetype")} +@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:500;src:url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Ew-.ttf) format("truetype")} +@font-face{font-display:swap;font-family:Blizzard;font-style:"normal";font-weight:300;src:url(https://blz-contentstack-assets.akamaized.net/v3/assets/blt72f16e066f85e164/blt94217c59f4a5815a/5fbd95580100b746db953ff6/blizzard-300-normal.woff) format("woff")} +@font-face{font-display:swap;font-family:Blizzard;font-style:italic;font-weight:300;src:url(https://blz-contentstack-assets.akamaized.net/v3/assets/blt72f16e066f85e164/blt6265792bcb15f8cf/5fbd95570b0a825636795f93/blizzard-300-italic.woff) format("woff")} +@font-face{font-display:swap;font-family:Blizzard;font-style:"normal";font-weight:400;src:url(https://blz-contentstack-assets.akamaized.net/v3/assets/blt72f16e066f85e164/bltd282a24c6d400df1/5fbd966e21b96a46dc51a9f6/blizzard-400-normal.woff) format("woff")} +@font-face{font-display:swap;font-family:Blizzard;font-style:italic;font-weight:400;src:url(https://blz-contentstack-assets.akamaized.net/v3/assets/blt72f16e066f85e164/blta6017e96865fdd0d/5fbd946f21b96a46dc51a9f2/blizzard-400-italic.woff) format("woff")} +@font-face{font-display:swap;font-family:Blizzard;font-style:"normal";font-weight:700;src:url(https://blz-contentstack-assets.akamaized.net/v3/assets/blt72f16e066f85e164/blt61ecbf75b23a76ff/5fbd96a3a9e913483b74d58b/blizzard-700-normal.woff) format("woff")} +@font-face{font-display:swap;font-family:Blizzard;font-style:italic;font-weight:700;src:url(https://blz-contentstack-assets.akamaized.net/v3/assets/blt72f16e066f85e164/blt18311f4c612ce876/5fbd96a20b0a825636795f9b/blizzard-700-italic.woff) format("woff")} +@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:600;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format("woff2");unicode-range:u+0900-097f,u+1cd0-1cf6,u+1cf8-1cf9,u+200c-200d,u+20a8,u+20b9,u+25cc,u+a830-a839,u+a8e0-a8fb} +@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:600;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff} +@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:600;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd} +@font-face{font-family:Archivo;font-stretch:100%;font-style:normal;font-weight:500;src:url(https://fonts.gstatic.com/s/archivo/v9/k3k6o8UDI-1M0wlSV9XAw6lQkqWY8Q82sJaRE-NWIDdgffTTBjNZ-BdvBU7iVNRQGG4.woff) format("woff");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab} +@font-face{font-family:Archivo;font-stretch:100%;font-style:normal;font-weight:500;src:url(https://fonts.gstatic.com/s/archivo/v9/k3k6o8UDI-1M0wlSV9XAw6lQkqWY8Q82sJaRE-NWIDdgffTTBjNZ-RdvBU7iVNRQGG4.woff) format("woff");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff} +@font-face{font-family:Archivo;font-stretch:100%;font-style:normal;font-weight:500;src:url(https://fonts.gstatic.com/s/archivo/v9/k3k6o8UDI-1M0wlSV9XAw6lQkqWY8Q82sJaRE-NWIDdgffTTBjNZ9xdvBU7iVNRQ.woff) format("woff");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd} +@font-face { + font-family: "Alegreya Sans"; + font-weight: 400; + src: url("https://blz-contentstack-assets.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt095210837aa1e0f0/625005917f50a04889644422/AlegreyaSans-Regular.ttf"); + font-display: swap; + } + @font-face { + font-family: "Alegreya Sans"; + font-weight: 500; + src: url("https://blz-contentstack-assets.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blta747941659c3c73c/62500591844d9555dbf9416f/AlegreyaSans-Medium.ttf"); + font-display: swap; + } + @font-face { + font-family: "Alegreya Sans"; + font-weight: 700; + src: url("https://blz-contentstack-assets.akamaized.net/v3/assets/blt9c12f249ac15c7ec/bltcb28d02e46f1735f/6250059188b34525a18e655f/AlegreyaSans-Bold.ttf"); + font-display: swap; + } + @font-face { + font-family: "Exocet Blizzard OT"; + font-weight: 500; + src: url("https://blz-contentstack-assets.akamaized.net/v3/assets/blt9c12f249ac15c7ec/bltc480ac92a523b007/627b28039c0ad045adc48481/ExocetBlizzardOT-Medium.ttf"); + font-display: swap; + } + @font-face { + font-family: "Old Fenris"; + font-weight: 400; + font-style: "normal"; + src: url("https://blz-contentstack-assets.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt87dbca38eae7d12d/625007b988b34525a18e6563/OldFenris-Regular.otf"); + font-display: swap; + } + @font-face { + font-family: "Kenris"; + font-weight: 400; + font-style: "normal"; + src: url("https://blz-contentstack-assets.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt6a92d64ed3f977ad/63f915c0f7e2e96287bd37d5/Kenris_build_2021-06-15.ttf"); + font-display: swap; + } + @font-face { + font-family: "Yoon Myungjo"; + font-weight: 500; + src: url("https://blz-contentstack-assets.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt06edc9c52b99c4fe/63f915cdb624bd69a0f70250/YoonMyungjo240.ttf"); + font-display: swap; + } + @font-face { + font-family: "Yoon Myungjo"; + font-weight: 400; + src: url("https://blz-contentstack-assets.akamaized.net/v3/assets/blt9c12f249ac15c7ec/bltd648653f49cde39d/63f915c04f98c853eaf09926/YoonMyungjo230.ttf"); + font-display: swap; + } + @font-face { + font-family: "Kodia"; + font-weight: 400; + src: url("https://blz-contentstack-assets.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt5e839e1622754c57/63f915c066192b60e02052c6/Kodia_11172.ttf"); + font-display: swap; + } + \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..55507586 --- /dev/null +++ b/css/main.css @@ -0,0 +1,1130 @@ + + + + +/* visual */ +#visual{ + position: relative; + width: 100%; + height: 110vh; + min-height:1000px; +} +#visual .visual_in { + position:absolute; + width:100%; + height:100%; + top:0; + left:0; + overflow:hidden; + z-index:0; + background:#000; +} +#visual .visual_in .video-js { + width:100%; +} +#visual .visual_in .video-js video{ + position: relative; + width: auto; + height:110vh; + left:50%; + transform: translateX(-50%); + opacity: 0.9; + min-height:1000px; +} + +#visual .visual_in .control-bar{ + position:absolute; + left: 25px; + margin-top:650px; + z-index:10; +} +#visual .visual_in .control-bar .play { + display:none; +} +button.play_button { + cursor: pointer; + border:0; + font-size:0; + width:40px; + height:40px; + border-radius: 100%; + box-sizing: border-box; + background-color:rgba(93,113,152,.4); + background-size: 25px auto; + background-position: center center; + background-repeat: no-repeat; +} + +button.play_button.puase { + background-image: url(/asset/img/visual_pause.svg); +} + button.play_button.play { + background-image: url(/asset/img/visual_play.svg); +} +button.play_button:hover { + background-color:rgba(93,113,152,.6); +} + + + +#visual .visual-content { + position:absolute; + z-index: 1; + width:100%; + height:95%; + display: flex; + flex-direction: column; + align-items : center; + justify-content: center; + gap:40px 0; + min-height:900px; +} + +#visual .visual-content > img { + width:480px; +} +#visual .visual-content .visual-content-text { + text-align:center +} +h3.title{ + font-size: 43px; + font-family: "Kenris"; + font-weight:400; + line-height: 1.05; + text-transform: uppercase; + text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5); + color: #D2C8AE; + word-break: keep-all; +} +p.normal-text { + margin-top:10px; + font-family: "Yoon Myungjo", sans-serif; + font-size:22px; + font-weight: 500; + text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5); + color: #878582; + line-height: 1.4; + word-break: keep-all; +} +.visual-content-logo ul{ + display:flex; + flex-direction: row; + width:100%; + gap: 0 60px; + margin-top:4%; +} +.visual-content-logo li.first img {width:196px;} +.visual-content-logo li.second img {width:252px;} +.visual-content-logo li.third img {width:166px;} +.visual-content-logo li.fourth img {width:273px;} + +button.red_button { + height:93px; + filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.66));font-weight: 400; + line-height: 0.9; + text-transform: uppercase; + text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5); + color: #E5E0C8; + font-size:27px; + background-color: transparent; + transition: color 350ms; + padding: 0 40px; + border:0; + font-family: "Kodia"; + cursor: pointer; + position:relative; +} +button.red_button::before, button.red_button::after { + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ""; + position: absolute; + z-index: -1; + transition: opacity 350ms, color 350ms; + background-repeat: no-repeat; + background-position: left center, right center, center center, 10px center, calc(100% - 10px) center, center center; + background-size: auto 100%, auto 100%, auto 100%, auto calc(100% - 20px), auto calc(100% - 20px), 82% calc(100% - 20px); +} +button.red_button::before { + background-image: + url(/asset/img/d4-button-filigree-left.webp), + url(/asset/img/d4-button-filigree-right.webp), + url(/asset/img/d4-button-filigree-center.webp), + url(/asset/img/d4-button-primary-left-base.webp), + url(/asset/img/d4-button-primary-right-base.webp), + url(/asset/img/d4-button-primary-tile-base.webp); +} + +button.red_button::after { + opacity: 0; + background-image: + url(/asset/img/d4-button-filigree-left.webp), + url(/asset/img/d4-button-filigree-right.webp), + url(/asset/img/d4-button-filigree-center.webp), + url(/asset/img/d4-button-primary-left-hover.webp), + url(/asset/img/d4-button-primary-right-hover.webp), + url(/asset/img/d4-button-primary-tile-hover.webp); +} + +button.red_button:hover::after { + opacity: 1; +} + +#overview {display: flex; justify-content: center; position:relative; top:-110px;} +.overview-wrap {display:flex; justify-content: center; width:calc(100% - 80px);} +#overview .overview-inner { + width:100%; + max-width:1400px; + box-sizing: border-box; +} + +#overview .overview-inner .overview-inner-cont { + display:none; +} +#overview .overview-inner .overview-inner-cont.on { + display:flex; +} + +#overview .overview-inner > div{ + display: flex; + justify-content: space-between; + gap:80px; +} + +#overview .overview-inner-left { + width:60%; max-width:792px; position: relative; +} + +.youtube-overlay .overlay{ + position:absolute; + padding-bottom:52.25%; + padding-top:30px; + height:0; + overflow:hidden; + background-color: #000; + z-index: 10; + width:100%; + border: 1px solid rgba(255, 255, 255, 0.07); + box-sizing: border-box; +} + +.youtube-overlay .overlay-inner { + position:absolute; + background-repeat: no-repeat; + background-size: cover; + transition:opacity, filter 0.7s cubic-bezier(0.215,0.61,0.355,1); + top:0; + width: 100%; + height: 100%; + opacity: 0.9; +} + +#overview .overview-inner-first .overview-inner-left .overlay-inner { + background-image: url(/asset/img/D4_Gampeplay-Launch-Trailer_Thumb_global.webp); +} +#overview .overview-inner-second .overview-inner-left .overlay-inner { + background-image: url(/asset/img/D4_Story-Launch-Trailer_Thumb_global.jpg); +} + +.youtube-overlay .overlay:hover .overlay-inner { + filter: brightness(1.3); + -webkit-filter: brightness(1.3); + -moz-filter: brightness(1.3) +} + + +.youtube-overlay .overlay button{ + border:0; + width:100%; + height:100%; + position:absolute; + background: transparent; + cursor: pointer; + transition:filter 0.7s cubic-bezier(0.215,0.61,0.355,1); + background-image: url(/asset/img/circle-frame.webp); + background-repeat: no-repeat; + background-size: 55px; + background-position: center center; + top:0; +} +.youtube-overlay .overlay button img { + margin-left:5px; +} + +.youtube-overlay .overlay:hover button { + filter: + drop-shadow(rgba(179, 57, 52, 0.5) 0px 0px 10px) + drop-shadow(#6f1906 0px 0px 10px) + drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 10px) + drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 15px) + brightness(2) + contrast(1.2); +} + +.youtube-overlay .youtube {position:relative; padding-bottom:52.25%; padding-top:30px; height:0; overflow:hidden;} +.youtube-overlay .youtube iframe, +.youtube-overlay .youtube object, +.youtube-overlay .youtube embed {position:absolute; top:0; left:0; width:100%; height:100%;} + +.overview-inner-right { + width:38%; +} + + +.overview-tap { + position:relative; + margin-bottom:70px; +} + +.overview-tap ul { + display: flex; +} + +.overview-tap ul li button{ + font-family:"Kenris"; + color:#878582; + font-size: 22px; + min-width:120px; + text-align: center; + border:0; + background: transparent; + padding: 15px 30px; + position: relative; + cursor: pointer; +} +.overview-tap ul li button.on, .overview-tap ul li button:hover { + filter: brightness(1.6); + text-shadow: 0px 0px 10px rgb(224 165 115 / 66%), 0px 0px 10px #c85541, 0px 4px 15px #000000; + color:#fff; +} +.overview-tap ul li button.on::after { + display: block; +} +.overview-tap ul li button::after { + content: ""; + display:none; + width:100%; + height:100%; + background-image: url(/asset/img/d4-tab-underline-2.webp); + background-size: 120px auto; + background-repeat: no-repeat; + background-position: center 8px; + position: absolute; + left:0; + opacity: 0.6; +} + + + +button.brown_button { + display:block; + margin-top:40px; +} + + +button.brown_button { + height:72px; + filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.66));font-weight: 400; + line-height: 0; + text-transform: uppercase; + color: #E5E0C8; + font-size:27px; + background-color: transparent; + transition: color 350ms; + padding: 0 40px; + border:0; + font-family: "Kodia"; + cursor: pointer; + position: relative; +} + + +button.brown_button::before, button.brown_button::after { + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ""; + position: absolute; + z-index: -1; + transition: opacity 350ms, color 350ms; + background-repeat: no-repeat, no-repeat, repeat-x; + background-position: left center, right center, center center; + background-size: auto 100%; +} + +button.brown_button::before{ + background-image: url(/asset/img/d4-button-secondary-left-base.webp), + url(/asset/img/d4-button-secondary-right-base.webp), + url(/asset/img/d4-button-secondary-tile-base.webp); +} + +button.brown_button::after{ + opacity: 0; + background-image: url(/asset/img/d4-button-secondary-left-hover.webp), + url(/asset/img/d4-button-secondary-right-hover.webp), + url(/asset/img/d4-button-secondary-tile-hover.webp); +} + +button.brown_button:hover::after { + opacity: 1; +} + +button.brown_button i { + font-size: 0; + width:24px; + height:35px; + display: inline-block; + position:relative; + top:5px; +} + +button.brown_button svg {color:#E5E0C8} + +#spotlight { + background-image: linear-gradient(0deg, rgba(111, 25, 6, 0.82), rgba(111, 25, 6, 0.82)), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.084) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 24.58%, rgba(0, 0, 0, 0) 49.58%, rgba(0, 0, 0, 0) 76.15%, #000000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(/asset/img/leather-texture_800.webp); + background-blend-mode: color, normal, normal, normal, normal; + box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.24), inset 0px 2px 0px rgba(255, 255, 255, 0.06), inset 0px -1px 0px rgba(0, 0, 0, 0.24), inset 0px -2px 0px rgba(255, 255, 255, 0.06); + background-repeat: repeat; + display: flex; + padding:80px 40px; + justify-content: center; +} + +#spotlight .spotlight-wrap { + max-width:1400px; + display: flex; + gap: 80px; +} + +#spotlight .spotlight-wrap .spotlight-left{ + width: 38%; +} + +#spotlight .spotlight-wrap .spotlight-left h3.title{ + margin-top: 20px; +} + +#spotlight .spotlight-wrap .spotlight-left p.normal-text{ + margin-top: 15px; +} + + +#spotlight .spotlight-wrap .spotlight-right { + width: 60%; + max-width: 792px; + position: relative; +} + +#spotlight .spotlight-wrap .spotlight-right .season-img +{ + position: absolute; + padding-bottom: 52.25%; + padding-top: 30px; + height: 0; + overflow: hidden; + background-image: url(/asset/img/d4-season-1-emblem-logo-kokr-2.png); + background-size: auto 90%; + background-repeat: no-repeat; + background-position: top center; + z-index: 10; + width: 100%; + border: 1px solid rgba(255, 255, 255, 0.07); + box-sizing: border-box; + font-size:0; +} + +#spotlight .spotlight-wrap .spotlight-right .season-bg +{ + position: relative; + padding-bottom: 52.25%; + padding-top: 30px; + height: 0; + overflow: hidden; + background-image: url(/asset/img/d4_season1_narrative_trailer_thumbnail_agnostic.webp); + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + width: 100%; + border: 1px solid rgba(255, 255, 255, 0.07); + box-sizing: border-box; + filter:brightness(0.7); +} + +#news { + background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.084) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 24.58%, rgba(0, 0, 0, 0) 49.58%, rgba(0, 0, 0, 0) 76.15%, #000000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)), url(/asset/img/leather-texture_800.webp); + box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.24), inset 0px 2px 0px rgba(255, 255, 255, 0.06), inset 0px -1px 0px rgba(0, 0, 0, 0.24), inset 0px -2px 0px rgba(255, 255, 255, 0.06); + background-repeat: repeat; + padding:80px 40px; + justify-content: center; + display: flex; +} + +#news .news-wrap { + width:100%; + max-width: 1400px; + overflow: hidden; +} + +#news .news-wrap h3.title{ + text-align: center; + margin-bottom: 50px; +} + +#news .news-wrap .swiper-wrapper { + display:flex; +} + +#news .news-wrap .swiper-wrapper .swiper-slide { + overflow: hidden; + position: relative; + transition: filter 350ms; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.66), inset 0 0 10px rgba(255, 255, 255, 0.1); +} + +#news .news-wrap .swiper-wrapper .swiper-slide:hover { + filter: brightness(1.2); +} + +#news .news-wrap .swiper-wrapper .swiper-slide .img-cont { + width:100%; + padding-bottom:52.25%; + position: relative; +} + +#news .news-wrap .swiper-wrapper .swiper-slide .img-cont img { + height:100%; position: absolute; + left:50%; transform: translateX(-50%); +} + +#news .news-wrap .swiper-wrapper .swiper-slide .txt-cont{ + box-shadow: 0 0 4px rgba(0, 0, 0, 0.66), inset 0 0 10px rgba(255, 255, 255, 0.1); + margin: 0; + padding: 30px 35px; + background: rgba(10, 10, 10, 0.8) linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%); + box-sizing: border-box; + height: 200px; +} + +#news .news-wrap .swiper-wrapper .swiper-slide .txt-cont strong { + display: block; + font-family:"Kodia"; + font-weight: 400; + line-height: 0.9; + text-transform: uppercase; + text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5); + color: #B0AFAC; + line-height: 30px; + font-size: 18px; + margin: 0; + padding: 0 0 20px 0; +} +#news .news-wrap .swiper-wrapper .swiper-slide .txt-cont span { + display: block; + color:#878582; + font-family: "Yoon Myungjo", sans-serif; + font-weight: 500; + font-size: 14px; + position: absolute; + bottom:20px; +} + +#news .news-wrap .swiper-wrapper .swiper-slide a { + display:block; + position: absolute; + width: 100%; + height: 100%; + top:0; + z-index: 10; + box-sizing: border-box; + border: 1px solid rgba(255, 255, 255, 0.07); +} + +#news .news-wrap button.brown_button { + margin: 40px auto 0 auto; +} + +#classes { + padding:80px 40px; + justify-content: center; + display: flex; + position: relative; +} + +#classes .classes-wrap { + position: relative; + z-index: 1; + background: transparent; + width:100%; + max-width: 1400px; + overflow: hidden; +} + +#classes .classes-wrap .classes-top { + text-align: center; +} + +span.text-sub { + font-family: "Yoon Myungjo", sans-serif; + font-weight: 500; + text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5); + color: #AA9480; + font-size: 18px; + margin-bottom: 2px; +} +#classes .classes-wrap .classes-text p { + margin-top:15px; + max-width: 800px; + margin: 15px auto 0 auto; +} + +#classes .classes-wrap .classes-list { + padding-top:60px; + width: 100%; +} + +.text-list { + width:100%; + display: flex; + gap:50px; +} + +.text-list li {width:25%;} +.text-list li img {width:100%} +.text-list li .list-txt strong { + display: block; + text-transform: uppercase; + text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5); + color: #D2C8AE; + line-height: 0.9; + font-family: "Kodia"; + font-weight: 400; + font-size: 27px; + margin:20px 0 15px 0; +} +.text-list li .list-txt p { + font-family: "Yoon Myungjo", sans-serif; + font-weight: 500; + text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5); + color: #878582; + font-size:18px; + line-height: 1.4; + word-break: keep-all; + box-sizing: border-box; + padding: 0 20px; +} + +#classes .classes-bottom { + padding-top:180px; + width:calc(50% - 25px); + overflow: hidden; + position: relative; +} + +#classes .classes-bottom h3.title { + text-align: center; + max-width:630px; +} + +#classes .swiper-slide p.normal-text { + word-break: keep-all; + margin-bottom: 70px; +} + +#classes .youtube-overlay { + position: relative; + width: 100%; +} + +#classes .youtube-overlay.first .overlay-inner { + background-image: url(/asset/img/D4_Story-Class-Trailer-Barbarian_Thumb_global.webp); +} +#classes .youtube-overlay.second .overlay-inner { + background-image: url(/asset/img/D4_Story-Class-Trailer-Druid_Thumb_global.webp); +} +#classes .youtube-overlay.third .overlay-inner { + background-image: url(/asset/img/D4_Story-Class-Trailer-Necromancer_Thumb_global.webp); +} +#classes .youtube-overlay.fourth .overlay-inner { + background-image: url(/asset/img/D4_Story-Class-Trailer-Rogue_Thumb_global.webp); +} +#classes .youtube-overlay.fifth .overlay-inner { + background-image: url(/asset/img/D4_Story-Class-Trailer-Sorcerer_Thumb_global.webp); +} + +#classes .classes-bg{ + box-shadow: inset 0px 0px 40px #000000; + width:100%; + height:100%; + position: absolute; + z-index: 0; + top:0; + overflow: hidden; + +} + +#classes .classes-bg .classes-character { + background-image: url(/asset/img/D4-Launch_Class-Section-Barbarian_001.webp); + transform-style: preserve-3d; + backface-visibility: hidden; + bottom: 0px; + position: absolute; + background-position: center; + background-size: auto 100%; + max-width: 1920px; + width: 100%; + height:100vh; + background-repeat: no-repeat; + transition:background-image 0.5s cubic-bezier(0.215,0.61,0.355,1); +} +#classes .classes-bg .classes-character.on { + animation-duration: 0.5s; + animation-name: fadein; +} +@keyframes fadein { + 0% { + opacity: 1; + } + + 50% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} +#classes .classes-bg .classes-bgimg { + width: 100%; + height:100%; + background-image: url(/asset/img/D4-Launch_Class-Section-BG_001.webp); + background-position: center 81%; + background-size: 100% auto; + background-repeat: no-repeat; + max-width: 1920px; +} + +.classes-swiper {margin-top:210px;} + +.swiper-pagination{ + position:absolute; + top:280px; + z-index: 10; + height:100px; + width:100% !important; + max-width: 630px; + display: flex; + justify-content: space-between; +} + +.world-pagination { + position:absolute; + top:70px; + z-index: 10; + height:100px; + width:100% !important; + max-width: 630px; + display: flex; + justify-content: space-between; + text-align: center; + left:50% !important; + transform: translateX(-50%); +} + +.swiper-pagination .swiper-pagination-bullet, .world-pagination .swiper-pagination-bullet { + width:87px; + height:72px; + background: transparent; + border-radius: 0; + position: relative; + opacity: 1; + transition: filter 350ms; +} + +.swiper-pagination .swiper-pagination-bullet span, .world-pagination .swiper-pagination-bullet span{ + transition: filter 350ms; + text-transform: uppercase; + font-family: "Kenris"; + font-size: 14px; + font-weight: 500; + color: #878582; + margin-top: 10px; + display: inline-block; +} + +.swiper-pagination .swiper-pagination-bullet::before, .swiper-pagination .swiper-pagination-bullet::after, +.world-pagination .swiper-pagination-bullet::before, .world-pagination .swiper-pagination-bullet::after{ + content: ""; + display:block; + width:100%; + height: 100%; + background-size: auto 100%; + background-repeat: no-repeat; + background-position: center center; + transition: filter 350ms; +} + +.swiper-pagination .swiper-pagination-bullet::after, .world-pagination .swiper-pagination-bullet::after { + position: absolute; + top:0; + opacity: 0; + visibility: hidden; +} +.swiper-pagination .swiper-pagination-bullet-active::after, .swiper-pagination .swiper-pagination-bullet:hover:after, +.world-pagination .swiper-pagination-bullet-active::after, .world-pagination .swiper-pagination-bullet:hover:after { + filter: drop-shadow(rgba(179, 57, 52, 0.5) 0px 0px 1px) drop-shadow(#6f1906 0px 0px 6px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 1px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 1px) brightness(1.6); + opacity: 1; + visibility: visible; +} + +.swiper-pagination .swiper-pagination-bullet-active span, .swiper-pagination-bullet:hover span, +.world-pagination .swiper-pagination-bullet-active span{ + font-weight: 500; + color: #fff; + filter: brightness(1.6); + text-shadow: 0px 0px 10px rgba(224, 165, 115, 0.66), 0px 0px 10px #C85541, 0px 4px 15px #000000; +} + +.swiper-pagination .swiper-pagination-bullet:nth-child(1)::before { + background-image: url(/asset/img/d4-classes-icon-barbarian-base.webp); +} + +.swiper-pagination .swiper-pagination-bullet:nth-child(1)::after { + background-image: url(/asset/img/d4-classes-icon-barbarian-hover.webp); +} + +.swiper-pagination .swiper-pagination-bullet:nth-child(2)::before { + background-image: url(/asset/img/d4-classes-icon-druid-base.webp); +} + +.swiper-pagination .swiper-pagination-bullet:nth-child(2)::after { + background-image: url(/asset/img/d4-classes-icon-druid-hover.webp); +} + +.swiper-pagination .swiper-pagination-bullet:nth-child(3)::before { + background-image: url(/asset/img/d4-classes-icon-necromancer-base.webp); +} + +.swiper-pagination .swiper-pagination-bullet:nth-child(3)::after { + background-image: url(/asset/img/d4-classes-icon-necromancer-hover.webp); +} + +.swiper-pagination .swiper-pagination-bullet:nth-child(4)::before { + background-image: url(/asset/img/d4-classes-icon-rogue-base.webp); +} + +.swiper-pagination .swiper-pagination-bullet:nth-child(4)::after { + background-image: url(/asset/img/d4-classes-icon-rogue-hover.webp); +} + +.swiper-pagination .swiper-pagination-bullet:nth-child(5)::before { + background-image: url(/asset/img/d4-classes-icon-sorcerer-base.webp); +} + +.swiper-pagination .swiper-pagination-bullet:nth-child(5)::after { + background-image: url(/asset/img/d4-classes-icon-sorcerer-hover.webp); +} + + +#world { + background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.084) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 24.58%, rgba(0, 0, 0, 0) 49.58%, rgba(0, 0, 0, 0) 76.15%, #000000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)), url(/asset/img/leather-texture_800.webp); + box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.24), inset 0px 2px 0px rgba(255, 255, 255, 0.06), inset 0px -1px 0px rgba(0, 0, 0, 0.24), inset 0px -2px 0px rgba(255, 255, 255, 0.06); + background-repeat: repeat; + padding:80px 40px; + justify-content: center; + display: flex; +} + +#world .world-wrap { + width:100%; + max-width: 1600px; + overflow: hidden; +} + +#world .world-wrap h3.title{ + text-align: center; + margin-bottom: 15px; +} + +#world .world-wrap p.normal-text { + text-align: center; + width:720px; + margin:20px auto 0 auto; +} + +#world .world-wrap .world-bottom { + width: 100%; + display: flex; + justify-content: center; + position: relative; + padding-top:220px; +} +#world .world-wrap .world-bottom .world-swiper{ + width:calc(100% - 260px); +} +#world .world-wrap .swiper-wrapper { + display:flex; + width:100%; +} + +#world .world-wrap .swiper-wrapper .swiper-slide { + display: flex; + justify-content: center; + align-items: center; +} + +#world .world-wrap .swiper-wrapper .swiper-slide img { + width:100%; +} + + + + +.world-pagination .swiper-pagination-bullet:nth-child(1)::before { + background-image: url(/asset/img/d4-classes-icon-worldbosses-base.webp); +} + +.world-pagination .swiper-pagination-bullet:nth-child(1)::after { + background-image: url(/asset/img/d4-classes-icon-worldbosses-hover.webp); +} + +.world-pagination .swiper-pagination-bullet:nth-child(2)::before { + background-image: url(/asset/img/d4-classes-icon-dungeons-base.webp); +} + +.world-pagination .swiper-pagination-bullet:nth-child(2)::after { + background-image: url(/asset/img/d4-classes-icon-dungeons-hover.webp); +} + +.world-pagination .swiper-pagination-bullet:nth-child(3)::before { + background-image: url(/asset/img/d4-classes-icon-strongholds-base.webp); +} + +.world-pagination .swiper-pagination-bullet:nth-child(3)::after { + background-image: url(/asset/img/d4-classes-icon-strongholds-hover.webp); +} + +.world-pagination .swiper-pagination-bullet:nth-child(4)::before { + background-image: url(/asset/img/d4-classes-icon-pvp-base.webp); +} + +.world-pagination .swiper-pagination-bullet:nth-child(4)::after { + background-image: url(/asset/img/d4-classes-icon-pvp-hover.webp); +} + +.world-pagination .swiper-pagination-bullet:nth-child(5)::before { + background-image: url(/asset/img/d4-classes-icon-mounts-base.webp); +} + +.world-pagination .swiper-pagination-bullet:nth-child(5)::after { + background-image: url(/asset/img/d4-classes-icon-mounts-hover.webp); +} + +.slide-inner .txt-cont strong{ + display: block; + font-weight: 400; + line-height: 1.05; + text-transform: uppercase; + text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5); + color: #fff; + font-family: "Kenris"; + font-size:33px; + text-align: center; +} + +.swiper-button-prev, .swiper-button-next { + padding: 30px; + transition: filter 350ms; + display: inline-block; + object-fit: cover; + vertical-align: middle; + box-sizing: border-box; + background: url(/asset/img/circle-frame.webp), radial-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 16%, rgba(0, 0, 0, 0) 20%); + background-position: center center; + background-repeat: no-repeat; + background-size: 52px 52px, 200px 200px; +} + +.swiper-button-prev:hover, .swiper-button-next:hover{ + filter: + drop-shadow(rgba(179, 57, 52, 0.5) 0px 0px 1px) + drop-shadow(#6f1906 0px 0px 10px) + drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 6px) + drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 6px) + brightness(1.5) + contrast(1.2); +} + +.swiper-button-prev::after, .swiper-button-next::after { + display: none; +} + +.swiper-button-prev img{ + transform: rotateZ(90deg); + left:10%; + position: absolute; + top: 25%; + +} + +.swiper-button-next img{ + transform: rotateZ(-90deg); + right:10%; + position: absolute; + top: 25%; + filter: brightness(0.7); +} + +.slide-inner .txt-cont { + padding-top:25px; +} + +#bullets{ + position:absolute; + top:0; +} +#bullets .swiper-pagination-bullet{ + filter: drop-shadow(rgba(179, 57, 52, 0.5) 0px 0px 1px) drop-shadow(#6f1906 0px 0px 6px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 1px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 1px) brightness(1.6); + background-image: url(/asset/img/Chicklet.svg); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + width: 30px; + height: 30px; + margin: 0 5px; + padding: 2px; + transition: filter 350ms; + border-radius: 0; + opacity: 1; +} + + +#outro { + padding:80px 40px; + justify-content: center; + display: flex; + background: url(/asset/img/d4-lilith-bg-light.webp); + background-size: 2600px auto !important; + background-position: center top; + background-repeat: no-repeat; +} +#outro .outro-wrap {padding-top:500px; +max-width: 1400px;} +.desktop-comparison-table { + border-collapse: collapse; + table-layout: fixed; + width: 100%; +} + +.table-container th, .table-container td { + padding:16px 24px; +} + +.table-container .product-thumbnail-cell { + padding: 12px 12px 0 12px; +} +.table-container .product-thumbnail-cell img{ + box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.66), 0px 4px 15px rgba(0, 0, 0, 0.66); + border: 1px solid rgba(255, 255, 255, 0.1); + width:100%; + box-sizing: border-box; + display: block; +} + +.table-container th.product-option-header { + padding: 16px; +} + +.product-header-text { + color:#dec8ae; + font-family: "Kenris"; + font-size:18px; +} + +.product-subheading { + font-size: 15.4px; + color: #e0a573; + font-family: "Yoon Myungjo", sans-serif; + font-weight: 500; +} + +.table-container .comparison-button-cell { + padding:0 8px 8px 8px; +} +.comparison-button-cell button { + background:#850000; + width:100%; + font-family: "Poppins", sans-serif; + transition: 350ms background-color; + box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.66), 0px 4px 15px rgba(0, 0, 0, 0.66); + text-transform: none; + color: #fff; + line-height: 24.3px; + font-size: 0.9em; + border: 0; + border-radius: 4px; + padding:8px 0; + cursor: pointer; +} +.comparison-button-cell button:hover{ + background-color: #B60000; +} + +.feature-label-table-cell { + font-family: "Yoon Myungjo", sans-serif; + font-size: 18px; + font-weight: 500; + text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5); + color: rgba(255, 255, 255, 0.7); + line-height: 1.4; + word-break: keep-all; +} +td.odd {text-align: center; vertical-align: middle;} +td.odd img {width:24px; height:24px;} + +.table-container table tr:nth-child(2n-1) td{ + background:rgba(255, 255, 255, 0.05); +} +.table-container table tr:nth-child(2n-1) td:first-child{ + border-radius: 8px 0 0 8px; +} +.table-container table tr:nth-child(2n-1) td:last-child{ + border-radius: 0 8px 8px 0; +} + +.table-container table tr:nth-child(1) td, .table-container table tr:nth-child(3) td{ + background: transparent; +} + +.text-cont { + text-align: center; +} + +#outro h3.title { + font-size:52px; +} + +#outro p.normal-text { + padding:30px 0 60px 0; +} + +#outro .legalese-wrapper {display: flex; justify-content: center;} +#outro .legalese-block {width: 700px; padding:70px 0;} +#outro .legalese-block p { + color:rgba(255, 255, 255, 0.3); + font-size: 15px; + font-family: "Yoon Myungjo", sans-serif; + font-weight: 500; + line-height: 2; +} + +#social {text-align: center;} +#social h3.title {font-size:32px} +#social ul {padding-top:20px; display: flex; justify-content: center; gap: 10px;} +#social ul li svg {width:48px; height:48px; color:rgba(255,255,255,0.8); transition:filter 0.7s cubic-bezier(0.215,0.61,0.355,1);} +#social ul li a:hover svg {color:#fff; } + + + diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..d9bab002 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,45 @@ +@charset "utf-8"; /** + * Minified by jsDelivr using clean-css v4.2.1. + * Original file: /npm/reset-css@5.0.1/reset.css + * + * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files + */ +a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline +} + +article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section { + display: block +} + +[hidden] { + display: none +} + +body { + line-height: 1 +} + +menu,ol,ul { + list-style: none +} + +blockquote,q { + quotes: none +} + +blockquote:after,blockquote:before,q:after,q:before { + content: ''; + content: none +} + +table { + border-collapse: collapse; + border-spacing: 0 +} + diff --git a/index.html b/index.html new file mode 100644 index 00000000..98c0fa7f --- /dev/null +++ b/index.html @@ -0,0 +1,993 @@ + + + + + + + 디아블로® IV + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+ + +
+ 디아블로 +
+

지옥에 오신 것을 환영합니다

+

지옥문이 열리고, 디아블로 IV가 출시되었습니다

+
+ + +
+ + +
+
+ + + +
+
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
    +
    • +
    • +
+
+

+ 드높은 천상과 불타는 지옥 사이에서 끝없는 전투가 펼쳐지는 가운데, + 혼돈이 성역을 삼켜 버리려 합니다. + 끝없이 몰려드는 악마들, 다양한 능력과 악몽 같은 던전, + 전설적인 전리품으로 가득한 광활한 오픈 월드는 모험과 파괴를 약속합니다. + 살아남아 어둠을 정복하라 - 그러지 못하면 암흑에 굴복할 수밖에 없습니다. +

+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
    +
    • +
    • +
+
+

+ 이나리우스와 릴리트는 드높은 천상과 불타는 지옥 사이에서 벌어지는 영원한 분쟁을 피해, + 훔친 세계석으로 성역을 창조하고 네팔렘에게 생명을 주었습니다. + 혼혈인 자손들이 파멸할까 두려웠던 릴리트는 폭력으로써 네팔렘을 보호하려 했고, + 그 결과 이나리우스는 그녀에게 등을 돌리고 심연으로 그녀를 추방했습니다. + 그 후 둘은 적이 되었습니다. 릴리트가 돌아오며 어둠과 증오의 시대가 도래합니다. + 성역을 기다리는 것은 어떤 운명일까요? +

+ +
+
+
+
+
+ +
+
+
+

7월 21일, 악의 종자의 시즌이 시작됩니다

+

릴리트의 타락이 새로운 형태로 성역에 퍼져, 악의 종자 괴물들이 태어났습니다. + 이 괴물들은 아수라장이 된 땅을 거닐며, 정신을 잃고 무차별적인 살상을 자행하고 있습니다. + 새로운 게임플레이, 시즌 여정, 배틀 패스 등 다양한 콘텐츠가 추가되는 + 첫 번째 디아블로 IV 시즌에 대해 자세히 알아보십시오.

+ +
+
+ +
+
+
+
+ +
+
+

새소식

+
+
    +
  • +
    디아블로 IV 패치 노트
    +
    + 디아블로 IV 패치 노트 + 7월 27일 +
    + +
    • +
  • +
    악의 종자 시즌 모닥불 대화 따라잡기
    +
    + 악의 종자 시즌 모닥불 대화 따라잡기 + 7월 22일 +
    + +
    • +
  • +
    디아블로 IV 단편 소설: '뼈의 성소'(작가: Carly Anne West)
    +
    + 디아블로 IV 단편 소설: "뼈의 성소"(작가: Carly Anne West) + 7월 22일 +
    + +
    • +
  • +
    악의 종자 시즌 - 모닥불 대화를 놓치지 마세요!
    +
    + 악의 종자 시즌 - 모닥불 대화를 놓치지 마세요! + 7월 20일 +
    + +
    • +
+
+ +
+ +
+ +
+
+
+ +
+ 내 마음대로 플레이하는 디아블로 IV +

나만의 성역 만들기

+

+ 나만의 경험을 만들어 가십시오. 캐릭터의 외형, 피에 굶주린 지옥의 하수인들을 처치할 때 사용할 기술, + 캐릭터의 능력을 강화하고 외형을 변화시키는 장비 등 모든 것을 선택할 수 있습니다. +

+
+ +
+
    +
  • +
    + 캐릭터 생성 +
    +
    + 캐릭터 생성 +

    + 직업마다 특유의 헤어스타일이 준비되어 있고, 플레이어들은 눈동자 색, + 신체 표식, 장식 등의 세부적인 요소까지 캐릭터의 외형을 지정하여 + 무려 8조 가지가 넘는 조합을 만들어 낼 수 있습니다. +

    +
    +
    • +
  • +
    + 장비 +
    +
    + 장비 +

    + 모험을 하며 발견하는 아이템 중에 즐겨 쓰게 되는 장비가 있을 것입니다. + 아이템은 찾았을 때의 상태 그대로 사용해도 되지만, 보너스를 추출하거나 + 제작을 통해 특정 속성을 조합하는 등의 방법으로 변화시켜 플레이 방식을 진화시킬 수도 있습니다. +

    +
    +
    • +
  • +
    + 기술 트리 +
    +
    + 기술 트리 +

    + 레벨을 올리면서 여러 카테고리의 기술을 선택하여 캐릭터를 더 강력하게 육성하십시오. + 지속 효과, 공격 및 방어 기술, 원소 기술을 업그레이드하고 기존의 능력을 강화하십시오. + 특정 분야에 집중해도 되고, 여러 전문화를 오가며 선택해도 됩니다. +

    +
    +
    • +
  • +
    + 정복자 보드 +
    +
    + 정복자 보드 +

    + 게임 후반에는 정복자 포인트로 능력치를 올리거나 더 강력한 효과를 얻어, + 계속 캐릭터의 빌드와 기술을 확장하고 변경해 나아갈 수 있습니다. + 수치 분석을 통해 마음에 드는 빌드를 완성해 보십시오. +

    +
    +
    • +
+
+ +
+ +
+
+

직업

+
+
+
    + +
  • +

    + 야만용사는 타의 추종을 불허하는 힘을 지니고 있으며, + 전투 시 상황에 맞춰 모든 무기를 능숙하게 다룰 수 있습니다. + 이들이 위협적인 전장의 함성을 내지르고 강력한 일격으로 대지를 뒤흔들면, + 밀려들던 악마 무리들도 맥을 못 춥니다. +

    +
    +
    +
    + +
    +
    + +
    +
    +
    • + +
  • +

    + 무자비한 변신술사 드루이드는 거대한 곰 형상과 + 광포한 늑대인간 형상을 자유롭게 넘나들며 야생동물들과 함께 싸웁니다. + 이들은 대지와 바람, 폭풍의 힘을 자유자재로 부리며 자연의 분노를 표출하여 적을 파멸시킵니다. +

    +
    +
    +
    + +
    +
    + +
    +
    +
    • + +
  • +

    + 강령술사는 교활한 소환사로, 복수심에 불타는 언데드 무리를 불러냅니다. + 이들의 정수는 뼈와 피, 어둠의 세 가지 강력한 영역으로 흘러들어 적을 쓰러뜨립니다. +

    +
    +
    +
    + +
    +
    + +
    +
    +
    • + +
  • +

    + 도적은 원거리 전투나 근접 전투를 전문으로 하는 기민한 전사입니다. + 이들은 힘을 주입한 무기와 강력한 연계 공격으로 어떤 적이든 꺾을 수 있고, + 치명적인 독과 어둠 마법으로 무기를 강화하여 악마를 일방적으로 학살할 수 있습니다. +

    +
    +
    +
    + +
    +
    + +
    +
    +
    • + +
  • +

    + 원소술사는 원소의 힘을 사용해 승리를 확보합니다. + 이들은 자연의 거친 힘을 사용해 번개 화살을 뿜고, + 얼음 파편으로 적을 꿰뚫으며, 이글거리는 운석을 퍼부어 적을 궤멸합니다. +

    +
    +
    +
    + +
    +
    + +
    +
    +
    • + +
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+
+
+

오픈 월드

+

불타는 지옥과 싸우며 성역 세계를 발견하십시오. 다른 모험가들과 힘을 합쳐 악마 세력과 싸우고, 잃어버린 비밀을 밝혀내십시오.

+
+
+
+
+
    + +
  • +
    +
    + 야외 우두머리 +
    +
    + 야외 우두머리 +

    + 야외 우두머리는 오픈 월드 지역에 등장하며, 여러 단계로 이루어진 전투를 통해 쓰러뜨릴 수 있습니다. + 플레이어들은 힘을 합쳐 야외 우두머리를 쓰러뜨려야 하고(최대 12명까지 한 번에 전투에 참여 가능), + 승리하면 고유 아이템을 보상으로 받을 수 있습니다. +

    +
    +
    +
    • + +
  • +
    +
    + 던전 +
    +
    + 던전 +

    + 스토리를 진행하면서 괴물이 득시글거리는 120개가 넘는 던전을 탐험할 수 있습니다. + 괴물들을 쓰러뜨리고 값진 경험치와 전리품을 보상으로 받으십시오. +

    +
    +
    +
    • + +
  • +
    +
    + 보루 +
    +
    + 보루 +

    + 영웅적인 모험가들은 이러한 보루에 득시글거리는 적을 소탕하고 보루를 되찾아 성역의 주민들에게 돌려줄 수 있습니다. + 마을이 예전의 모습으로 돌아갈 수는 없겠지만, 승리는 오래가는 흔적을 남깁니다. + 적대적이었던 지역도 안전한 안식처로 변할 수 있죠. +

    +
    +
    +
    • + +
  • +
    +
    + PVP +
    +
    + PVP +

    + PvP 지역에 들어서면 전투의 판도가 바뀝니다. + 위험하지만 그만큼 보상도 주어지는 이런 지역에서 자신의 상태를 '적대적'으로 설정하면 + 다른 플레이어들을 공격해 값진 전리품을 빼앗을 수 있습니다. 하지만 조심하십시오. + 거꾸로 자신이 공격받을 수도 있는 법입니다. +

    +
    +
    +
    • + +
  • +
    +
    + 탈것 +
    +
    + 탈것 +

    + 충성스러운 군마에 올라타 성역 세계를 빠르게 이동하십시오. + 모험을 하며 수집한 노획품과 방어구로 탈것을 자유롭게 꾸밀 수 있습니다. + *탈것을 이용하려면 게임 내에서 탈것을 잠금 해제한 상태여야 합니다. +

    +
    +
    +
    • + +
+
+
다음
+
이전
+
+
+ + +
+
+
+ +
+
+
+ 디아블로 4 구매 +

상품 비교

+

디지털 딜럭스 또는 얼티밋 에디션으로 디아블로 IV 경험을 업그레이드하세요.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 일반판 + + 디지털 디럭스 에디션 + + 얼티밋 에디션 +
+
일반판
+ 		+
디지털 딜럭스 에디션
+ 		+
얼티밋 에디션
+
최고 가성비
+
+ + + + + +
Battle.net용 디아블로® IV + 가능 + + 가능 + + 가능 +
디아블로 III 이나리우스 날개 및 이나리우스 멀록 애완동물** + 가능 + + 가능 + + 가능 +
월드 오브 워크래프트 격노의 융합체 탈것** + 가능 + + 가능 + + 가능 +
디아블로 이모탈™ 암영 날개 달린 어둠 꾸미기 아이템 세트** + 가능 + + 가능 + + 가능 +
유혹 탈것* + + + 가능 + + 가능 +
지옥벼림 갑각 탈것 방어구* + + + 가능 + + 가능 +
프리미엄 시즌 배틀 패스 잠금 해제*** + + + 가능 + + 가능 +
더욱 진행이 빠른 시즌 배틀 패스(프리미엄 시즌 배틀 패스와 20단계 건너뛰기, 꾸미기 아이템)*** + + + + + 가능 +
창조주의 날개 감정표현 + + + + + 가능 +
+
+
+
+

*탈것은 사용 전 게임 내에서 미리 해제해야 합니다.

+

**디아블로 III, 월드 오브 워크래프트® 및 디아블로 이모탈은 별도 판매되거나 별도 다운로드가 필요합니다.

+

***배틀 패스는 1시즌에 해제됩니다.

+
+
+
+
+ + + + + + +
+ + +
+ + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..4c4f6ce1 --- /dev/null +++ b/js/main.js @@ -0,0 +1,184 @@ +window.addEventListener('load', function() { + +var player = videojs("myPlayer", { + sources : [ + { src : "./asset/video/main_video.mp4", type : "video/mp4"}, + { src : "./asset/video/main_video.webm", type : "video/webm"} + ], + // poster : "test-poster.png", + controls : false, + autoplay: true, + playsinline : true, + muted : true, + preload : "auto", + }); + +var playButton = document.querySelector('.play'); +var puaseButton = document.querySelector('.puase'); +puaseButton.onclick = function(){ + this.style.display = "none"; + playButton.style.display = "block"; + player.pause(); +} +playButton.onclick = function(){ + this.style.display = "none"; + puaseButton.style.display = "block"; + player.play(); +} + +}); + + +var tabClickFunc = (data) => { + var tabContFirst = document.querySelector('.overview-inner-first'); + var tabContSecond = document.querySelector('.overview-inner-second'); + if (data === "first"){ + tabContFirst.classList.add('on'); + tabContSecond.classList.remove("on"); + } else { + tabContSecond.classList.add('on'); + tabContFirst.classList.remove("on"); + } +} + + + +$(document).ready(function(){ + setDateBox(); +}); + +function setDateBox(){ + var dt = new Date(); + var year = dt.getFullYear(); + + for(var y = (year); y >=(year-100); y--){ + $("#year").append(""); + } + for(var i = 1; i <= 12; i++){ + if(i == 1){ + $("#month").append(""); + }else{ + if (i < 10){ + $("#month").append(""); + } else { + $("#month").append(""); + } + } + } + for(var t = 1; t <= 31; t++){ + if(t == 1){ + $("#day").append(""); + }else{ + if (t < 10){ + $("#day").append(""); + } else { + $("#day").append(""); + } + } + } +} + +function getFormatDate(date){ + var year = date.getFullYear(); //yyyy + var month = (1 + date.getMonth()); //M + month = month >= 10 ? month : '0' + month; //month 두자리로 저장 + var day = date.getDate(); //d + day = day >= 10 ? day : '0' + day; //day 두자리로 저장 + return year + '' + month + '' + day; //'-' 추가하여 yyyy-mm-dd 형태 생성 가능 +} + +function setCookie(cookie_name, value, days) { + var exdate = new Date(); + exdate.setDate(exdate.getDate() + days); + // 설정 일수만큼 현재시간에 만료값으로 지정 + + var cookie_value = escape(value) + ((days == null) ? '' : '; expires=' + exdate.toUTCString()); + document.cookie = cookie_name + '=' + cookie_value; +} + +function getCookie(cookie_name) { + var x, y; + var val = document.cookie.split(';'); + + for (var i = 0; i < val.length; i++) { + x = val[i].substr(0, val[i].indexOf('=')); + y = val[i].substr(val[i].indexOf('=') + 1); + x = x.replace(/^\s+|\s+$/g, ''); // 앞과 뒤의 공백 제거하기 + if (x == cookie_name) { + return unescape(y); // unescape로 디코딩 후 값 리턴 + } + } +} + +var cookie = getCookie('birth'); +var dataSet = ""; + +var birthModal = function (data) { + if (cookie === 'false' || dataSet === "false") { + $('.second-modal').css("display", "flex"); + } else { + if (cookie === 'true' || dataSet === "true"){ + $(data).find('.overlay').css("display", "none"); + var iframe = $(data).find('iframe'); + var src = $(iframe).attr('data-src'); + $(iframe).attr('src', '').attr('src', src); + } else { + $('.youtube-overlay').removeClass('overlayNone'); + $(data).addClass('overlayNone'); + $('.first-modal').css("display", "flex"); + } + } +} + +var birthCheck = function () { + + var year = document.getElementById("year").value + var month = document.getElementById("month").value + var day = document.getElementById("day").value + + var reInDt = year+''+month+''+day; + var nowDt = new Date(); + var reNowDt = getFormatDate(nowDt); + + var minAge = 18; + + var objYY = reNowDt.substr(0,4); + var objMM = reNowDt.substr(4,2); + var objDD = reNowDt.substr(6,2); + + var minObjYY = objYY - minAge; + var fixNowDt = minObjYY+''+objMM+''+objDD; + + + if(reInDt > fixNowDt) { + setCookie('birth', 'false', '1'); + dataSet = "false"; + $('.first-modal').css("display", "none"); + $('.second-modal').css("display", "flex"); + }else{ + setCookie('birth', 'true', '1'); + dataSet = "true"; + $('.first-modal').css("display", "none"); + $('.overlayNone').find('.overlay').css("display", "none"); + var iframe = $('.overlayNone').find('iframe'); + var src = $(iframe).attr('src'); + $(iframe).attr('src', '').attr('src', src); + $('.youtube-overlay').removeClass('overlayNone'); + + } + +} + +var modalClose = function (modal) { + $(modal).css("display", "none"); +} + +var scrollMove = function (e) { + var topHeight = $(e).attr('data-href'); + var offset = $(topHeight).offset(); + if (topHeight === "#overview"){ + $('html,body').animate({scrollTop:(offset.top - 160)}, 500); + } else { + $('html,body').animate({scrollTop:(offset.top - 80)}, 500); + } +}