HYNIX

사이트 만들기



< !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 rel="stylesheet" href="assets/css/owl.theme.css">
    
    < !-- webfont -->
    < 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="assets/img/logo.png" alt="하이닉스">< /h1>
                    < div class="nav">
                        < ul>
                            < li>< a href="#">About us< /a>< /li>
                            < li>< a href="#">Products< /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-user-circle-o" 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-square" 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-bar-chart" aria-hidden="true">< /i>< span>제무제표< /span>< /a>< /li>
                                    < li>< a href="#">< i class="fa fa-pie-chart" aria-hidden="true">< /i>< span>IR 일정< /span>< /a>< /li>
                                    < li>< a href="#">< i class="fa fa-university" aria-hidden="true">< /i>< span>주가 알람< /span>< /a>< /li>
                                    < li>< a href="#">< i class="fa fa-line-chart" aria-hidden="true">< /i>< span>IR 자료요청< /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-suitcase" aria-hidden="true">< /i>< span>기업지배구조< /span>< /a>< /li>
                                < /ul>
                            < /div>
                        < /div>
                    < /div>
                < /div>
            < /div>
            < !-- //contents1 -->
            
            < div id="contents2">
                < div class="container">
                    < div class="corporate">
                        < h2>Corporate Social Responsibility< /h2>
                        < p>최고의 메모리기반 반도체 Solution Company라는 비전과 연계한 지속경영 추진체계를< br>수립하고 세부 실행과제를 도출하여 실천하고 있습니다.< /p>
                        < 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>
            < /div>
            < !-- //contents2 -->
            < div id="contents3">
                < div class="container">
                    < div class="products">
                        < h2>Products< /h2>
                        < div class="products_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>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 col3">
                                < a href="#">
                                    < img src="assets/img/prd03.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 col4">
                                < a href="#">
                                    < img src="assets/img/prd04.jpg" alt="16GB">
                                    < h3>16GB NVDIMM< /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>16GB NVDIMM< /h3>
                                    < p>Optimized performance for diverse applications: mobile, PC, automotive, consumer
                                    < /p>
                                < /a>
                            < /div>
                            < div class="column col6">
                                < a href="#">
                                    < img src="assets/img/prd06.jpg" alt="16GB">
                                    < h3>16GB NVDIMM< /h3>
                                    < p>The world’s first developed 3DS LRDIMM will provide even better processing capability through TSV technology.
                                    < /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/Blog1.png" alt="blog">
                                < span>반도체 국가대표를 양성하다. SKHU : SK hynix Un 반도체 국가대표를 양성하다. SKHU : SK hynix Un< /span>
                            < /a>
                        < /div>
                        < div>
                            < a href="#">
                                < img src="assets/img/Blog2.png" alt="blog2">
                                < span>반도체 국가대표를 양성하다. SKHU : SK hynix Un 반도체 국가대표를 양성하다. SKHU : SK hynix Un< /span>
                            < /a>
                        < /div>
                        < div>
                            < a href="#">
                                < img src="assets/img/Blog3.png" alt="blog3">
                                < span>반도체 국가대표를 양성하다. SKHU : SK hynix Un 반도체 국가대표를 양성하다. SKHU : SK hynix Un< /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://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>
                    < !-- //footer_bom -->
                < /div>
                < !-- //footer -->
            < /div>
            < !-- //wrap -->

        < script src="assets/js/jquery.1.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 : 7000,
                    navigation : false

                    

                    });

                });
        < /script>


        < /body>
    < /html>
/* layout */
#wrap {}
#header {height: 95px;}
#banner {height: 530px; 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: 17px; }
.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: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: 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 a span {display: block;}

#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: 220px; margin-left: -510px; text-align: left; color: #fff; font-size: 16px; line-height: 20px;}


/* 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 {float: left; width: 400px; height: 300px; padding-top: 30px; }
.investor .investor_box .iright {float: left; width: 619px; height: 300px; border-left: 1px solid #eaeaea;}
.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:hover {color: #555; }
.investor .investor_box .iright li a i {font-size: 30px; background-color:#f3f3f3; padding: 10px; border-radius: 50%; width: 40px; height: 40px; line-height: 40px; color:#EC7768;}
.investor .investor_box .iright li a span {display: block; font-size: 14px; color: #555; padding-top: 10px; }

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

.corporate_box {text-align: left; border-top: 1px solid #e6e6e6; padding-top: 50px;}
.corporate_box ul {overflow: hidden; }
.corporate_box li {position: relative; float: left; width: 210px; margin: 0 30px 0 20px; height: 110px; padding-left: 80px;}
.corporate_box li a {text-align: center; display: block;}
.corporate_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; }
.corporate_box li a strong {display: block; text-align: left; font-size: 14px; 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 {color: #222; text-decoration: none;}
.corporate_box li a strong:hover  {text-decoration: underline;}

/* products */
.products {padding: 60px 0 70px; }
.products h2 {font-size: 26px; text-align: center; padding-bottom: 30px;}
.products .products_box {overflow: hidden; }
.products .products_box .column {float: left; width: 320px; height:300px; margin:0 10px 20px 10px; }
.products .products_box .column a:hover {text-decoration: none;}
.products .products_box .column h3 {font-size: 16px; margin-top: 20px;}
.products .products_box .column a:hover h3 {text-decoration: underline; color: #222;}
.products .products_box .column p {color: #555; margin-top: 12px;}

/* 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 {position: relative; display: block; height: 200px; overflow: hidden;}
.blog div a span {position: absolute; left: 0; bottom: 0; background-color: rgba(0,0,0,0.7); padding: 10px; width: 300px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.blog div img {width: 100%;}

/* 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/vline1x8.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 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: #fff;}

/* footer_top */
.footer_top {overflow: hidden; background: #e9e9e9;}
.footer_top .ft_left {float: left; width: 509px; height: 225px; 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%; }
.footer_top .ft_left li a {color: #666; font-size: 12px; line-height: 20px; background: url(../img/bul_gray_square.gif) no-repeat 0 5px; 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 5px; 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 5px; 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;  }
.footer_bom address {float: left; width: 60%;  color: #555; font-size: 12px; line-height:19px; }
.footer_bom .w3c {float: right; width: 30%; text-align: right;}
.footer_bom address span {display: block; font-size: 11px; color: #767676; line-height: 18px; }

/* sub_banner */
.sub_banner {}
.sub_banner .visual {height: 256px; line-height: 256px; }
.sub_banner .visual.about {background: url(../img/visual_about.jpg) no-repeat center top; }
.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: 5px; 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; width: 52px; text-align: center; background-color: #d6d6d6; }
.sub_banner .breadcrumb .sns li a {font-size: 15px; width: 52px; display: block;}

/* aboutus */
.aboutus {position: relative; text-align: center;  }
.aboutus span {position: absolute; left: 458px; top: -15px; color: #767676;}
.aboutus h2 {font-size: 30px; }
.aboutus h2 ul {overflow: hidden; width:1020px; border-bottom: 1px solid #eaeaea; padding-bottom:50px;  }
.aboutus h2 li {float: left;  }
.aboutus h2 li i {font-size: 30px; background-color:#EC7768; padding: 10px; border-radius: 50%; width: 40px; height: 40px; line-height: 40px; color:#fff; position: absolute; left:380px; top:-20px; }
.aboutus p {color: #666; margin-top: 40px; font-size: 14px; line-height: 22px; letter-spacing: -0.03em; text-align: left; padding-bottom: 50px;  }

/* information */
.information {overflow: hidden; }
.information h2 {font-size: 25px; width: 100px; }
.information .in_left {float: left; width: 500px; height: 290px; margin: 20px 0 30px;}
.information .in_left table {width: 450px; height: 300px; border-top: 2px solid #464e6b;text-align: left; margin-top: 5px; }
.information .in_left th {background-color: #f8f8f8; border-bottom: 1px solid #c6c6c6; padding-left: 20px; }
.information .in_left td {border-bottom: 1px solid #c6c6c6; padding-left: 20px;  }

.information .in_right {float: left; width: 510px; height: 300px; margin: 20px 0 30px;  }
.information .in_right i { }

.information .it h3 {font-size: 16px; color: #222; margin-top: 50px; }
.information .it p {color: #666; margin-top: 10px; font-size: 13px; line-height: 24px; letter-spacing: -0.03em; text-align: left; }

/* business */
.business {  }
.business h2 {font-size: 25px;  padding: 50px 0 30px 0; }

.main { margin: 20px 0px; }
.main strong{display: block; font-size: 20px; margin-bottom: 20px;}

.drem{overflow: hidden;   }
.drem span{float: left; width: 55%; color: #666; font-size: 13px; line-height: 24px; letter-spacing: -0.03em; text-align: left; margin-right: 50px;}
.drem i{margin-left: 50px;  }

.nand{overflow: hidden;   }
.nand span {float: right; width: 55%; color: #666; font-size: 13px; line-height: 24px; letter-spacing: -0.03em; text-align: left;}
.nand i {  }

.cis{overflow: hidden;  }
.cis span {float: left; width: 55%; color: #666; font-size: 13px; line-height: 24px; letter-spacing: -0.03em; text-align: left; margin-right: 50px; }
.cis i { }

/* overview2 */
/* 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: 160px; height: 65px; margin: 0 auto; padding-left: 70px;}
.cont_title .ct-box h3 {font-size: 36px; line-height: 43px; }
.cont_title .ct-box em {display: block; font-size: 12px; color: #767676; text-transform: uppercase; line-height: 20px; letter-spacing: 0px;}
.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: 30px; 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; padding: 8px 20px 10px; text-align: left;}


/* sub_banner2 */
.sub_banner2 { }
.sub_banner2 .visual2 {height: 256px; line-height: 256px; }
.sub_banner2 .visual2.about2 {background: url(../img/choheebanner.jpg) no-repeat center top;}
.sub_banner2 .visual2 h2 {color: #fff; font-size: 45px; text-transform: uppercase; font-weight: lighter;}

/* sub_banner2 .breadcrumb */
.sub_banner2 .breadcrumb {overflow: hidden; height: 48px; line-height: 48px; background-color: #eaeaea; }
.sub_banner2 .breadcrumb .path {float: left; }
.sub_banner2 .breadcrumb .path li {display: inline; }
.sub_banner2 .breadcrumb .path li i {padding-right: 15px; }
.sub_banner2 .breadcrumb .path li a {color: #333; padding-right: 5px; font-size: 14px;}
.sub_banner2 .breadcrumb .path li a i {padding-left: 5px;}
.sub_banner2 .breadcrumb .path li:first-child a i {padding-left: 0;}
.sub_banner2 .breadcrumb .sns {float: right; }
.sub_banner2 .breadcrumb .sns li {display: inline-block;  text-align: center; background-color: #d6d6d6; }
.sub_banner2 .breadcrumb .sns li a {font-size: 15px; width: 52px; display: block;}

/* cont_title2 */
.cont_title2 {padding: 50px 0 40px 0; text-align: left;}
.cont_title2 .container2 {padding-bottom: 50px; position: absolute; left: 450px;}
.cont_title2 .ct-box2 {position: relative;  height: 65px; margin-left:300px; padding-left: 70px;}
.cont_title2 .ct-box2 em {display: block; font-size: 12px; color: #767676; text-transform: uppercase; line-height: 20px; letter-spacing: 0px;}
.cont_title2 .ct-box2 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;}
.cont_title2 .ct-box2 .first {font-size: 36px; line-height: 43px; font-weight: normal;}

/* global2 */

.global2 .global_map2 .gmlink2 {overflow: hidden; text-align: center; margin-top: 100px;}
.global2 .global_map2 .gmlink2 li {display: inline; margin-left: -3px; text-align: center; font-size: 14px; font-weight: bold; color: #333; letter-spacing: -0.01em; }
.global2 .global_map2 .gmlink2 li a {padding: 10px; border: 1px solid #c6c6c6; border-radius: 2px; width: 235px; display: inline-block;}
.global2 .global_map2 .gmlink2 li.active2 a {background-color: #ea5d4b; color: #fff;}

/* SERVER */

.column-box2 {overflow: hidden; margin-top: 30px; margin-bottom: 50px;}
.column-box2 .server {position: relative; font-size: 30px; padding-bottom: 20px; padding-top: 4px;  margin-left: 437px;}
.column-box2 .column2 {overflow: hidden; position: relative; width: 100%;}
.column-box2 .column2 .servertext {position: relative; display: block; float: left; color: rgb(85, 85, 85); text-align: left; font-size: 13px; line-height: 24px;  margin-left: 437px;}
.column-box2 .column2 .serverimage { float: right; height: 200px; position: absolute; right: 0; top: 0; }
.server:before {content:''; width: 30px; height: 2px; background-color: #EB6655; position: absolute; left: 0; top: 0;}


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

/* server */
.server {}
.server h3 {font-size: 30px;}
.server .column-box1 .column1 p {display: block; font-size: 12px; color: #767676; text-transform: uppercase; line-height: 20px; letter-spacing: 0px;}  

.server h3 {position: relative; font-size: 30px; padding-bottom: 20px; padding-top: 4px;}
.server h3:before {content:''; width: 30px; height: 2px; background-color: #EB6655; position: absolute; left: 0; top: 50px;}

/* server_box */
.server_box {overflow: hidden; text-align: center; }
.server_box h4 {font-size: 18px; text-align: center;  }
.server_box img {text-align: center;}
.server_box strong {text-align: left; color:#EC7768; }
.server_box span {text-align: left; color:#555; }

.server_box .seb1 {float: left;  margin-right: 30px; width: 26%; height: 300px; border: 1px solid #ccc; margin-bottom: 70px;}
.server_box .seb2 {float: left; margin-right: 30px; width: 26%; height: 300px; border: 1px solid #ccc; margin-bottom: 70px;}
.server_box .seb3 {float: left; width: 26%; height: 300px; border: 1px solid #ccc; margin-bottom: 70px;}


/* rp */
.rp {background-color: #f9f7f7;}
.rp .sr {}
.rp .sr h4 {position: relative; font-size: 30px; padding-bottom: 20px; padding-top: 4px;}
.rp .sr h4:before {content:''; width: 30px; height: 2px; background-color: #EB6655; position: absolute; left: 0; top: 50px;}
.rp .sr h5 {font-size: 20px;} 

.rp .dust ul {overflow: hidden;}
.rp .dust li a {position: relative;font-size: 14px;float: left; width: 200px;height: 45px; border: 1px solid #c6c6c6; border-radius: 2px; display: inline-block;  background-color: #fff; margin-right: 20px; margin-bottom: 20px; font-weight: bold; line-height: 16px; color: #555; padding-left: 30px; padding-top: 15px; }
.rp .dust li a span {display:block;font-size: 14px;}
.rp .dust li a i {color:#EB6655; display:inline; position: absolute; left: 200px;top: 20px;}
.rp .dust li.single {line-height: 57px; }


/* sub_banner3 */
.sub_banner3 { }
.sub_banner3 .visual3 {height: 256px; line-height: 256px; }
.sub_banner3 .visual3.about3 {background: url(../img/visual_ir.jpg) no-repeat center top;}
.sub_banner3 .visual3 h2 {color: #fff; font-size: 45px; text-transform: uppercase; font-weight: lighter;}

/* sub_banner2 */
.sub_banner2 { }
.sub_banner2 .visual3 {height: 256px; line-height: 256px; }
.sub_banner2 .visual3.about3 {background: url(../img/visual_ir.jpg) no-repeat center top; }
.sub_banner2 .visual3 h2 {color: #fff; font-size: 45px; text-transform: uppercase; font-weight: lighter; }

/* contents */

.sub_left { overflow: hidden; }
.sub_left .ar {float: left; width: 70%; border-top: 1px solid #ccc; }
.sub_left .ar p {width: 620px; height: 50px; padding: 18px 30px; background-color: #f8f8f8; font-size: 14px; color: #666; margin-top: 20px;}
.sub_left .ar p strong {font-weight: bold; line-height: 20px;}
.sub_left .ar p strong span {color: #ea5d4b; }

.photo {overflow: hidden; width: 70%;}
.photo ul {}
.photo li {float: left; width: 30.33%; margin-right: 15px; display: block; padding-bottom: 15px; border:1px solid #ccc; margin-top: 20px;}
.photo li img {width: 97%;}
.photo li img:hover {background-color:rgba(0,0,0,0.7); }
.photo li img span {display: block; padding: 9px 15px text-align: left;}

.smart {position: relative;  overflow: hidden; width: 70%;}
.smart .sleft {float: left; width: 45%; border: 1px solid #ddd;}
.smart p {float: left; width: 40%; letter-spacing: -0.05em; color: #555; padding-left:20px; font-size: 11px; }
.smart img {float: right; margin: -75px 20px 20px 0; max-width: 47% }
.smart .sright {float: left; width: 45%; border: 1px solid #ddd;}
.smart h4 {font-weight: bold; font-size: 16px; color: #666; padding-left: 20px; width: 20%;background-color: #eee;}
.smart h5 {padding-top:10px; font-weight: bold; font-size: 14px; color: #ea5d4b; width: 40%; padding-left:20px; }
.smart .sright span { background: #898989; font-size: 14px; font-weight: bold; color: #fff; line-height: 29px; width: 16%; position: absolute; left: 20px; top: 270px; text-align: center; }
.smart .sleft span { background: #898989; font-size: 14px; font-weight: bold; color: #fff; line-height: 29px; width: 16%; position: absolute; left: 350px; top: 270px; text-align: center;}

.sm {border: 1px solid #ddd; width: 64%; text-align: center;}
.sm h5 {font-size: 14px; font-weight: bold; color: #555; line-height: 38px;}

.contact {border: 1px solid #ddd; width: 64%;}
.contact img {padding: 10px 10px 10px 10px;}
.contact strong {display: inline-block;  height: 14px; margin-left: 27px; font-size: 16px; font-weight: bold; color: #222; 
	line-height: 14px; padding-bottom: 20px;}
.contact span {display: inline-block; height: 10px; margin-left: 18px; padding-left: 16px; border-left: 1px solid #c0bebe; 
	font-size: 13px; font-weight: bold; color: #555;}
/* 여백 초기화 */
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}

/* table 초기화 */
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: 0;  }

/* 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;}