HYNIX

사이트 만들기

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

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

	<!-- style -->
	<link rel="stylesheet" href="assets/css/style.css">
	<link rel="stylesheet" href="assets/css/reset.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 "> 
	<style>
/* 	#owl-demo .item img{
    display: block;

    height: auto;
} */
	</style>


	<!-- 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 class="banner">
				<div id="owl-demo" class="owl-carousel owl-theme">
					  <div class="item"><img src="assets/img/main_slide01.jpg" alt="하이닉스">
						<h2>Smart solutions,<br> Happy life</h2>
						<p>스마트한 IT 세상을 위한 열정과 도전,<br> 행복을 마주하는 순간과 함께합니다.</p>
					</div>
					  <div class="item"><img src="assets/img/main_slide02.jpg" alt="하이닉스">
						  <h2>Happy memory,<br> Share happiness</h2>
						<p>행복한 기억을 나누는 기업,<br> 더 나은 내일을 꿈꿉니다.</p>
					</div>
					  <div class="item"><img src="assets/img/main_slide03.jpg" alt="하이닉스">
					<h2>Growing together<br>for better tomorrow</h2>
						<p>최고의 메모리 기반 반도체 Solution Company로 도약하겠습니다.</p>
					</div>
				</div>
			</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-bold" 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-bar-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-bell-o" aria-hidden="true"></i>
											<span>주가알람</span>
										</a>
									</li>
									<li>
										<a href="#">
											<i class="fa fa-sticky-note" 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-sitemap" 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-tree" 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-heart" aria-hidden="true"></i>
										<strong>사회공헌</strong>
										<span>지역사회와의 상생과 기업 명성의 제고를 위한 차별화된 CSR 활동 전개를 사회공헌 전략으로 수립하고 있습니다.</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-balance-scale" aria-hidden="true"></i>
										<strong>공정거래</strong>
										<span>공정하고 자유로운 경쟁실천 노력과 더불어 국내외 고정거래 제반 법규를 자율적으로 준수합니다.</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-lemon-o" aria-hidden="true"></i>
										<strong>친환경제품</strong>
										<span>환경보호를 목적으로 하는 환경규제에 부합하는 환경친화적인 제품을 만들고자 지속적인 노력을 기울이고 있습니다.</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-sticky-note-o" 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/prd01.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/prd01.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/prd01.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/prd01.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/prd01.jpg" alt="16GB" />
									<h3>13M CMOS Image Sensor</h3>
									<p>Capturing your Memories in Vivid Colorsure your data even in case of power outage.</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/blogimg1.png" alt="blog" />
								<span>반도체 국가대표를 양성하다. SKHU : SK hyn 반도체 국가대표를 양성하다. SKHU : SK hyn...</span>
							</a>
						</div>
						<div>
							<a href="#">
								<img src="assets/img/blogimg2.png" alt="blog2" />
								<span>반도체 국가대표를 양성하다. 반도체 국가대표를 양성하다. SKHU : SK hyn SKHU : SK hyn...</span>
							</a>
						</div>
						<div>
							<a href="#">
								<img src="assets/img/blogimg3.png" alt="blog3" />
								<span>반도체 국가대표를 양성하다.  반도체 국가대표를 양성하다. SKHU : SK hynSKHU : SK hyn...</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 pt10">
									<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 type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="assets/js/owl.carousel.js"></script>
	<script>
	$(document).ready(function() {
 
	  $("#owl-demo").owlCarousel({

		  navigation : false, // Show next and prev buttons
		  slideSpeed : 300,
		  paginationSpeed : 400,
		  singleItem:true,
		  autoPlay : 7000
	

// 		  singleItem:true,
// 		  items : 1, 
// 		  itemsDesktop : true,
// 		  itemsDesktopSmall : false,
// 		  itemsTablet: false,
// 		  itemsMobile : false

	  });

	});
</script>
 
</body>

</html>

					
/* layout */

#wrap {
    width: 100%;
}

#header {
    width: 100%;
    height: 95px;
    
}

#banner {
    width: 100%;
    height: 530px;
    overflow: hidden;
}

#contents {
    
}

#footer {
    width: 100%;
    height: 300px;
}


/* 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);
    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;
    top: 100px;
    left: 50%;
    margin-left: -510px;
    color: #fff;
    font-size: 50px;
    line-height: 60px;
    text-align: left;

}
#banner .item p{
    position: absolute;
    top: 230px;
    left: 50%;
    text-align: left;
    margin-left: -510px;
    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 {
    width: 619px;
    height: 300px;
    float: left;
    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; 
}
.corporate_box li a:hover{
    color: #222;
    text-decoration: none;
}
.corporate_box li a strong:hover {
    text-decoration: underline;
}
.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;
}

/* products */
.products {
    padding: 60px 0 70px;
}
.products h2 {
    text-align: center; 
    font-size: 26px;
    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 a:hover h3{
    text-decoration: underline;
    color: #222;
}
.products .products_box .col1 {
    
}
.products .products_box .column h3 {
    font-size: 16px;
    margin-top: 20px;
}
.products .products_box .column p {
    color: #555;
}

/* 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;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blog div a span:hover{
    text-decoration: underline;
}
.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 {
    height: 225px;
    background-color: #e9e9e9;
    overflow: hidden;
   
}
.footer_top h3{
    margin-bottom: 8px;
}
.footer_top .ft-left{
    float: left;
    width: 50%;
    height:100%;
    border-right: 1px solid #d7d7d7;
    padding: 22px 15px 30px 15px;
}
.footer_top .ft-left ul li{
    width: 50%;
    float: left;
    
}
.footer_top ul li{
   padding-bottom: 4px;
}
.footer_top .ft-right {
    float: left;
    padding: 22px 15px 30px 15px;
}


.footer_top .ft-right .ft-right1{
    float: left;
    width: 260px;
}
.footer_top .ft-right .ft-right1 li:last-child{
    margin-bottom: 10px;
} 
.footer_top .ft-right .ft-right2{
    float: left;
}
 */

/* footer_top */
.footer_top {
    overflow: hidden;
    background-color: #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{
    width: 50%;
    float:left;
    
}
.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{
    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;
    background-color: #eaeaea;
/*     margin-bottom: 100px; */
    line-height: 48px;
}
.sub_banner .breadcrumb .path {
    float: left;
}
.sub_banner .breadcrumb .path li {
    display: inline;
}
.sub_banner .breadcrumb .path li a{
    color: #333;
    padding-right: 5px;
    font-size: 14px;
}
.sub_banner .breadcrumb .path li i{
    padding-right: 15px;
}
.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;
    background-color: #d6d6d6;
    text-align: center;
    
}
.sub_banner .breadcrumb .sns li a{
    font-size: 15px;
    width: 52px;
    display: block;
}

/* title_box 

.contents .title_box {
    position: relative;
    text-align: center;
    overflow: hidden;
    margin-top: 30;
    padding: 58px 170px 47px 50px;
    border-bottom: 1px solid #ddd;
    
}
.contents .title_box .buildicon{
    
}
.contents .title_box .buildicon i{
    font-size: 30px;
    background-color: #ea5d4b;
    border-radius: 50%;
    width:50px;
    height: 50px;
    color: #fff;
    line-height:  50px;
 
}
.contents .title_box .buildicon span{
    position: absolute;
    top: 60px;
    left: 485px;
    color: #767676;
    letter-spacing: 0;
}
.contents .title_box p{
    position: absolute;
    top:75px;
    right:420px;
    font-size: 30px;
    font-weight: bold;
} */ 
/* cont_title */

.cont_title {
    padding: 50px 0 40px 0;
    text-align: left;
}

.cont_title .container {
    padding-bottom: 50px;
}

.cont_title .ct-box {
    position: relative;
    width: 325px;
    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 .container .skexplain{
    margin-top: 34px;
    font-size: 14px;
    color: #555;
   
}

.contents .infor{
    margin-top: 30px;
    position: relative;
   
}
.contents .infor h2{
    font-size:  30px;
}

.contents .infor table {
    width: 500px;
    height: 300px;
    border-top: 2px solid #464e6b;
    text-align: left;
    margin-top:20px;

    
    
}
.contents .infor table th{
    background-color: #f8f8f8;
    border-bottom: 1px solid #c6c6c6;
    padding-left: 20px;
    
}
.contents .infor table td{
    border-bottom: 1px solid #c6c6c6;
    padding-left: 20px;
    
    
}
.contents .infor .inforimg img {
    position: absolute;
    top: 80px;
    right: 0;
        
}

.contents .semi {
    margin-top: 40px;
}
.contents .semi h3 {
    margin-bottom: 25px;
}
.contents .semi p {
    color: #555;
    font-size: 13px;
    letter-spacing: 0.2px;
    line-height: 23px;
    
}

.contents .business{
    position: relative;
    margin: 30px 0 0 0;
   
}
.contents .business h2{
    font-size:  30px;
}
.contents .business h3 {
    margin-top: 30px;
    font-size:16px;
}
.contents .business .b_content_box{
    width: 600px;   
    margin-top:   20px;
    letter-spacing: 0.2px;
    height: 300px;
    color: #555;
    line-height: 23px;
}
.contents .business .business_box2{
    position: relative;
   overflow: hidden;
}

.contents .business .businessimg img{
    position: absolute;
    top: 140px;
    right: 0;
}
.contents .business .business_box2 .businessimg2 img{
    position: absolute;
    top: 15px;
    left: 0;
    float: left;
 }

.contents .business .business_box2 .b_content_box2{
    width: 600px;   
    margin-top:  20px;
    margin-left: 420px;
    letter-spacing: 0.2px;
    height: 300px;
    color: #555;
    line-height: 23px;
}
.contents .business .business_box3 {
    position: relative;
}
.contents .business .business_box3 .businessimg3 img{
    position: absolute;
    top: 10px;
    right: 0;
    
}

/* computing */
/* sub_bar */

.sub_bar .sub_box {
    
}
.sub_bar .sub_box ul {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #111;
}
.sub_bar .sub_box li {
    text-align: center;
    width: 251px;
    height: 50px;
    line-height: 50px;
    border-left: 1px solid #ccc; 
    display: inline-block;
  

}
.sub_bar .sub_box li a{
    font-size: 14px;
    font-weight: bold;
/*     color: #333; */
    letter-spacing: -0.01em;
}
.sub_bar .sub_box .server {
    border: none;
    width: 251px;
/*     border: 1px solid #ea5d4b; */
    background-color: #ea5d4b;
}
.sub_bar .sub_box .server a{
    color: #fff;
    
    
}

/* sub_banner */
.sub_banner .visual.about2{
    background: url(../img/visual_product_solComputing.jpg) no-repeat center top;
}
.sub_banner .visual h2{
    color:#fff;
    font-size: 45px;
    text-transform: uppercase;
    font-weight: normal;
}

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

/* 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%;
}
.column-box .w60 p{
    line-height: 24px;
    letter-spacing: -0.05em;
    color: #555;
}

/* servercon */
.servercon{
   overflow: hidden;
   text-align: center;
}
.server_box{
    
    float: left;

}
.s_con1 {
    width: 320px;
    height: 410px;
    border: 1px solid #d6d6d6;
    float: left;
    margin-right: 22px;
}
.s_con1 .con1_top{
     height: 35%;
    margin-bottom: 10px;

} 
.s_con1 .con1_top img{
    display: block;
    margin: 40px auto 20px;

}
.s_con1 .con1_top h5{
  
    font-size: 17px;
    font-weight: bold;
    padding: 0 20px;
    text-align: center;
    letter-spacing: 0.02em;
    
}
.s_con1 .con1_bom {
    height: 196px;
    padding: 10px 20px;
    background-color: #f7f7f7;
    text-align: left;
    border-bottom:1px solid #d6d6d6;
}
.s_con1 .con1_bom li:nth-child(1){
    font-size: 15px;
    font-weight: bold;
    color: #ea5d4b;
    margin-top: 20px;
    letter-spacing: 0.04em;
}
.s_con1 .con1_bom li:nth-child(3){
    font-size: 15px;
    font-weight: bold;
    color: #ea5d4b;
    margin-top: 20px;
    letter-spacing: 0.04em;
}
.s_con1 .con1_bom li:nth-child(2n){
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
    color: #555;
    line-height: 24px;
    font-size: 13px;
    letter-spacing: 0.02em;
}
/* s_con2 */
.s_con2 {
    width: 320px;
    height: 410px;
    border: 1px solid #d6d6d6;
    float: left;
    margin-right: 22px;

}

.s_con2 .con2_top{
     height: 35%;
    margin-bottom: 10px;

} 
.s_con2 .con2_top h5{
  
    font-size: 17px;
    font-weight: bold;
    padding: 0 20px;
    text-align: center;
    letter-spacing: 0.02em;
    
}
.s_con2 .con2_bom {
    height: 196px;
    padding: 10px 20px;
    background-color: #f7f7f7;
    text-align: left;
}

.s_con2 .con2_top img{
    display: block;
    margin: 40px auto 20px;

}
.s_con2 .con2_bom li:nth-child(1){
    font-size: 15px;
    font-weight: bold;
    color: #ea5d4b;
    margin-top: 20px;
    letter-spacing: 0.04em;
}
.s_con2 .con2_bom li:nth-child(3){
    font-size: 15px;
    font-weight: bold;
    color: #ea5d4b;
    margin-top: 20px;
    letter-spacing: 0.04em;
}
.s_con2 .con2_bom li:nth-child(2n){
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
    color: #555;
    line-height: 24px;
    font-size: 13px;
    letter-spacing: 0.02em;
}


/* s_con3 */

.s_con3 {
    width: 320px;
    height: 410px;
    border: 1px solid #d6d6d6;
    float: left;
}
.s_con3 .con3_top{
    height: 35%;
    margin-bottom: 10px;

} 
.s_con3 .con3_top h5{ 
    font-size: 17px;
    font-weight: bold;
    padding: 0 20px;
    text-align: center;
    letter-spacing: 0.02em;
    
}
.s_con3 .con3_bom {
    height: 196px;
    padding: 10px 20px;
    background-color: #f7f7f7;
    text-align: left;
}

.s_con3 .con3_top img{
    display: block;
    margin: 40px auto 20px;

}
.s_con3 .con3_bom li:nth-child(1){
    font-size: 15px;
    font-weight: bold;
    color: #ea5d4b;
    margin-top: 20px;
    letter-spacing: 0.04em;
}
.s_con3 .con3_bom li:nth-child(3){
    font-size: 15px;
    font-weight: bold;
    color: #ea5d4b;
    margin-top: 20px;
    letter-spacing: 0.04em;
}
.s_con3 .con3_bom li:nth-child(2n){
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
    color: #555;
    line-height: 24px;
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* section02 */
.section02 {
    margin-bottom: 60px;
}
.section02 h4 {
    position: relative;
    font-size: 30px;
    padding-bottom: 20px;
    padding-top: 4px;
    font-weight: normal;
    
}
.section02 h4:before {
    content: '';
    width: 30px;
    height: 2px;
    background-color: #EB6655;
    position: absolute;
    left: 0;
    top: 0;
    
}
.s_con4 {
    width: 320px;
    height: 600px;
    border: 1px solid #d6d6d6;
    float: left;
    margin-right: 22px;
}
.s_con4 .con4_top{
     height: 30%;
    margin-bottom: 10px;

} 
.s_con4 .con4_top img{
    display: block;
    margin: 40px auto 20px;

}
.s_con4 .con4_top h5{
  
    font-size: 17px;
    font-weight: bold;
    padding: 0 20px;
    text-align: center;
    letter-spacing: 0.02em;
    
}
.s_con4 .con4_bom {
    height: 350px;
    padding: 10px 20px;
    background-color: #f7f7f7;
    text-align: left;
    border-bottom:1px solid #d6d6d6;
}
.s_con4 .con4_bom li:nth-child(odd){
    font-size: 15px;
    font-weight: bold;
    color: #ea5d4b;
    margin-top: 20px;
    letter-spacing: 0.04em;
}
.s_con4 .con4_bom li:nth-child(even){
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
    color: #555;
    line-height: 24px;
    font-size: 13px;
    letter-spacing: 0.02em;
}
/* s_con2 */
.s_con5 {
    width: 320px;
    height: 600px;
    border: 1px solid #d6d6d6;
    float: left;
    margin-right: 22px;

}

.s_con5 .con5_top{
     height: 30%;
    margin-bottom: 10px;

} 
.s_con5 .con5_top h5{
  
    font-size: 17px;
    font-weight: bold;
    padding: 0 20px;
    text-align: center;
    letter-spacing: 0.02em;
    
}
.s_con5 .con5_bom {
    height: 350px;
    padding: 10px 20px;
    background-color: #f7f7f7;
    text-align: left;
}

.s_con5 .con5_top img{
    display: block;
    margin: 40px auto 20px;

}
.s_con5 .con5_bom li:nth-child(odd){
    font-size: 15px;
    font-weight: bold;
    color: #ea5d4b;
    margin-top: 20px;
    letter-spacing: 0.04em;
}

.s_con5 .con5_bom li:nth-child(even){
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
    color: #555;
    line-height: 24px;
    font-size: 13px;
    letter-spacing: 0.02em;
}


/* s_con3 */

.s_con6 {
    width: 320px;
    height: 600px;
    border: 1px solid #d6d6d6;
    float: left;
}
.s_con6 .con6_top{
    height: 30%;
    margin-bottom: 10px;

} 
.s_con6 .con6_top h5{ 
    font-size: 17px;
    font-weight: bold;
    padding: 0 20px;
    text-align: center;
    letter-spacing: 0.02em;
    
}
.s_con6 .con6_bom {
    height: 350px;
    padding: 10px 20px;
    background-color: #f7f7f7;
    text-align: left;
}

.s_con6 .con6_top img{
    display: block;
    margin: 40px auto 20px;

}
.s_con6 .con6_bom li:nth-child(odd){
    font-size: 15px;
    font-weight: bold;
    color: #ea5d4b;
    margin-top: 20px;
    letter-spacing: 0.04em;
}

.s_con6 .con6_bom li:nth-child(even){
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
    color: #555;
    line-height: 24px;
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* section03 */
.section03{
    background-color: #f9f7f7;
    height: 700px;
    padding-top: 20px;
}
.section03 h4 {
    position: relative;
    font-size: 30px;
    padding-bottom: 20px;
    padding-top: 4px;
    font-weight: normal;
    
}
.section03 h4:before {
    content: '';
    width: 30px;
    height: 2px;
    background-color: #EB6655;
    position: absolute;
    left: 0;
    top: 0;   
}
.section03 h5 {
    overflow: hidden;
    font-size: 18px;
    margin-bottom: 5px;
}
.Relate ul {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}
.Relate ul li {
    margin-right:10px;
    display: inline-block;
    border:1px solid #d6d6d6;
    background-color: #fff;
    width:240px;
    height: 50px;
}
.Relate ul li a{
    font-weight: bold;
    line-height: 50px;
    color: #6F6F6F;
    font-size: 14px;
}


.Relate ul li:nth-child(5){
    position: absolute;
    top: 65px;
    left: 2px;
}
.Relate ul li:nth-child(6){
    position: absolute;
    top: 65px;
    left: 256px;
}
.Relate ul li:nth-child(7){
    position: absolute;
    top: 65px;
    left: 511px;
}

/* Resources */


.Resources {
    margin-top: 100px;
}

.Resources ul {
    text-align: left;
    margin-bottom: 30px;
    position: relative;
}
.Resources ul li {
    position: relative;
    padding: 5px 7px 2px 15px;
    margin-right:10px;
    display: inline-block;
    border:1px solid #d6d6d6;
    background-color: #fff;
    width:240px;
    height: 50px;
    box-sizing: border-box;
}
.Resources ul li a{
    text-align:left;
    font-weight: bold;
    line-height: 20px;
    color: #555;
    font-size: 14px;
    letter-spacing: 0.05em;
}
.Resources ul li:nth-child(3){
/*     padding: 17px 60px 19px 19px; */


}
.Resources ul li:nth-child(5){
    position: absolute;
    top: 65px;
    left: 0px;
}
.Resources ul li:nth-child(6){
    position: absolute;
    top: 65px;
    left: 252px;
    padding: 17px 60px 19px 19px;
}
.Resources ul li:nth-child(7){
    position: absolute;
    top: 65px;
    left: 504px;
}
.Resources ul li i{
    position: absolute;
    top: 14px;
    font-size: 25px;
    right: 10px;
    color: #EB6655;
}
.Resources ul li span{
    font-weight: normal;
    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;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:-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;}