@charset 'utf-8';
section{
    max-width:100%;
    min-width:1230px;
    overflow:hidden;
    margin:0 auto;
	top:106px;
}
section.top_section{
    height:700px;
    background:#333;
    position:relative;
}
section.top_section .dot_bg{
    top:0px;
    left:0px;
    position:absolute;
    width:100%;
    height:700px;
    z-index:1;
}
section.top_section .canvas{
    width:100%;
    height:700px;
    text-align: center;
}
section.top_section .text_box{
    top:0px;
    left:0px;
    position:absolute;
    margin:0 auto;
    padding-top:300px;
    width:100%;
    min-width:1230px;
    text-align:center;
    z-index:2;
}
section.top_section .text_box *{
    color:#fff;

}
section.top_section .text_box .small_text{
    font-family: 'NanumSquare' !important;
    font-size: 35px;
    line-height: 45px;
    letter-spacing: -0.03em;
    font-weight: bold;
    opacity: 0.8;
    margin-bottom: 15px;
}
section.top_section .text_box .big_text{
    font-size:70px;
    line-height: 90px;
    font-weight:bold;
    font-family: 'NanumSquare' !important;
}

.scroll-icon{position:absolute; bottom:70px; left:50%; width:110px; margin-left:-36px; text-align:center;}
.scroll-icon span{display:block; color:#fff; font-weight:300; font-size:15px; opacity:0.75;filter:Alpha(opacity=75); margin-bottom:15px;}

#section1 {width:1200px; height:535px; margin:0 auto; padding:115px 0 50px 0;}
#section1 h1 {font-size:35px; line-height:35px; text-align:center; color:#018ecf; font-weight:bold; padding:80px 0 0 0; letter-spacing: 0px; font-family: 'NanumSquare' !important;}
#section1 .line {height:1px; background-color:#018ecf; width:60%; margin:30px auto 50px;}
.section1_banner {width:1200px; height:320px;}
	.creating-shared-bn {position:relative; width:100%;}
    .creating-shared-bn li.left {position:relative; float:left; width:200px; height:320px; border:1px solid #cccccc; margin-left:70px;}
	.creating-shared-bn li.right {position:relative; float:right; width:200px; height:320px; border:1px solid #cccccc;}
    .creating-shared-bn li a {display:block; text-align:left;}
    .creating-shared-bn li a > img {width:80px; margin-top:30px; margin-left:51px;}
    .creating-shared-bn li a span {}
    .creating-shared-bn li a .title {display:block; padding:15px 0 0 0; font-weight:bold; font-size:20px; color:#070707; line-height:2.1; text-align:center;}
	.creating-shared-bn li a .txt {display:block; font-weight:400; font-size:15px; color:#202020; line-height:20px; text-align:center; padding:0 23px 10px;}
    .creating-shared-bn li a .title2 {padding-top:10px; font-weight:bold; color:#222; font-size:13px; line-height:3.1;}
    .creating-shared-bn li a .title span {display:none;}
    .creating-shared-bn li a .title2 .ptxt {display:block; color:#222; font-size:13px; font-weight:bold;}
    .creating-shared-bn li a .btn-download {display:none;}
	.creating-shared-bn li a:hover, .creating-shared-bn li a:active, .creating-shared-bn li a:focus { width:200px; height:320px;text-decoration:none; background: url("../images/creating-shared-bg.png") repeat left top;}

#businessList {width:1200px;}
#businessList ul{overflow:hidden;}
#businessList ul li{
    overflow:hidden; float:left; position:relative; width:370px; padding-left:37px; padding-right:37px;
    /*-moz-transform:translateY(-20%);
    -ms-transform:translateY(-20%);
    transform:translateY(-20%);*/
    top:-20%;
    -moz-transition:top 1.0s, opacity 1.0s;
    -ms-transition:top 1.0s, opacity 1.0s;
    transition:top 1.0s, opacity 1.0s;
	border-right:1px solid #eeeeee;
}
#businessList ul li:first-child{padding-left:0;}
#businessList ul li:last-child{padding-right:0;border-right:0px solid #eeeeee;}
#businessList ul li.active{
    opacity:1.0;filter:Alpha(opacity=100);
    top:0%;
    /*-moz-transform:translateY(0);
    -ms-transform:translateY(0%);
    transform:translateY(0%);*/
}
#businessList ul li a{display:block; position:relative; overflow:hidden; padding-top:402px;}
#businessList ul li .bg-thum{position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#businessList ul li .bg-thum img{
    position: absolute; top: 0; left: 0; max-width: 370px; height: 207px; 
    -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s
}
#businessList ul li .business-tit{position:absolute; top:230px; z-index:1; letter-spacing: 0px}
#businessList ul li .business-tit .busi_tit{display:block; height:30px; opacity:0.8;filter:Alpha(opacity=80); font-size:30px; font-weight:bold; color:#000000;}
#businessList ul li .business-tit strong{display:block; font-weight:400; font-size:18px; padding-top:18px; color:#575757; line-height:23px; }
#businessList ul li .business-tit .read {display:block; font-weight:bold; font-size:15px; color:#174289; padding-top:43px; background:url(../images/more_arrow.png) 120px 48px no-repeat;}
#businessList ul li .over-cover{
    position:absolute; top:0px; left:0px; width:370px; height:207px; visibility:hidden; opacity:0;filter:Alpha(opacity=0);
    background-color:rgba(0,0,0,0.6); z-index:1;  box-sizing:border-box; border:10px solid #174289;
    -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s
}
#businessList ul li .over-cover img{position:absolute; top:50%; left:50%; margin:-18px 0 0 -18px; transform:rotate(-45deg) scale(0.7);  -moz-transform:rotate(-45deg) scale(0.7); opacity:0;filter:Alpha(opacity=0);
    -webkit-transition:all 0.4s 0.1s;-moz-transition:all 0.4s 0.1s;-o-transition:all 0.4s 0.1s;-ms-transition:all 0.4s 0.1s;transition:all 0.4s 0.1s;
}
#businessList ul li a:hover .bg-thum img{max-width: 370px; height:207px; overflow:hidden; -webkit-transform:scale(1.0); -moz-transform:scale(1.0); transform:scale(1.0); }
#businessList ul li a:hover .over-cover{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
#businessList ul li a:hover .over-cover img{transform:rotate(0deg) scale(1.0);  -moz-transform:rotate(0deg) scale(1.0); opacity:1.0;filter:Alpha(opacity=100);}


#section2_wrap {width:100%; height:132px; background-color:#018dce;}
#section2 {width:1200px; height:132px; margin:0 auto;}
.section2_txt1 {font-size:45px; font-weight:bold; color:#ffffff; line-height:132px; text-align:right; width:520px; margin-right:40px; float:left;}
.section2_txt2 {font-size:20px; font-weight:bold; color:#ffffff; line-height:30px; text-align:left; width:640px; float:right; padding-top:35px;}


#section3_wrap {width:100%; background:url(../images/kdata_main_bg.png) center top no-repeat;}
#section3 {width:1200px; margin:0 auto; overflow:hidden; padding:110px 0;}
#section3_second {
	width:1200px;
	margin:0px auto;
	overflow:hidden;
	}
#section3_second div {float:left; height:300px; width:224px; margin-right:70px; position:relative;}
#section3_second div a {display:block; height:300px; width:224px;}
#section3_second div.last {margin-right:0px;}	
.swiper-slide  p {font-size:25px; line-height:35px; color:#fff;font-family:'SamsungSharpSans' !important; font-weight:bold;text-align:center; display:block; margin-top:-100px; }
.swiper-slide  .line {
  position: absolute;
  background: #018dce;
}
.swiper-slide  .line.-right, 
.swiper-slide  .line.-left {
  width: 6px;
  bottom: 0;
  top: 0;
  transform: scale3d(1, 0, 1);
}
.swiper-slide  .line.-top, 
.swiper-slide  .line.-bottom {
  height: 6px;
  left: 0;
  right: 0;
  transform: scale3d(0, 1, 1);
}
.swiper-slide  .line.-right {
  right: 0;
  transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01) 0.43s;
  transform-origin: top;
}
.swiper-slide  .line.-top {
  top: 0;
  transition: transform 0.18s linear 0.53s;
  transform-origin: left;
}
.swiper-slide  .line.-left {
  left: 0;
  transition: transform 0.18s linear 0.61s;
  transform-origin: bottom;
}
.swiper-slide  .line.-bottom {
  bottom: 0;
  transition: transform 0.4s cubic-bezier(1, 0, 0.65, 1.01);
  transform-origin: right;
}

.swiper-slide  a:hover:after,
.swiper-slide  a:active:after {
  transform: scale3d(0, 1, 1);
  right: 0;
  left: 0;
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01) 0.27s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0.1s 0.4s;
}
.swiper-slide  a:hover .line,
.swiper-slide  a:active .line {
  transform: scale3d(1, 1, 1);
}
.swiper-slide  a:hover p,
.swiper-slide  a:active p {
  transition: transform 0.68s linear 0.3s;
  transform: scale(1.3,1.3);
}
.swiper-slide  a:hover .line.-right,
.swiper-slide  a:active .line.-right {
  transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.3s;
  transform-origin: bottom;
}
.swiper-slide  a:hover .line.-top,
.swiper-slide  a:active .line.-top {
  transition: transform 0.18s linear 0.5s;
  transform-origin: right;
}
.swiper-slide  a:hover .line.-left,
.swiper-slide  a:active .line.-left {
  transition: transform 0.18s linear 0.68s;
  transform-origin: top;
}
.swiper-slide  a:hover .line.-bottom,
.swiper-slide  a:active .line.-bottom {
  transition: transform 0.6s cubic-bezier(0, 0.53, 0.29, 1) 0.86s;
  transform-origin: left;
}


#section4_wrap {width:100%; height:100px;}
#section4 {width:1200px; margin:0 auto; overflow:hidden;}
.demo_tit {float:left; width:241px; font-size:30px; font-weight:bold; line-height:100px; color:#018dce;}
.demo_btn_area {width:959px; height:100px; float:right;}
.demo_btn a {width:217px; height:38px; border:1px solid #1172c1; float:left; background-color:#43b9ef; color:#ffffff; font-size:15px; font-weight:bold; line-height:38px; text-align:center; margin-left:20px; margin-top:30px;}
.demo_btn a:hover {width:217px; height:38px; border:1px solid #1172c1; float:left; background-color:#018dce; color:#ffffff; font-size:15px; font-weight:bold; line-height:38px; text-align:center; margin-left:20px; margin-top:30px;}


/* history */
.head_area{text-align:right; max-width:1140px; margin:0 auto;}
.head_area .txt{font-size:1.4rem; line-height:24px; color:#000;}
.impo{color:#ff0000 !important;}
.com_hist{overflow:hidden; max-width:1140px; margin:0 auto;}
.head_area+.com_hist{margin-top:13px;}
.com_hist+.com_hist{margin-top:100px;}
.com_hist>dt{float:left; padding-top:23px; width:22%; border-top:4px solid #000; font-size:2.8rem; line-height:36px; font-weight:bold; color:#000;}
.com_hist>dt a{display:block;}
.com_hist>dt a:hover, .com_hist>dt a:active{color:#000; cursor:default;}
.com_hist>dd{float:right; width:78%; padding-left:44px; text-align:left;}
.com_hist dd ul li{border-bottom:1px solid #000; overflow:hidden; padding:11px 0;}
.com_hist dd ul li:first-child{border-top:1px solid #000;}
.com_hist dd ul li strong.date{width:11%; float:left; font-size:2.4rem; line-height:36px; font-weight:bold; color:#000;}
.com_hist dd ul li p.txt{width:89%; text-align:left; float:right; font-size:1.8rem; line-height:32px; color:#000;}
.ont+.com_hist{margin-top:80px;}

.com_hist.type1{max-width:960px;}
.com_hist.type1 dd ul li{display:table; width:100%; padding:0;}
.com_hist.type1 dd ul li p{display:table-cell; vertical-align:middle; padding:10px 0; float:none;}
.com_hist.type1 dd ul .tit{font-size:1.8rem; line-height:36px;}
.com_hist.type1 dd ul .tit sup{font-size:1.4rem; font-weight:normal;}
.com_hist.type1 dd ul .tit>strong{display:inline-block; min-width:30px; font-weight:normal;}
.com_hist.type1 dd ul .tit.tit-large{font-size:2.0rem; line-height:40px;}
.com_hist.type1 dd ul .btn_txt2{line-height:28px; text-align:right; padding:0 20px;font-size:1.7rem; letter-spacing: unset;}
.com_hist.type1 dd ul .btn_txt2 .btn_live{position: relative; display: inline-block; margin-right: 31px;}
.com_hist.type1 dd ul .btn_txt2 .btn_live:after{content: ""; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); display: block; width: 1px; height: 21px; background: #00b3e2;}