diff --git a/README.md b/README.md index cc6a3b23..0bd1db04 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,35 @@ -[참고 내용] + KaKao 웹페이지 클론코딩 +- + 링크 : https://kdt0-junghyoju-kakaoclone.netlify.app/ -👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +원본 페이지 +- +링크 : https://www.kakaocorp.com/page/ -과제 수행 및 제출 방법 +사용기술 +- +1.css
+2.html -1. 현재 저장소를 로컬에 클론(Clone)합니다. -2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) -3. 자신의 본명 브랜치에서 과제를 수행합니다. -4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) -5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) +구현 사항 +- +* html, css만을 사용하여 구현 +* 뉴스 카드 wrap을 이용하여 배치 후 overflow 구현 후 스크롤 숨김 +* 디테일 링크 설정 +아쉬운 점 +- +* 가로 너비에 따라 달라지는 뉴스카드 배치 구현 +* 하단 왼쪽 뉴스 카드 스크롤이 될 때, 오른쪽 뉴스카드 배치 +* 구독 부분에 Sprite Image 방법으로 이미지 구현 -- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! -필수 요구사항 -- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! -- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. +느낀 점 +- +* 웹페이지 구조를 어떻게 나누냐에 따라 구현 방법이 많이 달라지는거 같다 +* css 선택자 클래스 명과 간단하게 선택자를 작성하는 방법이 필요한거 같다 +* js나 전처리기 등을 이용하여 다시 한번 구현해보고 싶다 +* 가로 너비에 따라 달라 지는 반응형 웹을 어떻게 구현해야할지 생각해봐야겠다. -선택 요구사항 -- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. -- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- 부분적으로 BEM 방법론을 도입해보세요. -- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) - -손쉬운 이미지 추출 방법 - -사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. - -1. 원하는 사이트 접속 -2. Image Downloader 확장 프로그램 실행 -3. 다운로드 원하는 이미지 선택 -4. 서브 폴더 이름(Save to subfolder) 명시 -5. 다운로드! diff --git a/font/KakaoOTFRegular.otf b/font/KakaoOTFRegular.otf new file mode 100644 index 00000000..351f74e0 Binary files /dev/null and b/font/KakaoOTFRegular.otf differ diff --git a/images/ico_date26.gif b/images/ico_date26.gif new file mode 100644 index 00000000..bd459fdb Binary files /dev/null and b/images/ico_date26.gif differ diff --git a/images/ico_sns.2acc182.png b/images/ico_sns.2acc182.png new file mode 100644 index 00000000..23125a45 Binary files /dev/null and b/images/ico_sns.2acc182.png differ diff --git a/images/visual-activegreen.png b/images/visual-activegreen.png new file mode 100644 index 00000000..3114d712 Binary files /dev/null and b/images/visual-activegreen.png differ diff --git a/images/visual-c.png b/images/visual-c.png new file mode 100644 index 00000000..1e7a2ad0 Binary files /dev/null and b/images/visual-c.png differ diff --git a/images/visual-cultural.png b/images/visual-cultural.png new file mode 100644 index 00000000..8cb1b315 Binary files /dev/null and b/images/visual-cultural.png differ diff --git a/images/visual-customer.png b/images/visual-customer.png new file mode 100644 index 00000000..b5067b9b Binary files /dev/null and b/images/visual-customer.png differ diff --git a/images/visual-main-info-cate_star.png b/images/visual-main-info-cate_star.png new file mode 100644 index 00000000..8d8ec9ca Binary files /dev/null and b/images/visual-main-info-cate_star.png differ diff --git a/images/visual-main-info-thumb2.png b/images/visual-main-info-thumb2.png new file mode 100644 index 00000000..21e6bb97 Binary files /dev/null and b/images/visual-main-info-thumb2.png differ diff --git a/images/visual-main-info_cate_bell.png b/images/visual-main-info_cate_bell.png new file mode 100644 index 00000000..1929d026 Binary files /dev/null and b/images/visual-main-info_cate_bell.png differ diff --git a/images/visual-main-info_thumb.png b/images/visual-main-info_thumb.png new file mode 100644 index 00000000..15a456e0 Binary files /dev/null and b/images/visual-main-info_thumb.png differ diff --git a/images/visual-recruit.png b/images/visual-recruit.png new file mode 100644 index 00000000..9f8eab8f Binary files /dev/null and b/images/visual-recruit.png differ diff --git a/images/visual-responsible.png b/images/visual-responsible.png new file mode 100644 index 00000000..8ecf633d Binary files /dev/null and b/images/visual-responsible.png differ diff --git a/images/visual-sub-bkey.png b/images/visual-sub-bkey.png new file mode 100644 index 00000000..26e9a42d Binary files /dev/null and b/images/visual-sub-bkey.png differ diff --git a/images/visual-sub-bone.png b/images/visual-sub-bone.png new file mode 100644 index 00000000..32f4c3c3 Binary files /dev/null and b/images/visual-sub-bone.png differ diff --git a/images/visual-sub-en.png b/images/visual-sub-en.png new file mode 100644 index 00000000..7f77ed3e Binary files /dev/null and b/images/visual-sub-en.png differ diff --git a/images/visual-sub-kakao.png b/images/visual-sub-kakao.png new file mode 100644 index 00000000..66d3b613 Binary files /dev/null and b/images/visual-sub-kakao.png differ diff --git a/images/visual-sub-onepeople.png b/images/visual-sub-onepeople.png new file mode 100644 index 00000000..1bcef6a3 Binary files /dev/null and b/images/visual-sub-onepeople.png differ diff --git a/images/visual-sub-people.png b/images/visual-sub-people.png new file mode 100644 index 00000000..96a4650f Binary files /dev/null and b/images/visual-sub-people.png differ diff --git a/images/visual-sub-pick.png b/images/visual-sub-pick.png new file mode 100644 index 00000000..683a375a Binary files /dev/null and b/images/visual-sub-pick.png differ diff --git a/images/visual-sub-purple.png b/images/visual-sub-purple.png new file mode 100644 index 00000000..4b7526c9 Binary files /dev/null and b/images/visual-sub-purple.png differ diff --git a/images/visual-sub-stock.png b/images/visual-sub-stock.png new file mode 100644 index 00000000..6001bed4 Binary files /dev/null and b/images/visual-sub-stock.png differ diff --git a/images/visual-sub-test.png b/images/visual-sub-test.png new file mode 100644 index 00000000..6e1bf778 Binary files /dev/null and b/images/visual-sub-test.png differ diff --git a/images/visual-sub-yh.png b/images/visual-sub-yh.png new file mode 100644 index 00000000..7dae2ec2 Binary files /dev/null and b/images/visual-sub-yh.png differ diff --git "a/images/visual-sub-\353\254\264\354\247\200.png" "b/images/visual-sub-\353\254\264\354\247\200.png" new file mode 100644 index 00000000..9945566a Binary files /dev/null and "b/images/visual-sub-\353\254\264\354\247\200.png" differ diff --git a/images/visual-txt.png b/images/visual-txt.png new file mode 100644 index 00000000..feb2452a --- /dev/null +++ b/images/visual-txt.png @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/visual_culture.png b/images/visual_culture.png new file mode 100644 index 00000000..8cb1b315 Binary files /dev/null and b/images/visual_culture.png differ diff --git a/images/visual_service.png b/images/visual_service.png new file mode 100644 index 00000000..2b98145f Binary files /dev/null and b/images/visual_service.png differ diff --git a/images/visual_subscribe_icon.png b/images/visual_subscribe_icon.png new file mode 100644 index 00000000..23125a45 Binary files /dev/null and b/images/visual_subscribe_icon.png differ diff --git a/images/visual_talktips.png b/images/visual_talktips.png new file mode 100644 index 00000000..3904a42e Binary files /dev/null and b/images/visual_talktips.png differ diff --git "a/images/\353\213\244\354\232\264\353\241\234\353\223\234.png" "b/images/\353\213\244\354\232\264\353\241\234\353\223\234.png" new file mode 100644 index 00000000..bb509c0d Binary files /dev/null and "b/images/\353\213\244\354\232\264\353\241\234\353\223\234.png" differ diff --git "a/images/\354\213\254\355\231\224\352\263\274\354\240\225.png" "b/images/\354\213\254\355\231\224\352\263\274\354\240\225.png" new file mode 100644 index 00000000..a7105718 Binary files /dev/null and "b/images/\354\213\254\355\231\224\352\263\274\354\240\225.png" differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..41c34dba --- /dev/null +++ b/index.html @@ -0,0 +1,720 @@ + + + + + + 카카오 + + + + + + + + + + + +
+
+ +
+
    +
  • + 소개 +
    • +
  • + 이야기 +
    • +
  • + 뉴스 +
    • +
  • + 기술과 서비스 +
    • +
  • + 약속과 책임 +
    • +
+
+
+
search
+
language
+
dark_mode
+
+
+ + +
+ +
+
+ +
+ day +

7월 27일에 전하는
카카오 소식입니다

+
+ + +
+ + +
+
+ +
+
+ + +
+ +
+ bell + 보도자료 + + + 2023.07.26 + more_vert +
+ + + + 카카오임팩트, 소풍벤처스-탄녹위와 함께 ‘탄소 직접 포집(DAC)’ 기술 세미나 개최 + + + + #카카오임팩트 + #임팩트클라이밋네트워크 + #탄소중립 + #기술세미나 + + + + info-main-thumb + + +
+ + +
+
+ star + 하이라이트 + 2023.07.26 + more_vert +
+ + + + + 늘 하던 대화, 바로 옆에서
+ 카카오톡 오픈채팅 + + + + + #늘대화하던방 + #그바로옆 + #새로운세계 + + + + info-main-thumb2 + + +
+ +
+
+ +
+ +
+ +
+ responsible + 약속과 책임 +
+ + + ESG보고서,
+ 카카오의 약속과 책임 + + + + #카카오ESG + #ESG보고서 + + +
+ +
+ +
+ talk + 카톡설명서 +
+ + + 모두의 카톡을 더 가깝고 안전하게,
+ 카톡설명서 + + + + #카카오톡 + #커뮤니케이션 + #라이프 + + +
+ +
+ +
+ activegreen + 액티브그린 +
+ + + 이용자와 함께 꿈꾸는
+ 지속가능한 지구 + + + + #esg + #액티브그린 + #환경 + + +
+ +
+ +
+ visual-customer + 고객센터 +
+ + + 어떤 서비스를 도와드릴까요 ? + + + +
카카오
+
다음
+
멜론
+ + +
+ +
+ +
+ bell + 보도자료 + 2023.07.27 + more_vert +
+ + + + 카카오, 카카오프렌즈
'춘식이' X 프로야구구단... + + + + #카카오프렌즈 + #프로야구 + + + + info-main-thumb + + +
+ +
+
+ bell + 보도자료 + 2023.07.26 + more_vert +
+ + + + 카카오, '2023 카카오 클래스' 심화과정 참가자... + + + + #카카오클래스 + #톡스토어 + + + + info-main-thumb + + +
+ +
+
+
+ + +
+
+ 기술과 사람으로 더 나은 세상을 만듭니다. +
+ + 카카오문화 바로가기 + arrow_right_alt + +
+ culture +
+
+ + + + + +
+
+
+
+ + +
+ +
+ oen + 숫자로 보는 카카오 + +
+ + + + 사람의 감정은
4만 5000개? + + + + #감정분류 + #카카오이모티콘 + + + + info-sub-thumb + + +
+
+
+ +
+ +
+ +
+ key + 카카오 프라이버시 +
+ + + 데이터의 연결과 보호의 균형을
+ 위한 카카오 노력 + + + + #카카오프라이버시 + + +
+ + +
+ +
+ stock + 주가정보 +
+ + + 50,600 - + + + + 2023.07.28.3:14AM + + + +
+ +
+ +
+ bell + 보도자료 + 2023.07.21 + more_vert +
+ + + + 픽코마, '2023 상반기 일본
앱 마켓 전체 카테고리... + + + + #글로벌사업확대 + #카카오픽코마 + + + + info-main-thumb + + +
+ +
+
+ bell + 보도자료 + 2023.07.20 + more_vert +
+ + + + 카카오, AI 석학 앤드로 응
교수 초청 좌담회 진행 + + + + #ai + #앤드류응 + + + + info-main-thumb + + +
+ + + +
+
+ yh + 보도자료 + more_vert +
+ + + + 안전한 대화와 건강한
소통을 도와주는 AI 기술 + + + + #AI + #디지털책임 + #세이프봇 + + + + info-main-thumb + + +
+ + +
+
+ bell + 보도자료 + 2023.07.19 + more_vert +
+ + + + 카카오, 집중호우 피해 복구
위해 5억원 기부 + + + + #카카오기부 + #호우피해지원 + + + + info-sub-thumb + + +
+ + +
+
+ bell + 보도자료 + 2023.07.18 + more_vert +
+ + + + 카카오, KT 지니 TV
키즈랜드와 LG유플러스... + + + + #카카오프렌즈 + #내마음은무지 + + + + info-sub-thumb + + +
+ +
+
+ bell + 보도자료 + 2023.07.17 + more_vert +
+ + + + 카카오, 한국콘텐츠진흥원과
콘텐츠 IP 산업 동반 성장... + + + + #커머스CIC + #한국콘텐츠진흥원 + + + + info-sub-thumb + + +
+ + +
+
+ bone + 보도자료 + + more_vert +
+ + + + 200만 명이
선택한 실험실 + + + + #카카오기부 + #호우피해지원 + + + + info-sub-thumb + + +
+ +
+
+
+ + +
+
+ + 사람과 기술로 일상을 돕는 카카오
서비스 +
+
서비스 바로가기
+ arrow_forward +
+ service + +
+
+ + 세상만사에 관심이 많다면, 당신은
이미 카카오 크루 +
+
인재영업 바로가기
+ arrow_outward +
+ service + +
+
+ + + 카카오 소식 모아보기 + + +
+
+
+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 00000000..388e3e63 --- /dev/null +++ b/main.css @@ -0,0 +1,1404 @@ +/* COMMON */ +@font-face { + font-family: 'kakaoRe'; + src: url('./font/KakaoOTFRegular.otf'); +} + +body{ + font-family: 'kakaoRe'; + color: #333; + +} + + +/* HEADER */ +header{ +background-color: #fff; + +} + + +header >.inner { +/* header에 inner 중앙 배치 */ +margin: 0 auto; +width: 1296px; +height: 72px; +background-color: #fff; +/* logo 중앙 배치 */ +position: relative; + +} + +header .logo{ +position: absolute; +top: 0; +bottom: 0; +height: 27px; +margin: auto; +font-size: 28px; +color: #333; +text-decoration: none; + +} + + + +header .main-menu ul.menu { +display: flex; + position: absolute; + top: 0; + bottom: 0; +right: 0; +left: 0; + margin: auto ; + height: 23px; + width: 550px; +} + +/* padding을 통해서 클릭 영역 넓히기 */ +header .main-menu ul.menu li { + font-size: 17px; + font-weight: 700; + padding: 0 28px 0 28px; + cursor: pointer; +} + +header .main-menu ul.menu li a{ + color: #333; + text-decoration: none; + +} + + + +header .sub-menu{ +position: absolute; +top: 0; +bottom: 15px; +height: 30px; +right: 0; +margin: auto; +} +header .sub-menu .material-symbols-outlined{ +cursor: pointer; +margin: 0 15px; +padding: 10px; +background-color: transparent; +border-radius: 34px; +} + + +header .sub-menu .material-symbols-outlined:hover { + background-color: #eee; + + } + + /* */ + .visual{ + position: relative; + + /* 총길이 1130 */ + } + + .visual >.inner{ + top: 0; + bottom: 0; + margin: auto; + /* height: 6331px; */ + + width: 1296px; + padding-bottom: 182px; + } + + /* */ + .visual .title{ + height: 104px; + background-color: #fff; + padding-top: 72px; + width: 952px; + display: flex; + + } + +.visual .title img{ + padding-left: 10px; + padding-bottom: 45px; + width: 115px; + height: 110px; + padding-right: 20px; +} + + .visual .title p{ + font-size: 36px; + /* padding-left: 84px; */ + color: #000; + font-weight: 700; + line-height: 52px; + } + + /* */ + .visual .home{ + /* height: 6113px; */ + padding-top: 42px; + width: 1296px; + } + + + + .visual .info-main .main__container { + height: 1250px; + /* width: 982px; */ + display: flex; + overflow: scroll; + -ms-overflow-style: none; + scrollbar-width: none; + + } + + /* 스크롤바 없애기 */ + .visual .info-main .main__container::-webkit-scrollbar { + display: none; + } + + + .visual .info-main .main__container .container__item__left{ + width: 625px; + height: 1250px; + padding: 0 15px + } + + +/* 왼쪽 박스 속성 */ + .visual .info-main .main__container .container__item__left .left_box{ + width: 577px; + height: 554px; + padding: 25px 24px 0 24px; + margin-top: 30px; + background-color: #fff; + border-radius: 10px; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); + position: relative; + /* 썸네일 사진 하단 숨김 */ + overflow: hidden; + + } + + /* 박스에 마우스 클릭했을 때 그림자, 확대 */ + .visual .info-main .main__container .container__item__left .left_box:hover{ + transform : matrix(1, 0, 0, 1, 0, -5) ; + box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); + } + + .visual .info-main .main__container .container__item__left .left_box .info_cate{ + width: 577px; + height: 36px; + padding-right: 20; + margin-top: -1px; + /* background-color: rgb(144, 242, 17); */ + display: flex; + position: relative; + + } + + /* 보도 자료 info_cate 사진 */ + .visual .info-main .main__container .container__item__left .left_box .info_cate img{ + width: 36px; + height: 36px; + margin-right: 8px; + } + + /* 보도 자료 info_cate 말풍선 */ + .visual .info-main .main__container .container__item__left .left_box .info_cate .txt_cate{ + background-color: #eee; + color: #000; + font-size: 15px; + /* margin-top: 1px; */ + border-radius: 13px; + align-items: center; + display: flex; + padding: 0 13px; + line-height: 34px; + + } + + + /* .visual .info-main .main__container .container__item__left .left_box .info_cate .txt_cate::before{ + background: url(./images/다운로드.png); + content: " "; + background-repeat: no-repeat; + width: 16px; + height: 16px; + top: 5px; + + position: absolute; + } */ + + + + .visual .info-main .main__container .container__item__left .left_box .info_cate .txt_date{ + /* text-align: center; */ + color: #666; + font-size: 13px; + font-weight: 400; + margin: 15px 0 0 15px; + height: 16.5px; + width: 55.5px; + display: inline-block; + align-items: center; + + } + + .visual .info-main .main__container .container__item__left .left_box .info_cate .material-symbols-outlined{ + color: #BBB; + position: absolute; + right: 0; + bottom: 0; + height: 20px; + top: 0; + margin: auto 0; + + } + + + /* 보도자료 info_link */ + .visual .info-main .main__container .container__item__left .left_box .info_link{ + width: 577px; + height: 506px; + margin-top: -1px; + /* background-color: rgb(62, 17, 242); */ + display: block; + text-decoration: none; + } + + /* 보도자료 info_link의 link_title */ + .visual .info-main .main__container .container__item__left .left_box .link_title{ + width: 577px; + height: 92px; + /* padding: 0 24px; */ + margin-top: 15px; + /* background-color: rgb(144, 242, 17); */ + display: block; + color: #000; + font-size: 32px; + font-weight: 700; + line-height: 46px; + } + + /* 보도자료 info_link의 해시태그 */ + .visual .info-main .main__container .container__item__left .left_box .info_card{ + display: inline-block; + width: 517px; + height: 19px; + + margin-top: 20px; + } + + .visual .info-main .main__container .container__item__left .left_box .info_card span{ + font-size: 16px; + color: #666; + display: inline-block; + margin-right: 3px; + + } + + + /* 보도자료 info_link의 기사사진 썸네일 */ + .visual .info-main .main__container .container__item__left .left_box .wrap_thumb img{ + width: 100%; + display: block; + position: absolute; + bottom: 0; + left: 0; + + } + + +/* 오른쪽 박스 */ + + .visual .info-main .main__container .container__item__right{ + width: 630px; + height: 1250px; + padding: 0 15px; + display: flex; + flex-wrap: wrap; + align-content: start; + justify-content: space-between; + } + + .visual .info-main .main__container .container__item__right .right_box{ + background-color: #fff; + width: 249px; + height: 167px; + padding: 24px 24px 0 24px; + margin-top: 30px; + border-radius: 10px; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); + + } + + .visual .info-main .main__container .container__item__right .right_box:hover{ + box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); + transform : matrix(1, 0, 0, 1, 0, -5) ; + } + + .visual .info-main .main__container .container__item__right .right_box .box__link{ + text-decoration: none; + position: relative; + } + + /* 상단 묶음*/ + .visual .info-main .main__container .container__item__right .right_box .info_cate{ + width: 229px; + height: 30px; + display: flex; + + } + /* icon */ + .visual .info-main .main__container .container__item__right .right_box .info_cate img{ + width: 36px; + height: 36px; + margin-right: 8px; + } + + /* 말풍선 */ + .visual .info-main .main__container .container__item__right .right_box .info_cate .txt_cate{ + background-color: #eee; + color: #000; + font-size: 15px; + /* margin-top: 1px; */ + border-radius: 13px; + align-items: center; + display: flex; + padding: 0 13px; + + } + + + /* 문구 */ + .visual .info-main .main__container .container__item__right .right_box .info_title{ + width: 249px; + height: 56px; + margin: 13px 0 0; + display: block; + color: #000; + font-size: 18px; + font-weight: 500; + line-height: 28px; + } + /* 고객센터 */ + .visual .info-main .main__container .container__item__right .right_box .info_Question{ + width: 187px; + height: 28px; + margin: 13px 0 0; + display: block; + color: #000; + font-size: 16px; + font-weight: 700; + line-height: 26px; + background-color: #FAE100; + padding: 8px 20px 8px 25px; + border-radius: 15px; + } + + .visual .info-main .main__container .container__item__right .right_box .info_ans{ + display: flex; + height: 42px; + width: 249px; + align-items: center; + justify-content: space-between; + } + + .visual .info-main .main__container .container__item__right .right_box .info_ans .tit{ + font-size: 16px; + height: 28px; + width: 45px; + background-color: #eee; + color: #888; + border-radius: 15px; + padding: 8px 15px 8px 15px; + text-align: center; + margin-top: 40px; + font-weight: 700; + align-items: center; + } + + /* 해시태그 */ + .visual .info-main .main__container .container__item__right .right_box .info_card{ + font-size: 16px; + color: #666; + display: inline-block; + margin-right: 3px; + width: 249px; + height: 19px; + margin-top: 21px; + } + + + /* 오른쪽 big box */ + .visual .info-main .main__container .container__item__right .right_box_big{ + background-color:#fff; + width: 249px; + height: 338px; + padding: 25px 24px 0 24px; + margin-top: 30px; + position: relative; + border-radius: 10px; + overflow: hidden; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); + } + + .visual .info-main .main__container .container__item__right .right_box_big:hover{ + box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); + transform : matrix(1, 0, 0, 1, 0, -5) ; + } + + + + .visual .info-main .main__container .container__item__right .right_box_big .info_cate{ + width: 250px; + height: 36px; + padding-right: 20; + /* margin-top: -1px; */ + /* background-color: rgb(144, 242, 17); */ + display: flex; + position: relative; + + } + + .visual .info-main .main__container .container__item__right .right_box_big .info_cate img{ + width: 36px; + height: 36px; + margin-right: 8px; + + } +/* 말풍선 */ + .visual .info-main .main__container .container__item__right .right_box_big .info_cate .txt_cate { + background-color: #eee; + color: #000; + font-size: 15px; + /* margin-top: 1px; */ + border-radius: 13px; + align-items: center; + display: flex; + padding: 0 13px; + + } + + .visual .info-main .main__container .container__item__right .right_box_big .info_cate .txt_date { + color: #666; + font-size: 12px; + font-weight: 400; + margin: 8px 0 0 6px; + height: 18px; + width: 61px; + display: inline-block; + align-items: center; + + } + + .visual .info-main .main__container .container__item__right .right_box_big .info_cate .material-symbols-outlined { + color: #BBB; + position: absolute; + right: 0; + bottom: 0; + height: 20px; + top: 0; + margin: auto 2; + + + } + + .visual .info-main .main__container .container__item__right .right_box_big .info_link { + width: 297px; + height: 290px; + display: block; + text-decoration: none; + + } + + .visual .info-main .main__container .container__item__right .right_box_big .info_link .link_title{ + width: 249px; + height: 64px; + /* padding: 0 24px; */ + margin-top: 13px; + /* background-color: rgb(144, 242, 17); */ + display: block; + color: #000; + font-size: 22px; + font-weight: 700; + line-height: 32px; + + } + + /* 해시태그 */ + .visual .info-main .main__container .container__item__right .right_box_big .info_card { + display: inline-block; + width: 189px; + height: 19px; + /* padding-left:24px ; */ + margin-top: 18px; + + } + + .visual .info-main .main__container .container__item__right .right_box_big .info_card span{ + font-size: 13px; + color: #666; + display: inline-block; + margin-right: 3px; + + + } + + + .visual .info-main .main__container .container__item__right .right_box_big .wrap_thumb img{ + width: 100%; + display: block; + position: absolute; + bottom: 0; + left: 0; + margin: auto; + } + + /* 문화 */ + .visual .culture{ + /* width: 820px; */ + height: 486px; + padding: 54px 66px 0 66px; + margin: 30px 15px 0 15px; + background-color: #fff; + border-radius: 10px; + box-shadow: 1px 1px 10px 10px rgba(0, 0, 0, 0.1); + position: relative; + + } + + .visual .culture .culture__title{ + width: 1164px; + height: 62px; + font-size: 42px; + line-height: 62px; + text-align: center; + font-weight: 700; + + } + + .visual .culture .culture__btn{ + width: 145px; + height: 33px; + padding: 4px 10px 4px 10px; + background-color: #000; + border-radius: 42px; + color: #fff; + font-size: 14px; + font-weight: 400; + line-height: 20px; + position: absolute; + left: 0; + right: 0; + margin: 36px auto 0 auto; + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + } + + + .visual .culture .culture__img{ + position: absolute; + bottom: 50px; + left: 190px + } + + .visual .culture .culture__img img{ + width: 900px; + height: 239px; + + } + + +/* 구독 */ + .visual .subscribe{ + width: 1196px; + height: 60px; + padding: 50px 36px; + margin: 30px 15px; + display: flex; + justify-content: space-between; + border-radius: 10px; + background-color: #fff; + transform : matrix(1, 0, 0, 1, 0, -5) ; + box-shadow: 1px 1px 10px 10px rgba(0, 0, 0, 0.1); + + } + + .visual .subscribe span{ + width: 486px; + height: 52px; + font-size: 32px; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + } + + .visual .subscribe ul.icon{ + width: 340px; + height: 60px; + display: flex; + /* margin-left: 10px; */ + } + + .visual .subscribe ul.icon li{ + width: 60px; + height: 60px; + background-color: orange; + display: flex; + margin-left: 10px; + } + + /* .chat, .youtube, .inst, .facebook, .in { + background: url('./images/visual_subscribe_icon.png') no-repeat; + } */ + + .visual .subscribe ul.icon li .chat{ + background: url('./images/visual_subscribe_icon.png') no-repeat; + width: 60px; + height: 60px; + background-position: 0 60 ; + } + + .visual .subscribe ul.icon li .youtube{ + background: url('./images/visual_subscribe_icon.png') no-repeat; + width: 80px; + height: 60px; + background-position: -80 -10; + } + + .visual .subscribe ul.icon li a.inst{ + background: url('./images/visual_subscribe_icon.png') no-repeat; + width: 60px; + height: 60px; + background-position: -255 0 ; + } + + .visual .subscribe ul.icon li .facebook{ + background: url('./images/visual_subscribe_icon.png') no-repeat; + width: 60px; + height: 60px; + background-position: 0 60 ; + } + + .visual .subscribe ul.icon li .in{ + background: url('./images/visual_subscribe_icon.png') no-repeat; + width: 60px; + height: 60px; + background-position: 0 60 ; + + } + + + .visual .info-sub .sub__container{ + height: 1674px; + width: 1300px; + display: flex; + flex-direction: row-reverse; + overflow: scroll; + position: relative; + overflow-x: hidden; + overflow-y: scroll; + } + + /* 스크롤바 없애기 */ + .visual .info-sub .sub__container::-webkit-scrollbar{ + display: none; + } + + .visual .info-sub .sub__container >.container__item__left{ + width: 625px; + /* height: 1674px; */ + padding: 0 15px; + + } + + .visual .info-sub .sub__container >.container__item__left .left__sticky{ + width: 625px; + padding: 0 15px; + } + + + /* 큰 박스요소 */ + .visual .info-sub .sub__container .container__item__left .left_box{ + width: 577px; + height: 554px; + padding: 25px 24px 0 24px; + margin-top: 30px; + background-color: #fff; + border-radius: 10px; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); + position: relative; + /* 썸네일 사진 하단 숨김 */ + overflow: hidden; + + } + + .visual .info-sub .sub__container .container__item__left .left_box:hover{ + transform : matrix(1, 0, 0, 1, 0, -5) ; + box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); + } + + .visual .info-sub .sub__container .container__item__left .left_box .info_cate{ + width: 577px; + height: 36px; + padding-right: 20; + margin-top: -1px; + /* background-color: rgb(144, 242, 17); */ + display: flex; + position: relative; + + } + + .visual .info-sub .sub__container .container__item__left .left_box .info_cate img{ + width: 36px; + height: 36px; + margin-right: 8px; + } + + .visual .info-sub .sub__container .container__item__left .left_box .info_cate .txt_cate{ + background-color: #eee; + color: #000; + font-size: 15px; + /* margin-top: 1px; */ + border-radius: 13px; + align-items: center; + display: flex; + padding: 0 13px; + line-height: 34px; + + } + + .visual .info-sub .sub__container .container__item__left .left_box .info_cate .txt_date{ + /* text-align: center; */ + color: #666; + font-size: 13px; + font-weight: 400; + margin: 15px 0 0 15px; + height: 16.5px; + width: 55.5px; + display: inline-block; + align-items: center; + + } + + .visual .info-sub .sub__container .container__item__left .left_box .info_cate .material-symbols-outlined { + /* text-align: center; */ + color: #BBB; + position: absolute; + right: 0; + bottom: 0; + height: 20px; + top: 0; + margin: auto 0; + } + + .visual .info-sub .sub__container .container__item__left .left_box .info_link{ + width: 577px; + height: 506px; + margin-top: -1px; + /* background-color: rgb(62, 17, 242); */ + display: block; + text-decoration: none; + } + + .visual .info-sub .sub__container .container__item__left .left_box .link_title{ + width: 577px; + height: 92px; + /* padding: 0 24px; */ + margin-top: 15px; + /* background-color: rgb(144, 242, 17); */ + display: block; + color: #000; + font-size: 32px; + font-weight: 700; + line-height: 46px; + } + + + .visual .info-sub .sub__container .container__item__left .left_box .info_card { + display: inline-block; + width: 517px; + height: 19px; + margin-top: 20px; + } + + .visual .info-sub .sub__container .container__item__left .left_box .info_card span { + font-size: 16px; + color: #666; + display: inline-block; + margin-right: 3px; + } + + .visual .info-sub .sub__container .container__item__left .left_box .wrap_thumb img { + width: 100%; + display: block; + position: absolute; + bottom: 0; + left: 0; + } + + /* 오른쪽 박스 */ + .visual .info-sub .sub__container .container__item__right{ + width: 625px; + /* height: 1674px; */ + padding: 0 15px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + overflow: auto; + + } + + .visual .info-sub .sub__container .container__item__right::-webkit-scrollbar{ + display: none; + } + + .visual .info-sub .sub__container >.container__item__right .right_box{ + background-color: #fff; + width: 249px; + height: 167px; + padding: 25px 24px 0 24px; + margin-top: 30px; + border-radius: 10px; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); + } + + .visual .info-sub .sub__container .container__item__right .right_box:hover{ + box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); + transform : matrix(1, 0, 0, 1, 0, -5) ; + } + + .visual .info-sub .sub__container .container__item__right .right_box .box__link{ + text-decoration: none; + } + + .visual .info-sub .sub__container .container__item__right .right_box .info_cate{ + width: 229px; + height: 30px; + display: flex; + } + + .visual .info-sub .sub__container .container__item__right .right_box .info_cate img{ + width: 36px; + height: 36px; + margin-right: 8px; + } + + .visual .info-sub .sub__container .container__item__right .right_box .info_cate .txt_cate{ + background-color: #eee; + color: #000; + font-size: 15px; + /* margin-top: 1px; */ + border-radius: 13px; + align-items: center; + display: flex; + padding: 0 13px; + + } + .visual .info-sub .sub__container .container__item__right .right_box .info_title{ + width: 249px; + height: 56px; + margin: 13px 0 0; + display: block; + color: #000; + font-size: 18px; + font-weight: 500; + line-height: 28px; + } + + /* 주가정보 */ + .visual .info-sub .sub__container .container__item__right .right_box .info_title1{ + width: 158px; + height: 56px; + margin: 36px 0 0; + display: block; + color: #000; + font-size: 40px; + font-weight: 500; + line-height: 28px; + } + + .visual .info-sub .sub__container .container__item__right .right_box .info_card{ + font-size: 16px; + color: #666; + display: inline-block; + margin-right: 3px; + width: 249px; + height: 19px; + margin-top: 21px; + } + + .visual .info-sub .sub__container .container__item__right .right_box .info_card .txt1{ + font-size: 14px; + color: #666; + margin-right: 3px; + width: 249px; + height: 19px; + margin-top: 10px; + + } + + + /* 오른쪽 big box */ + .visual .info-sub .sub__container .container__item__right .right_box_big{ + background-color:#fff; + width: 249px; + height: 338px; + padding: 25px 24px 0 24px; + margin-top: 30px; + position: relative; + border-radius: 10px; + overflow: hidden; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); + } + + .visual .info-sub .sub__container .container__item__right .right_box_big:hover{ + box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); + transform : matrix(1, 0, 0, 1, 0, -5) ; + } + + + .visual .info-sub .sub__container .container__item__right .right_box_big .info_cate{ + width: 250px; + height: 36px; + padding-right: 20; + /* margin-top: -1px; */ + /* background-color: rgb(144, 242, 17); */ + display: flex; + position: relative; + + } + + .visual .info-sub .sub__container .container__item__right .right_box_big .info_cate img{ + width: 36px; + height: 36px; + margin-right: 8px; + + } +/* 말풍선 */ + .visual .info-sub .sub__container .container__item__right .right_box_big .info_cate .txt_cate { + background-color: #eee; + color: #000; + font-size: 15px; + border-radius: 13px; + align-items: center; + display: flex; + padding: 0 13px; + + } + + .visual .info-sub .sub__container .container__item__right .right_box_big .info_cate .txt_date { + color: #666; + font-size: 12px; + font-weight: 400; + margin: 8px 0 0 6px; + height: 18px; + width: 61px; + display: inline-block; + align-items: center; + + } + + .visual .info-sub .sub__container .container__item__right .right_box_big .info_cate .material-symbols-outlined { + color: #BBB; + position: absolute; + right: 0; + bottom: 0; + height: 20px; + top: 0; + margin: auto 2; + + + } + + .visual .info-sub .sub__container .container__item__right .right_box_big .info_link { + width: 297px; + height: 290px; + display: block; + text-decoration: none; + + } + + .visual .info-sub .sub__container .container__item__right .right_box_big .info_link .link_title{ + width: 249px; + height: 64px; + margin-top: 13px; + display: block; + color: #000; + font-size: 22px; + font-weight: 700; + line-height: 32px; + + } + + /* 해시태그 */ + .visual .info-sub .sub__container .container__item__right .right_box_big .info_card { + display: inline-block; + width: 189px; + height: 19px; + margin-top: 18px; + + } + + .visual .info-sub .sub__container .container__item__right .right_box_big .info_card span{ + font-size: 13px; + color: #666; + display: inline-block; + margin-right: 3px; + + } + + + + .visual .info-sub .sub__container .container__item__right .right_box_big .wrap_thumb img{ + width: 100%; + display: block; + position: absolute; + bottom: 0; + left: 0; + margin: auto; + } + + /* 바로가기 */ + .visual .quick-menu{ + width: 1332px; + height: 360px; + margin-top: 36px; + background-color: #fff; + display: flex; + + } + + .visual .quick-menu .menu__container{ + width: 630px; + height: 360px; + padding: 0 15px; + display: flex; + } + + .visual .quick-menu .menu__container .container__itemA, + .visual .quick-menu .menu__container .container__itemB { + width: 630px; + height: 360px; + padding: 36px 36px 0 36px; + text-decoration: none; + color: #000; + border-radius: 12px; + position: relative; + transform : matrix(1, 0, 0, 1, 0, -5) ; + box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); + } + + .visual .quick-menu .menu__container .container__itemA{ + background-color: #FAE100; + } + + .visual .quick-menu .menu__container .container__itemB{ + background-color: rgb(60, 100, 255); + } + + + .visual .quick-menu .menu__container .item__tit{ + width: 480px; + height: 88px; + font-size: 32px; + font-weight: 700; + line-height: 44px; + } + + .visual .quick-menu .menu__container .item__btn{ + width: 143px; + height: 42px; + padding: 0 10px; + margin-top: 24px ; + background-color: #000; + border-radius: 42px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + } + + .visual .quick-menu .menu__container .item__btn .btn_tit{ + font-size: 14; + color: #fff; + line-height: 22px; + font-weight: 400; + } + .visual .quick-menu .menu__container .item__btn .material-symbols-outlined{ + font-size: 14; + color: #fff; + } + .visual .quick-menu .menu__container .container__itemA .item__img{ + width: 170px; + height: 170px; + position: absolute; + right: 40px; + bottom: 40px; + } + + .visual .quick-menu .menu__container .container__itemB .item__img{ + width: 319px; + height: 170px; + position: absolute; + right: 40px; + bottom: 40px; + } + +/* 카카오 소식 모아보기 */ +.visual .more { + width: 260px; + height: 60px; + margin: 84px auto 0 ; + background-color: #eee; + display: block; + cursor: pointer; + border-radius: 60px; + text-align: center; + color: #000; + font-size: 18px; + line-height: 60px; + text-decoration: none; + +} + +/* footer */ + +.footer{ + /* width: 1104px; */ + height: 496px; +} + +.footer .inner{ + width: 1296px; + height: 412px; + padding: 37px 0 48px; + margin: 0 auto; + background-color: #fff; + position: relative; +} + +.footer .service { + width: 1296px; + height: 219px; + font-size: 14px; + line-height: 1.5; + font-weight: 400; + color: #333; + display: flex; + justify-content: space-evenly; +} + + +.footer .service .service__item{ + width: 113px; + height: 120px; + padding-right: 25px; + +} + +.footer .service .service__item .item_tit{ + width: 113px; + height: 21px; + font-weight: bold; + font-size: 14px; + line-height: 1.5; + color: #333; + text-decoration: none; + position: relative; +} + +/* hover 됐을 때 before 노란색점 */ +.footer .service .service__item .item_tit:hover:before{ +content: "\2022"; +color: #FAE100; +margin-right: 5px; +position: absolute; +left: -15px; +font-size: 22px; +top: -5px; +} + + +.footer .service .service__item .item_list{ + width: 113px; + height: 21px; + margin-top: 12px; + display: block; +} + +.footer .service .service__item .item_list .listitem{ + width: 113px; + height: 21px; + margin-top: 12px; + color: #888 ; + cursor: pointer; +} + + +.footer .service .service__item .item_list .listitem:hover{ + + color: #333 ; + font-weight: bold; +} + + + + +.footer .service .service__item .group_list .listitem{ + width: 113px; + height: 21px; + margin-top: 12px; + display: flex; + text-decoration: none; + align-items: center; + color: #888 ; + cursor: pointer; +} + +.footer .service .service__item .group_list .listitem .material-symbols-outlined{ + font-size: 15px; +} + + +.footer .service .service__item .group_list .listitem:hover { + color: #333 ; + font-weight: bold; +} + + +/* 인재영입 */ +.footer .service .service__item .item_tit{ + width: 113px; + height: 21px; + margin-top: 12px; + display: flex; + align-items: center; + text-decoration: none; +} + +.footer .service .service__item .item_tit .material-symbols-outlined{ + font-size: 15px; +} + + + + +.footer .relation{ + width: 982px; + height: 73px; + margin-top: 120px; + font-size: 14px; + line-height: 1.5px; + font-weight: 400; + color: #333; +} + +/* relation */ + +.footer .relation{ + width: 500px; + height: 50px; + +} + +.footer .relation .group_infp{ + display: flex; + flex-wrap: wrap; + align-items: flex-start; + text-decoration: none; +} + +.footer .relation .group_infp .wrap_info{ + margin: 6px 0 0 24px; + display: flex; + flex-wrap: wrap; + /* justify-content: center; + align-content: flex-start; */ + font-size: 12px; + font-weight: 400; + line-height: 18px; + cursor: pointer; + color: #888; +} + +.footer .relation .group_infp .wrap_info .info_tit{ + text-decoration: none; + +} + +.footer .relation .group_infp .wrap_info .info_tit1{ + color: #333; + font-size: 13px; + font-weight: 700; +} + +.footer .relation .group_infp .wrap_info:hover { + color: #333; + font-weight: 500; +} + + + + + +.footer .relation .group_infp .wrap_info .material-symbols-outlined{ + font-size: 15px; +} + + +.footer .relation .group_infp .wrap_info a.info_tit{ + font-size: 12px; + font-weight: 400; + line-height: 18px; + cursor: pointer; + color: #888; + +} + +.footer .relation .group_infp .wrap_info a.info_tit:hover{ + color: #333; + font-weight: 500; +} + +.footer .relation .relation_side { + width: 298px; + height: 40px; + +} + +.footer .relation .relation_side .side_group{ +width: 258px; +height: 18px; +padding: 10px 20px 12px ; +background-color: #eee; +border-radius: 24px; +font-weight: 400; +font-size: 12px; +display: flex; +justify-content: space-between; +align-items: center; +position: absolute; +right:40px; +bottom: 70px; +} + +.footer .inner .txt_copyright{ +width: 1296px; +height: 18px; +font-weight: 400; +font-size: 12px; +color: #888; +padding-top: 12px; +position: absolute; +left: 25px; +} +