강의 7~8_230308~09_과제_GitHub 프로젝트로 브랜치 작업 및 사이트 구축

쉬운 목차

주문 내용

GitHub에서 각 팀의 프로젝트 리포지토리를 만들고 팀원을 초대합니다.
각 팀 구성원은 자신의 분기를 만듭니다.
지점별 홈페이지 제작
완료되면 마스터에 병합

결과

결과 저장

웹사이트 결과

HTML

<!
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문과생들이여, 메타버스 기획자로 미래의 문을 두드려라!
</title>
    <link rel="stylesheet" href="http://oo0ojw.m/./jiwon.css">
</head>
<body>
    <div class="all">
        <div class="nav_top">
            <p class="nav_title"> 🌐 문과생들이여, 메타버스 기획자로 미래의 문을 두드려라!
</p>
           
            <!
--호버-->
            <img src="data:image/png;base64,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" alt="nav 검색">
            <p class="search">검색</p>
            <p class="copy">복제</p>
        </div>
        
        <div class="background">
            <div class="title">
                <p>🌐</p> 
                <h1>문과생들이여, 메타버스 기획자로 미래의 문을 두드려라!
</h1>
            </div>
            
            <div class="main_1">
                <p>📒게임, VR-AR, 블록체인 교육의 명가 경일게임아카데미에서 미래 콘텐츠 기획자와 콘텐츠 마케터를 위한 특화 과정을 개설했습니다!
</p>
                <p>당신이 원하는 미래가 여기 있다면 선택하세요!
</p>
            </div>
            
            <div class="main_2">
                <div class="sub">
                    <p>게임을 기획하는 게임기획자</p>
                    <img class="sub_image" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F89bc0015-8664-46d5-9111-b0a09f9cac6e%2FUntitled.png&blockId=35cb165e-88a8-47f2-9c23-99765b5314c8" alt="게임기획자">
                    <p>< 게임의 시스템, 콘텐츠, 스토리텔링, 레벨, 밸런싱 등 사용자 체험 전반을 설계하는 게임기획자 ></p>
                </div>
                <div class="sub">
                    <p>체험 기반의 웹, 앱 서비스 기획자</p>
                    <img class="sub_image" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F95c17691-7178-4346-9dd7-0f81862b947b%2FUntitled.png&blockId=46e5c3a6-1e16-4524-9184-fd1d853067a1" alt="웹, 앱 서비스 개발자">
                    <p>< AI와 AR 기술을 이용한 체험형 메이크업, 스킨케어 웹/앱 ></p>
                </div>
                <div class="sub">
                    <p>VR, AR, 실감형 하드웨어를 아우르는 실감형 콘텐츠 기획자</p>
                    <img class="sub_image" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F175885c3-4aa7-481d-9fd0-87a6a181eec7%2FUntitled.png&blockId=53ecd5fa-fe40-4504-bc5b-30f315ccb095" alt="콘텐츠 기획자">
                    <p>< VR, AR, 실감형 하드웨어가 결합된 VR 테마파크 콘텐츠 ></p>
                </div>
                <div class="sub">
                    <p>다양한 뉴미디어로 콘텐츠 마케팅을 하고자 하는 콘텐츠 마케터</p>
                    <img class="sub_image" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff18c8944-a3bf-4bdf-b7f2-b03ae539fefc%2FUntitled.png&blockId=2ec42652-2f2d-46d6-9013-67787f48639c" alt="뉴 미디어 콘텐츠 마케터">
                    <p>< AR 기술을 이용, 지역의 실제 공간을 활용해 진행되는 방탈출 게임 콘텐츠 ></p>
                </div>
                <div class="sub">
                    <p>세계관, 스토리 기반 브랜드 마케터 및 콘텐츠 기획자</p>
                    <img class="content" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe8024aba-74f7-4f38-8a66-6d6e588c8267%2FUntitled.png&blockId=05e52664-ce30-414a-90c6-59c20650c6ae" alt="브랜드 마케터 및 콘텐츠 기획자">
                    <p class="content">< K-POP, 예능 부캐, 지역 홍보, 웹툰 등 다양한 분야와 미디어로 확장중인 세계관></p>
                </div>
                <div class="sub">
                    <p>블록체인, NFT로 온오프라인 콘텐츠를 결합하고자 하는 사업기획자</p>
                    <img class="nfc" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe821b8bc-f690-4251-9055-052669d05c23%2FUntitled.png&blockId=da059231-24f4-4747-bf79-516491160a54" alt="블록체인 사업기획자">
                    <p class="nfc">< 게임, K-POP, 디지털 아트 등과 활발하게 결합하고 있는 NFT ></p>
                </div>
                <p class="why_kga">왜 경일게임아카데미인가?</p>
            </div>
            <div class="main_3">
                <div class="why_1">
                    <h3>저희는 청년의 미래로 실험하지 않습니다.
</h3>
                    <ul>
                        <li><span class="red">전액 무료</span>입니다!
 훈련비 전액을 국가에서 부담합니다.
</li>
                        <li>2014년부터 <span class="red">취업률 77%</span>의 검증된 <span class="box_b">게임기획자 과정</span>을 운영해 왔습니다.
</li>
                        <li>2016년부터 <span class="box_b">가상현실, 증강현실 과정</span>을 운영해 왔습니다.
</li>
                        <li>2020년부터 전국 3000여개 직업훈련기관 중 최초로 <span class="box">K-Digital Training 블록체인과정</span>을 운영해 왔습니다.
</li>
                        <li>저희는 <span class="red">9개월</span>이라는 충분한 기간 동안 더디게 가고, 넘어지고, 여러 번 좌절하는 모든 수강생을 낙오자 없이 함께 갈 수 있는 <span class="red">교육 기간</span>과 <span class="red">노하우</span>를 갖추었습니다.
</li>
                    </ul>
                </div>
                <div class="why_2">
                    <h3>국가에서 인정한 최상위급 훈련과정을 운영하고 있습니다.
</h3>
                    <ul>
                        <li><span class="box_b">프랑스의 에꼴 42</span>, <span class="box_b">실리콘밸리의 유다시티</span> 등 <span class="red">미래형 혁신 교육훈련</span>에 대응하기 위해 만들어진 <span class="red">K-Digital Training 훈련과정</span>으로 운영됩니다.
</li>
                        <li><span class="red">3000여개의 훈련기관 + 멋쟁이 사자처럼 등 민간 혁신 훈련기관 + 네이버, 카카오페이,쏘카 등 디지털 선도기업</span>이 함께 경쟁한 K-Digital Training에 선정된 <span class="red">초기 43개 기관(상위 1.4% )</span>중 하나입니다.
</li>
                    </ul>
                </div>
                <div class="why_3">
                    <h3>실제 메타버스 스타트업들이 프로젝트에 직접 참여합니다.
</h3>
                    <ul>
                        <li>기업과 학교가 공동으로 <span class="red">커리큘럼</span>을 설계하고</li>
                        <li><span class="red">메타버스 프로그래밍 과정</span>과 공동으로 <span class="red">메타버스 플랫폼</span>을 제작하는 후반 프로젝트를</li>
                        <li><span class="red">게임, VR, AR, NFT</span>등의 다양한 메타버스 기술을 결합해 진행합니다.
</li>
                    </ul>
                </div>
                <div class="why_4">
                    <h3>실무 중심의 검증된 커리큘럼을 운영합니다.
</h3>
                    <div class="curriculum">
                        <p>💡</p>
                        <p>경일게임아카데미는 일방향적인 이론과 강의 수업이 아닌 <span class="red">다양한 실습</span>과 <span class="red">프로젝트</span>로 콘텐츠 기획자로써 역량을 극대화시킬 수 있는 현장성 높은 커리큘럼을 설계, 운영합니다.
</p>
                    </div>
                    <ul>
                        <li>보드 게임 제작</li>
                    </ul>
                        <!
--div영역에 링크주소 넣기 (onclick)
                            1. 기존 창에서 주소 이동: onclick="location.href="이동할 링크주소 입력""
                            2. 새 창에서 주소 열기: onclick="window.open('이동할 링크 주소 입력')"-->
                        <div class="crc_ex1" onclick="window.open('https://youtu.be/sZJTUvx_tAM');">
                            <p>(경일게임아카데미) 게임기획 1개월차 보드게임 (1팀) 포트폴리오</p>
                            <p class="crc_subtext">밀정

                                ● 게임기획 19기 (1팀) - 김광수, 김도연, 박준수, 양연수, 함석신
                                ● 제작기간 : 1주
                                
                                ▶ 대표 전화
                                02-479-4050
                                
                                ▶ 온라인 문의
                                (홈페이지) http://www.kiweb.or.kr/
                                (카카오톡) http://pf.kakao.com/_nsNxkM</p>
                            <p class="crc_url">https://youtu.be/sZJTUvx_tAM</p>
                            <img src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fi.ytimg.com%2Fvi%2FsZJTUvx_tAM%2Fhqdefault.jpg&blockId=f5c61e3b-04c0-42ab-9612-2b8fc2a309a7&width=512" alt="보드게임">
                            <div class="hov1"></div>
                        </div>
                    <ul>
                        <li>루아스크립트와 로블록스 스튜디오를 활용한 프로젝트 진행 ( 아래 참고영상은 게임기획 과정에서 진행된 루아스크립트+네코랜드 프로젝트입니다.
 )</li>
                    </ul>
                    <div class="crc_ex2" onclick="window.open('https://youtu.be/Z6jYF1C0jQI');">
                        <p>(경일게임아카데미) 게임기획 4개월차 (팀 EGG TART) 네코랜드 포트폴리오</p>
                        <p class="crc_subtext">플라잉 에그

                            ● 게임기획 20기 (EGG TART) 최성문, 조지훈, 정종하, 이여름
                            ● 장르: 캐주얼 아케이드
                            ● 개요: 통통 튀는 캐릭터로 즐기는 클라이밍 게임
                            ● 제작기간 : 3주
                            ● 개발툴: Nekoland Studio
                            
                            ▶ 대표 전화
                            02-479-4050
                            
                            ▶ 온라인 문의
                            (홈페이지) http://www.kiweb.or.kr/
                            (카카오톡) http://pf.kakao.com/_nsNxkM</p>
                        <p class="crc_url">https://youtu.be/Z6jYF1C0jQI</p>
                        <img src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fi.ytimg.com%2Fvi%2FZ6jYF1C0jQI%2Fhqdefault.jpg&blockId=21b66b8b-783b-4ad8-a2ce-a3e34f18cec7&width=512" alt="네코랜드">
                        <div class="hov2"></div>
                    </div>
                    <ul>
                        <li>FPS 게임의 공간설계( 레벨디자인 )</li>
                    </ul>
                    <div class="crc_ex3" onclick="window.open('https://youtu.be/uOObJJLPiP8');">
                        <p>(경일게임아카데미) 게임기획 김지동 학생 3개월차 포트폴리오</p>
                        <p class="crc_subtext">Nuclear Power Plant_김지동

                            경일게임아카데미 홈페이지 <br>
                            http://www.kiweb.or.kr/
                            
                            입학 상담 문의
                            02-479-4050</p>
                        <p class="crc_url">https://youtu.be/uOObJJLPiP8</p>
                        <img src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fi.ytimg.com%2Fvi%2FuOObJJLPiP8%2Fhqdefault.jpg&blockId=746bb604-2291-4376-9333-5b5ebc4772a3&width=512" alt="fps 공간설계">
                        <div class="hov3"></div>
                    </div>
                    <ul>
                        <li>VR 기기와 Unity 3D 게임 엔진을 활용한 게임제작 프로젝트</li>
                    </ul>
                    <div class="crc_ex3" onclick="window.open('https://youtu.be/CPEDwnHaPQo');">
                        <p>(전액국비지원 게임학원)(게임아카데미) 프로그래밍학원 경일게임아카데미 VR/AR 3기</p>
                        <p class="crc_subtext">● 팀 명 : VR / AR 3기
                            ● 팀장 : 김현민
                            ● 팀 원 : 강지환, 안정현, 변종규, 박민기, 김현민, 김하영
                            ● 창작물
                            ● 제작툴 : 유니티 , 오큘러스 퀘스트 2
                            ● 제작 기간 : 5일
                            ● 장르 : vr 공포물
                            
                            
                            ▶ 대표 전화: 02-479-4050
                            
                            ▶ 온라인 문의
                            (홈페이지) http://www.kiweb.or.kr/
                            (카카오톡) http://pf.kakao.com/_nsNxkM</p>
                        <p class="crc_url">https://youtu.be/CPEDwnHaPQo</p>
                        <img src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fi.ytimg.com%2Fvi%2FCPEDwnHaPQo%2Fhqdefault.jpg&blockId=ab3a7607-4e7c-4d7f-a03d-7b8573fcd2c5&width=512" alt="vr 기기">
                        <div class="hov3"></div>
                    </div>
                </div>
                <p class="crc_title">커리큘럼</p>

            </div>
            <div class="main_4">
                <div>
                    <ol>
                        <li><span>지금 바로 지원하세요!
 당신의 미래는 토익점수와 공무원 시험이 아닌 아래의 커리큘럼 안에 있습니다.
</span></li>
                    </ol>
                </div>
                <img src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8542822c-19df-4642-827d-b4ade0231c66%2FUntitled.png&blockId=0bc2469c-2001-464b-ba96-a3ee3f1bfc3e" alt="커리큘럼 이미지">
            </div>
            <div class="main_5">
                <!
--u 태그: 텍스트에 밑줄을 그어준다.
-->
                <p class="main5_p1" onclick="location.href="https://kgaplan.oopy.io/5a26cdf2-631c-40ad-9d76-9296fc4c7a63"">⛓ <u>블록체인 기반 핀테크 및 응용 SW 개발자 양성과정블록체인 기반 핀테크 및 응용 SW 개발자 양성과정</u></p>
                <p class="main5_p2" onclick="location.href="https://kgaplan.oopy.io/e2fa58ed-7f7d-4484-87c2-fb2e1e75c780"">🌐 <u>무스펙 흙수저도 연봉 4천, 게임개발자가 될 수 있을까?</u></p>
                <div onclick="location.href="https://www.oopy.io/en?utm_source=oopy&utm_medium=footer&utm_campaign=temp&referrer=kgaplan.oopy.io"">
                    <span>Made with</span>
                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAzMSAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMTgzMzEgNS4yMzUzN0M0LjMxNDk5IDUuMjM1MzcgNS4yMjE2MSA0LjMwODIyIDUuMjIxNjEgMy4xMjkwOEM1LjIyMTYxIDIuMjQyNzIgNC42NTU3NyAxLjU4ODM2IDMuNzYyNzUgMS41ODgzNkMyLjY0NDY3IDEuNTg4MzYgMS43MjQ0NSAyLjUwODU4IDEuNzI0NDUgMy42ODc3MkMxLjcyNDQ1IDQuNTgxMDEgMi4yOTcyMiA1LjIzNTM3IDMuMTgzMzEgNS4yMzUzN1pNNC4wMTUgLTkuOTE4MjFlLTA1QzUuNzgwNTEgLTkuOTE4MjFlLTA1IDYuOTQ2MzIgMS4yNjExNyA2Ljk0NjMyIDIuOTMxMjJDNi45NDYzMiA1LjA5MjE4IDUuMTEyNTQgNi44MTY4OSAyLjkzMTA1IDYuODE2ODlDMS4xNzIyMSA2LjgxNjg5IDAgNS41NjI1NiAwIDMuODg1NTdDMCAxLjczMTI4IDEuODQwNDQgLTkuOTE4MjFlLTA1IDQuMDE1IC05LjkxODIxZS0wNVoiIGZpbGw9IiM2MTk2RkYiLz4KPHBhdGggZD0iTTEwLjg1OTEgNS4yMzUzN0MxMS45OTA4IDUuMjM1MzcgMTIuODk3NyA0LjMwODIyIDEyLjg5NzcgMy4xMjkwOEMxMi44OTc3IDIuMjQyNzIgMTIuMzMxNiAxLjU4ODM2IDExLjQzODYgMS41ODgzNkMxMC4zMjA1IDEuNTg4MzYgOS40MDAyOSAyLjUwODU4IDkuNDAwMjkgMy42ODc3MkM5LjQwMDI5IDQuNTgxMDEgOS45NzMwNiA1LjIzNTM3IDEwLjg1OTEgNS4yMzUzN1pNMTEuNjkwOCAtOS45MTgyMWUtMDVDMTMuNDU2NCAtOS45MTgyMWUtMDUgMTQuNjIyMiAxLjI2MTE3IDE0LjYyMjIgMi45MzEyMkMxNC42MjIyIDUuMDkyMTggMTIuNzg4NCA2LjgxNjg5IDEwLjYwNzIgNi44MTY4OUM4Ljg0ODMyIDYuODE2ODkgNy42NzU4NCA1LjU2MjU2IDcuNjc1ODQgMy44ODU1N0M3LjY3NTg0IDEuNzMxMjggOS41MTYyOCAtOS45MTgyMWUtMDUgMTEuNjkwOCAtOS45MTgyMWUtMDVaIiBmaWxsPSIjNjE5NkZGIi8+CjxwYXRoIGQ9Ik0xOC45MDMzIDUuMzg1QzIwLjAzNDcgNS4zODUgMjAuOTU1MiA0LjQ1Nzg0IDIwLjk1NTIgMy4yNzg3QzIwLjk1NTIgMi4zNzg3NSAyMC4zODk0IDEuNzAzODUgMTkuNDgyOCAxLjcwMzg1QzE4LjM1MTEgMS43MDM4NSAxNy40MTczIDIuNjcxOCAxNy40MTczIDMuODM3MzRDMTcuNDE3MyA0LjcyMzk2IDE4LjAwMzQgNS4zODUgMTguOTAzMyA1LjM4NVpNMjIuNjkzNSAzLjAxMjg1QzIyLjY5MzUgNS4yNjIzNCAyMS4wNDM4IDYuOTUyOTIgMTguOTk4NSA2Ljk1MjkyQzE4LjA1OCA2Ljk1MjkyIDE3LjM5NjcgNi42MjU0NyAxNy4wNDI0IDYuMTI3ODlMMTYuNTAzNyA5LjU0MzQ2SDE0Ljc5MjZMMTYuMjY1MSAwLjI3MjE4N0gxNy45MTQ4TDE3LjgxOTQgMS4wNjMwOEMxOC4zMzA4IDAuNTE3Nzc1IDE5LjA1MzIgMC4xMzU5MjcgMjAuMDc1OCAwLjEzNTkyN0MyMS42ODQ4IDAuMTM1OTI3IDIyLjY5MzUgMS4zMzU2IDIyLjY5MzUgMy4wMTI4NVoiIGZpbGw9IiMyNjI4MkQiLz4KPHBhdGggZD0iTTIzLjQwOTMgNC40MjM5NUwyNC4wNzAzIDAuMjcyNDI1SDI1Ljc4ODRMMjUuMjU2NyAzLjU5ODkyQzI1LjA3OTYgNC43NTc4IDI1LjM2NTcgNS4zNjQ0NCAyNi4yOTI2IDUuMzY0NDRDMjcuMjUzOSA1LjM2NDQ0IDI3LjgyNjQgNC43NTc4IDI4LjAxMDcgMy41OTg5MkwyOC41NDI0IDAuMjcyNDI1SDMwLjI1MzVMMjkuMjMwOSA2Ljc1NTNDMjguOTEwNiA4Ljc1MjUzIDI3LjA2MyA5LjY3OTY5IDI1LjA5OTkgOS42Nzk2OUMyNC4wNTAxIDkuNjc5NjkgMjMuMTc3NiA5LjQyNzcgMjIuNjUyNSA5LjEzNDM4TDIzLjA4ODggNy42MzQ3MkMyMy41Mzg2IDcuOTAwNTggMjQuNDExNCA4LjEyNTYzIDI1LjIyOTIgOC4xMjU2M0MyNi4yNzIzIDguMTI1NjMgMjcuMzU2MyA3LjcyOTkyIDI3LjUxOTggNi43MTQ1TDI3LjYwODUgNi4xNjIyNkMyNy4xOTk1IDYuNTcxMzEgMjYuNDc2OSA2Ljk4NzAyIDI1LjUyOTIgNi45ODcwMkMyNC4wNTcgNi45ODcwMiAyMy4xNjM3IDUuOTk4NTQgMjMuNDA5MyA0LjQyMzk1WiIgZmlsbD0iIzI2MjgyRCIvPgo8L3N2Zz4K" alt="oopy">
                </div>
            </div>

            
        </div>
        <button>1분 만에 쉽고 빠르게 상담신청!
</button>
    </div>
</body>
</html>

CSS

.all{
    position: relative;

    width: 100%;
    height: 100%;
}

.nav_top{
    position: fixed;

    top: 0;

    width: 100%;
    height: 50px;

    font-size: 15px;

    display: flex;

    align-items: center;

    z-index: 1;

    background-color: white;

}

.nav_top img{
    position: absolute;
    right: 165px;

    width: 20px;
    height: 20px;
}

.nav_top .nav_title{
    position: absolute;
    left: 10px;

    width: 290px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    cursor: pointer;

    padding: 4px;
}

.nav_top .search{
    position: absolute;
    right: 120px;

    padding: 4px;
    padding-left: 39px;

    cursor: pointer;
}

.nav_top .copy{
    position: absolute;
    right: 50px;

    padding: 4px;

    cursor: pointer;
}

.copy:hover{
    background-color: rgba(0, 0, 0, 0.1);

    border-radius: 5px;
}

.search:hover{
    background-color: rgba(0, 0, 0, 0.1);
    
    border-radius: 5px;
}

.nav_title:hover{
    background-color: rgba(0, 0, 0, 0.1);
    
    border-radius: 5px;
}

button{
    position: fixed;

    bottom: 15px;
    left: 50%;
    transform: translate(-50%);

    width: 700px;
    height: 55px;

    border-radius: 10px;
    background-color: rgb(45 115 155);
    color: white;

    font-size: 17px;
    font-weight: 700;

    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
}


.background{
    position: relative;

    width: 700px;
    height: 100%;

    top: 230px;
    left: 50%;
    transform: translate(-50%);
}

.title p{
    font-size: 85px;

    margin-bottom: 0px;
}

.title h1{
    font-size: 40px;
    max-width: 100%;
}

.main_1{
    width: 100%;
    height: 235px;

    border: 1px solid silver;
    border-top: none;
    border-left: none;
    border-right: none;

}

.main_1 p:first-child{
    background-color:rgb(247, 236, 233) ;
    font-size: 30px;
    font-weight: 600;
}

.main_1 p:last-child{
    background-color: rgb(242, 238, 238);
    font-size: 24px;
    font-weight: 600;

    
}

.sub p:first-child{
    width: 100%;

    font-size: 20px;
    font-weight: 600;
    background-color: rgb(246, 243, 248);
    margin-bottom: 10px;
}

.sub_image{
    width: 700px;
    height: auto;
}

.sub p:last-child{
    font-size: 14px;
    color: gray;

    margin-top: 5px;
    margin-bottom: 40px;
    
}

.content{
    width: 530px;
    margin-left: 11%;
    
}

.nfc{
    width: 600px;
    margin-left: 7%;
}

.why_kga{
    width: 100%;

    font-size: 23px;
    font-weight: 600;
    background-color: rgb(246, 243, 248);
    margin-bottom: 10px;
}

.main_2{
    width: 100%;
    height: 3171px;

    border: 1px solid silver;
    border-top: none;
    border-left: none;
    border-right: none;

}

.main_3{
    width: 100%;
    height: 1475px;

    border: 1px solid silver;
    border-top: none;
    border-left: none;
    border-right: none;
    line-height: 23px;

}

.main_4{

    width: 100%;
    height: 1763px;

}

.main_5{
    position: relative;

    width: 100%;
    height: 300px;

}

.why_1 h3{
    margin: 0;
    margin-left: 16px;
    margin-top: 30px;
} 
.why_2 h3{
    margin: 0;
    margin-left: 16px;
    margin-top: 30px;
} 
.why_3 h3{
    margin: 0;
    margin-left: 16px;
    margin-top: 30px;
} 
.why_4 h3{
    margin: 0;
    margin-left: 16px;
    margin-top: 30px;
} 

.red{
    background-color:rgb(226, 226, 226) ;
    color: red;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 15px;
    font-weight: 300;
}

.box_b{
    background-color:rgb(246, 243, 248) ;
    font-weight: 800;
}

.box{
    background-color:rgb(246, 243, 248) ;
}

.main_3 li{
    margin-bottom: 6px;
}

.curriculum{
    position: relative;

    width: 100%;
    height: 110px;
    border-radius: 10px;
    background-color:rgb(240, 240, 240);

    margin-top: 10px;
}

.curriculum p:first-child{
    position: absolute;

    top: 18px;
    left: 13px;
    
    margin: 0;
    font-size: 20px;
}

.curriculum p:last-child{
    position: absolute;

    top: 19px;
    left: 51px;

    width: 638px;
    height: 50px;

    margin: 0;

    letter-spacing: 1px;
}

.crc_ex1 {
    position: relative;

    width: 100%;
    height: 100px;

    border: 1px solid rgb(206, 206, 206);
    /*마우스 커서를 올렸을 때 포인터가 손가락으로 바뀜*/
    cursor: pointer;
}
.crc_ex2 {
    position: relative;

    width: 100%;
    height: 100px;

    border: 1px solid rgb(206, 206, 206);
    cursor: pointer;
}
.crc_ex3 {
    position: relative;

    width: 100%;
    height: 100px;

    border: 1px solid rgb(206, 206, 206);
    cursor: pointer;
}
.crc_ex4 {
    position: relative;

    width: 100%;
    height: 100px;

    border: 1px solid rgb(206, 206, 206);
    cursor: pointer;
}

.crc_ex1 p:first-child{
    margin: 0;
    margin-top: 10px;
    margin-left: 10px;
    width: 444px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.crc_ex2 p:first-child{
    margin: 0;
    margin-top: 10px;
    margin-left: 10px;
    width: 444px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.crc_ex3 p:first-child{
    margin: 0;
    margin-top: 10px;
    margin-left: 10px;
    width: 444px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.crc_ex4 p:first-child{
    margin: 0;
    margin-top: 10px;
    margin-left: 10px;
    width: 444px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.crc_subtext{
    font-size: 12px;

    color: gray;

    width: 444px;
    height: 35px;

    overflow: hidden;
    margin: 0;
    margin-left: 10px;

    line-height: 1.5;
}

.crc_url{
    font-size: 15px;
    margin: 0;
    margin-left: 10px;
    margin-top: 3px;

    font-size: 12px;
}

.crc_ex1 img{
    position: absolute;
    /*콘텐츠가 가로세로비를 유지하면서 요소의 콘텐츠 박스 내부에 들어가도록 맞춤조절
      크기 조절은 width, height로 한다.
*/
    object-fit: cover;
    
    width: 237px;
    height: 100px;

    right: 0;
    top: 0;
}
.crc_ex2 img{
    position: absolute;

    object-fit: cover;
    
    width: 237px;
    height: 100px;

    right: 0;
    top: 0;
}
.crc_ex3 img{
    position: absolute;

    object-fit: cover;
    
    width: 237px;
    height: 100px;

    right: 0;
    top: 0;
}
.crc_ex4 img{
    position: absolute;

    object-fit: cover;
    
    width: 237px;
    height: 100px;

    right: 0;
    top: 0;
}

.crc_ex1 .hov1{
    position: absolute;

    top: 0;

    width: 464px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.05);

    display: none;
}
.crc_ex2 .hov2{
    position: absolute;

    top: 0;

    width: 464px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.05);

    display: none;
}
.crc_ex3 .hov3{
    position: absolute;

    top: 0;

    width: 464px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.05);

    display: none;
}
.crc_ex4 .hov4{
    position: absolute;

    top: 0;

    width: 464px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.05);

    display: none;
}

.crc_ex1:hover .hov1 {
    display: block;
}
.crc_ex2:hover .hov2 {
    display: block;
}
.crc_ex3:hover .hov3 {
    display: block;
}
.crc_ex4:hover .hov4 {
    display: block;
}

.crc_title{
    width: 100%;

    font-size: 28px;
    font-weight: 600;
    background-color: rgb(249 232 242);
    height: 38px;
    line-height: 1.4;
    margin-bottom: 10px;

}
.main_4 div{

    top: 20px;

    width: 100%;
    height: 63px;

    border: 3px solid black;
    border-top: none;
    border-bottom: none;
    border-right: none;

    margin-top: 20px;
}

.main_4 ol{
    list-style: none;
    width: 640px;
}

.main_4 span{

    left: 20px;

    font-size: 21px;
    line-height: 40px;

    background-color: rgb(249 232 242);

    line-height: 1.6;
}

.main_4 img{

    width: 100%;
    margin-top: 20px;
}

.main5_p1{
    width: 670px;
    height: 30px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    margin-left: 10px;
    margin-bottom: 0;
    padding-top: 5px;

    cursor: pointer;

    font-size: 16px;
}

.main5_p2{
    width: 670px;
    height: 30px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    margin-left: 10px;
    margin-top: 5px;
    padding-top: 5px;

    cursor: pointer;

    font-size: 16px;
}



.main5_hov2 {
    position: absolute;

    top: 38px;
    left: 5px;
    
    width: 695px;
    height: 30px;

    background-color: rgba(0, 0, 0, 0.05);

    cursor: pointer;

    display: none;
}

.main5_p1:hover {
    background-color: rgba(0, 0, 0, 0.05);

}
.main5_p2:hover {
    background-color: rgba(0, 0, 0, 0.05);

}

.main_5 div{
    position: absolute;

    right: 40px;
    bottom: 120px;

    cursor: pointer;
}

.main_5 span{
    font-size: 12px;
}

'추천 관련글,