@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2020-11-25
******************************************************** */


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:-15px; cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.custom-scrollbar-cover{display:block; position:absolute; top:0px; left:0px; right:0px; bottom:0px; background-color:rgba(0,0,0,0.5)}
	.custom-scrollbar-cover .scroll-cover-txt{position:absolute; top:50%; left:0; width:100%; text-align:center; color:#fff; font-size:300; font-size:15px;}
	.custom-scrollbar-cover .scroll-cover-txt i{font-size:30px; display:block; margin-bottom:20px; }
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:#333; box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected a{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a em{color:#f57f20; font-weight:600; }
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}


/* ------ 공통 :: 서브 상단 타이틀 ------- */
@media all and (max-width:1220px){		
	.cm-top-tit .txt .pc-br{display:none}
}
@media all and (max-width:800px){	
	.cm-top-tit .sm-tit{font-size:25px;}
	.cm-top-tit .big-tit{font-size:40px}
	.cm-top-tit .big-tit.big{font-size:45px}
	.cm-top-tit .txt{font-size:17px; margin-top:30px}
	.cm-top-tit .txt.big{font-size:18px}
}
@media all and (max-width:480px){		
	.cm-top-tit .sm-tit{font-size:23px}
	.cm-top-tit .big-tit.big{font-size:40px}
	.cm-top-tit .txt{font-size:16px}
	.cm-top-tit .txt.big{font-size:16px}
}

/* ------ 공통 :: 서브 하단 배너 ------- */
@media all and (max-width:1220px){	
	.sub-bt-banner .banner-wrap .banner-inner{padding-left:4%}
}
@media all and (max-width:800px){		
	.sub-bt-banner{margin-bottom:100px}
	.sub-bt-banner .banner-wrap{padding:0}
	.sub-bt-banner .banner-wrap .banner-inner .txt{padding:0 20px}
	.sub-bt-banner .banner-wrap .banner-inner{padding:40px 0 8% !important; text-align:center}
	.sub-bt-banner .banner-wrap .banner-img{position:relative; width:100% !important; right:0 !important; display:block; text-align:center}
	.sub-bt-banner .banner-wrap .banner-inner .banner-link{margin-top:30px; padding:0 8%}
	.sub-bt-banner .banner-wrap .banner-inner .banner-link a{max-width:200px; text-align:left}
	.sub-bt-banner .banner-wrap .banner-inner .banner-link a.blue-btn{margin-left:10px}
	.sub-bt-banner .banner-wrap .banner-inner .banner-link a span{height:40px}
	.sub-bt-banner .banner-wrap .banner-inner .banner-link a span em{font-size:13px; padding-left:15px !important}
	.sub-bt-banner .banner-wrap .banner-inner .banner-link a span .arrow{font-size:16px}
}
@media all and (max-width:480px){		
	.sub-bt-banner .banner-wrap .banner-inner .banner-link a{max-width:none; width:100%}
	.sub-bt-banner .banner-wrap .banner-inner .banner-link a.blue-btn{margin:10px 0 0}
}






/* ****************** 서비스소개 ********************** */

/* ********* 서비스소개 :: Why portal ******** */
@media all and (max-width:1420px){	
	/* ------- Why portal :: 컨텐츠01 (상단 비디오) ------- */
	/*상단 */
	.portal-01 .con-01-t .txt-con{padding-top:13%; padding-right:3%}
	.portal-01 .con-01-t .txt-con .txt01{font-size:58px}
	.portal-01 .con-01-t .txt-con .txt02{font-size:18px; margin:30px 0 40px}
	.portal-01 .con-01-t .txt-con .txt02 br{display:none}
	/* ------- Why portal :: 컨텐츠04 (Why portal?) ------- */
	.portal-04 > .con-04-area{margin:0 15px}
}
@media all and (max-width:1370px){	
	/* ------- Why portal :: 컨텐츠04 (Why portal?) ------- */
	.portal-04 .con-04-box .box-inner .txt .pc-br{display:none}
}
@media all and (max-width:1220px){		
	/* ------- Why portal :: 컨텐츠02 (가볍게, 그러나 든든하게) ------- */
	.portal-02 .con-02-area{padding:0 15px}
	/* ------- Why portal :: 컨텐츠03 (참 쉬운 시작과 사용) ------- */
	.portal-03 .con-03-lf .txt-slide .txt .pc-br{display:none}
}
@media all and (max-width:1024px){		
	/* ------- Why portal :: 컨텐츠03 (참 쉬운 시작과 사용) ------- */
	.portal-03 .con-03-inner{margin-top:50px}
	.portal-03 .con-03-inner > div{display:block; margin:0; }
	.portal-03 .con-03-lf{width:100%; padding:0 0 0 4.5%; box-sizing:border-box}
	.portal-03 .con-03-lf .txt-slide{margin-bottom:40px}
	.portal-03 .con-03-lf .txt-slide:before{left:-4.5%; }
	.portal-03 .con-03-lf .txt-slide.slick-current:before{height:110%}
	.portal-03 .con-03-rt{width:100%; padding-top:15%}
	.portal-03 .con-03-rt .slick-list{text-align:center}
	.portal-03 .con-03-rt .img-slide .deco-img{left:-4%}
	.portal-03 .con-03-rt .img-slide .main-img{padding:0 4%; display:block}
	.portal-03 .con-03-rt .img-slide .deco-img-move{margin-left:-126px}
	@keyframes fileMove {
		0% {
			transform:translate(0) rotate(0);
		}
		100% {
			transform:translate(-180%,-220%) rotate(-30deg)
		}
	}

	/* ------- Why portal :: 컨텐츠04 (Why portal?) ------- */
	.portal-04 > .con-04-area{padding:110px 3% 100px}
	.portal-04 .con-04-box{width:70%}
	.portal-04 .con-04-box:after{width:195px; height:190px;}
	.portal-04 .con-04-box:before{width:200px}
	.portal-04 .con-04-box.box-01:after,
	.portal-04 .con-04-box.box-01:before{right:-220px; bottom:-82px}
	.portal-04 .con-04-box.box-02:after,
	.portal-04 .con-04-box.box-02:before{left:-220px; bottom:-73px}
	
}
@media all and (max-width:960px){	
	/* ------- Why portal :: 컨텐츠03 (참 쉬운 시작과 사용) ------- */
	.portal-03 .con-03-rt .img-slide .deco-img-move{margin-left:-121px}
}
@media all and (max-width:800px){	
	/* ------- Why portal :: 컨텐츠01 (상단 비디오) ------- */
	/*상단 */
	.portal-01 .con-01-t .txt-con{float:none; width:100%; padding:30px 0 0; text-align:center}
	.portal-01 .con-01-t .txt-con .txt01{font-size:40px;}
	.portal-01 .con-01-t .txt-con .txt02{font-size:15px; margin:20px 0 30px}
	/* 상단 :: 비디오 */
	.portal-01 .con-01-t .video-con{float:none; width:100%; bottom:0; }
	.portal-01 .con-01-t .video-con .video-cover-box{text-align:center}
	.portal-01 .con-01-t .video-con .video-cover-box:before{width:30%; margin-left:-50%}
	.portal-01 .con-01-t .video-con .video-cover-box:after{width:20%; margin-left:16%}
	.portal-01 .con-01-t .video-con .video-cover-box .thumb img{max-width:70%}
	.portal-01 .con-01-t .video-con .video-cover-box .icon{width:13%}
	/*하단 */
	.portal-01 .con-01-bt{top:-20px}
	.portal-01 .con-01-bt .con-01-bt-inner{display:block; height:auto; padding:20px 0}
	.portal-01 .con-01-bt .con-01-bt-inner p{font-size:13px; display:block}

	/* ------- Why portal :: 컨텐츠02 (가볍게, 그러나 든든하게) ------- */
	.con-top-tit .tit{font-size:30px}
	.con-top-tit .tit.big{font-size:35px}
	.con-top-tit .txt{font-size:15px; margin-top:10px}
	.portal-02{padding:50px 0}
	.portal-02 .con-02-area:before, .portal-02 .con-02-area:after{display:none}
	.portal-02 .con-02-inner{margin-top:35px}
	.portal-02 .con-02-inner .con-02-list{margin-bottom:25px}
	.portal-02 .con-02-inner .con-02-list .img-con{width:95px}
	.portal-02 .con-02-inner .con-02-list .img-con:before{width:30px; height:3px; margin-right:-21px;}
	.portal-02 .con-02-inner .con-02-list .img-con:after{width:15px; height:15px; border-width:4px; margin-right:-32px}
	.portal-02 .con-02-inner .con-02-list .txt-con{width:calc(100% - 95px); padding-left:45px !important}
	.portal-02 .con-02-inner .con-02-list .txt-con .tit{font-size:17px;}
	.portal-02 .con-02-inner .con-02-list .txt-con .txt{font-size:13px; margin-top:10px}
	.portal-02 .con-02-inner .con-02-list.list-02{margin-left:0; padding-left:0}

	/* ------- Why portal :: 컨텐츠03 (참 쉬운 시작과 사용) ------- */
	.portal-03{padding:75px 0}
	.portal-03 .con-03-lf .txt-slide{margin-bottom:30px}
	.portal-03 .con-03-lf .txt-slide:before{width:2px}
	.portal-03 .con-03-lf .txt-slide .tit{font-size:18px;}
	.portal-03 .con-03-lf .txt-slide.slick-current .tit{padding-left:30px}
	.portal-03 .con-03-lf .txt-slide .tit:before{width:22px; height:22px; top:1px}
	.portal-03 .con-03-lf .txt-slide .txt{font-size:13px; margin-top:10px}
	.portal-03 .con-03-rt .img-slide .deco-img{left:-2%}
	.portal-03 .con-03-rt .img-slide .loading-bar{height:12px; bottom:12%}
	.portal-03 .con-03-rt .img-slide .deco-img-move{margin-left:-15.7%; width:10.5%;}
	@keyframes fileMove {
		0% {
			transform:translate(0) rotate(0);
		}
		100% {
			transform:translate(-240%,-220%) rotate(-30deg)
		}
	}

	/* ------- Why portal :: 컨텐츠04 (Why portal?) ------- */
	.portal-04 > .con-04-area{padding:50px 3%}
	.portal-04 .con-04-inner{margin-top:90px}
	.portal-04 .con-04-box{float:none !important; width:100%; margin-bottom:50px; padding:70px 25px 25px}	
	.portal-04 .con-04-box:after{display:none}
	.portal-04 .con-04-box .box-inner .tit{font-size:18px}
	.portal-04 .con-04-box .box-inner .txt{font-size:13px; margin-top:15px}
	.portal-04 .con-04-box.box-01 .box-img{max-width:250px; right:30px; top:-45px; width:60%}
	.portal-04 .con-04-box.box-02 .box-img{max-width:180px; width:55%; right:20px; top:-30px}
	.portal-04 .con-04-box.box-03 .box-img{max-width:160px; width:55%; right:20px}
	.portal-04 .con-04-box .box-img img{max-width:100%}

	/* ------- Why portal :: 컨텐츠05 (portal 지원환경) ------- */
	.portal-05{margin:50px 0 40px}
	.portal-05 .con-05-inner{margin-top:50px}
	.portal-05 .con-05-list li{box-sizing:border-box; padding:0 2%}
	.portal-05 .con-05-list li .icon{width:50px; height:50px}
	.portal-05 .con-05-list li .icon i{line-height:50px; font-size:22px}
	.portal-05 .con-05-list li .txt01{font-size:16px; margin-top:15px}
	.portal-05 .con-05-list li .txt02{font-size:13px;}
	.portal-05 .con-05-list li .txt02 span{margin-top:5px}
	.portal-05 .link-con a{font-size:11px}
}

@media all and (max-width:480px){	
	/* ------- Why portal :: 컨텐츠05 (portal 지원환경) ------- */
	.portal-05 .con-05-list li{width:50%; margin-bottom:10%}
	.portal-05 .link-con{margin-top:0}
}



/* ********* 서비스소개 :: 고객사례 ******** */
@media all and (max-width:1220px){	
	/* ------- 고객사례 :: 컨텐츠02 (슬라이드) ------- */
	.example-slide .example-slide-con .txt-wrap .txt-02 span br{display:none}
}
@media all and (max-width:1024px){
	/* ------- 고객사례 :: 컨텐츠01 (상단) ------- */
	.example-con-01{margin:85px 0 70px}
	/* ------- 고객사례 :: 컨텐츠02 (슬라이드) ------- */
	.example-slide .example-slide-con{min-height:650px}
}
@media all and (max-width:800px){	
	/* ------- 고객사례 :: 컨텐츠02 (슬라이드) ------- */
	.example-slide .slick-list{padding:0}
	.example-slide .example-slide-con{min-height:600px}
	.example-slide .example-slide-con .txt-wrap{margin-top:75px; padding-right:0}
	.example-slide .example-slide-con .txt-wrap .txt-01{font-size:25px; }
	.example-slide .example-slide-con .txt-wrap .txt-02{padding-top:20px}
	.example-slide .example-slide-con .txt-wrap .txt-02 span{font-size:13px; margin-top:10px}
	.example-slide .example-slide-con .deco-bg{background-size:contain !important; bottom:25px}
	.example-slide .example-slide-con .deco-bg.pc-02{display:none}
	.example-slide .example-slide-con.slide-01 .deco-bg.pc-01{background:url("../images/content/example_slide_01_mb.png") 0 bottom no-repeat}
	.example-slide .example-slide-con.slide-02 .deco-bg.pc-01{background:url("../images/content/example_slide_02_mb.png") 0 bottom no-repeat}
	.example-slide .example-slide-con.slide-03 .deco-bg.pc-01{background:url("../images/content/example_slide_03_mb.png") 0 bottom no-repeat}
	.example-slide .example-slide-con.slide-04 .deco-bg.pc-01{background:url("../images/content/example_slide_04_mb.png") 0 bottom no-repeat}
	.example-slide .slick-dots{bottom:15px;}
	.example-slide .slick-dots li{width:10px; height:10px; margin:0 5px}
	/* ------- 고객사례 :: 컨텐츠03 (고객사) ------- */
	.example-con-03{margin:120px 0 105px}
	.partners-tab-con .partners-tab ul li a{font-size:17px; height:65px}
	.partners-tab-content{margin-top:50px}
	.partners-tab-content .partners-list li{width:27.333%; margin:0 3% 6%; padding-top:25%}
	.partners-tab-content .partners-more{margin-top:10px}
	.partners-tab-content .partners-more img{height:25px}
}
@media all and (max-width:480px){		
	/* ------- 고객사례 :: 컨텐츠03 (고객사) ------- */
	.partners-tab-con .partners-tab ul li a{font-size:14px}
	.partners-tab-con .partners-tab ul li.selected a:after{border-radius:20px; width:calc(100% - 10px); height:calc(100% - 10px)}
	.partners-tab-con .partners-tab ul li a em{padding:0 10px}
}	





/* ****************** 주요기능 ********************** */
/* ********* 공통스타일 ******** */
@media all and (max-width:1420px){	
	.function-con-wrap{padding:0 15px}
	.function-block-content:after{background-size:contain !important}
}
@media all and (max-width:1220px){	
	.function-prevent-list .function-sec.prevent-last{margin:15% 0 20%}
}
@media all and (max-width:1024px){	
	.function-list .function-sec{padding-bottom:150px; text-align:center}
	.function-list .function-sec:last-child{padding-bottom:150px}
	.function-list .function-sec .txt-con{display:block; margin:0; text-align:center; overflow:hidden}
	.function-list .function-sec .img-con{margin:0; text-align:center; overflow:hidden; padding-top:30px}
	.function-list .function-sec.rt-img{display:flex; flex-direction:column-reverse}
	.function-list .function-sec.lf-img .img-con,
	.function-list .function-sec.rt-img .img-con,
	.function-list .function-sec.lf-img .txt-con,
	.function-list .function-sec.rt-img .txt-con{width:100% !important; padding-left:0 !important; padding-right: 0 !important; margin-left:0}
	.function-list .function-sec .txt-con{padding-top:50px}
	.function-list .function-sec .img-con img.main,
	.img-effect-01 .function-sec.rt-img .img-con .main{left:50%; transform:translate(-50%,-20px) !important; transition-delay:0.4s}
	.img-effect-01 .aos-animate.function-sec .img-con .main{transform:translate(-50%,0) !important}
	.img-effect-01 .function-sec .img-con{padding-top:30px}	
	.img-effect-01 .function-sec .img-con .bg{transform:translateY(-30px)}
	.img-effect-01 .function-sec .txt-con{transform:translate(0,-20px); transition-delay:0.6s}
}
@media all and (max-width:800px){		
	.function-top-area{padding-top:95px}
	.function-block-content{padding-bottom:210px}
	.function-block-content:after{height:210px; bottom:1px}
	.function-con-wrap{margin-top:40px}
	.function-list .function-sec{padding-bottom:50px}
	.function-list .function-sec:last-child{padding-bottom:50px}
	.function-list .function-sec .img-con img{max-height:300px}
	.function-list .function-sec .txt-con{padding-top:35px !important}
	.function-list .function-sec .txt-con .tit{font-size:25px}
	.function-list .function-sec .txt-con .txt{font-size:15px; margin-top:20px}
	.function-list .function-sec .txt-con .txt .more-link a{font-size:15px}
}
@media all and (max-width:480px){	
	.function-list .function-sec .img-con img{max-height:260px}
}

/* ********* 주요기능 :: 문서유출차단 ******** */
@media all and (max-width:1420px){	
	.function-block-list .function-sec:after{background-size:100% 100% !important}
	.function-block-list .function-sec:after, .function-block-list .function-sec:before{width:29% !important; height:47% !important}
	.function-block-list .function-sec.lf-img{padding-left:0}
	.function-block-list .function-sec.rt-img{padding-right:0}
}
@media all and (max-width:1220px){	
	.function-block-list.function-list .function-sec .middle-inner{height:680px}
}
@media all and (max-width:1024px){	
	.function-block-list.function-list .function-sec .middle-inner{height:auto}
	.function-block-list .function-sec:after, .function-block-list .function-sec:before{display:none}
	.function-prevent-list .function-sec.prevent-last{margin:0}
	.function-prevent-list .function-sec.prevent-last .img-con img{max-width:608px}
	.function-prevent-list .function-sec.lf-img .txt-con,
	.function-block-list .function-sec.rt-img .img-con{text-align:center}
	/* active 효과 */
	.txt-img-effect.aos-animate .effect-02.txt-con,
	.txt-img-effect.aos-animate .effect-02 .bg{transition-delay:0s}
	.txt-img-effect.aos-animate .txt-con{transition-delay:0.3s !important}

}
@media all and (max-width:800px){	
	.function-block-list .function-sec .txt-con .tit{font-size:25px;}
	.function-prevent-list .function-sec.lf-img .txt-con .txt-inner{display:block}
	.gradient-txt.gradient-short{	
		background: -ms-linear-gradient(top right, #54ffcd 43%, #0adaff 75%);
		/* Webkit (Safari/Chrome 10) */
		background: -webkit-gradient(linear, right top, left bottom, color-stop(43, #54ffcd), color-stop(75, #0adaff));
		/* Webkit (Chrome 11+) */
		background: -webkit-linear-gradient(top right, #54ffcd 43%, #0adaff 75%);
		/* W3C Markup */
		background: linear-gradient(top right, #54ffcd 43%, #0adaff 75%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

 /* ********* 주요기능 :: 문서 유실 방지 ******** */
@media all and (max-width:1420px){	
	.function-prevent-list .function-sec.prevent-01 .img-con{right:0}
	.function-prevent-list .function-sec.prevent-01:after{width:700px; height:790px}
	.function-prevent-list .function-sec.prevent-04:after{width:1100px; height:1242px}
}
@media all and (max-width:1024px){	
	.function-prevent-list .function-sec.lf-img .txt-con .txt-inner{text-align:center}
	.function-prevent-list .function-sec .img-con{margin:0 auto !important; padding-top:30px}
	.function-prevent-list .function-sec.prevent-01 .img-con,
	.function-prevent-list .function-sec.prevent-02 .img-con,
	.function-prevent-list .function-sec.prevent-04 .img-con{right:-3%}

}
@media all and (max-width:800px){		
	.function-prevent-content .function-con-wrap{margin-top:105px}
	.function-prevent-list .function-sec:after{display:none}
	.function-list.function-prevent-list .function-sec .img-con{width:auto !important; max-width:none;}
}

 /* ********* 주요기능 :: 랜섬웨어 대응 ******** */
@media all and (max-width:1920px){		
	/* 하단 :: 암호화 영역 */
	.ransomware-bt-wrap:after{background-size:cover !important; background-position:70% 0 !important}
}
@media all and (max-width:1024px){		
	/* 하단 :: 공통스타일 (이미지 텍스트) */
	.ransomware-list .function-list .function-sec .txt-con{text-align:center}
	/* 하단 :: 암호화 영역 */
	.ransomware-bt-wrap{padding-top:300px}
	.ransomware-bt-wrap:after{height:650px}

	/* 완벽한복구 */
	.ransomware-list{padding:150px 0 80px}
	.ransomware-list .function-list .function-sec .img-con{width:auto !important; padding-top:30px}
}
@media all and (max-width:800px){		
	/* 상단 :: 비디오컨텐츠 */
	.ransomware-top-wrap:after{}
	.ransomware-video-con .video-iframe-wrapper:before{display:none}
	.ransomware-video-con{margin-top:23%}
	.ransomware-video-con .video-txt{margin-top:35px;}
	.ransomware-video-con .video-txt h4{font-size:30px}
	.ransomware-video-con .video-txt p{font-size:15px; margin-top:20px}
	/* 하단 :: 암호화 영역 */
	.ransomware-bt-wrap{padding-top:250px}
	.ransomware-bt-wrap:after{height:550px}
	.ransomeware-encryption{height:500px}
	.ransomeware-encryption .icon{height:60px}
	.ransomeware-encryption .tit{font-size:30px; margin-top:30px}
	.ransomeware-encryption .txt{font-size:15px; margin-top:30px}
	/* 하단 :: 공통스타일 (이미지 텍스트) */
	.ransomware-list{padding:100px 0 50px}
}
@media all and (max-width:480px){		
	/* 하단 :: 암호화 영역 */
	.ransomware-bt-wrap{padding-top:180px}
	.ransomware-bt-wrap:after{height:400px}

}


 /* ********* 주요기능 :: 문서 통합 관리 ******** */
@media all and (max-width:1420px){		
	.function-integrate-list:after{height:175%; top:50%; transform:translateY(-50%); margin-top:-11%; background-size:100% 100% !important}
	.function-integrate-list .integrate-sec .txt-con .tit .pc-br,
	.function-integrate-list .integrate-sec .txt-con .txt .pc-br{display:none}
	.function-integrate-list .integrate-sec .img-con.top-01,
	.function-integrate-list .integrate-sec .img-con.top-03{top:-35px}

	/* 이미지 왼쪽 */
	.function-integrate-list .integrate-sec.lf-img .img-con{width:27%; padding-right:5%}
	.function-integrate-list .integrate-sec.lf-img .txt-con{width:73%}
	/* 이미지 오른쪽 */
	.function-integrate-list .integrate-sec.rt-img .img-con{padding-left:5%}
}
@media all and (max-width:1024px){		
	.function-integrate-list .integrate-sec > div{float:none; width:100% !important; text-align:center; padding-left:0 !important; padding-right:0 !important}
	.function-integrate-list .integrate-sec.rt-img .img-con{float:none}
	.function-integrate-list:after,
	.function-integrate-list .integrate-sec:before{display:none}
	/* 이미지 왼쪽 */
	.function-integrate-list .integrate-sec.lf-img{padding-left:0}
	/* 이미지 오른쪽 */
	.function-integrate-list .integrate-sec.rt-img{padding:0}
	.function-integrate-list .integrate-sec.rt-img .img-con{text-align:center}

	.function-integrate-list .integrate-sec .img-con-wrap{display:block; max-width:none !important}
	.function-integrate-list .integrate-sec .img-con-wrap .deco{left:50%; transform:translate(-50%,0); margin-left:-17%}
	/*.function-integrate-list .integrate-sec.aos-animate .only-img{margin-left:30%}*/
	.function-integrate-list .integrate-sec .txt-con.effect-02, .function-integrate-list .integrate-sec .effect-02 .only-img{transition-delay:0s}
	.function-integrate-list .integrate-sec .txt-con{transition-delay:0.2s !important}

	
	/* 컨텐츠04 */
	.function-share-list .function-sec.share-04{z-index:9}
	/* 컨텐츠05 */
	.function-share-list .function-sec.share-05 .img-con{margin:-10% 0}
	.function-share-list .function-sec.share-05 .img-con .img-con-wrap{left:-7%}
	.function-share-list .function-sec.share-05 .txt-con{left:0; }
	.function-share-list .function-sec.share-05 .txt-con{padding-top:0 !important}
}
@media all and (max-width:800px){	
	.function-integrate-wrap{margin-top:105px}
	.function-integrate-list .integrate-sec{margin-bottom:80px}
	.function-integrate-list:last-child .integrate-sec:last-child{margin-bottom:100px}
	.function-integrate-list .integrate-sec .txt-con{padding-top:30px}
	.function-integrate-list .integrate-sec .txt-con .tit{font-size:25px}
	.function-integrate-list .integrate-sec .txt-con .txt{font-size:15px; margin-top:20px}
	.function-integrate-list .integrate-sec .img-con{top:0 !important}
	.function-integrate-list .integrate-sec .img-con img{max-width:36%}
	/* 컨텐츠05 */
	.function-share-list .function-sec.share-05 .img-con{margin:0}
	.function-share-list .function-sec.share-05 .img-con .img-con-wrap{transform:scale(1.3); }
}
@media all and (max-width:480px){		
	.function-share-list .function-sec.share-05 .img-con .img-con-wrap{transform:scale(1.15); left:-10%}
}


 /* ********* 주요기능 :: 공유와 협업 ******** */
@media all and (max-width:1920px){	
	.function-share-list .function-sec.share-06{background-size:cover !important}
}
@media all and (max-width:1660px){	
	.function-share-list .function-sec.share-06 .sharet-06-area{padding:0 15px}
	.function-share-list .function-sec.share-06 .middle-inner{margin-left:0; }
}
@media all and (max-width:1420px){	
	.function-share-list .function-sec.share-05 .img-con{left:0; margin-left:-15%}
	.function-share-list .function-sec .img-con img{max-width:none; width:100%}
}
@media all and (max-width:1220px){	
	.function-convenient-list .function-sec .middle-inner{height:680px}
}
@media all and (max-width:1024px){		
	.function-list .function-sec .middle-inner{display:block; height:auto; padding-bottom:150px}
	.function-list .function-sec.rt-img .middle-inner{display:flex; flex-direction:column-reverse;}
	.function-list .function-sec .middle-inner > div{display:block;}
	.function-share-list .function-sec.rt-img .img-con{text-align:center}
	.function-share-list .function-sec .img-con img{max-width:100%; width:auto}
	.function-share-list .function-sec.share-05 .img-con{position:relative; left:auto; top:auto; transform:translateY(0); margin-left:0}
	.function-share-list .function-sec.share-05 .img-con .pc{display:none}
	.function-share-list .function-sec.share-05 .img-con .mb{display:inline-block}
	.function-share-list .function-sec.share-06 .middle-inner{padding-bottom:300px}
	.function-share-list .function-sec.share-06.rt-img .img-con img{max-height:650px}
}
@media all and (max-width:800px){		
	 .function-share-content{margin-bottom:50px}
	.function-share-top{padding:100px 0}
	.function-list .function-sec .middle-inner{padding-bottom:50px}
	.function-share-list .function-sec.share-06 .middle-inner{padding:80px 0 150px}
	.function-share-list .function-sec.share-06.rt-img .img-con img{max-height:450px}
}



 /* ********* 주요기능 :: 재택 근무 활용 ******** */
@media all and (max-width:1420px){	
	.function-home-list .function-sec.home-01 .img-con{width:68%; margin-left:-60%}
	.function-home-list .function-sec.home-02 .txt-con{width:60%}
	.function-home-list .function-sec.home-02 .img-con{margin-right:-51%; width:55%}
}
@media all and (max-width:1024px){		
	.function-home-con{margin-top:100px}
	.function-home-list.function-list .function-sec .middle-inner{padding:100px 0}
	.function-home-list .function-sec.home-01 .img-con,
	.function-home-list .function-sec.home-02 .img-con,
	.function-home-list .function-sec.home-04 .img-con{position:relative; margin:0; left:auto; right:auto; top:auto; bottom:auto; transform:translateY(0)}
	.function-home-list .function-sec.home-01 .img-con{width:110% !important; margin:-16% 0 -15% -15px}
	.function-home-list .function-sec.home-01 .img-con img,
	.function-home-list .function-sec.home-02 .img-con img{max-height:none}
	.function-home-list .function-sec.home-02 .img-con{text-align:center}
	.function-home-list .function-sec.home-04 > div:after, .function-home-list .function-sec.home-04 > div:before{background-size:contain !important}
	.function-home-list .function-sec.home-04 > div:after{left:50%; transform:translateX(-50%)}
	.function-home-list .function-sec.home-04 > div:before{}
	.function-home-list .function-sec.home-04 .img-con img{transform:translateY(-30px)}
}
@media all and (max-width:800px){	
	.function-home-content{margin-bottom:50px}
	.function-home-top{padding:100px 0 65px}
	.function-home-con{margin-top:50px}
	.function-home-list.function-list .function-sec .middle-inner{padding:20px 0 50px}
	.function-security-list .function-sec:after{display:none}
	.function-home-list .function-sec.home-04 > div:after{width:600px}
	.function-home-list .function-sec.home-04 > div:before{width:60px; right:0}
	.function-home-list .function-sec.home-02 .img-con img{max-height:500px}
}
@media all and (max-width:480px){		
	.function-home-list .function-sec.home-02 .img-con img{max-height:400px}
}



 /* ********* 주요기능 :: 강력한 보안 ******** */
@media all and (max-width:1420px){	
	/* 하단 배너 */
	.security-banner.sub-bt-banner .banner-wrap .banner-inner{padding-left:3%}
	.security-banner.sub-bt-banner .banner-wrap .banner-img{right:0}
}
@media all and (max-width:1024px){	
	.function-security-wrap{margin-top:100px}
	.security-banner.sub-bt-banner .banner-wrap > div{padding:0}
}
@media all and (max-width:800px){		
	.function-security-wrap{margin-top:55px}
	/* 하단 배너 */
	.security-banner.sub-bt-banner{margin-top:50px}
	.security-banner.sub-bt-banner .banner-wrap{padding:0 5px}
	.security-banner.sub-bt-banner .banner-wrap .banner-inner:after{display:none}
	.security-banner.sub-bt-banner .banner-wrap .banner-img{bottom:-20px}
}	


 /* ********* 주요기능 :: 편리한 관리 ******** */
@media all and (max-width:1920px){	
	.cloud-monitoring:before{background-size:cover !important}
}
@media all and (max-width:1420px){	
	.convenient-con-wrap{padding:0 15px}
	.function-convenient-list .function-sec:before,.function-convenient-list .function-sec:after{width:27%; height:44% }
	.function-convenient-list .function-sec:after{background-size:100% 100% !important}
	.function-convenient-list .function-sec.lf-img{padding-left:0}
	.function-convenient-list .function-sec.rt-img{padding-right:0}
}
@media all and (max-width:1024px){	
	.convenient-con-wrap{margin-top:100px}
	.function-convenient-list .function-sec:before, .function-convenient-list .function-sec:after{display:none}
	.function-convenient-list .function-sec.rt-img .img-con{text-align:center}
}
@media all and (max-width:800px){		
	 .function-convenient-content{margin-bottom:50px}
	.convenient-con-wrap{margin:55px 0}
	.function-convenient-list .function-sec .middle-inner:before{display:none}
	/* 클라우드 스토리지 모니터링 */
	.cloud-monitoring{padding:150px 0 100px}
	.cloud-monitoring .deco-img{width:18%; margin-bottom:10px}
	.cloud-monitoring .txt-wrap{padding-left:16%}
	.cloud-monitoring .txt-wrap .tit{font-size:25px}
	.cloud-monitoring .txt-wrap .txt span{font-size:15px; margin-top:15px}
}
@media all and (max-width:480px){		
	/* 클라우드 스토리지 모니터링 */
	.cloud-monitoring{padding:100px 0 60px}
	.cloud-monitoring .deco-img{width:100%}
	.cloud-monitoring .deco-img img{height:65px}
	.cloud-monitoring .txt-wrap{padding-left:3%}
}


/* ****************** 요금 ********************** */
@media all and (max-width:1024px){
	/* 요금제 내용 */
	.payment-system-wrap{margin:0}
	.payment-system-list{margin:0 -1.5%}
	.payment-system-list li{margin:0 1.5%; width:30.333%}
	.payment-system-list li a .txt-02{font-size:42px}
	.payment-system-list li a .txt-03{font-size:20px}
	.payment-system-list li a .txt-04{font-size:16px}
	/* 요금제 주의사항 */
	.charge-con02-notice{padding:0 5%}
}
@media all and (max-width:800px){
	/* ------- 요금 :: 컨텐츠01 (상단) ------- */
	.charge-con-01{padding:75px 0 30px}
	.charge-con-01 .charge-con01-list{margin:65px -3% 0; text-align:center}
	.charge-con-01 .charge-con01-list li{width:38%; margin:0 3% 40px; float:none; display:inline-block; vertical-align:top}
	.charge-con-01 .charge-con01-list li .txt{font-size:15px; margin-top:19px}
	.charge-con-01 .charge-con01-list li .icon img{max-height:150px;}

	/* ------- 요금 :: 컨텐츠02 (합리적인 요금제) ------- */
	.charge-con-02{padding:50px 0 0}
	.con-sub-tit{font-size:31px;}
	/* 탭스타일 */
/* 	.charge-con02-tab{margin-top:50px} */
/* 	.charge-con02-tab .charge-tab-style .charge-tab-list{width:240px} */
/* 	.charge-con02-tab .charge-tab-style li a{font-size:13px; height:50px} */
	.charge-con02-tab .charge-tab-style .discount-txt{font-size:12px; top:-12px}
	/* 요금제 내용 */
	.charge-tab-content{margin-top:35px}
	.payment-system-wrap{padding:35px 0}
	.payment-system-list li a{padding:25px 8% 100px}
	.payment-system-list li a .txt-01 .icon{height:25px; margin-right:5px}
	.payment-system-list li a .txt-01 .tit{font-size:17px}
	.payment-system-list li a .txt-02{font-size:30px; margin:30px 0}
	.payment-system-list li a .txt-03{font-size:17px;}
	.payment-system-list li a .txt-04{font-size:12px; margin-top:10px}
	.payment-system-list li a .txt-04 span{margin-bottom:7px}
	.payment-system-list li a .btn-form{font-size:15px; height:40px; line-height:40px; bottom:25px}
	/* 요금제 주의사항 */
	.charge-con02-notice{margin:20px 0 45px}
	.charge-con02-notice p{font-size:12px;}

	/* ------- 요금 :: 컨텐츠03 (하단 배너) ------- */
	.charge-banner.sub-bt-banner .banner-wrap{background-size:contain !important}
	.sub-bt-banner .banner-wrap .banner-inner .txt{font-size:23px;}

}
@media all and (max-width:640px){		
	/* ------- 요금 :: 컨텐츠01 (상단) ------- */
	.charge-con-01 .charge-con01-list li .txt br{display:none}
	/* ------- 요금 :: 컨텐츠02 (합리적인 요금제) ------- */
	/* 요금제 내용 */
	.payment-system-list{margin:0}
	.payment-system-list li{float:none; width:100%; margin:0 2% 20px; box-shadow:2px 2px 8px 0 rgba(31,75,143,0.1)}
	.payment-system-list li a{padding:25px 8%}
	.payment-system-list li a .btn-form{position:relative; left:auto; right:auto; bottom:auto; margin:30px auto 0; width:100%}
}


/* ****************** 비교 ********************** */
@media all and (max-width:1620px){		
	/* ------- 비교 :: 컨텐츠02 (텍스트 이미지 나열) ------- */
	.charge-con02-sec.rt-img.sec-03 .sec-inner .sec-inner-img{right:0}
}
@media all and (max-width:1220px){	
	/* ------- 비교 :: 컨텐츠02 (텍스트 이미지 나열) ------- */
	.charge-con02-sec.rt-img .sec-inner .sec-inner-explain,
	.charge-con02-sec.rt-img.sec-03 .sec-inner .sec-inner-explain{padding-right:5%}
	.charge-con02-sec.lf-img .sec-inner .sec-inner-explain{padding-left:5%}
}
@media all and (max-width:1024px){	
	/* ------- 비교 :: 컨텐츠02 (텍스트 이미지 나열) ------- */
	.charge-con02-sec{text-align:center}
	.charge-con02-sec .sec-inner{margin-top:50px !important}
	.charge-con02-sec .sec-inner > div{display:block; margin:0; overflow:hidden}
	.charge-con02-sec .sec-inner .sec-inner-explain{width:100% !important; padding:0 0 50px !important;}
	.charge-con02-sec .sec-inner .sec-inner-img{width:100% !important; max-width:780px; margin:0 auto}
	.charge-con02-sec.lf-img{text-align:center}
	.charge-con02-sec.lf-img .sec-inner{display:flex; flex-direction:column-reverse}
	/* active 효과 */
	.charge-con02-sec .effect-01,
	.charge-con02-sec .effect-02{transition-delay:0s}
	.charge-con02-sec .sec-inner .sec-inner-explain{transition-delay:0.2s}
	.charge-con02-sec .sec-inner .sec-inner-img{transition-delay:0.4s}
}
@media all and (max-width:800px){		
	/* ------- 비교 :: 컨텐츠01 (상단) ------- */
	.compare-con-01{margin:80px 0}

	/* ------- 비교 :: 컨텐츠02 (텍스트 이미지 나열) ------- */
	.compare-con-02{margin-bottom:100px}
	.charge-con02-sec .sec-tit .tit{font-size:30px}
	.charge-con02-sec .sec-tit .tit img{max-height:36px}
	.charge-con02-sec .sec-tit .txt{font-size:17px; margin-top:25px}
	.charge-con02-sec .sec-inner{margin-top:25px !important}
	.charge-con02-sec .sec-inner .sec-inner-explain{padding-bottom:30px !important}
	.charge-con02-sec .sec-inner .sec-inner-explain p{font-size:15px}
	.charge-con02-sec .sec-inner .sec-inner-explain .more-view{font-size:15px; margin-top:25px}
	.charge-con02-sec .sec-inner .sec-inner-explain .more-view .arrow{margin-left:10px}
	.charge-con02-sec.rt-img.sec-01{padding:100px 0 90px}
	.charge-con02-sec.rt-img.sec-03{padding:100px 0}
	.charge-con02-sec.lf-img{padding:100px 0 135px; background-size:300px}
	.compare-banner.sub-bt-banner .banner-wrap .banner-img{bottom:10px}
}
@media all and (max-width:480px){		
	/* ------- 비교 :: 컨텐츠02 (텍스트 이미지 나열) ------- */
	.charge-con02-sec .sec-tit .tit img{max-height:25px}
}



/* ****************** 지원 ********************** */
/* ********* 지원 :: 공지사항 ******** */
@media all and (max-width:800px){	
	.notice-content{margin-top:70px}
	.notice-tit{font-size:40px; margin-bottom:30px}
	.notice-content .cm-btn-controls a{height:35px; line-height:35px; font-size:13px; width:100px}
}

/* ********* 지원 :: 기술지원 ******** */
@media all and (max-width:1024px){		
	/* ------- 기술지원 :: 컨텐츠04 (하단 배너) ------- */
	.technology-banner.sub-bt-banner .banner-wrap{background:#111c45 url("../images/content/technology_bt_banner_bg_mb.png") no-repeat right bottom; background-size:contain !important}
	.technology-banner.sub-bt-banner .banner-wrap .banner-img{width:60%}
}
@media all and (max-width:800px){	
	/* ------- 기술지원 :: 컨텐츠01 (상단) ------- */
	.technology-con-01{margin:75px 0 125px}

	/* ------- 기술지원 :: 컨텐츠02 (pc 원격지원, 문의) ------- */
	.tech-con02-wrap{padding:35px 0; margin:0 1%}
	.tech-con02-wrap .tech-con02-select li a{padding:40px 15px 45px}
	.tech-con02-wrap .tech-con02-select li a .tit{font-size:25px}
	.tech-con02-wrap .tech-con02-select li a .txt{font-size:13px; margin:20px 0 30px}
	.tech-con02-wrap .tech-con02-select li a .arrow-txt{font-size:15px; bottom:25px}

	/* ------- 기술지원 :: 컨텐츠03 (자주 묻는 질문) ------- */
	.technology-con-03{margin:60px 0 100px}
	.qna-con-top .icon{height:80px}
	.qna-con-top .con-sub-tit{margin-top:20px}
	.qna-con-top .total-qna{font-size:15px; margin-top:20px}
	.qna-list-wrap{margin-top:50px}

	/* ------- 기술지원 :: 컨텐츠04 (하단 배너) ------- */
	.technology-banner.sub-bt-banner .banner-wrap .banner-img{right:-5% !important}
}
@media all and (max-width:480px){		
	/* ------- 기술지원 :: 컨텐츠02 (pc 원격지원, 문의) ------- */
	.tech-con02-wrap .tech-con02-select li{float:none; width:100%; margin:0 0 15px; box-shadow:2px 2px 6px 0 rgba(31,75,143,0.05)}
}


/* ****************** 견적요청서 ********************** */
@media all and (max-width:1024px){		
	.estimate-area{padding:0 15px}
}
@media all and (max-width:800px){		
	.estimate-content{padding:75px 0 100px}
	.estimate-top{margin-bottom:75px}
	.estimate-top .logo img{height:30px}
	.estimate-top .tit{font-size:35px; margin-top:50px}
	.estimate-top .txt{font-size:17px; margin-top:30px}
	/* 회사규모 */
	.scale-option-box button{height:40px; font-size:13px}
	.scale-option-box .scale-option-list{top:40px; padding:15px 20px}
	.scale-option-box .scale-option-list li a{font-size:12px}

}