0811

벨로그용·2022년 8월 11일
0

ai스쿨

목록 보기
53/60

1)학습한 내용

*2페이지 완성

*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">
    <link rel="stylesheet" href="./2page.css">
    <link rel="stylesheet" href="../1page/magic.css">
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=aefe3289ad8055c77f85adc77808a661"></script>
    <title>회사소개</title>
</head>
<body>
    <!-- header -->
    <header class="header">

    <div class="navi">
        
        <a class="img_wrap" href="../index.html">
            <img src="../img/common/logo_resoft.png" alt="메인로고">
        </a>

        <div id="wrapper">
            <nav>                
                <ul id="wrap_text">
                    <li><a class="wrap_tx" href="./2page.html">회사소개</a>
                        <ul class="nvi close">
                            <li class="wrap_tx2"><a href="../2page/2page.html">회사소개</a></li>
                            <li><a href="./2page.html#resoft">Resoft소개</a></li>
                                <li><a href="./2page.html#yunhyuk">연혁</a></li>
                                <li><a href="./2page.html#section3">조직도</a></li>
                                <li><a href="./2page.html#section4">특허&인증</a></li>
                                <li><a href="./2page.html#section5">오시는 길</a></li>
                        </ul>
                    </li>
 
                    <li><a class="wrap_tx" href="../3page/3page.html">사업현황</a>
                        <ul class="nvi close">
                            <li class="wrap_tx2"><a href="../3page/3page.html">사업현황</a></li>
                            <li><a href="../3page/3page.html#section_ecoce">ECOCE</a></li>
                            <li><a href="../3page/3page.html#section_moado">MoaDo</a></li>
                            <li><a href="../3page/3page.html#section_etc">Etc</a></li>
                        </ul>
                    </li>

                    <li><a class="wrap_tx" href="../4page/4page.html">정보마당</a>
                        <ul class="nvi close">
                            <li class="wrap_tx2"><a href="../4page/4page.html">정보마당</a></li>
                            <li><a href="../4page/4page.html#resoft_news">Resoft소식</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="nvi close"></div>
        </div>
    </div>    
        <a class="btn">
            <img src="../img/icon/ic_menu_bk.png" alt="">
        </a>
       
            <div class="display">
                <img class="first on" src="../img/common/header_company.png">
                <h1>회사소개</h1>
            </div>
    </header>

    <!-- section1 -->
    <section id="resoft">
        <div class="re_text">
            <h1>REsoft 소개</h1><br>
            <h2>ABOUT US</h2>
        </div>

        <div class="re_text2">
            <div class="re_tx">
                <h1>회사명</h1><h2>(주)리소프트</h2>
            </div>
            <div class="re_tx2">
                <h1>설립일</h1><h2>2021년 5월 6일</h2>
            </div>
            <div class="re_tx3">
                <h1>대표이사</h1><h2>오유나</h2>
            </div>
            <div class="re_tx4">
                <h1>주요 사업</h1><h2>모바일 플랫폼 개발</h2>
            </div>
            <div class="re_tx5">
                <h1>본사</h1><h2>대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호</h2>
            </div>
            <div class="re_tx6">
                <h1>부설연구소</h1><h2>대구광역시 수성구 알파시티1로 160, SW융합테크비즈센터(Dnex) 305호</h2>
            </div>
            <div class="re_tx7">
                <h1>연락처</h1><h2>TEL. (053) 475-2110 / FAX. (0504) 257-5966 / E-mail. call@resoft.kr</h2>
            </div>
        </div>

    </section>
    

    <!-- section2 -->
    <section id="yunhyuk">
        <div class="yh_text">
            <h1>연혁</h1><br>
            <h2>HISTORY</h2>
        </div>
        
        <div class="yh">

            <div class="timeline">
                <div class="outer">

                    <div class="card">
                        <div class="info">
                            <h3 class="title">1</h3>
                            <h4 class="title2">2022</h4>
                          <p></p>
                        </div>
                      </div>

                      <div class="jul">
                  <div class="card">
                    <div class="info">
                        <h3 class="title">12</h3>
                        <h4 class="title3">2021</h4>
                      <p>대구여성인력개발센터 MOU 협약 (여성IT인재 현장실습)<br><br><br>
                         대구가톨릭대학교 계약학과 MOU 협약 (ICTAI융합학과)<br><br><br>
                        기업부설연구소(연구개발전담부서) 등록</p>
                    </div>
                  </div>
                

                  <div class="card">
                    <div class="info">
                        <h3 class="title">11</h3>
                      <p>제 38류, 제 45류 상표등록 출원 (Mmate : 제 40-1799224호, 제 40-1799225호)</p>
                    </div>
                  </div>

                  <div class="card">
                    <div class="info">
                        <h3 class="title">10</h3>
                      <p>서울특별시 송파구청 앱 개발 (제8회 한성백제마라톤 비대면 대회)<br><br><br>
                        대구광역시체육회 앱 개발 (2021 대구 마스크쓰햬 컬러풀 핫플 걷기)<br><br><br>
                        대구광역시 달서구체육회 앱 개발 (제15회 언택트 달서 하프마라톤 대회) </p>
                    </div>
                  </div>

                  <div class="card">
                    <div class="info">
                        <h3 class="title">9</h3>
                      <p>대구 경북지방중소벤처기업청 여성기업 등록</p>
                    </div>
                  </div>

                  <div class="card">
                    <div class="info">
                        <h3 class="title">8</h3>
                      <p>구미대학교 MOU 협약 (현장실습학기제)</p>
                    </div>
                </div>
                
                </div>
                </div>
                <div class="card1">
                    <div class="info1">
                        <h3 class="title4">5</h3>
                      <p>(주)리소프트 회사 설립</p>
                    </div>
                  </div>
              </div>
            </div>
        
    </section>

    <!-- section3 -->
    <section id="section3">
        <div class="zo_text">
            <h1>조직도</h1><br>
            <h2>ORGANIZATION</h2>
        </div>

        <div class="zozic">
            <h1 class="zo_tx rectangle">대표이사</h1>
                <ol class="zo_tx2">
                    <li>
                        <h2 class="zo_tx3 rectangle">전략기획부</h2>
                        <ol class="zo_tx4">
                            <li>    
                                <h3 class="zo_tx5">• 유저 Needs 분석 </h3><br><h3 class="zo_tx5">• 고객 수요 확인</h3><br><h3 class="zo_tx5"> • BM 설계/기획</h3> <br><h3 class="zo_tx5">• 사업화 전략 수립</h3> <br><h3 class="zo_tx5">• 사업계획서 작성</h3>
                            </li>
                        </ol>
                    </li>

                    <li>
                        <h2 class="zo_tx3 rectangle">개발부</h2>
                        <ol class="zo_tx4">
                            <li>    
                                <h3 class="zo_tx5">• DB 분석/설계</h3><br><h3 class="zo_tx5"> • Cloud 서버 관리</h3> <br><h3 class="zo_tx5">• 기능 정의</h3> <br><h3 class="zo_tx5">• 기능 구현</h3><br> <h3 class="zo_tx5">• 기능 테스트</h3>
                            </li>
                        </ol>
                    </li>
                    
                    <li>
                        <h2 class="zo_tx3 rectangle">디자인부</h2>
                        <ol class="zo_tx4">
                            <li>    
                                <h3 class="zo_tx5">• 디자인 트랜드 분석</h3><br><h3 class="zo_tx5"> • 브랜드 디자인</h3><br> <h3 class="zo_tx5">• 웹사이트 디자인</h3><br><h3 class="zo_tx5"> • 모바일 앱 디자인</h3><br><h3 class="zo_tx5"> • 상품개발 디자인</h3>
                            </li>
                        </ol>
                    </li>

                    <li>
                        <h2 class="zo_tx3 rectangle">마케팅부</h2>
                        <ol class="zo_tx4">
                            <li>    
                                <h3 class="zo_tx5">• 서비스 시장조사</h3><br><h3 class="zo_tx5">• 시장동향 분석</h3><br> <h3 class="zo_tx5">• 시장성 검증</h3><br> <h3 class="zo_tx5">• 온라인 채널 운영</h3><br><h3 class="zo_tx5"> • 오프라인 광고</h3>
                            </li>
                        </ol>
                    </li>

                    <li>
                        <h2 class="zo_tx3 rectangle">경영지원부</h2>
                        <ol class="zo_tx4">
                            <li>    
                                <h3 class="zo_tx5">• 경영 무 지원</h3><br> <h3 class="zo_tx5">• 업무 환경 지원</h3><br><h3 class="zo_tx5"> • 세무 업무 지원</h3>
                            </li>
                        </ol>
                    </li>
                </ol>
        </div>

    </section>

    <!-- section4 -->
    <section id="section4">
        <div class="pat_text">
            <h1>특허 & 인증</h1><br>
            <h2>CERTIFICATION & PATENT</h2>
        </div>

        <div class="pat_img">
            <div class="pat_img1"><img src="../img/2page/certificate2.jpg"></div>
            <div class="pat_img2"><img src="../img/2page/certificate.png"></div>
            <div class="pat_img3"><img src="../img/2page/certificate2.jpg"></div>
            <div class="pat_img4"><img src="../img/2page/certificate2.jpg"></div>
            <div class="pat_img5"><img src="../img/2page/certificate2.jpg"></div>
            <div class="pat_img6"><img src="../img/2page/certificate2.jpg"></div>
            <div class="pat_img7"><img src="../img/2page/certificate2.jpg"></div>
            <div class="pat_img8"><img src="../img/2page/certificate2.jpg"></div>
            <div class="pat_img9"><img src="../img/2page/certificate2.jpg"></div>

    </section>


<!-- section5 -->
    <section id="section5">

        <div class="map_text">
            <h1>오시는 길</h1><br>
            <h2>DIRECTIONS</h2>
        </div>

        <div id="map" style="width:80%;height:50%;top: 20%; left: 3%; z-index: 0;"></div>

        <div class="map_tx">
            <h3>연락처</h3> <h4>TELL. (053) 475-2110 FAX. (0504) 257-5966 E-MAIL. call@resoft.kr</h4>
        </div>
        <div class="map_tx2">
            <h3>주소</h3> <h4>(41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호 (주)리소프트</h4>
        </div>

    </div>

    </section>



<!-- footer -->
<footer id="footer">

    <div class="fot_img">
        <img src="../img/common/logo_resoft.png">
    </div>


    <div class="fot_text1">
        <h1>© RESOFT CO.LTD. All Rights Reserved.</h1>
    </div>

    <div class="fot_text2">
        <h1>상호 : (주)리소프트<br><br> 사업자등록번호 : 722-81-02219 <br><br>주소 : (41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호 (신천동 106)</h1>
        <h2>대표이사 : 오유나 개인정보책임자 : 이현지<br><br>전화 : (053) 475-2110 팩스 : (0504) 257-5966 이메일 : call@resoft.kr</h2>
    </div>


</footer>

    
    <script>
        // 네비게이션바 추가메뉴
        $(document).ready(function(){
            const $nvi = $('.nvi');
            const $btn = $('.btn');
            $btn .click(function () {
                if($nvi.hasClass('more'))
                    $nvi.addClass('magictime tinUpOut');
                else if($nvi.hasClass('close'))
                    $nvi.removeClass('magictime tinUpOut');
                });
            $btn .click(function(){
                if($nvi.hasClass('close')){
                    $nvi.addClass('magictime tinUpIn');
                    $nvi.addClass('more').removeClass('close');
                }else if($nvi.hasClass('more')){
                    setTimeout(function() { $nvi.addClass('close').removeClass('more');}, 1000);
                }
            });
            //  조직도 클릭시 애니메이션
            $( '.zo_text' ).click( function() {
                $( '.zozic' ).fadeToggle();
            })
        });
    //  카카오 맵 API 
        // 카카오 지도 api
        const container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
        const options = { //지도를 생성할 때 필요한 기본 옵션
            center: new kakao.maps.LatLng(35.871691843254716, 128.62496478375644), //지도의 중심좌표.
            level: 3 //지도의 레벨(확대, 축소 정도)
        };
        const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
        // 마커가 표시될 위치입니다 
        const markerPosition = new kakao.maps.LatLng(35.871691843254716, 128.62496478375644);// 마커가 표시될 위치입니다
        const imageSrc = '../img/2page/marker.png', // 마커이미지의 주소입니다    
            imageSize = new kakao.maps.Size(220, 45), // 마커이미지의 크기입니다
            imageOption = {
                offset: new kakao.maps.Point(27, 69)
            }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
        // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
        const markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
        // 마커를 생성합니다
        const marker = new kakao.maps.Marker({
            position: markerPosition,
            image: markerImage
        });
        // 마커가 지도 위에 표시되도록 설정합니다
        marker.setMap(map); 
  </script>
</body>
</html>

*css 작성

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

* {
    box-sizing: border-box;
    text-decoration: none;
}


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, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, 
output, ruby, section, summary, time, mark, audio, video {
    margin: 0 auto;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

div {
    display: block;
}

body {
    width: 100%;
    max-width: 100%;
    line-height: 1;
    font-family: 'Noto Sans KR', sans-serif;
}

/* header */
.header{
    width: 100%;
    position: relative;
}
.navi{
    position: fixed;
    background-color: #FFFFFF;
    z-index: 1;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid black;
}
#wrap_text {
    position: fixed;
    text-align: end;
    right: 21%;
    font-weight: 700;
}
#wrap_text a:hover{
    color: #184B9F;
}
.wrap_tx::after {
    position: absolute; 
    content:""; 
    display: block; 
    border-bottom: 6px solid #184B9F;
    border-radius: 50px; 
    transition: width 500ms ease-in-out; 
    bottom: 15%;
    left: 22%; 
    width: 0;
}
.wrap_tx:hover::after {
    width: 57%;
}


#wrapper {
    position: relative;
    left: 0;
    top: 0;
    padding: 10px 232px 5px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid white;
    z-index: 10;
    background-color: #FFFFFF;
    
}

.btn{
    cursor: pointer;
}
header #wrapper nav > ul > li > a {
    display: block;
    position: relative;
    width: 130px;
    height: 70px;
    font-size: 20px;
    color: black;
    line-height: 63px;
    top: 0px;
    z-index: 10;
    text-align: center;
    
}

#wrapper > nav + div {
    position: absolute;
    left: 0;
    top: 81px;
    width: 100%;
    height: 200px;
    background: rgba(24, 75, 159, .7);
    transition: all 0.5s;
    z-index: -1;
}

header #wrapper nav > ul >li {
    display: inline-block;
    position: relative;
}

header #wrapper nav > ul ul li {
    line-height: 25px;
    padding-left: 0px;
    width: 101px;
}

header #wrapper nav > ul ul a {
    font-size: 20px;
    color: white;
    z-index: 10;
}

header #wrapper nav > ul ul {
    padding-top: 15px;
    position: absolute;
    width: 100%;
    text-align: left;
    height: 230px;
    transition: all 0.5s;
    padding-left: 26px;
}
header #wrapper nav > ul ul>.wrap_tx2 a{
    font-size: 20px;
    color: #ffffff;
}
header #wrapper nav > ul ul> .wrap_tx2 {
    line-height:25px ;
    padding-bottom: 15px;
}
.wrap_tx2 {
    opacity: 0;
    display: none;
}
.img_wrap img{
    position: fixed;
    width: 133px;
    height: 30px;
}

header >a {
    position: fixed;
    display: flex;
    right: 15%;
    top: 25px;
    width: 50px;
    z-index: 100;
}
.wrap_tx{
    position: absolute;
}
header .img_wrap {
    position: absolute;
    left: 30px;
    top: 25px;
    z-index: 100;
    margin-left: 17.5%;
    height: 30px;
}

header .display img{
    margin-top: 80px;
    width: 100%;
    height: 300px;
    filter: opacity(0.8) drop-shadow(0 0 0 rgb(0, 0, 0));
    position: relative;
}
.display h1{
    position: absolute;
    font-size: 40px;
    color: #FFFFFF;
    left:45%;
    top: 50%;
}

.close{
    opacity: 0; 
    display: none;
}
.more{
    opacity: 1;
}


/* section1 */
#resoft{
    position: relative;
    width: 100%;
    height: 856px;
}
.re_text{
    position: absolute;
    left: 15%;
    top: 13%;
}
.re_text h1{
    font-size: 40px;
}
.re_text h2{
    font-size: 18px;
    color: #C8C8C8;
}
.re_text2{
    position: absolute;
    width: 100%;
    height: 500px;
    top: 30%;
}

.re_text2 h1{
    font-size: 24px;
}
.re_text2 h2{
    font-size: 20px;
    color: #959595;
}

.re_tx,.re_tx2,.re_tx3,.re_tx4,.re_tx5,.re_tx6,.re_tx7{
    display: flex;
    border-top: 2px solid #C8C8C8;
    margin: 0 10% 0 15%;
    padding: 22px;
    left: 10%;
}
.re_tx h1,.re_tx2 h1,.re_tx3 h1,.re_tx4 h1,.re_tx5 h1,.re_tx6 h1,.re_tx7 h1{
    margin: 0;
    width: 230px;
}
.re_tx7{
    border-bottom: 2px solid #C8C8C8;
}
.re_tx h2{margin: 0;}
.re_tx2 h2{margin:0;}
.re_tx3 h2{margin: 0;}
.re_tx4 h2{margin: 0;}
.re_tx5 h2{margin: 0;}
.re_tx6 h2{margin: 0;}
.re_tx7 h2{margin: 0;}

/* section2 */
#yunhyuk{
    width: 100%;
    height: 1314px;
    position: relative;
    background-color: #F9F9F9;
}

.yh_text{
    position: absolute;
    left: 13%;
    top: 10%;
}
.yh_text h1{
    font-size: 40px;
}
.yh_text h2{
    font-size: 18px;
    color: #C8C8C8;
}


.yh{
    display: flex;
  justify-content: center;
}

.timeline {
    position: absolute;
    margin: 20px auto;
    padding: 20px;
    top: 20%;
    left: 50%;
    width: 25%;
}
.outer {
    border-left: 6px solid #C8C8C8;
}
.card {
    position: relative;
    margin: 0 0 20px 20px;
    color: #1E1E1E;
    font-weight:bold;
}
.jul{
    position: relative;
    border-top: 1px solid #C8C8C8;
    padding-top: 40px;
    width: 230%;
    padding-left: 90%;
    left: -90%;

}
.info >p{   
    font-size: 20px;
    padding: 20px 0 55px 0;
}
.info1 >p{   
    font-size: 20px;
}
.title {
    color: #184B9F;
    position: absolute;
    left: -110px;
    font-size: 32px;
    top: -12px;
}
.title::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #184B9F;
    border-radius: 999px;
    left:79px;
    top: 11px;
    border: 3px solid #184B9F;
}
.title2{
    position: absolute;
    font-size: 50px;
    color: #000000;
    left: -100%;
    top: -5%;
}
.title3{
    position: absolute;
    font-size: 50px;
    color: #000000;
    left: -70.5%;
    top: -5%;
}
.card1 {
    position: relative;
    margin: 0 0 20px 20px;
    color: #1E1E1E;
    font-weight:bold;
}
.title4 {
    color: #184B9F;
    position: absolute;
    left: -104px;
    font-size: 32px;
    top: -24px;
}
.title4::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #184B9F;
    border-radius: 999px;
    left:79px;
    top: 4px;
    border: 3px solid #184B9F;
}

/* section3 */
#section3{
    position: relative;
    width: 100%;
    height: 906px;
}

.zo_text{
    position: absolute;
    left: 13%;
    top: 10%;
    cursor: pointer;
}

.zo_text h1{
    font-size: 40px;
}
.zo_text h2{
    font-size: 18px;
    color: #C8C8C8;
}



.zozic {
    top: 24%;
    max-width: 80%;
    padding: 0 10px;
    margin: 0 auto;
    position: relative;
  }
.zozic h1{
    color: #FFFFFF;
    font-size: 26px;
    padding: 30px;
}
.zozic h2{
    font-size: 26px;
    padding: 30px;
}
.zozic h3{
    font-size: 26px;
}


.rectangle {
    position: relative;
    padding: 20px;
  }

.zo_tx {
    text-align: center;
    width: 15%;
    margin: 0 auto 40px;
    background: #184B9F;
    border-radius: 20px;
    min-width: 177px;
}
.zo_tx::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 49.7%;
    transform: translateX(-50%);
    width: 2px;
    height: 70px;
    background: #9E9E9E;
  }

.zo_tx2 {
    position: relative;
    display: flex;
}
.zo_tx2::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 9.4%;
    width: 80.5%;
    height: 2px;
    background: #9E9E9E;
}
.zo_tx2::after {
    display: none;
    content: "";
    position: absolute;
    left: -20px;
    bottom: -20px;
    width: calc(100% + 20px);
    height: 2px;
    background: #9E9E9E;
}
.zo_tx2 li {
    position: relative;
}
.zo_tx2 > li::before {
    content: "";
    position: absolute;
    bottom: 72%;
    left: 45.2%;
    transform: translateX(-50%);
    width: 2px;
    height: 70px;
    background: #9E9E9E;
}
.zo_tx3 {
    text-align: center;
    width: 102%;
    top: 28%;
    left: -5%;
    margin: 0 auto 70px;
    border-radius: 20px;
    border: 3px solid #184B9F;
}
.zo_tx4 {
    position: relative;
    top: 25%;
    margin: 0 auto;
  }

 
.zo_tx5{
    text-align: left;
}

/* section4 */
#section4{
    position: relative;
    width: 100%;
    height: 1454px;
    background-color: #F9F9F9;
}
.pat_text{
    position: absolute;
    left: 13%;
    top: 10%;
}

.pat_text h1{
    font-size: 40px;
}
.pat_text h2{
    font-size: 18px;
    color: #C8C8C8;
}

.pat_img{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    left: 8%;
    top: 20%;
    width: calc(100%/1.5);
    height: 1150px;
}
.pat_img1{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 10%;
    top: 0;
}
.pat_img1 img{
    max-width: initial;
    margin-left: 0%;
    margin-top: -9px;
    width: 220px;
}
.pat_img2{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 40%;
    top: 0;
}
.pat_img2 img{
    max-width: initial;
    margin-left: -44%;
    margin-top: -43px;
}
.pat_img3{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 70%;
    top: 0;
}
.pat_img3 img{
    max-width: initial;
    margin-left: 0%;
    margin-top: -9px;
    width: 220px;
}
.pat_img4{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 10%;
    top: 35%;
}
.pat_img4 img{
    max-width: initial;
    margin-left: 0%;
    margin-top: -9px;
    width: 220px;
}
.pat_img5{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 40%;
    top: 35%;
}
.pat_img5 img{
    max-width: initial;
    margin-left: 0%;
    margin-top: -9px;
    width: 220px;
}
.pat_img6{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 70%;
    top: 35%;
}
.pat_img6 img{
    max-width: initial;
    margin-left: 0%;
    margin-top: -9px;
    width: 220px;
}
.pat_img7{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 10%;
    top: 70%;
}
.pat_img7 img{
    max-width: initial;
    margin-left: 0%;
    margin-top: -9px;
    width: 220px;
}
.pat_img8{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 40%;
    top: 70%;
}
.pat_img8 img{
    max-width: initial;
    margin-left: 0%;
    margin-top: -9px;
    width: 220px;
}
.pat_img9{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 70%;
    top: 70%;
}
.pat_img9 img{
    max-width: initial;
    margin-left: 0%;
    margin-top: -9px;
    width: 220px;
}

/* section5 */
.map_tx{
    position: absolute;
    display: flex;
    left: 13%;
    top: 73%;
    width: 80%;
    border-bottom: 2px solid #C8C8C8;
}
.map_tx h3{
    font-size: 24px;
    margin: 20px 10% 45px 21%;
}
.map_tx h4{
    font-size: 20px;
    color: #959595;
    margin: 20px 0 45px 0;
}

.map_tx2{
    position: absolute;
    display: flex;
    left: 13%;
    top: 82%;
    width: 80%;
    border-bottom: 5px solid #C8C8C8;
}
.map_tx2 h3{
    font-size: 24px;
    margin: 20px 10% 65px 21.5%;
}
.map_tx2 h4{
    font-size: 20px;
    color: #959595;
    margin: 20px 0px 65px 10px;
}

#section5{
    position: relative;
    width: 100%;
    height: 1344px;
}
.map_text{
    position: absolute;
    left: 13%;
    top: 10%;
}

.map_text h1{
    font-size: 40px;
}
.map_text h2{
    font-size: 18px;
    color: #C8C8C8;
}


/* footer */
#footer{
    width: 100%;
    height: 250px;
    background-color: #E9E9E9;
    position: relative;
}

.fot_img{
    top: 50px;
    left: 240px;
    width: 200px;
    height: 45px;
    position: absolute;
}

.fot_text1{
    color: #9E9E9E;
    font-size: 16px;
    position: absolute;
    text-align: left;
    top: 71px;
    left: 460px;

}
.fot_text1 h1{
    font-weight: 300;
}

.fot_text2 h1{
    color: #9E9E9E;
    font-size: 16px;
    position: absolute;
    text-align: left;
    top: 125px;
    left: 240px;
    font-weight: 300;
}
.fot_text2 h2{
    color: #9E9E9E;
    font-size: 16px;
    position: absolute;
    text-align: left;
    top: 125px;
    left: 1000px;
    font-weight: 300;
}

@media screen and (max-width: 1280px){
    /* header */
    #wrapper{
        padding: 10px 232px 5px;
    }
    .img_wrap img{
        right: 75%;
    }
    .display h1{
        left: 43%;
    }

    /* section1 */
    .re_text{
        left: 10%;
    }
    .re_tx, .re_tx2, .re_tx3, .re_tx4, .re_tx5, .re_tx6, .re_tx7{
        margin: 0 10% 0 10%;
    }
    .re_tx h1, .re_tx2 h1, .re_tx3 h1, .re_tx4 h1, .re_tx5 h1, .re_tx6 h1, .re_tx7 h1{
        width: 215px;
    }

    /* section2 */
    .yh_text{
        left: 11%;
        top: 8%;
    }
    .jul{
        left: -188%;
        width: 390%;
        padding-left: 188%;
    }

    .title2{
        left: -209%;
    }
    .title3{
        left: -99.5%;
    }

    /* section3 */
    #section3{
        height: 1500px;
    }
    .zozic{
        top: 16%;
        max-width: 613px;
    }
    .zo_text{
        left: 11%;
        top: 8%;
    }

    .zo_tx{
        width: 36%;
    }
    .zo_tx2{
        flex-wrap: wrap;
        left: 12%;
    }
    .zo_tx2 li{
        margin: 0px auto 25px 0;
    }
    .zo_tx2::before{
        left: 15.2%;
        width: 50.4%;
    }
    .zo_tx2 > li::before{
        bottom: 72%;
    }
    .zo_tx3{
        margin: 0px auto 44px;
        top: 28%;
    }
    .zo_tx2 > li:nth-child(3)::before{
        background: transparent;
    }
    .zo_tx2 > li:nth-child(4)::before{
        background: transparent;
    }
    .zo_tx2 > li:nth-child(5)::before{
        background: transparent;
    }
    

    /* section4 */
    .pat_text{
        left: 11%;
        top: 8%;    
    }
    .pat_img{
        width: 95%;
        left: -1%;
    }

    /* section5 */
    .map_tx h3{
        margin: 20px 10% 45px 7%;
    }
    .map_tx2 h3{
        margin: 20px 10% 65px 8%;
    }

    /* footer */
    .fot_img{
        top: 20%;
        left: 5%;
    }
    .fot_text1{
        top: 28%;
        left: 300px;
    }
    .fot_text2 h1{
        top: 45%;
        left: 5%;
    }
    .fot_text2 h2{
        top: 45%;
        left: 58%;
    }
}

@media screen and (max-width: 768px){
    /* header */
    header #wrapper nav > ul ul {
        padding-left: 0;
        left: -16%;
    }
    .img_wrap img {
        left: 5%;
        margin: 0;
    }
    .display h1 {
        left: 40%;
    }
    header #wrapper nav > ul > li > a{
        width: 130px;
        visibility: hidden;
    }
    .wrap_tx2{
        opacity: 1;
        display: block;
    }
    header >a{
        right: 3%;
    }
    header #wrapper nav > ul ul>.wrap_tx2::after{
        position: absolute; 
        content:""; 
        display: block; 
        border-bottom: 1px solid #FFFFFF;
        width: 1000%;
        left: -341%;
        bottom: 78%;
    }

    /* section1 */
    .re_text {
        left: 4%;
    }
    .re_tx, .re_tx2, .re_tx3, .re_tx4, .re_tx5, .re_tx6, .re_tx7{
        margin: 0px 4% 0 4%;
    }
    .re_tx5 h2 {
        width:63% ;
    }
    .re_tx6 h2 {
        width: 67%;
    }
    .re_tx7 h2 {
        width: 67%;
    }



    /* section2 */
    #yunhyuk{
        height:1494px ;
    }
    .yh_text{
        left: 4%;
    }
    .jul {
        left: -254%;
        width: 457%;
        padding-left: 254%;
    }
    .title2 {
        left: -307%;
    }
    .title3 {
        left: -139.5%;
    }

    /* section3 */
    .zo_text {
        left: 4%;
    }
    .zo_tx2{
        left: 9%;
    }
    
    .zo_tx2 li{
        margin: 0px auto 25px 0;
    }
    
    
    /* section4 */
    #section4{
        height: 2400px;
    }
    .pat_text {
        left: 4%;
    }
    .pat_img {
        width: 100%;
        left: -1%;
        top: 14%;
    }
    .pat_img1{
        top: 0;
        left: 16%;
    }
    .pat_img2{
        top: 0;
        left: 57%;
    }
    .pat_img3{
        top: 35%;
        left: 16%;
    }
    .pat_img4{
        top: 35%;
        left: 57%;
    }
    .pat_img5{
        top: 70%;
        left: 16%;
    }
    .pat_img6{
        top: 70%;
        left: 57%;
    }
    .pat_img7{
        top: 107%;
        left: 16%;
    }
    .pat_img8{
        top: 107%;
        left: 57%;
    }
    .pat_img9{
        top: 144%;
        left: 16%;
    }
    /* section5 */
    .map_tx h3 {
        margin: 20px 4% 45px 3%;
        width: 85px;
    }
    .map_tx2 h3 {
        margin: 20px 4% 65px 4%;
        width: 69px;
    }

    /* footer */
    #footer{
        height: 331px;
    }
    .fot_img {
        top: 15%;
        left: 5%;
    }
    .fot_text1 {
        left: 260px;
        top: 20%;
    }
    .fot_text2 h1 {
        top: 38%;
        left: 5%;
    }
    .fot_text2 h2 {
        top: 75%;
        left: 5%;
    }
}
@media screen and (max-width: 685px){
    .zozic h1{
        padding: 25px;
        font-size: 20px;
        left: -2%;
    }
    .zo_tx{
        min-width: 120px;
        width: 30%;
    }
    .zo_tx2 {
        width: 76%;
        left: 6%;
        min-width: 314px;
    }
    .zozic h2{
        font-size: 20px;
        padding: 21px;
    }
    .zozic h3{
        font-size: 20px;
    }
    .zo_tx::before{
        height: 50px;
    }
    .zo_tx2::before{
        top: 9px;
    }
    .zo_tx2 > li::before{
        height: 50px;
        bottom: 79%;
    }
    .zo_tx3 {
        margin: 0px auto 25px;
        top: 21%
    }
}
@media screen and (max-width: 610px){
    /* 연혁 */
    #yunhyuk {
        height: 1600px;
    }
    .timeline{
        top:13%;
        left: 48%;
        width: 26%;
        min-width: 135px;
    }
    .jul{
        padding-top: 77px;
    }
    .title{
        font-size: 20px;
        top: 0px;
    }
    .title::after{
        top: -4px;
    }
    .title2{
        font-size: 28px;
        left: -318%;
    }
    .title3{
        font-size: 28px;
    }
    .info >p{
        font-size: 15px;
    }
    .title4{
        font-size: 20px;
    }
    .info1 >p{
        font-size: 15px;
    }

    /* 조직도 */
    .zozic h1{
        padding: 25px;
        font-size: 13px;
        left: -2%;
    }
    .zo_tx{
        min-width: 140px;
    }
    .zo_tx2 {
        width: 50%;
        left: 4%;
        min-width: 314px;
    }
    .zozic h2{
        font-size: 13px;
        padding: 21px;
    }
    .zozic h3{
        font-size: 13px;
    }
    .zo_tx::before{
        height: 50px;
    }
    .zo_tx2::before{
        top: 9px;
    }
    .zo_tx2 > li::before{
        height: 50px;
        bottom: 75%;
    }
    .zo_tx3 {
        margin: 0px auto 25px;
        top: 25%;
    }
}
@media screen and (max-width: 532px){
    #wrap_text{    
        right: 0%;
        }
}
@media screen and (max-width: 516px){
    .pat_img1{
        left: 4%;
    }
    .pat_img2{
        left: 51%;
    }
    .pat_img3{
        left: 4%;
    }
    .pat_img4{
        left: 51%;
    }
    .pat_img5{
        left: 4%;
    }
    .pat_img6{
        left: 51%;
    }
    .pat_img7{
        left: 4%;
    }
    .pat_img8{
        left: 51%;
    }
    .pat_img9{
        left: 4%;
    }

}
@media screen and (max-width: 482px){
    #resoft{
        height: 1000px;
    }
}

@media screen and (max-width: 430px){
    /* HEADER */
    header #wrapper nav > ul ul {
        padding-top: 0;
    }
    header #wrapper nav > ul ul>.wrap_tx2 a {
        font-size: 20px;
    }
    #wrapper > nav + div {
        height: 190px;
        top: 78px;
    }
    header #wrapper nav > ul ul a{
        font-size: 12px;
    }
    header #wrapper nav > ul > li > a{
        font-size: 15px;
        width: 80px;
    }
    .display h1{
        font-size: 30px;
        left: 36%;
    }
    header #wrapper nav > ul ul>.wrap_tx2::after{
        bottom: 84%;
    }
    #wrap_text {
        right: 10%;
    }

    /* section1 */
    #resoft{
        height: 700px;
    }
    .re_text h1{
        font-size: 20px;
    }
    .re_text h2{
        font-size: 9px;
    }
    .re_tx h1, .re_tx2 h1, .re_tx3 h1, .re_tx4 h1, .re_tx5 h1, .re_tx6 h1, .re_tx7 h1{
        font-size: 14px;
        width: 114px;
    }
    .re_text2 h2{
        font-size: 10px;
    }
    .re_text2{
        top: 24%;
    }

    /* section2 */
    #yunhyuk {
        height: 1200px;
    }
    .yh_text{
        top: 4%;
    }
    .yh_text h1{
        font-size: 20px;
    }
    .yh_text h2{
        font-size: 9px;
    }
    .timeline{
        top: 9%;
        left: 48%;
        width: 32%;
        min-width: 120px;
    }
    .jul{
        padding-top: 77px;
    }
    .title{
        font-size: 16px;
        top: 0px;
    }
    .title::after{
        top: -4px;
    }
    .title2{
        font-size: 25px;
        left: -325%;
    }
    .title3{
        font-size: 25px;
    }
    .info >p{
        font-size: 11px;
    }
    .title4{
        font-size: 16px;
    }
    .info1 >p{
        font-size: 11px;
    }

    /* section3 */
    #section3 {
        height: 1100px;
    }
    .zo_text {
        top: 4%;
    }
    .zo_text h1 {
        font-size: 20px;
    }
    .zo_text h2 {
        font-size: 9px;
    }
    .zozic {
        top: 10%;
    }
    .zozic h1{
        padding: 25px;
        font-size: 13px;
        left: -2%;
    }
    .zo_tx{
        min-width: 140px;
    }
    .zo_tx2 {
        width: 76%;
        left: 6%;
        min-width: 314px;
    }
    .zozic h2{
        font-size: 13px;
        padding: 21px;
    }
    .zozic h3{
        font-size: 13px;
    }
    .zo_tx::before{
        height: 50px;
    }
    .zo_tx2::before{
        top: 9px;
    }
    .zo_tx2 > li::before{
        height: 50px;
        bottom: 75%;
    }
    .zo_tx3 {
        margin: 0px auto 25px;
        top: 25%;
    }
    /* section4 */
    #section4 {
        height: 1863px;
    }
    .pat_text{
        top: 4%;
    }
    .pat_text h1 {
        font-size: 20px;
    }
    .pat_text h2 {
        font-size: 9px;
    }
    .pat_img{
        top: 9%;
    }
    .pat_img1{
        max-width: 150px;
        max-height: 220px;
        left: 5%;

    }
    .pat_img1 img{
        width: 152px;
    }
    .pat_img2{
        max-width: 150px;
        max-height: 220px;
    }
    .pat_img2 img{
        width: 275px;
        margin-left: -41%;
        margin-top: -30px;
    }
    .pat_img3{
        max-width: 150px;
        max-height: 220px;
        top: 29%;
        left: 5%;
    }
    .pat_img3 img{
        width: 152px;
    }
    .pat_img4{
        max-width: 150px;
        max-height: 220px;
        top: 29%
    }
    .pat_img4 img{
        width: 152px;
    }
    .pat_img5{
        max-width: 150px;
        max-height: 220px;
        top: 59%;
        left: 5%;
    }
    .pat_img5 img{
        width: 152px;
    }
    .pat_img6{
        max-width: 150px;
        max-height: 220px;
        top: 59%;
    }
    .pat_img6 img{
        width: 152px;
    }
    .pat_img7{
        max-width: 150px;
        max-height: 220px;
        top: 90%;
        left: 5%;
    }
    .pat_img7 img{
        width: 152px;
    }
    .pat_img8{
        max-width: 150px;
        max-height: 220px;
        top: 90%;
    }
    .pat_img8 img{
        width: 152px;
    }
    .pat_img9{
        max-width: 150px;
        max-height: 220px;
        top: 119%;
        left: 5%;
    }
    .pat_img9 img{
        width: 152px;
    }


    /* section5 */
    #section5 {
        height: 800px;
    }
    .map_text{
        top: 4%;
    }
    .map_text h1 {
        font-size: 20px;
    }
    .map_text h2 {
        font-size: 9px;
    }
    .map_tx h3{
        font-size: 12px;
    }
    .map_tx h4{
        font-size: 10px;
    }
    .map_tx2 h3{
        font-size: 12px;
        margin: 20px 4% 40px 4%;
    }
    .map_tx2 h4{
        font-size: 10px;
        margin: 20px 0px 40px 10px;
    }

    /* footer */
    .fot_img {
        top: 9%;
        left: 5%;
    }
    .fot_img img{
        width: 150px;
    }
    .fot_text1 {
        left: 5%;
        top: 25%;
        font-size: 11px;
    }
    .fot_text2 h1 {
        top: 41%;
        left: 5%;
        font-size: 11px;

    }
    .fot_text2 h2 {
        top: 70%;
        left: 5%;
        font-size: 11px;
    }
}

2)학습내용 중 어려웠던점

X

3)해결방법

X

4)학습소감

1달동안 1,2페이지파트를 하면서 모르는것도 찾아보면서 해결하고 많은것을 공부하게 된 계기인거 같다.

profile
안녕하세요

0개의 댓글