Hynix Site

사이트 만들기



<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>SK 하이닉스</title>

    <!--style-->
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/font-awesome.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <link href="assets/css/owl.theme.css" rel="stylesheet">


    <!--web font-->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700,900" rel="stylesheet">

    <style> 
        #owl-demo .item img{
   display: block;
    width: 100%;
   height: auto;
}

    </style>
</head>

<body>
    <div id="wrap">
        <div id="header">
            <div class="container">
                <div class="header">
                    <h1><img src="assets/img/logo.png" alt="하이닉스"></h1>
                    <div class="nav">
                        <ul>
                            <li><a href="#">About us</a></li>
                            <li><a href="#">Product</a></li>
                            <li><a href="#">IR</a></li>
                            <li><a href="#">CSR</a></li>
                            <li><a href="#">PR</a></li>
                            <li><a href="#">SUPPORT</a></li>
                        </ul>

                    </div>
                    <div class="nav_icon">
                        <ul>
                            <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i>
                                <span>search</span>
                                </a></li>
                            <li><a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>
                                <span>careers</span>
                                </a></li>
                            <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i>
                                <span>language</span>
                                </a></li>
                        </ul>

                    </div>
                </div>

            </div>
        </div>
        <!-- //header -->

            <div id="banner">
                    <div id="owl-demo" class="owl-carousel owl-theme">

                        <div class="item">
                        <img src="assets/img/main_slide01.jpg" alt="The Last of us">
                        <h2>Smart solutions,<br>Happy life</h2>
                        <p>스마트한 IT 세상을 위한 열정과 도전,<br>행복을 마주하는 순간과 함께합니다.</p>
                        </div>
                        <div class="item">
                        <img src="assets/img/main_slide02.jpg" alt="GTA V">
                        <h2>Happy memory,<br>Share happiness</h2>
                        <p>행복한 기억을 나누는 기업,<br>더 나은 내일을 꿈꿉니다.</p>
                        </div>
                        <div class="item">
                        <img src="assets/img/main_slide03.jpg" alt="Mirror Edge">
                        <h2>Growing together<br> for better tomorrow</h2>
                        <p>최고의 메모리 기반 반도체 Solution Company로 도약하겠습니다.</p>
                        </div>

            </div>

            <!-- <div class="banner">
                <img src="assets/img/main_slide01.jpg" alt="하이닉스">
            </div> -->
            <div class="banner_icon">
                <div class="container">
                    <ul>
                        <li><a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i><span>보도자료</span></a></li>
                        <li><a href="#"><i class="fa fa-users" aria-hidden="true"></i><span>인재채용</span></a></li>
                        <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i><span>블로그</span></a></li>
                        <li>
                            <a href="#"> <i class="fa fa-facebook" aria-hidden="true"></i><span>페이스북</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- //banner -->

        <div id="contents">
            <div id="contents1">
                <div class="container">
                    <div class="investor">
                        <h2>Investor Relations</h2>
                        <p>단기적인 경영성과에 집착하기 보다 장기적인 질적 성장을 우선 시 하는 내실경영에 최선을 다 하겠습니다.</p>
                        <div class="investor_box">
                            <div class="ileft">
                                <img src="assets/img/data.png" alt="데이터">
                            </div>
                            <div class="iright">
                                <ul>
                                    <li><a href=""><i class="fa fa-clock-o" aria-hidden="true"></i>
                                        <span>재무제표</span></a></li>
                                    <li><a href=""><i class="fa fa-calendar" aria-hidden="true"></i>
                                        <span>IR일정</span></a></li>
                                    <li><a href=""><i class="fa fa-bell-o" aria-hidden="true"></i>
                                        <span>주가알람</span></a></li>
                                    <li><a href=""><i class="fa fa-signal" aria-hidden="true"></i>
                                        <span>IR 자료요청</span></a></li>
                                    <li><a href=""><i class="fa fa-line-chart" aria-hidden="true"></i>
                                        <span>실적발표</span></a></li>
                                    <li><a href=""><i class="fa fa-building-o" aria-hidden="true"></i>
                                        <span>기업지배구조</span></a></li>
                                </ul>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- //contents1 -->
            <div id="contents2">
                <div class="container">
                    <div class="coporate">
                        <h2>Corporate Social Responsibility</h2>
                        <p>최고의 메모리기반 반도체 Solution Company라는 비전과 연계한 지속경영 추진체계를<br> 수립하고 세부 실행과제를 도출하여 실천하고 있습니다.</p>
                        <div class="coporate_box">
                            <ul>
                                <li><a href="#"><i class="fa fa-handshake-o" aria-hidden="true"></i>
                                    <strong>윤리경영</strong>
                                    <span>윤리적/합법적으로 직무를 수행하고 공정한 거래질서를 확립하며 사회적 책임을 완수하는 깨끗한 기업 문화를 만듭니다.</span></a>

                                </li>
                                <li><a href="#"><i class="fa fa-user-md" aria-hidden="true"></i>
                                    <strong>안전보건환경경영</strong>
                                    <span>깨끗하고 안전한 환경을 보전하고 사회 구성원 모두가 누릴 수 있는 미래의 삶을 추구합니다.</span></a>

                                </li>
                                <li><a href="#"><i class="fa fa-heart" aria-hidden="true"></i>
                                    <strong>사회공헌</strong>
                                    <span>지역사회와의 상생과 기업 명성의 제고를 위한 차별화된 CSR 활동 전개를 사회공헌 전략으로 수립하고 있습니다.</span></a>

                                </li>
                                <li><a href="#"><i class="fa fa-hourglass-half" aria-hidden="true"></i>
                                    <strong>공정거래</strong>
                                    <span>공정하고 자유로운 경쟁실천 노력과 더불어 국내외 고정거래 제반 법규를 자율적으로 준수합니다.</span></a>

                                </li>
                                <li><a href="#"><i class="fa fa-leaf" aria-hidden="true"></i>
                                    <strong>친환경제품</strong>
                                    <span>환경보호를 목적으로 하는 환경규제에 부합하는 환경친화적인 제품을 만들고자 지속적인 노력을 기울이고 있습니다.</span></a>

                                </li>
                                <li><a href="#"><i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    <strong>2016 지속경영보고서</strong>
                                    <span>Smart Solutions, Happy Life</span>
                                    </a>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //contents2 -->
            <div id="contents3">
                <div class="container">
                    <div class="Product">
                        <h2>Product</h2>
                        <div class="Product_box">
                            <div class="column col1">
                                <a href="#">
                                    <img src="assets/img/prd01.jpg" alt="16GB">
                                    <h3>16GB NVDIMM</h3>
                                    <p>The world’s first developed hybrid DRAM module with NAND Flash attached will secure your data even in case of power outage.</p>
                                </a>
                            </div>
                            <div class="column col2">
                                <a href="#">
                                    <img src="assets/img/prd02.jpg" alt="16GB">
                                    <h3>128GB 3DS LRDIMM</h3>
                                    <p>The world’s first developed 3DS LRDIMM will provide even better processing capability through TSV technology.</p>
                                </a>
                            </div>
                            <div class="column col3">
                                <a href="#">
                                    <img src="assets/img/prd03.jpg" alt="16GB">
                                    <h3>LPDDR4</h3>
                                    <p>Optimized performance for diverse applications: mobile, PC, automotive, consumer</p>
                                </a>
                            </div>
                            <div class="column col4">
                                <a href="#">
                                    <img src="assets/img/prd04.jpg" alt="16GB">
                                    <h3>HBM(High Bandwidth Memory)</h3>
                                    <p>Discover the powerful experience through our high bandwidth memory solution</p>
                                </a>
                            </div>
                            <div class="column col5">
                                <a href="#">
                                    <img src="assets/img/prd05.jpg" alt="16GB">
                                    <h3>3D NAND based eMMC5.1</h3>
                                    <p>World’s First 3D NAND based Mobile Storage Solution</p>
                                </a>
                            </div>
                            <div class="column col6">
                                <a href="#">
                                    <img src="assets/img/prd06.jpg" alt="16GB">
                                    <h3>13M CMOS Image Sensor</h3>
                                    <p>Capturing your Memories in Vivid Colors</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //contents3 -->
            <div id="contents4">
                <div class="container">
                    <div class="blog">
                        <h2>Blog</h2>
                        <div>
                            <a href="#">
                                <img src="assets/img/0510_SKHU_3.png" alt="blog" />
                                <span>반도체 국가대표를 양성하다. SKHU : SK hynix University</span>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="assets/img/0510_SKHU_2.png" alt="blog" />
                                <span>[반도체 ㅇㄱㄹㅇ] #Episode 02 열전반도체</span>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="assets/img/0510_SKHU_1.png" alt="blog" />
                                <span>[카드 뉴스] 아마존 VS 구글의 AI 비서 전쟁! 숨은 승자가 있다?</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- //contents4 -->
            <div id="contents5">
                <div class="container">
                    <div class="global">
                        <h2>Global Network</h2>
                        <ul class="glink">
                            <li><a href="#">Korea</a></li>
                            <li><a href="#">America</a></li>
                            <li><a href="#">Europe</a></li>
                            <li><a href="#">Asia</a></li>
                        </ul>
                        <div class="global_map">
                            <img src="assets/img/img_globalmap_01.png" alt="생산법인 웹">
                            <ul class="gmlink">
                                <li class="active"><a href="#">생산법인(4)</a></li>
                                <li><a href="#">연구개발법인(4)</a></li>
                                <li><a href="#">판매법인(10)</a></li>
                                <li><a href="#">판매사무소(14)</a></li>
                                <li><a href="#">상세보기</a></li>
                            </ul>
                        </div>

                    </div>

                </div>
            </div>
            <!-- //contents5 -->
        </div>
        <!-- //contents -->

        <div id="footer">
            <div class="footer-top">
                <div class="container">
                    <div class="ft-left">
                        <h3>SHORTCUTS</h3>
                        <ul>
                            <li><a href="#">Global Network</a></li>
                            <li><a href="#">지속경영</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">안전보건환경경영</a></li>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">윤리경영</a></li>
                            <li><a href="#">Technical Support</a></li>
                            <li><a href="#">제품환경영향</a></li>
                            <li><a href="#">주가정보</a></li>
                            <li><a href="#">보도자료</a></li>
                            <li><a href="#">재무제표 / 실적발표</a></li>
                            <li><a href="#">대리점/서비스센터</a></li>
                            <li><a href="#">IR 일정</a></li>
                            <li><a href="#">자재구매/장비매각</a></li>
                        </ul>

                    </div>
                    <div class="ft-right">
                        <div class="ft-right_left">


                            <h3>POLICY</h3>
                            <ul>
                                <li><a href="#">개인정보처리방침</a></li>
                                <li><a href="#">영상정보처리기기 운영∙관리방침</a></li>
                            </ul>

                            <h3>DECLARATION</h3>
                            <ul>
                                <li><a href="#">SK윤리경영 상담/제보</a></li>
                                <li><a href="#">불공정거래신고</a></li>
                            </ul>
                        </div>
                        <div class="ft-right_right">

                            <h3>LINKS</h3>
                            <ul>
                                <li><a href="#">윤리경영시스템</a></li>
                                <li><a href="#">구매포탈</a></li>
                                <li><a href="#">발명보상금지급</a></li>
                                <li class="img pt10">
                                    <a href="#"><img src="assets/img/visit_banner.png" alt="방문예약"></a>
                                </li>
                                <li class="img">
                                    <a href="#"><img src="assets/img/new_banner.png" alt="협력사 신규 등록"></a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
            <!-- //footer-top -->
            <div class="footer-bom">
                <div class="container">
                    <address>
                        2091, Gyeongchung-daero, Bubal-eup, Icheon-si, Gyeonggi-do, Korea  T. 82-31-630-4114   F. 82-31-645-8000
                            <span>COPYRIGHT © 2015 SK HYNIX INC. ALL RIGHTS RESERVED.</span>

                        
                        </address>
                
                <div class="w3c">
 
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="올바른 CSS입니다!" />
    </a>
   <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="올바른 CSS입니다!" />
    </a>
   <a href="#"><img style="width:70px;" src  ="http://www.webwatch.or.kr/images/s1/2014_WA_mark2.png" alt="인증"></a> 

                
                </div>
              </div>
            </div>
            <!-- //footer-bom -->
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->


   <!--  script -->
    <script type="text/javascript" src="assets/js/jquery1.12.4.min.js"></script>
    <script src="assets/js/owl.carousel.js"></script>



    <script>    
            $(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
 
     navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true,
      autoPlay : 3000,
      navigation : false,


      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
        itemsDesktopSmall : false,
        itemsTablet: false,
        itemsMobile : false

  });
 
});

    </script>
</body>

</html>

/* Layout */

#wrap { }
#header {height: 95px;}
#banner { height: 609px; overflow: hidden;}
#contents { }
#footer { }

/* container */
.container {width:1020px; margin: 0 auto; height: inherit;  /*background: rgba(0,0,0,0.2);*/}

/*contents layout*/
#contents1 { }
#contents2 {background-color: #f9f7f7;}
#contents3 { }
#contents4 {background-color: #f9f7f7;}
#contents5 { }

/* header */
.header { overflow: hidden;}
.header h1 {float: left;width: 200px; margin-top: 14px; }
.header .nav {float: left;width: 600px;margin-top: 40px; }
.header .nav li {display: inline;padding: 0 20px;}
.header .nav li a {font-size: 15px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.025em; }

.header .nav_icon {float: right; margin-top: 30px;}
.header .nav_icon li {float: left; width: 47px; text-align:center; margin-left: 10px;}
.header .nav_icon li a { color: #767676; display:block;}
.header .nav_icon li a i {font-size: 20px;}
.header .nav_icon li a:hover {color: #ea5d4b;}
.header .nav_icon li a i:hover {color: #ea5d4b; }
.header .nav_icon li span {display : block;}


/* banner */
#banner { position : relative;}
#banner .banner_icon { position: absolute; left: 0; bottom: 0; width: 100%; height: 67px; background-color: rgba(215, 94, 80, 0.6);}
#banner .banner_icon ul {overflow: hidden;}
#banner .banner_icon li {float: left; width: 25%; text-align:center; padding-top: 14px;}
#banner .banner_icon li a { color: #fff;}
#banner .banner_icon li a i {font-size: 20px;}
#banner .banner_icon li span {display:block;}

/* investor */
.investor { text-align: center; padding: 60px 0 70px;}
.investor h2 { font-size: 26px;}
.investor p { color:#666; margin: 20px 0 36px; }

.investor .investor_box { overflow: hidden; border-top: 1px solid #eaeaea; }
.investor .investor_box .ileft {width: 380px; height: 300px; float: left; padding: 30px 20px 0 0;}
.investor .investor_box .iright {width: 619px; height: 300px; float: left; border-left: 1px solid #eaeaea; overflow: hidden;}
.investor .investor_box .iright li {float: left; width: 33.33%; padding-top: 40px;}

.investor .investor_box .iright li a:hover {color: #555; }
.investor .investor_box .iright li a i {font-size: 30px; color :#EC7768; background-color: #f3f3f3; padding: 10px; 
    border-radius: 50%; width: 40px; height: 40px; line-height: 40px;}
.investor .investor_box .iright li a span {display:block; font-size: 14px; color :#555; padding-top: 10px;}


/* coporate */
.coporate {text-align: center; padding: 60px 0 70px; }
.coporate h2 {font-size: 26px; }
.coporate p { color:#666; margin: 20px 0 36px; line-height: 26px; }

.coporate_box { text-align : left; border-top: 1px solid #e6e6e6; padding-top: 40px;}
.coporate_box ul {overflow: hidden;}
.coporate_box li {position:relative;float: left; width: 210px; margin: 0 30px 0 20px; height: 110px; padding-left: 80px;}

.coporate_box li a {text-align: center; display:block; }
.coporate_box li a i {font-size: 30px; background-color: #EA5D4B; color: #fff; width: 60px; height: 60px; line-height: 60px; 
    border-radius: 50%; position: absolute; left: 0; top: 10px;}
.coporate_box li a strong { display: block;text-align:left; font-size: 14px; padding-bottom: 5px;}
.coporate_box li a span {display: block; text-align:left; color: #666; font-size: 12px; line-height: 20px;}

.coporate_box li a:hover {color:#222; text-decoration : none;}
.coporate_box li a strong:hover {text-decoration : underline;}


/* Product */
.Product { padding: 60px 0 70px; }
.Product h2 { font-size: 26px; text-align: center; padding-bottom: 30px;}
.Product .Product_box {overflow: hidden; }
.Product .Product_box .column { float: left; width: 320px; height: 300px;  margin: 0 10px 20px 10px;}
.Product .Product_box .column h3 {font-size: 16px; margin-top: 20px;}

.Product .Product_box .column p { color:#555; margin-top: 12px; }
.Product .Product_box .column a:hover {text-decoration :none; }
.Product .Product_box .column a:hover h3 {text-decoration :underline; color:#222; }


/* blog */
.blog {
    overflow: hidden; 
    padding: 60px 0 70px; 
}
.blog h2 {
    font-size: 26px; 
    text-align: center; 
    padding-bottom: 30px;
}
.blog div {
    float: left; 
    width: 320px; 
    margin:0 10px;
}
.blog div a {
    display: block; 
    height: 200px; 
    overflow: hidden;
    position: relative;
}
.blog div img {
    width: 100%;
}

.blog div a span {  
    position: absolute; 
    left: 0;bottom: 0; 
    background-color: rgba(0,0,0,0.7); 
    width: 300px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
}


/*global*/


.global{overflow: hidden; 
    padding: 60px 0 70px;  }
.global h2 {font-size: 26px; 
    text-align: center; 
    padding-bottom: 30px;
 }
.global .glink { text-align: center;}
.global .glink li {display:inline; padding: 0 10px; background: url(../img/bar.gif) no-repeat 0 4px; }
.global .glink li:first-child { background: none;  }
.global .global_map {background: url(../img/img_globalmap.png) no-repeat;}
.global .global_map .gmlink { text-align :center; margin-top: -80px;}
.global .global_map .gmlink li {display:inline; margin: 0 10px;}
.global .global_map .gmlink li a {padding: 10px; margin:5px; border: 1px solid #c6c6c6; border-radius: 2px; width: 148px; 
    display: inline-block; }
.global .global_map .gmlink li:last-child a {color:#ea5d4b;}
.global .global_map .gmlink li.active a {background-color: #ea5d4b; color:#fff;}



/*.footer-top*/
.footer-top {width: 100%; height: 225px; background-color: #e9e9e9; overflow: hidden;}
.footer-top .ft-left { width: 509px;height: 225px;float: left; border-right: 1px solid #d7d7d7; }
.footer-top .ft-left h3 { padding-top: 22px;}
.footer-top .ft-left ul {overflow: hidden;}
.footer-top .ft-left li { float: left; width: 50%; height: 20px; }
.footer-top .ft-left li a {color:#666; font-size: 12px; line-height:20px; 
    background: url(../img/bul_gray_square.gif) no-repeat 0 6px; padding-left: 8px;}



.footer-top .ft-right { overflow: hidden; float: left; width: 510px;height: 225px; }
.footer-top .ft-right .ft-right_left {float: left; width: 50%; }
.footer-top .ft-right .ft-right_left h3 {padding-top: 22px; padding-left: 20px;}
.footer-top .ft-right .ft-right_left ul {padding-left: 20px;}
.footer-top .ft-right .ft-right_left li a {color:#666; font-size: 12px; line-height:20px; 
    background: url(../img/bul_gray_square.gif) no-repeat 0 6px; padding-left: 8px;}
.footer-top .ft-right .ft-right_right {float: left; width: 50%; }
.footer-top .ft-right .ft-right_right h3 {padding-top: 22px;}
.footer-top .ft-right .ft-right_right li a {color:#666; font-size: 12px; line-height:20px; 
    background: url(../img/bul_gray_square.gif) no-repeat 0 6px; padding-left: 8px;}

.footer-top .ft-right .ft-right_right li.img a {background: none; padding-left: 0;}
.footer-top .ft-right .ft-right_right li.pt10 {padding-top: 10px;}
/*.footer-bom*/
.footer-bom { overflow: hidden;width: 100%; padding: 20px 0; background-color: #fff; }
.footer-bom address { float: left; width: 60%;color : #555; font-size: 12px;line-height: 19px; }
.footer-bom .w3c {float: right; width: 30%; }

.footer-bom address span {display: block;  font-size: 11px; color: #767676; line-height: 18px;}


/* 여백 초기화 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button{margin:0;padding:0}


/* 블릿기호 초기화 */
dl,ul,ol,menu,li{list-style:none}

/* 링크 초기화 */
a{color:#222;text-decoration:none}
a:hover{color:#ea5d4b;text-decoration:underline;}
a:active{background-color:transparent}

/* 폰트 초기화 */
body,th,td,input,select,textarea,button{font-size:13px;line-height:1.5;font-family: "Roboto", Malgun Gothic, "맑은 고딕", Dotum, "돋움", sans-serif;color:#222;letter-spacing:-1px}


/* 폰트 스타일 초기화 */
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}