@import url("common.css");

/* visual */
#visual {width:100%; height:100%; position:relative; background:#000; overflow:hidden;}
#visual .slick-slider {position: relative; display: block;}
#visual .slick-list {position: relative; display: block; overflow: hidden;}
#visual .slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
#visual .slick-initialized .slick-slide{display: block; outline: none;}
#visual .slick-vertical .slick-slide{display: block; height: auto; border: 1px solid transparent;}

#visual .cover01 {}
#visual .cover02 {}
#visual .cover03 {}

#visual .sub_imgbox{height:100%; width:100%; margin:0; position:relative; }
#visual .section{width:100%;height:calc(100% - 94px); padding-top:94px;position:relative;overflow:hidden;background-position:center; background-size:cover; border:0;}
#visual .sub_imgbox .slick-list ,
#visual .sub_imgbox .slick-track {height:100%;}

.video-foreground,.video-background iframe {position: absolute; top: 0; left: 0; width: 100%; height:calc(100% - 94px); padding-top:94px; pointer-events: none; opacity:.8}
	@media (min-aspect-ratio: 16/9) {
	  .video-foreground { height: 300%; top: -100%; }
	}

	@media (max-aspect-ratio: 16/9) {
	  .video-foreground { width: 300%; left: -100%; }
	}

	@media all and (max-width: 600px) {

	}

	@media all and (max-width: 500px) {
	.vid-info .acronym { display: none; }
	}


.video-background2 {background: #000; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:0;}
.video-foreground2,.video-background2 video {
display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform:translate(-50%, -50%);
	opacity:.8
}


#visual .slick-dots{position:absolute; top:26%; left:50%;  z-index:1009; -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%); text-align:center;}
#visual .slick-dots li{float:left;}
#visual .slick-dots li button{width:10px; height:10px; background:rgba(255,255,255,.0); border:1px solid rgba(255,255,255,.3); font-size:0; cursor:pointer; border-radius:100%; padding:0; margin:0 4px}
#visual .slick-dots li.slick-active button{background:#fff;}

#visual .b_btn {position:absolute; bottom:10%; left:50%; -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%);  z-index:1009}
#visual .btn-play {border:none; display:none; background: none; cursor:pointer;}
#visual .btn-stop {border:none; background: none; cursor:pointer;}

#visual .visual_txt{position:absolute; width:100%; text-align:center; top:22%; z-index:1010; text-align:center; box-sizing:border-box;  z-index:1010; opacity:0; margin-top:-30px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .8s;
transition-duration: .8s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}

#visual .slick-slide.action .visual_txt{margin-top:0; opacity:1;}
#visual .visual_txt h2 p{font-size:26px; font-family:'Poppins',sans-serif; letter-spacing:3pt; line-height:100%; font-weight:200; padding:10px 0 20px 0}
#visual .visual_txt h2{font-size:65px; color:#fff; letter-spacing:0.3pt; font-weight:800; line-height:100%;}
#visual .visual_txt p.txt{font-size:17px; font-weight:300; letter-spacing:-0.5pt; color:rgba(255,255,255,.8); padding-top:32px; line-height:155%;}

.slick-prev{position: absolute; top:52%; left:4%; width:25px; height:22px; background:url('/img/arrow_prev.png') no-repeat; border:0; font-size:0; z-index:1009; cursor:pointer;}
.slick-next{position: absolute; top:52%; right:4%; width:25px; height:22px; background:url('/img/arrow_next.png') no-repeat; border:0; font-size:0; z-index:1009; cursor:pointer;}


#visual .scroll_down{width:38px;position:absolute; bottom:40px; left:50%;margin-left:-19px; text-align:center; z-index:1010}
#visual .scroll_down a{position:relative; display:block; text-align:center;  top:5px; animation: down_ani 1.5s ease-in-out infinite;
background:url('/img/mouse_down.png') center 70% no-repeat; border:1px solid rgba(255,255,255,.5); width:38px; height:60px; text-align:center; border-radius:20px; box-sizing:border-box; cursor:pointer;  transition: all 0.3s;}
#visual .scroll_down a:hover{border-color:#fff;  transition: all 0.3s;}

@keyframes down_ani {          
       0% {top:5px;} 
	   50% {top:20px;}  
       100% {top:5px;} 
}


#contents{}
#contents h3{font-size:45px; font-weight:800; color:#222; letter-spacing:-0.5pt; line-height:135%; padding:8px 0 30px 0}
#contents h4{font-size:30px; font-weight:100; color:#222; letter-spacing:-0.5pt; line-height:135%}
#contents h4 span{font-weight:800; line-height:135%}
#contents p.eng{font-size:20px; color:#222; font-weight:300; font-family:"Poppins", sans-serif;}
#contents .stxt{font-size:17px; color:#888; font-weight:300; letter-spacing:-0.4pt; line-height:175%}
#contents .btn a{position:relative; display:inline-block; font-size:0; font-weight:bold; letter-spacing:-0.3pt; padding-right:35px; transition: all 0.3s;}
#contents .btn a:hover{padding-right:35px; transition: all 0.3s;}
#contents .btn a:after{position:absolute; right:0; display:inline-block; content:""; overflow:hidden; width:35px; height:25px; background-position:0; background-repeat:no-repeat;}
	#contents .btn.blue a{color:#0e4194}
	#contents .btn.blue a:after{background-image:url('/img/more_blue.png')}
	#contents .btn.purple a{color:#814997}
	#contents .btn.purple a:after{background-image:url('/img/more_purple.png')}
	#contents .btn.sky a{color:#009ede}
	#contents .btn.sky a:after{background-image:url('/img/more_sky.png')}
	#contents .btn.yellow a{color:#f39324}
	#contents .btn.yellow a:after{background-image:url('/img/more_yellow.png')}
	#contents .btn.green a{color:#50b747}
	#contents .btn.green a:after{background-image:url('/img/more_green.png')}
	#contents .btn.red a{color:#e30613}
	#contents .btn.red a:after{background-image:url('/img/more_red.png')}


/* 한컴소개 */
#contents .info_con{position:relative; text-align:center; padding:160px 0; opacity:0; top:-80px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
#contents .info_con.active{top:0; opacity:1;}
#contents .info_con p.stxt{ padding:30px 0 70px 0;}
#contents .info_con #sticker{z-index:9999 !important}
#contents .info_con .is-sticky #sticker{background:#f5f5f5; top:89px !important; padding:10px 0; box-shadow:rgba(0,0,0,.1) 5px 5px 8px;}
#contents .info_con ul{}
#contents .info_con li{display:inline-block; vertical-align:top; padding:0 30px}
#contents .info_con li a{display:block; color:#222; letter-spacing:-0.3pt; padding:60px 8px 0 8px; min-width:60px; background-position:center 0; background-repeat:no-repeat; transition: all 0.3s;}
#contents .info_con .is-sticky #sticker li a{padding:10px 8px 10px 8px; background:none;}
#contents .info_con .is-sticky #sticker li a br{display:none}
#contents .info_con li a:hover{background-position:center 6px; transition: all 0.3s;}
	#contents .info_con li.one a{background-image:url('/img/business_icon01.png')}
	#contents .info_con li.two a{background-image:url('/img/business_icon02.png')}
	#contents .info_con li.three a{background-image:url('/img/business_icon03.png')}
	#contents .info_con li.four a{background-image:url('/img/business_icon04.png')}
	#contents .info_con li.five a{background-image:url('/img/business_icon05.png')}
	#contents .info_con li.six a{background-image:url('/img/business_icon06.png')}
	#contents .info_con li.seven a{background-image:url('/img/business_icon07.png')}

	#contents .info_con li.one a:hover{background-image:url('/img/business_icon01_up.png'); color:#0e4194; }
	#contents .info_con li.two a:hover{background-image:url('/img/business_icon02_up.png'); color:#814997;}
	#contents .info_con li.three a:hover{background-image:url('/img/business_icon03_up.png'); color:#009ede}
	#contents .info_con li.four a:hover{background-image:url('/img/business_icon04_up.png'); color:#f39324;}
	#contents .info_con li.five a:hover{background-image:url('/img/business_icon05_up.png'); color:#50b747;}
	#contents .info_con li.six a:hover{background-image:url('/img/business_icon06_up.png'); color:#e30613}
	#contents .info_con li.seven a:hover{background-image:url('/img/business_icon07_up.png'); color:#50b747}

	#contents .info_con li.one a.mPS2id-highlight{background-image:url('/img/business_icon01_up.png'); color:#0e4194;}
	#contents .info_con li.two a.mPS2id-highlight{background-image:url('/img/business_icon02_up.png'); color:#814997;}
	#contents .info_con li.three a.mPS2id-highlight{background-image:url('/img/business_icon03_up.png'); color:#009ede;}
	#contents .info_con li.four a.mPS2id-highlight{background-image:url('/img/business_icon04_up.png'); color:#f39324;}
	#contents .info_con li.five a.mPS2id-highlight{background-image:url('/img/business_icon05_up.png'); color:#50b747;}
	#contents .info_con li.six a.mPS2id-highlight{background-image:url('/img/business_icon06_up.png'); color:#e30613;}
	#contents .info_con li.seven a.mPS2id-highlight{background-image:url('/img/business_icon07_up.png'); color:#50b747}

/* 사업소개 */
#contents .business{position:relative; width:100%; height:640px; overflow:hidden;
opacity:0;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
#contents .business.active{opacity:1;}

#contents .business .txt_area{position:relative; margin:0 auto; padding-top:120px; width:1280px; box-sizing:border-box;
opacity:0; top:-70px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#contents .business.active .txt_area{opacity:1; top:0}
#contents .business.right .txt_area{padding-left:740px;}
	#contents .business .txt_area p.stxt{padding-bottom:50px;}
	#contents .business#blockchain .txt_area{}
	#contents .business#authentication .txt_area{}
	#contents .business#secure .txt_area{}
	#contents .business#forensics .txt_area{padding-top:90px}
	#contents .business#vr .txt_area{}
	#contents .business#academy .txt_area{}


#contents .business .img_area{position:absolute; width:100%; top:0; left:50%; height:640px;}
#contents .business .img_area div{position:relative; right:0; background-position:0 0; background-repeat:no-repeat;  height:640px;
opacity:1;
}

/*#contents .business.active .img_area div{opacity:1; right:0}*/

#contents .business.right .img_area{left:auto; right:50%;}
#contents .business.right .img_area div{background-position:right 0; left:-30%; right:auto;}
#contents .business.right.active .img_area div{left:0}
#contents .business .img_area img{display:none; opacity:0;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;}

#contents .business.active .img_area img{opacity:1;}
	#contents .business#blockchain .img_area div{background-image:url('/img/blockchain_img.jpg')}
	#contents .business#authentication .img_area div{background-image:url('/img/authentication_img.jpg')}
	#contents .business#secure .img_area div{background-image:url('/img/secure_img.jpg')}
	#contents .business#forensics .img_area div{background-image:url('/img/forensics_img.jpg')}
	#contents .business#vr .img_area div{background-image:url('/img/vr_img.jpg')}
	#contents .business#academy .img_area div{background-image:url('/img/academy_img.jpg')}

/* 블로그, 고객사례, 문의 */
#contents #cs_con{position:relative; overflow:hidden; margin:0 auto; width:1280px; box-sizing:border-box; padding:150px 0;
 opacity:0; transition: all 0.8s;
}
#contents #cs_con.active{ opacity:1; transition: all 0.8s;}
#contents #cs_con dl{float:left; /*width:406px;*/ width:610px; margin-right:30px; text-align:center;}
#contents #cs_con dl:last-child{margin-right:0}
#contents #cs_con dl a{position:relative; overflow:hidden; display:block; height:554px; padding-top:210px; background-position:0 0; background-repeat:no-repeat; background-size:cover; box-sizing:border-box; transition: all 0.3s;}
#contents #cs_con dl a:hover{padding-top:150px; transition: all 0.3s;}
#contents #cs_con dl a:after{position:absolute; top:50%; left:0; display:block; content:""; overflow:hidden; width:100%; height:100%; opacity:0; z-index:1; transition: all 0.3s;}
#contents #cs_con dl a:hover:after{top:0; opacity:.6; transition: all 0.3s;}
	#contents #cs_con dl.blog a{background-image:url('/img/blog_img.jpg')}
	#contents #cs_con dl.blog a:after{background-color:#50b747;}
	#contents #cs_con dl.case a{background-image:url('/img/case_img.jpg')}
	#contents #cs_con dl.case a:after{background-color:#0e4194;}
	#contents #cs_con dl.contact a{background-image:url('/img/contact_img.jpg')}
	#contents #cs_con dl.contact a:after{background-color:#009ede;}

#contents #cs_con dl a dt{position:relative; z-index:12; color:#fff; font-size:25px; padding:88px 0 0 0; font-weight:bold; letter-spacing:-0.4pt;}
#contents #cs_con dl a dt:before{position:absolute; z-index:12; top:0; left:50%; margin-left:-30px; display:block; content:""; overflow:hidden; width:60px; height:60px; border-radius:100%; background-position:center; background-repeat:no-repeat}
	#contents #cs_con dl.blog a dt:before{background-color:#50b747; background-image:url('/img/blog_icon.png');}
	#contents #cs_con dl.case a dt:before{background-color:#0e4194; background-image:url('/img/case_icon.png');}
	#contents #cs_con dl.contact a dt:before{background-color:#009ede; background-image:url('/img/contact_icon.png');}
#contents #cs_con dl a .stxt{position:relative; color:rgba(255,255,255,.7); padding:10px 0 30px 0; z-index:12;}
#contents #cs_con dl a .btn{position:relative; display:inline-block; font-size:0; color:#fff; font-weight:bold; letter-spacing:-0.3pt; padding-right:35px; transition: all 0.3s; z-index:12;}
#contents #cs_con dl a .btn:after{position:absolute; right:0; display:inline-block; content:""; overflow:hidden; width:35px; height:25px; background-image:url('/img/more_white.png'); background-position:0; background-repeat:no-repeat;}



/*******************************************************************************
	@media 1024px~1310px
*******************************************************************************/
@media all and (max-width:1310px){

#contents h3{font-size:40px;}

/* 사업소개 */
#contents .business .txt_area{padding-right:52%; width:96%;}
#contents .business.right .txt_area{padding-left:52%; padding-right:0}
	#contents .business .txt_area p.stxt br{display:none}



/* 블로그, 고객사례, 문의 */
#contents #cs_con{width:96%;}
#contents #cs_con dl{width:49.5%; margin-right:1%;}
#contents #cs_con dl a{padding:210px 5% 0 5%; }
#contents #cs_con dl a .stxt br{display:none}



}


/*******************************************************************************
	@media 980~1024px
*******************************************************************************/
@media all and (max-width:1024px){
}


/*******************************************************************************
	@media 768~980px
*******************************************************************************/
@media all and (max-width:980px){


#visual .visual_txt{}
#visual .visual_txt h2 p{font-size:20px; padding:10px 0 15px 0}
#visual .visual_txt h2{font-size:50px;}
#visual .visual_txt p.txt{font-size:15px; padding-top:30px;}


#contents h3{font-size:38px;}
#contents h4{font-size:26px;}
#contents p.eng{font-size:18px;}
#contents .stxt{font-size:15px; line-height:170%}
#contents .btn a{}
#contents .btn a:after{top:-2px;}

/* 한컴소개 */
#contents .info_con{padding:100px 3%;}
#contents .info_con h4 br{display:none}
#contents .info_con p.stxt br{display:none}
#contents .info_con p.stxt {padding:20px 0 40px 0}

#contents .info_con #sticker{display:block;}
#contents .info_con .is-sticky #sticker{display:none;}
#contents .info_con ul{}
#contents .info_con li{width:16%; padding:15px 0}
#contents .info_con li a{padding:60px 5px 0 5px;}


/* 사업소개 */
#contents .business{height:auto;} 
#contents .business .txt_area{padding:30px 0 70px 0; }
#contents .business.right .txt_area{padding:30px 0 70px 0;}
	#contents .business .txt_area p.stxt{padding-bottom:25px;}
	#contents .business#forensics .txt_area{padding-top:30px}

#contents .business .img_area{position:relative; width:100%; top:0; left:0; height:auto;}
#contents .business .img_area div{height:auto;}
#contents .business.right .img_area{left:0; right:0;}
#contents .business .img_area img{display:block}
	#contents .business#blockchain .img_area div{background-image:none}
	#contents .business#authentication .img_area div{background-image:none}
	#contents .business#secure .img_area div{background-image:none}
	#contents .business#forensics .img_area div{background-image:none}
	#contents .business#vr .img_area div{background-image:none}
	#contents .business#academy .img_area div{background-image:none}

/* 블로그, 고객사례, 문의 */
#contents #cs_con{padding:100px 0;}
#contents #cs_con dl{float:none; width:100%; margin-right:0; text-align:center;}
#contents #cs_con dl a{height:auto; padding:60px 3%; margin-bottom:10px; background-position:center; background-size:cover}
#contents #cs_con dl a:hover{padding:60px 3%;}
	#contents #cs_con dl.blog a{background-image:url('/img/blog_img_m.jpg')}
	#contents #cs_con dl.case a{background-image:url('/img/case_img_m.jpg')}
	#contents #cs_con dl.contact a{background-image:url('/img/contact_img_m.jpg')}

#contents #cs_con dl a dt{font-size:20px; padding:75px 0 0 0;}
#contents #cs_con dl a .stxt{padding:10px 0 20px 0; z-index:12;}
#contents #cs_con dl a .btn{}
#contents #cs_con dl a .btn:after{top:-2px;}



}


/*******************************************************************************
	@media 640~768px
*******************************************************************************/
@media all and (max-width:768px){
}


/*******************************************************************************
	@media ~680px
*******************************************************************************/
@media all and (max-width:680px){



/* visual */
#visual {height:430px;}
#visual .slick-slide {height: 430px;}

.video-foreground,.video-background iframe {height:calc(100% - 65px); padding-top:65px;}

#visual .sub_imgbox{height:430px;}
#visual .section{height:430px;}
#visual .sub_imgbox .slick-list ,
#visual .sub_imgbox .slick-track {height:430px;}


#visual .visual_txt{padding:0 3%;}
#visual .visual_txt h2 p{font-size:18px; padding:10px 0 15px 0}
#visual .visual_txt h2{font-size:40px;}
#visual .visual_txt p.txt{font-size:15px; padding-top:20px;}
#visual .visual_txt p.txt br{display:none}

.slick-prev{top:auto; bottom:5%; left:40%;}
.slick-next{top:auto; bottom:5%; right:40%;}

#visual .scroll_down{display:none;}



#contents h3{font-size:28px; padding:0 0 15px 0}
#contents h4{font-size:20px;}
#contents p.eng{font-size:15px;}
#contents .stxt{font-size:13px; font-weight:normal; line-height:170%}
#contents .btn a{padding-right:43px;}
#contents .btn a:hover{padding-right:38px; transition: all 0.3s;}
#contents .btn a:after{ top:-3px;}

/* 한컴소개 */
#contents .info_con{padding:50px 3%; top:0; opacity:1;}
#contents .info_con p.stxt {padding:10px 0 5px 0}
#contents .info_con ul{}
#contents .info_con li{width:30%; padding:20px 0 0 0}
#contents .info_con li a{padding:50px 0 0 0; background-size:50px}

/* 사업소개 */
#contents .business .txt_area{width:94%; padding:25px 0 40px 0;}
#contents .business.right .txt_area{padding:25px 0 40px 0;}
	#contents .business .txt_area p.stxt{padding-bottom:20px;}
	#contents .business#forensics .txt_area{padding-top:25px}

/* 블로그, 고객사례, 문의 */
#contents #cs_con{width:94%; padding:20px 0 50px 0;}
#contents #cs_con dl a{padding:40px 3%; margin-bottom:5px;}
#contents #cs_con dl a:hover{padding:40px 3%;}

#contents #cs_con dl a dt{font-size:17px; padding:60px 0 0 0;}
#contents #cs_con dl a dt:before{margin-left:-25px; width:50px; height:50px; background-size:50px}
#contents #cs_con dl a .stxt{padding:10px 0 15px 0; z-index:12;}
#contents #cs_con dl a .btn{padding-right:43px;}
#contents #cs_con dl a .btn:after{top:-3px;}



}



/*******************************************************************************
	@media ~420px
*******************************************************************************/
@media all and (max-width:420px){

}