Hynix Site

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SK 하이닉스</title>
  
    <!--style-->
    <link rel="stylesheet" href="asset/css/reset.css">
    <link rel="stylesheet" href="asset/css/style.css">
    <link rel="stylesheet" href="asset/css/owl.carousel.css">
    <link rel="stylesheet" href="asset/css/owl.theme.css">
    <link rel="stylesheet" href="asset/css/owl.transitions.css">

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

</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="container">
                <div class="header">
                    <h1>
                        <img src="asset/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" 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 class="banner">
              <div id="owl-demo" class="owl-carousel owl-theme">
                   <div class="item">
                        <h2> Smart solutions,<br>Happy life</h2>
                        <p> 스마트한 IT 세상을 위한 열정과 도전,<br> 행복을 마주하는 순간과 함께합니다.</p>
                       <img src="asset/img/main_slide01.jpg" alt="하이닉스"></div>
                  <div class="item">
                        <h2>Happy memory,<br>Share happiness</h2>
                        <p> 행복한 기억을 나누는 기업,<br>더 나은 내일을 꿈꿉니다.</p>
                  <img src="asset/img/main_slide02.jpg" alt="GTA V"></div>
                  <div class="item">
                        <h2> Growing together <br> for better tomorrow</h2>
                        <p>최고의 메모리 기반 반도체 Solution Company로 도약하겠습니다.</p>
                  <img src="asset/img/main_slide03.jpg" alt="Mirror Edge"></div>
                </div>
           </div>
            <div class="banner_icon">
                <div class="container">
                  <ul>
                    <li><a href="#"><i class="fa fa-laptop" aria-hidden="true"></i><span>보도자료</span></a></li>
                    <li><a href="#"><i class="fa fa-user-o" aria-hidden="true"></i><span>인재채용</span>
    </a></li>
                    <li><a href="#"><i class="fa fa-ioxhost" 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="cont1">
                <div class="container">
                    <div class="investor">
                        <h2>Investor Relations</h2>
                        <p>단기적인 경영성과에 집착하기 보다 장기적인 질적 성장을 우선 시 하는 내실경영에 최선을 다 하겠습니다.</p>
                        <div class="investor_box">
                            <div class="ileft">
                                <img src="asset/img/asia.tools.euroland.png" alt="">
                            </div>
                            <div class="iright">
                                <ul>
                                    <li><a href="#"><i class="fa fa-pie-chart" 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-clock-o" aria-hidden="true"></i><span>주가알람</span></a></li>
                                    <li><a href="#"><i class="fa fa-clone" 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-handshake-o" aria-hidden="true"></i><span>기업지배조건</span></a></li>
                                </ul>
                            </div>
                        </div>               
                         
                        </div>
                    </div>
                </div>
         <!-- //cont1 -->
             
            <div id="cont2">
                <div class="container">
                 <div class="corporate">
                            <h2>Corporate Social Responsibility</h2>
                            <p>최고의 메모리기반 반도체 Solution Company라는 비전과 연계한 지속경영 추진체계를 <br>
                            수립하고 세부 실행과제를 도출하여 실천하고 있습니다.</p>
                     
                </div>
                    <div class="corporate_box">
                        <ul>
                            <li>
                                <a href="#">
                                    <i class="fa fa-street-view" aria-hidden="true"></i>
                                    <strong>윤리경영</strong>
                                    <span>윤리적∙합법적으로 직무를 수행하고 공정한 거래질서를 확립하며 사회적 책임을 완수하는 깨끗한 기업문화를 지향합니다.</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fa-life-ring" aria-hidden="true"></i>
                                    <strong>안전보건환경경영</strong>
                                    <span>깨끗하고 안전한 환경을 보전하고 사회 구성원 모두가 누릴 수 있는 미래의 삶을 추구합니다.</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fa-magnet" aria-hidden="true"></i>
                                    <strong>사회공헌</strong>
                                    <span>지역사회와의 상생과 기업 명성의 제고를 위한 차별화된 CSR 활동 전개를 사회공헌 전략으로 수립하고 있습니다.</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fa-object-group" aria-hidden="true"></i>
                                    <strong>공정거래</strong>
                                    <span>공정하고 자유로운 경쟁실천 노력과 더불어 국내외 고정거래 제반 법규를 자율적으로 준수합니다.</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fa-ship" aria-hidden="true"></i>
                                    <strong>친환경제품</strong>
                                    <span>환경보호를 목적으로 하는 환경규제에 부합하는 환경친화적인 제품을 만들고자 지속적인 노력을 기울이고 있습니다.</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fa-blind" aria-hidden="true"></i>
                                    <strong>2016 지속경영보고서</strong>
                                    <span>윤리적∙합법적으로 직무를 수행하고 공정한 거래질서를 확립하며 사회적 책임을 완수하는 깨끗한 기업문화를 지향합니다.</span>
                                </a>
                            </li>
                        </ul>
                            </div>
        
             </div>
            </div>    
  <!-- //cont2 -->
            <div id="cont3">
                <div class="container">
                    <div class="product">
                        <h2>Products</h2>
                        <div class="product_box">
                            <div class="column col1">
                                <a href="#">
                                    <img src="asset/img/prd01.jpg" alt="16GB"/>
                                    <h3>166GB 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="asset/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="asset/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="asset/img/prd04.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 col5">
                                <a href="#">
                                    <img src="asset/img/prd05.jpg" alt="16GB"/>
                                    <h3>166GB 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 col6">
                                <a href="#">
                                    <img src="asset/img/prd01.jpg" alt="16GB"/>
                                    <h3>13M CMOS Image Sensor</h3>
                                    <p>Capturing your Memories in Vivid Colors.</p>
                                </a>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
              <!-- //cont3 -->
            <div id="cont4">
                <div class="container">
                 <div class="blog">
                    <h2>Blog</h2>
                    <div class="blog_box">
                        <div>
                            <a href="#">
                                <img src="asset/img/blog1.png" alt=""/>
                                <span>반도체 국가대표를 양성하다. SKHU:SK huundasf 반도체 국가대표를 양성하다</span>
                            </a>
                        </div>
                        
                        <div>
                            <a href="#">
                              <img src="asset/img/blog2.png" alt=""/>
                                <span>반도체 국가대표를 양성하다. SKHU:SK huundasf 반도체 국가대표를 양성하다</span>
               
                            </a>
                        </div>
                        
                        <div>
                            <a href="#">
                              <img src="asset/img/blog3.png" alt=""/>
                                <span>반도체 국가대표를 양성하다. SKHU:SK huundasf 반도체 국가대표를 양성하다</span>

                            </a>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
              <!-- //cont4 -->
            <div id="cont5">
                <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="asset/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>
              <!-- //cont5 -->
        </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="#">Contact Us</a></li>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">Techinical Support</a></li>
                            <li><a href="#">주가정보</a></li>
                            <li><a href="#">재무제표 / 실적발표</a></li>
                            <li><a href="#">IR일정</a></li>
           
                        </ul>
                        <ul>
                            <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="#">대리점/서비스센터</a></li>
                            <li><a href="#">자재구매/장비매각</a></li>
                        </ul>
                    </div> 
                    <div class="ft_right">
                        <div class="ft_r_left">
                            <h3>POLICY</h3>
                                <ul>
                                    <li><a href="#">개인정보처리방침</a></li>
                                    <li><a href="#">영상정보처리기기 운영∙관리 방침</a></li>
                                </ul>
                            <h3>DECLEARATION</h3>
                                <ul>
                                    <li><a href="#">SK윤리경영 상담/제보</a></li>
                                    <li><a href="#">불공정거래신고</a></li>
                                </ul>
                        </div>
                        <div class="ft_r_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="asset/img/visit_banner.png" alt="방문예약"/></a></li>
                                    <li class="img"><a href="#"><img src="asset/img/new_banner.png" alt="신규 등록"/></a></li>
                                </ul>
                        </div>
                      
                    </div>
                </div>
            </div>
            <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 (C)2015 SK HYNIX INC. ALL RIGHTS RESERVED.  </span>
                     </address>
                  <div class="w3c">
                        <a href="http://validator.w3.org/check?uri=referer"><img
                      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></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>  
        </div>
         <!-- //footer -->
    </div>
     <!-- //wrap -->


<!-- scripts -->
         <script type="text/javascript" src="asset/js/jquery-1.12.4.min.js" ></script>
         <script type="text/javascript" src="asset/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

            });

            });
         </script>
<!-- //scripts -->
</body>
</html>
/* layout */
#wrap {}
#header {height: 95px; }
#banner {height: 610px;overflow: hidden; }
#contents {}
#footer {}

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

/* contents layout */
#cont1 {}
#cont2 {background-color: #f9f7f7;}
#cont3 {}
#cont4 {background-color: #f9f7f7;} 
#cont5 {}

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

.header .nav_icon {float : right; overflow: hidden; margin-top: 30px;}
.header .nav_icon li {float: left; width: 46px; 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:hover i {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: 59px; background-color: rgba(215,94,80,0.6);}

#banner .banner .item {text-align: center;}
#banner .item h2 {position: absolute; left: 50%; top: 100px; margin-left: -510px; color: #fff; font-size: 50px; line-height: 60px; text-align: left;}
#banner .item p {position: absolute; left: 50%; top: 230px; margin-left: -510px; text-align: left; color: #fff; font-size: 16px; line-height: 20px;}

#banner .banner_icon ul {overflow: hidden;}
#banner .banner_icon li {float: left; width: 25%; text-align: center; padding-top: 10px; }
#banner .banner_icon li a {color: white;}
#banner .banner_icon li a i {font-size: 20px; }
#banner .banner_icon li a span {display: block;}

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

.investor .investor_box {overflow: hidden; border-top: solid 1px #eaeaea;}
.investor .investor_box .ileft { float: left; width: 380px; height: 300px; border-right: solid 1px #eaeaea; padding: 30px 0 5px;}
/*.investor .investor_box .ileft img {margin-top: 40px;}*/
.investor .investor_box .iright { float: left; width: 619px; height: 300px;  }
.investor .investor_box .iright ul {overflow: hidden;}
.investor .investor_box .iright li {float: left; width: 33.3333%;  margin-top: 40px;}

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

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

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

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

/* 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 a:hover {text-decoration:none;}
.product .product_box .column h3 {font-size: 16px; margin-top: 20px;}
.product .product_box .column a:hover h3 {color:orange; text-decoration: underline;}
.product .product_box .column p {color:#555; margin-top: 12px;} 

/* blog */
.blog {padding: 60px 0 70px; overflow: hidden;}
.blog  h2  {font-size: 26px; text-align: center; padding-bottom: 30px;}

.blog_box div {float: left; width: 320px; margin:0 10px; }
.blog_box div a {position: relative; display: block; height: 200px; overflow: hidden;}
.blog_box div img {width: 100%;}

.blog_box span { position: absolute; bottom: 0px; left: 0px; background-color: rgba(0,0,0,0.7);padding: 10px; color:#fff;  width: 300px; height: 60px; line-height: 60px; text-align:center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* global */
.global {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 2px; }
.global .glink li:first-child {background: none; padding-left: 0;}
.global .global_map {background:url(../img/img_globalmap.png); }
.global .global_map .gmlink {text-align:center; margin-top:-80px;}
.global .global_map .gmlink li {display:inline; margin:0 2px;}
.global .global_map .gmlink li a {padding: 10px; 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:white;}

/* footer_top */
.footer-top {overflow: hidden;width: 100%; height: 225px; background-color: #e9e9e9;}
.footer-top h3 {padding-top: 22px;}

.footer-top .ft_left {float: left; width: 509px; height: 100%; border-right:1px solid #fff; }
/*.footer-top .ft_left h3 {padding-top: 22px;} */
.footer-top .ft_left ul {float: left; width: 49%;}
.footer-top .ft_left ul li {background: url(../img/bul_gray_square.gif) no-repeat 5px; padding-left:10px;}
.footer-top .ft_left ul li a {color:#666;  font-size: 12px; line-height: 20px; }

.footer-top .ft_right {float:left; overflow: hidden; width: 480px; height: 100%;  padding-left: 20px;}
.footer_top .ft_right .ft_r_left h3 {padding-left: 20px;}

.footer-top .ft_right .ft_r_left {float: left; width: 49%; height: 100%;}
.footer-top .ft_right .ft_r_left ul {padding-left:0px;}
.footer-top .ft_right .ft_r_left li  {background: url(../img/bul_gray_square.gif) no-repeat 5px; padding-left:10px;}
.footer-top .ft_right .ft_r_left li a  {color:#666;  font-size: 12px; line-height: 20px; }

.footer-top .ft_right .ft_r_right {float: left; width: 49%; height: 100%; }
.footer-top .ft_right .ft_r_right li  {background: url(../img/bul_gray_square.gif) no-repeat 5px; padding-left:10px;}
.footer-top .ft_right .ft_r_right li a {color:#666;  font-size: 12px; line-height: 20px; }

.footer_top .ft_right .ft_r_right .img a {background: none; padding-left: 0;}

/* footer_bottom */
.footer-bom {overflow: hidden; width: 100%; height: 80px; padding-top:20px;  }
.footer-bom address {float: left; width: 60%;  color: #555; font-size: 12px; line-height:19px; }
.footer-bom address span {display: block; font-size: 11px; color: #767676; line-height: 18px; }

.footer-bom .w3c {float: right; width: 30%; text-align: right;}

/* sub_banner */
.sub_banner {}
.sub_banner .visual {height: 256px; line-height:256px; }
.sub_banner .visual.about {background: url(../img/visual_about.jpg);}

.sub_banner .visual h2 {color:#fff; font-size: 45px; text-transform: uppercase; font-weight: normal;}

.sub_banner .breadcrumb {overflow: hidden; height: 48px; line-height:48px; background-color: #eaeaea; margin-bottom:100px;}
.sub_banner .breadcrumb .path {float: left;}
.sub_banner .breadcrumb .path li {display:inline;}
.sub_banner .breadcrumb .path li i {padding-right:15px;}
.sub_banner .breadcrumb .path li a {color:#333; padding-right: 15px; font-size: 14px;}
.sub_banner .breadcrumb .path li a i {padding-left: 5px;}
.sub_banner .breadcrumb .path li:first-child a i {padding-left: 0;}

.sub_banner .breadcrumb .sns {float: right;}
.sub_banner .breadcrumb .sns li {display:inline-block;  text-align:center; background-color: #d6d6d6;}
.sub_banner .breadcrumb .sns li a {font-size: 15px; width: 52px; display: block;}

/*sub_contents*/
#contents {}

/*cont_title*/
.cont_title {padding: 50px 0 40px 0; text-align: left; }
.cont_title .container {border-bottom: 1px solid #edecec; padding-bottom:50px;}

.cont_title .ct-box {position: relative;	 width: 200px; 	margin: 0 auto; padding-left: 70px;}
.cont_title .ct-box h3 {font-size: 36px; line-height: 40px;  }
.cont_title em {display: block; font-size: 12px; color:#767676; text-transform: uppercase; line-height: 18px;}
.cont_title .ct-box i {position: absolute; left: 0; top: 0; background-color: #EB6655; font-size: 30px; width: 60px; height: 60px; border-radius: 50%; color: #fff; text-align: center; line-height: 60px;}

/* contents */
.contents p {font-size: 14px; line-height: 22px; color: #555; }
.contents h4 {position: relative;	 font-size: 30px; padding-bottom: 20px; padding-top: 4px;}
.contents h4:before {content:''; width: 25px; height: 2px; background-color: #EB6655; position: absolute; left: 0; top: 0;	}

.contents h5 {font-size: 16px;	 font-weight: 	bold; color: #222; margin-bottom: 15px;}

/*  column-box */
.column-box {overflow: hidden;	}
.column-box .column {float: left;}
.column-box .w60 {width: 60%;}
.column-box .w50 {width: 50%;}
.column-box .w40 {width: 40%;}

/*table*/
.table-style1 {border-top: 2px solid #464e6b;}
.table-style1 td {border-bottom: 1px solid #c6c6c6;  padding: 8px 20px 10px;}
.table-style1 th {border-bottom: 1px solid #c6c6c6; background-color: #f8f8f8; color:#484848; text-align: left; padding: 8px 20px 10px;}
	
/*product*/
.sub_banner .visual.about.prd {background:  url(../img/product_solComputing.jpg);}
.cont_title.prd {padding:0;}
.prd_cont {text-align: center;}
.prd_cont li {overflow: hidden;	display: inline; width: 100%;	}
.prd_cont li a {display: inline; float: left;	padding: 10px; border-top:1px solid #c6c6c6;   border:1px solid #c6c6c6;   width: 22.5%; margin: 0; box-sizing: content-box;}
.contents .container.prd {border-bottom:0;}
.prd_cont li.active a {background-color: #ea5d4b; color: white;}

.server {margin: 10px 0 60px; overflow: hidden;}
.server .serv_box1 { float: left;width: 31%; height: 402px; margin:0 10px;	border:1px solid #c6c6c6;}
.server .serv_box1:first-child {margin-left:0;}
.server .serv_box1.ab {height: 560px;	}
.server .serv_box1 img {display: block; margin:40px auto 20px; }
.server .serv_box1 h5 {text-align: center; font-size: 15px; padding: 0 50px;}

.server .serv_box1 .box_t {padding: 20px 20px; background: #f7f7f7; height: 168px;	}
.server .serv_box1 .box_t.ab {height: 325px;	}
.server .serv_box1 .box_t p {font-size: 15px; color: #ea5d4b; font-weight: bold; }
.server .serv_box1 .box_t span {display: block;  padding:10px 0 20px; }

.prd .ct-box {position: relative;	 width: 400px; 	margin: 0 auto; padding-left: 70px;}

#related {background-color: #f9f9f9; }
.related {padding-top: 60px;}
.related .rel_box1 {t}
.related .rel_box1 ul {text-align: center;}
.related .rel_box1 li  {display: inline;}
.related .rel_box1 li  a {display: inline-block; padding: 20px 10px; border:1px solid #c6c6c6; width: 21.1%; margin: 5px 15px 15px; background-color: #fff;}
.related .rel_box1 li  a:first-child {margin-left: 0;}
.related .rel_box1 li  a:nth-child(4) {margin-right: 0;}
.related .rel_box1 .last {text-align:left;}
.related .rel_box1 .last li {text-align:center;}

.reso ul  {padding-bottom: 50px;}
.reso li {display: inline;  }
.reso li a {font-size: 14px;font-weight: bold; position: relative; display: inline-block; padding: 12px 60px 12px 15px; height: 40px; width: 15%;	 margin: 5px 15px 15px;border:1px solid #c6c6c6; background-color: #fff;}
.reso li a:first-child {margin-left: 0;} 
.reso a.singleline {padding-top: 15px;  line-height: 40px;}

.reso li span {display: block;}
.reso li i {position: absolute; top: 20px; right:15px; font-size: 30px; color: #ea5d4b;	}
.reso li img {position: absolute;	top: 20px; right: 5px; color:#ea5d4b;}

.reso1 ul  {overflow: hidden; padding-bottom: 50px;}
.reso1 li {float: left;  position: relative;width: 22%; border:1px solid #c6c6c6; 	  background-color: #fff; margin: 5px 15px 15px; }
.reso1 li a {font-size: 14px;font-weight: bold;  display: inline-block; padding: 12px 60px 12px 15px; height: 40px; 	 }
.reso1 li:first-child {margin-left: 0;} 
.reso1 li:nth-child(5) {margin-left: 0;} 
.reso1 a.singleline { line-height: 40px;}

.reso1 li span {display: block;}
.reso1 li i {position: absolute; top: 50%; right:10%; font-size: 30px; color: #ea5d4b; transform: translate(0%, -50%);}
.reso1 li img {position: absolute;top: 50%; right:10%; color:#ea5d4b; transform: translate(0%, -50%)}

/*ir report*/

.sub_banner .visual.report {background: url(../img/visual_ir.jpg);}

.cont_title.re {padding-bottom: 0px; padding-top: 0 }
.cont_title.re .ct-box { width: 400px;  padding-left:221px;}
.cont_title.re .ct-box i {left: 139px;	}
.contents.re {overflow: hidden;	}
.contents.re .left {float: left; 	 width: 78%; border-right: 1px solid #cbcbcb;  box-sizing: border-box;}
.contents.re .right {float: left; height: 500px; width: 22%;		}
.contents.re .re_text {background-color: #f8f8f8; margin-right:33px; }
.contents.re .re_text h5 {display: block;	padding: 20px 0 0px 30px; font-size: 14px; color:#666;}
.contents.re .re_text span.r_content {display: block; padding: 0 0 20px 30px ; color:#555;}
.re_img  {overflow: hidden;}
.re_img .i_box {float: left; border:1px solid #ddd; margin-right: 32px; margin-bottom:30px; overflow: hidden; }

.re_report {overflow: hidden;	}
.re_report .re_box {position: relative;	 float: left; width: 45%;  height: 260px;	border:1px solid #ddd; margin-right: 30px;}
.re_report .re_box span {display: block; width: 10%; margin-top:10px;	padding: 5px 10px 0px 15px ; color:#666;font-weight: bold; font-size: 16px;		background-color: #eee;}
.re_report .re_box em {padding: 15px 10px; font-size: 16px;	color:#ea5d4b;display: block;	width: 50%; font-weight: bold;	}
.re_report .re_box ul {padding-left:10px;width: 43%; 	}
.re_report .re_box ul li  {overflow: hidden;	height: 95px;	text-overflow: ellipsis;  white-space: pre-wrap;}
.re_report .re_box img {position: absolute; right: -10px;	top: -15px; transform:scale(0.8,0.8) 	}
.re_report .re_box .box_btn {background-color: #898989; width: 43%; margin-left: 10px; margin-bottom:10px;		}
.re_report .re_box .box_btn p {text-align: center;  padding: 5px 0;}
.re_report .re_box .box_btn a {color:white;}

.re_img .i_box {position: relative;	}
.re_img .i_box img{	display: block;}
.re_img .i_box a:hover img {filter: brightness(30%)}
.re_img .i_box .box_text {padding: 10px 0; position: absolute; bottom: 0;	width: 100%;	background-color: white;}

.re_img .i_box a:hover .box_text {background-color:transparent;}
.re_img .i_box .box_text span {display: none; padding-left: 10px;}

.re_img .i_box .box_text ul {overflow: hidden;}
.re_img .i_box .box_text li {display: block; float: left;	 right: 10px;}
.re_img .i_box .box_text li.abc {font-size: 14px; padding-left: 15px;}
.re_img .i_box .box_text i {position: absolute; font-size: 20px;	width: 50px;	height: 50px;	right: 0; top: 0;	 color:white;	background-color: #E65B4E; line-height: 40px; text-align: center;}

.re_img .i_box a:hover .box_text span {display: block;}
.re_img .i_box a:hover .box_text  li.abc {display: none;}
/*.re_img .i_box ul {position: absolute; display: block;	 bottom: 0; overflow: hidden; width: 230px; 	 }
.re_img .i_box li {display: block;	 margin:10px; float: left;	background-color: white;}
.re_img .i_box li i {display: block; color:#fff; float: right; font-size: 20px;	width: 45px;	height: 45px;	background-color: #CE402E; text-align: center; line-height: 45px}*/

.re_more {margin:10px 0 10px; padding: 10px;display: #000; border: 1px solid #ddd; width: 94.3%; text-align: center;}
.re_more a {font-weight: bold;}

.re_cont {text-align: center; position: relative; border:1px solid #ddd; overflow: hidden;	height: 80px; margin:40px 28px 40px 0px;	}
.re_cont  i {position: absolute; left: 20px;top: 10px; font-size: 45px; color:#ea5d4b;	}
.re_cont  p {float: left; }
.re_cont  em {float: left;	}
.re_cont  .T_box {float: left;	}

.right .r_graph {margin-left:20px;  padding-bottom:10px;border-bottom: 1px solid #ddd;}
.right .r_menu { margin-left:20px; }
.right .r_menu ul {overflow: hidden; position: relative;		}
.right .r_menu li {  padding:10px; border:1px solid #ddd;  margin-bottom:-1px; }
.right .r_menu li:last-child {margin-bottom: 0}
.right .r_menu i {display: block;	float: right;	 position: relative;	top:5px;	 right: 12px;	}

.right .r_down { margin-left:20px; }
.right .r_down ul  {	overflow: hidden;	}
.right .r_down ul li {position: relative; background: url(../img/bul_gray_square.gif) no-repeat 5px;    padding-left: 10px;}
.right .r_down i {position: absolute;	 display: block; top: 5px;		float: right; right: 20px; font-size: 13px;	}
/* 여백 초기화 */
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 !important; 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}

/* 테이블 초기화 */
table {width: 100%; border-spacing: 0; border-collapse: collapse;}

/* caption */
caption {padding: 0; margin: 0;	font-size: 0; line-height: 0; width: 0;	height: 0;	text-indent: -9999px;}

/* padding, margin setting */
.pt00 {padding-top: 0px !important;}
.pt05 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt25 {padding-top: 25px !important;}
.pt30 {padding-top: 30px !important;}
.pt35 {padding-top: 35px !important;}
.pt40 {padding-top: 40px !important;}
.pt45 {padding-top: 45px !important;}
.pt50 {padding-top: 50px !important;}
.pt55 {padding-top: 55px !important;}
.pt60 {padding-top: 60px !important;}

.pl00 {padding-left: 0px !important;}
.pl05 {padding-left: 5px !important;}
.pl10 {padding-left: 10px !important;}
.pl15 {padding-left: 15px !important;}
.pl20 {padding-left: 20px !important;}
.pl25 {padding-left: 25px !important;}
.pl30 {padding-left: 30px !important;}
.pl35 {padding-left: 35px !important;}
.pl40 {padding-left: 40px !important;}
.pl45 {padding-left: 45px !important;}
.pl50 {padding-left: 50px !important;}
.pl55 {padding-left: 55px !important;}
.pl60 {padding-left: 60px !important;}

.pr00 {padding-right: 0px !important;}
.pr05 {padding-right: 5px !important;}
.pr10 {padding-right: 10px !important;}
.pr15 {padding-right: 15px !important;}
.pr20 {padding-right: 20px !important;}
.pr25 {padding-right: 25px !important;}
.pr30 {padding-right: 30px !important;}
.pr35 {padding-right: 35px !important;}
.pr40 {padding-right: 40px !important;}
.pr45 {padding-right: 45px !important;}
.pr50 {padding-right: 50px !important;}
.pr55 {padding-right: 55px !important;}
.pr60 {padding-right: 60px !important;}

.pb00 {padding-bottom: 0px !important;}
.pb05 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb35 {padding-bottom: 35px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb45 {padding-bottom: 45px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb55 {padding-bottom: 55px !important;}
.pb60 {padding-bottom: 60px !important;}

.mt00 {margin-top: 0px !important;}
.mt05 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.mt55 {margin-top: 55px !important;}
.mt60 {margin-top: 60px !important;}

.ml00 {margin-left: 0px !important;}
.ml05 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml35 {margin-left: 35px !important;}
.ml40 {margin-left: 40px !important;}
.ml45 {margin-left: 45px !important;}
.ml50 {margin-left: 50px !important;}
.ml55 {margin-left: 55px !important;}
.ml60 {margin-left: 60px !important;}

.mr00 {margin-right: 0px !important;}
.mr05 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr35 {margin-right: 35px !important;}
.mr40 {margin-right: 40px !important;}
.mr45 {margin-right: 45px !important;}
.mr50 {margin-right: 50px !important;}
.mr55 {margin-right: 55px !important;}
.mr60 {margin-right: 60px !important;}

.mb00 {margin-bottom: 0px !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb55 {margin-bottom: 55px !important;}
.mb60 {margin-bottom: 60px !important;}

크로스 브라우징

  • 월드 와이드 웹에서 규현하기 위해 따라야 할 표준 또는 규격'을 의미하며, 이는 특정 브라우저에서만 사용되는 비 표준화된 기술은 배제하고 W3C의 토론을 통해 나온 권고안(recomendation)을 사용하는 것을 말하며, 웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다.
  • 다양한 웹 기술을 통해 수많은 콘텐츠가 공유되고 확산되면서, 웹 접근성, 사생활 보호, 보안, 국제화 등을 고려한 웹 기술의 표준화가 필요하게 되었다. 국제 표준화 기구로 월드 와이드 웹 컨소시엄(W3C)이 있으며, 대표적 웹 표준으로 하이퍼텍스트 생성 언어(HTML), 확장성 하이퍼텍스트 생성 언어(XHTML), 종속형 시트(CSS: Cascading Style Sheets), 자바스크립트(JavaScript), 웹 사용에 대한 웹 콘텐츠 접근성 지침 등이 있다

W3C(World Wide Web Consortium)

  • 국제 웹 표준화 기구의 하나. WWW의 표준안 제작과 새로운 표준안 제안, 기술의 공유를 통해 WWW 의 기술적, 사회적 확산을 위해 구성된 전세계적 단체로 1994년 10월에 설립됐다.[네이버 지식백과]

웹 접근성 이니셔티브(WAI : Web Accessibility Initiative)

  • 줄여서 WAI는 장애인들의 월드 와이드 웹에 대한 접근성을 향상시키기 위해 W3C에서 만든 개념이다. 일반적으로 장애인들은 컴퓨터나 웹을 이용할 때 많은 어려움을 겪게 되며, 따라서 장애인들은 비표준 장치나 웹사이트에 대한 접근성이 증대되도록 설계된 브라우저, 한정된 자원만을 사용하는 사용자 에이전트와 무선 단말기에 부여할 수 있는 광범위한 이득을 필요로 한다.

사이트 만들기

Reference

리뉴얼 디자인