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

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; }
.sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 }
.sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; }
.sub-tab-list-style ul li.selected a{background-color:#333; border-color:#333}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

/* ------ 공통 :: 자간 ------- */
.ls-01{letter-spacing:0}
.ls-02{letter-spacing:0.04em}
.ls-03{letter-spacing:0.05em}

/* ------ 공통 :: 효과 ------- */
.down-effect{opacity:0; transform:translateY(-8%); }
.down-effect2{opacity:0; transform:translateY(-30px); }
.right-effect{opacity:0; transform:translateX(8%); }
.right-effect-02{opacity:0; transform:translateX(5%); }
.left-effect-02{opacity:0; transform:translateX(-5%); }
.aos-animate .down-effect,
.aos-animate .down-effect2,
.aos-animate .right-effect,
.aos-animate .right-effect-02,
.aos-animate .left-effect-02{opacity:1; transform:translateY(0) perspective(500px) rotate(.001deg) !important;}

/* ------ 공통 :: 서브 상단 타이틀 ------- */
.cm-top-tit{text-align:center; }
.cm-top-tit .sm-tit{display:block; font-weight:400; font-size:40px; letter-spacing:-0.5px; color:#2e79eb; line-height:1.4; margin-bottom:10px}
.cm-top-tit .big-tit{font-weight:400; font-size:64px; letter-spacing:-0.5px; color:#111b35; line-height:1.25}
.cm-top-tit .big-tit.big{font-size:70px}
.cm-top-tit .big-tit.wh{color:#fff}
.cm-top-tit .big-tit .blue{color:#2e79eb}
.cm-top-tit .txt{font-weight:400; font-size:24px; letter-spacing:-0.65px; color:#2d4381; /*line-height:1.33;*/line-height:1.411; margin-top:65px; font-weight:500}
.cm-top-tit .txt.wh{color:#a1a9c9}
.cm-top-tit .txt.big{font-size:26px}

/* ------ 공통 :: 서브 하단 배너 ------- */
.sub-bt-banner{margin-bottom:200px}
.sub-bt-banner .banner-wrap{position:relative; background-color:#1f284a; border-radius:40px; overflow:hidden}
.sub-bt-banner .banner-wrap .banner-inner{padding:74px 0 63px 8%; position:relative; z-index:9}
.sub-bt-banner .banner-wrap .banner-inner .txt{font-weight:300; font-size:36px; letter-spacing:-0.7px; color:#fff; line-height:1.29}
.sub-bt-banner .banner-wrap .banner-inner .txt b{font-weight:600; color:#07d6e1}
.sub-bt-banner .banner-wrap .banner-inner .banner-link{margin-top:60px}
.sub-bt-banner .banner-wrap .banner-inner .banner-link a{display:inline-block; vertical-align:top; border-radius:30px; transition:all 0.3s; max-width:235px; width:43%}
.sub-bt-banner .banner-wrap .banner-inner .banner-link a.wh-btn{background-color:#fff; color:#0f2c4f}
.sub-bt-banner .banner-wrap .banner-inner .banner-link a.blue-btn{background-color:#2e79eb; color:#fff; margin-left:20px}
.sub-bt-banner .banner-wrap .banner-inner .banner-link a span{position:relative; display:table; width:100%; height:54px; text-align:left}
.sub-bt-banner .banner-wrap .banner-inner .banner-link a span em{display:table-cell; vertical-align:middle; font-weight:400; font-size:16px; letter-spacing:-0.5px; padding-right:32px; line-height:1.2}
.sub-bt-banner .banner-wrap .banner-inner .banner-link a.wh-btn span em{padding-left:30px}
.sub-bt-banner .banner-wrap .banner-inner .banner-link a.blue-btn span em{padding-left:45px}
.sub-bt-banner .banner-wrap .banner-inner .banner-link a span .arrow{position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:19.73px}
.sub-bt-banner .banner-wrap .banner-img{position:absolute; bottom:0; text-align:right; transition:all 1s 0.4s; }
.sub-bt-banner .banner-wrap .banner-img img{max-width:100%}

@media all and (min-width:801px){	
	.sub-bt-banner .banner-wrap .banner-inner .banner-link a.wh-btn:hover{background-color:#ececec}
	.sub-bt-banner .banner-wrap .banner-inner .banner-link a.blue-btn:hover{background-color:#236dde}
}

.subPageContent { margin-top: 65px; text-align: center; }


:root {
	/*
  --page-title-image-rate: 0.6;
  --contents-page-text-rate: 0.9;
  --contents-page-image-rate: 0.8;
  */
  --page-title-image-rate: 0.5;
  --contents-page-text-rate: 0.8;
  --contents-page-image-rate: 0.7;
}

.page-title {
	width: 100%;
/*   	height: 184px; */
  	align-self: stretch;
  	flex-grow: 0;
  	display: flex;
  	flex-direction: row;
/*   	justify-content: space-between; */
  	align-items: center;
  	gap: 8px;
  	padding: 24px 20%;
  	background-image: linear-gradient(to bottom, #ddf6e2 0%, #bff4e1 100%);
  	box-sizing: border-box;
  	position: relative;
  	overflow: hidden;
  	
  	justify-content: center;
/* 	height: 425px; */
	height: calc(425px * var(--page-title-image-rate));
	background-repeat: no-repeat;
	background-position: center;
}

.page-title span { 
	flex-grow: 0;
/*   	font-size: 50px; */
  	font-size: 40px;
  	font-weight: bold;
  	font-stretch: normal;
  	font-style: normal;
  	line-height: 1.24;
  	letter-spacing: normal;
  	text-align: center;
  	color: #ffffff; 
}
.page-title img { margin-top: 30px; }
.page-contents { width: 100%; min-height: 768px; flex-grow: 0; display: flex; flex-direction: column; justify-content: center; padding: 64px 0px; box-sizing: border-box; display: inline-block; margin: 0 auto; } 

.con-title { align-self: stretch; flex-grow: 0; font-size: 24px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: 1.2; letter-spacing: normal; text-align: left; color: #09295f; }

.write-input { width: 100%; height: 60px; padding: 10px !important; font-size: 16px; border-radius: 4px; border: solid 1px #e2e2e2; background-color: #fff; box-sizing: border-box; }
.bbs-list-row .write-input { height: 40px; padding: 8px !important; }
.write-textarea { width: 100%; height: 100px; padding: 16px; border-radius: 4px; border: solid 1px #e2e2e2; background-color: #fff;  box-sizing: border-box; margin: 20px 0px; text-align: left; font-size: 14px; line-height: 1.4; white-space: normal; overflow: auto; }
.write-select { width:100%; height:38px; border:0px; background-color:#fff; border:1px solid #d2d2d2; font-size:14px; vertical-align:middle; }

.defaultBtn { align-self: stretch; flex-grow: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 16px 24px; border-radius: 4px; background-color: #0ba29a; }
.defaultBtn span { height: 25px; flex-grow: 0; font-size: 18px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; text-align: center; color: #ffffff; }

.underlineBtn { height: 20px; align-self: stretch; flex-grow: 0; font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; text-align: right; color: #6b7280; text-decoration: underline; }

.img-thumbnail {
    padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    max-width: 100%;
    height: auto
}


#mainContainer .subPageContent.support .board-box .board-link img { width: 100%; max-width: calc(676px * var(--contents-page-image-rate)); }
#mainContainer .subPageContent.mypage .board-box .board-link img { width: 100%; max-width: calc(481px * var(--contents-page-image-rate)); }

/* #mainContainer .fullScreenHeightDiv { width: 100%; height: 100%; max-height: 905px; position: relative; overflow: hidden; box-sizing: border-box; } */
#mainContainer .fullScreenHeightDiv { width: 100%; height: 100%; max-height: calc(905px * 0.85); position: relative; overflow: hidden; box-sizing: border-box; }
/* #mainContainer .bannerTltleBox { width: 100%; color: #ffffff; font-size: 20px; position: absolute; top: calc(35%); text-align: center; } */
#mainContainer .bannerTltleBox { width: 100%; color: #ffffff; font-size: 20px; position: absolute; top: 0%; text-align: center; }
#mainContainer .mainTitle { 
	flex-grow: 0;
/*   	font-size: 50px; */
  	font-size: 60px;
  	font-weight: bold;
  	font-stretch: normal;
  	font-style: normal;
  	line-height: 1.24;
  	letter-spacing: normal;
  	text-align: center;
  	color: #ffffff; 
}
#mainContainer .middleTitle { 
	flex-grow: 0;
/*   	font-size: 24px; */
  	 font-size: 24px;
  	font-weight: normal;
  	font-stretch: normal;
  	font-style: normal;
/*   	line-height: 1.24; */
  	line-height: 1.6;
  	letter-spacing: normal;
  	text-align: center;
  	color: #ffffff;
  	margin: 0px 0;
    font-family: none;
} 
#mainContainer .subTitle { 
	flex-grow: 0;
/*   	font-size: 24px; */
  	font-size: 20px;
  	font-weight: normal;
  	font-stretch: normal;
  	font-style: normal;
/*   	line-height: 1.24; */
  	line-height: 1.6;
  	letter-spacing: normal;
  	text-align: center;
  	color: #ffffff;
  	margin-top: 20px;
    font-family: none;
} 

#mainContainer .bannerTltleBox img { width: calc(100% * var(--contents-page-text-rate)); }
#mainContainer .bannerBtnBox { width: 100%; display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
#mainContainer .bannerBtnBox img { width: calc(50% * var(--contents-page-text-rate)); max-width: calc(350px * var(--contents-page-image-rate)); }

.cmp-video .cmp-video__overlay.cmp-video__static svg {
    display: inline-block;
    fill: #fff;
    opacity: .8;
    position: absolute;
    height: 60px;
    width: 60px;
    top: calc(50% - 30px);
    right: calc(50% - 30px);
    z-index: 1;
    cursor: pointer;
}
.cmp-video .cmp-video__overlay.cmp-video__static svg:hover {
	fill: #000;
}
.cmp-video .cmp-video__overlay .cmp-video__element {
    z-index: 3;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    background: #000000;
}


@media (max-width: 1400px){
	.topProductIcon { left: 10px !important; }
	.autudesk02_contents_01 { width: 90% !important; margin: 100px auto; display: block; }
	
	.contents03_txt01 { left: 10px !important; }
	.contents03_txt02 { right: 10px !important; }
}
@media (max-width: 1200px){
	.contents03_txt01 { width: 50% !important; }
	.contents03_txt02 { width: 50% !important; }
}
@media (max-width: 800px){
	.page-contents { padding: 64px 10px; }
	
}
@media (max-width: 576px){
	.contentsSlideDescArea { padding: 0px 10px; box-sizing: border-box; }
	.contentsSlideDescArea .topProductIcon { width: 80% !important; }	
	#images_position  { padding: 0px 10px; box-sizing: border-box; }
}













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

/* ********* 서비스소개 :: Why portal ******** */
.portal-content{padding-top:30px}
/* ------- Why portal :: 컨텐츠01 (상단 비디오) ------- */
/*상단 */
.portal-01 .con-01-t{position:relative; z-index:2}
.portal-01 .con-01-t .con-01-t-inner{padding-right:4%}
.portal-01 .con-01-t .txt-con{float:left; width:59%; padding-top:19%; box-sizing:border-box}
.portal-01 .con-01-t .txt-con .txt01{font-weight:400; font-size:70px; letter-spacing:-4px; color:#111b35; line-height:1.25; opacity:0; transform:translateX(-8%); }
.portal-01 .con-01-t .txt-con .txt02{font-size:20px; color:#2d4381; line-height:1.7; margin:45px 0 60px; letter-spacing:-0.65px; opacity:0; transform:translateX(-8%); transition-delay:0.2s}
/* 상단 :: 비디오 */
.portal-01 .con-01-t .video-con{width:41%; position:relative; bottom:-52px; float:left}
.portal-01 .con-01-t .video-con .video-cover-wrap{opacity:0; transform:translateX(-3%); transition-delay:0.9s}
.portal-01 .con-01-t .video-con .video-cover-box{position:relative;}
.portal-01 .con-01-t .video-con .video-cover-box:before,
.portal-01 .con-01-t .video-con .video-cover-box:after{position:absolute; content:""; background-size:contain !important; left:50%; z-index:-1; opacity:0;  transform:translateX(-5%); transition:all 1s 0.5s}
.portal-01 .con-01-t .video-con .video-cover-box:before{width:58%; height:154px; background:url("../images/content/portal_con01_deco01.png") no-repeat; top:6.5%; margin-left:-88%}
.portal-01 .con-01-t .video-con .video-cover-box:after{width:26%; height:44px; background:url("../images/content/portal_con01_deco02.png") no-repeat; bottom:16.5%; margin-left:27%}
.portal-01 .con-01-t .video-con .video-cover-box .thumb{display:block; width:100%; height:100%;}
.portal-01 .con-01-t .video-con .video-cover-box .thumb img{max-width:100%}
.portal-01 .con-01-t .video-con .video-cover-box .icon{position:absolute; top:50%; left:50%;  z-index:1; transform: translate(-50%, -50%); width:18.5%}
.portal-01 .con-01-t .video-con .video-cover-box .icon img{max-width:100%}
/*  재생버튼 퍼지는 효과 */
@keyframes nation-circle {
  0% {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.5; 
   }
  50% {
	opacity: 1.0; 
   }
  100% {
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
	opacity: 0; } 
}
.portal-01 .con-01-t .video-con .video-cover-box .effect-circle{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-block; width:18.5%; height:0; padding-top:18.5%}
.portal-01 .con-01-t .video-con .video-cover-box .effect-circle > em:nth-child(2) {-webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.portal-01 .con-01-t .video-con .video-cover-box .effect-circle > em {
	border:1px solid rgba(255, 255, 255, 0.5) ;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-animation: nation-circle 5s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
	animation: nation-circle 5s cubic-bezier(1, 2, 0.66, 3) infinite; 
}

/* 상단 :: 비디오 모달 */
.video-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; }
.video-modal-content .modal-close-btn{top:-50px; right:0px;}
.video-modal-content h1 + .modal-close-btn{top:0px;}
.video-modal-content h1{line-height:1.5; padding:0 30px; margin-bottom:15px; font-size:24px; font-weight:400; letter-spacing:-0.5px; text-align:center; color:#fff;}
.video-modal-inner{width:100%;}
.video-modal-inner .video-container{position:relative; width:100%; height:0; padding-top:57%; }
.video-modal-inner .video-container video{position:absolute; top:0px; left:0px; width:100%; height:100%}
/*하단 */
.portal-01 .con-01-bt{background-color:#edf2f8; border-bottom:1px solid #ddd; position:relative; z-index:1}
.portal-01 .con-01-bt > .area{opacity:0; transform:translateX(-3%); transition-delay:1.2s}
.portal-01 .con-01-bt .con-01-bt-inner{display:table; width:100%; height:285px;}
.portal-01 .con-01-bt .con-01-bt-inner p{display:table-cell; vertical-align:middle; font-size:16.5px; color:#454545; line-height:1.81; letter-spacing:-0.65px; padding:25px 0}

/* active 효과 */
.portal-01.aos-animate .txt-con .txt01,.portal-01.aos-animate .txt-con .txt02{opacity:1; transform:translateX(0); }
.portal-01.aos-animate .video-con .video-cover-box:before, .portal-01.aos-animate .video-con .video-cover-box:after,
.portal-01.aos-animate .video-con .video-cover-wrap,
.portal-01.aos-animate .con-01-bt > .area{opacity:1;  transform:translate(0,0);}


/* ------- Why portal :: 컨텐츠02 (가볍게, 그러나 든든하게) ------- */
.con-top-tit{text-align:center}
.con-top-tit .tit{font-weight:400; font-size:50px; letter-spacing:-0.25px; color:#111b35; line-height:1.25}
.con-top-tit .tit .blue{color:#0083ff}
.con-top-tit .tit.big{font-size:60px}
.con-top-tit .tit.wh{color:#fff}
.con-top-tit .tit .green{color:#0bf0d5}
.con-top-tit .txt{font-weight:500; font-size:20px; letter-spacing:-0.75px; color:#111b35; line-height:1.45; margin-top:15px}
.portal-02{position:relative; padding:110px 0 105px; overflow:hidden}
.portal-02 .con-02-area{position:relative; max-width:1143px; margin:0 auto}
.portal-02 .con-02-area:before,.portal-02 .con-02-area:after{position:absolute; content:""; background-size:cover !important;  z-index:0}
.portal-02 .con-02-area:before{width:544px; height:471px; background:url("../images/content/portal_con02_deco01.png"); left:50%; margin-left:42%; top:0}
.portal-02 .con-02-area:after{width:725px; height:808px; background:url("../images/content/portal_con02_deco02.png"); bottom:-420px; right:50%; margin-right:41%}
.portal-02 .con-02-inner{margin-top:70px; position:relative; z-index:1}
.portal-02 .con-02-inner .con-02-list{margin-bottom:50px}
.portal-02 .con-02-inner .con-02-list > div{display:inline-block; margin:0 -1px; vertical-align:middle; box-sizing:border-box}
.portal-02 .con-02-inner .con-02-list .img-con{position:relative; width:186px}
.portal-02 .con-02-inner .con-02-list .img-con:before,
.portal-02 .con-02-inner .con-02-list .img-con:after{position:absolute; content:""; top:50%; transform:translateY(-50%); right:0;}
.portal-02 .con-02-inner .con-02-list .img-con:before{width:76px; height:4px; background-color:#c3c8d5; margin-right:-60px}
.portal-02 .con-02-inner .con-02-list .img-con:after{width:26px; height:26px; border-radius:50%; box-sizing:border-box; border:6px solid #5ad3fb; margin-right:-80px}
.portal-02 .con-02-inner .con-02-list.list-02 .img-con:after{border-color:#dd81ef}
.portal-02 .con-02-inner .con-02-list.list-03 .img-con:after{border-color:#09e4ca}
.portal-02 .con-02-inner .con-02-list .img-con img{max-width:100%}
.portal-02 .con-02-inner .con-02-list .txt-con{width:calc(100% - 186px); padding-left:11.8%}
.portal-02 .con-02-inner .con-02-list .txt-con .tit{display:block; font-weight:600; font-size:24px; letter-spacing:-0.7px; color:#111b35; line-height:1.3}
.portal-02 .con-02-inner .con-02-list .txt-con .txt{font-size:16.3px; letter-spacing:-0.6px; color:#454545; line-height:1.84; margin-top:15px}
.portal-02 .con-02-inner .con-02-list.list-02{margin-left:186px; padding-left:12%}
.portal-02 .con-02-inner .con-02-list.list-02 .txt-con{padding-left:16.5%}

/* ------- Why portal :: 컨텐츠03 (참 쉬운 시작과 사용) ------- */
.portal-03{background-color:#081230; padding:150px 0}
.portal-03 .con-top-tit{text-align:left}
.portal-03 .con-03-inner{margin-top:130px}
.portal-03 .con-03-inner > div{display:inline-block; margin:0 -1px; vertical-align:middle;}
.portal-03 .con-03-lf{width:45.3%; padding:0 5% 0 4.5%}
.portal-03 .con-03-lf .slick-list{overflow:visible}
.portal-03 .con-03-lf .txt-slide{position:relative; float:none; width:100% !important; margin-bottom:80px}
.portal-03 .con-03-lf .txt-slide:last-child{margin-bottom:0}
.portal-03 .con-03-lf .txt-slide:before{position:absolute; content:""; width:3.5px; height:0; border-radius:10px; background-color:#0bf0d5; top:50%; left:-10%; transform:translateY(-50%); transition:all 0.5s}
.portal-03 .con-03-lf .txt-slide .tit{position:relative; display:block; font-weight:500; font-size:27px; letter-spacing:-0.7px; color:#9a9ca0; line-height:1.3; transition:all 0.3s}
.portal-03 .con-03-lf .txt-slide .tit:before{position:absolute; content:""; width:37px; height:37px; background:url("../images/content/portal_con03_slide_icon.png") no-repeat; background-size:cover !important; left:0; top:-1px; opacity:0; transition:all 0.3s}
.portal-03 .con-03-lf .txt-slide .txt{font-size:16px; letter-spacing:-0.6px; color:#9a9ca0; line-height:1.75; margin-top:15px; transition:all 0.3s}
.portal-03 .con-03-lf .txt-slide.slick-current:before{height:158px}
.portal-03 .con-03-lf .txt-slide.slick-current .tit{color:#0bf0d5; padding-left:50px}
.portal-03 .con-03-lf .txt-slide.slick-current .tit:before{opacity:1}
.portal-03 .con-03-lf .txt-slide.slick-current .txt{color:#fff}
.portal-03 .con-03-rt{width:45.2%; }
.portal-03 .con-03-rt .slick-list{overflow:visible}
.portal-03 .con-03-rt .img-slide img{display:inline-block; max-width:100%}
.portal-03 .con-03-rt .img-slide .main-img{position:relative; display:block}
.portal-03 .con-03-rt .img-slide .deco-img{position:absolute; width:102.2%; top:-20%; left:-8%; opacity:0; transform:translateY(-20px); transition:all 1s 0.3s}
.portal-03 .con-03-rt .img-slide .deco-img-move{position:absolute; top:50%; left:50%; margin-top:0.2%; margin-left:-17.25%; width:11.4%; transition:all 0.5s}
.portal-03 .con-03-rt .img-slide .loading-bar{position:absolute; max-width:445px; width:70%; height:17px; bottom:16%; left:50%; transform:translateX(-50%); background-color:#edf2f8; border-radius:50px; overflow:hidden}
.portal-03.aos-animate .con-03-rt .portal-img-slide .img-slide.active-item .loading-bar:after{position:absolute; width:0; content:""; height:100%; background-color:#3a85fb; left:0; top:0; animation: barFull 3s ease-in-out forwards;}
.portal-03 .con-03-rt .img-slide.active-item .deco-img{opacity:1; transform:translateY(0); }
.portal-03 .con-03-rt .img-slide.active-item .deco-img-move{animation: fileMove 1.2s ease-in-out forwards; animation-delay:0.5s}

@keyframes barFull {
	0% {
		width:0
	}
	100% {
		width:100%
	}
}
@keyframes fileMove {
	0% {
		transform:translate(0) rotate(0);
	}
	100% {
		transform:translate(-240%,-220%) rotate(-30deg)
	}
}


/* ------- Why portal :: 컨텐츠04 (Why portal?) ------- */
.portal-04{}
.portal-04 > .con-04-area{background-color:#f8faff; max-width:1400px; margin:0 auto; padding:110px 5.5% 100px; box-sizing:border-box}
.portal-04 .con-04-inner{margin-top:195px}
.portal-04 .con-04-box{position:relative; width:58.6%; background-color:#fff; border-radius:30px; box-sizing:border-box; padding:175px 52px 60px 60px; margin-bottom:100px; opacity:0; transform:translateY(-8%);}
.portal-04 .con-04-box:last-child{margin-bottom:0}
.portal-04 .con-04-box.box-01,
.portal-04 .con-04-box.box-03{float:left; margin-right:5%}
.portal-04 .con-04-box.box-02{float:right}
.portal-04 .con-04-box:after{position:absolute; content:""; width:252px; height:247px; background-size:cover !important; }
.portal-04 .con-04-box:before{position:absolute; content:""; width:300px; height:300px; background-color:#f8faff; z-index:9; transition:all 1s 0.3s; }
.portal-04 .con-04-box:last-child:before{display:none}
.portal-04 .con-04-box.box-01:after{background:url("../images/content/portal_con04_line01.png") no-repeat; right:-300px; bottom:-50px}
.portal-04 .con-04-box.box-01:before{right:-300px; bottom:-50px; }
.portal-04 .con-04-box.box-02:after{background:url("../images/content/portal_con04_line02.png") no-repeat; left:-300px; bottom:-40px}
.portal-04 .con-04-box.box-02:before{left:-300px; bottom:-40px}
.portal-04 .con-04-box .box-inner{}
.portal-04 .con-04-box .box-inner .tit{font-weight:600; font-size:27px; letter-spacing:-0.7px; color:#0c142c; line-height:1.48}
.portal-04 .con-04-box .box-inner .txt{font-weight:400; font-size:16.3px; letter-spacing:-0.6px; color:#454545; line-height:1.71; margin-top:30px}
.portal-04 .con-04-box .box-img{position:absolute;}
.portal-04 .con-04-box .box-img .deco{position:absolute; right:0}
.portal-04 .con-04-box.box-01 .box-img{right:56px; top:-90px}
.portal-04 .con-04-box.box-02 .box-img{right:40px; top:-20px}
.portal-04 .con-04-box.box-03 .box-img{right:50px; top:-45px}
/* active 효과 */
.portal-04 .con-04-box.aos-animate{opacity:1; transform:translateY(0);}
.portal-04 .con-04-box.aos-animate .box-inner{transition-delay:0.8s}
.portal-04 .con-04-box.aos-animate .img-01{transition-delay:0.3s}
.portal-04 .con-04-box.box-01 .img-02{opacity:0; transform:translate(30%, 30%) rotate(18deg); z-index:-1; transition:opacity 1.2s 0.7s, transform 1.2s 0.4s}
.portal-04 .con-04-box.aos-animate.box-01 .img-02{transform:translate(0) rotate(0); opacity:1}
.portal-04 .con-04-box.box-02 .img-02,
.portal-04 .con-04-box.box-03 .img-02{opacity:0; transform:translateX(5%); z-index:-1; transition:all 1s 0.6s}
.portal-04 .con-04-box.aos-animate.box-02 .img-02,
.portal-04 .con-04-box.aos-animate.box-03 .img-02{transform:translate(0); opacity:1}
.portal-04 .con-04-box.aos-animate:before{height:0}


/* ------- Why portal :: 컨텐츠05 (portal 지원환경) ------- */
.portal-05{margin:100px 0 65px}
.portal-05 .con-05-inner{margin-top:105px}
.portal-05 .con-05-list{text-align:center}
.portal-05 .con-05-list li{display:inline-block; vertical-align:top; width:25%; max-width:215px; margin:0 -2px}
.portal-05 .con-05-list li .icon{display:inline-block; width:63px; height:63px; text-align:center; background-color:#edf2f8; border-radius:10px}
.portal-05 .con-05-list li .icon i{line-height:63px; font-size:26px; color:#000}
.portal-05 .con-05-list li .txt01{display:block; font-weight:500; font-size:22px; letter-spacing:-0.6px; color:#111b35; margin-top:32px; }
.portal-05 .con-05-list li .txt02{font-size:16px; letter-spacing:-0.6px; color:#475067; line-height:1.4; padding-top:5px}
.portal-05 .con-05-list li .txt02 span{display:block; margin-top:10px}
.portal-05 .link-con{text-align:center; margin-top:35px}
.portal-05 .link-con a{display:inline-block; font-weight:500; font-size:13px; color:#8eafe0; letter-spacing:-0.6px;}

/* ********* 서비스소개 :: 고객사례 ******** */
/* ------- 고객사례 :: 컨텐츠01 (상단) ------- */
.example-con-01{margin:175px 0 100px}
/* ------- 고객사례 :: 컨텐츠02 (슬라이드) ------- */
.example-slide .slick-list{padding:55px 0 0}
.example-slide .example-slide-con{position:relative; min-height:600px}
/* 배경이미지 */
.example-slide .example-slide-con .deco-bg{position:absolute; bottom:0; left:0; width:100%; z-index:0; }
.example-slide .example-slide-con .deco-bg.pc-01{animation-delay:0.6s !important}
.example-slide .example-slide-con .deco-bg.pc-02{animation-delay:0.8s !important}
.example-slide .example-slide-con.slide-01 .deco-bg{height:649px; }
.example-slide .example-slide-con.slide-01 .deco-bg.pc-01{background:url("../images/content/example_slide_01_1.png") 73% 0 no-repeat;}
.example-slide .example-slide-con.slide-01 .deco-bg.pc-02{background:url("../images/content/example_slide_01_2.png") 73% 0 no-repeat;}
.example-slide .example-slide-con.slide-02 .deco-bg{height:654px; }
.example-slide .example-slide-con.slide-02 .deco-bg.pc-01{background:url("../images/content/example_slide_02_1.png") 60% 0 no-repeat;}
.example-slide .example-slide-con.slide-02 .deco-bg.pc-02{background:url("../images/content/example_slide_02_2.png") 60% 0 no-repeat;}
.example-slide .example-slide-con.slide-03 .deco-bg{height:601px; }
.example-slide .example-slide-con.slide-03 .deco-bg.pc-01{background:url("../images/content/example_slide_03_1.png") 60% 0 no-repeat; }
.example-slide .example-slide-con.slide-03 .deco-bg.pc-02{background:url("../images/content/example_slide_03_2.png") 60% 0 no-repeat; }
.example-slide .example-slide-con.slide-04 .deco-bg{height:638px; }
.example-slide .example-slide-con.slide-04 .deco-bg.pc-01{background:url("../images/content/example_slide_04_1.png") 60% 0 no-repeat; }
.example-slide .example-slide-con.slide-04 .deco-bg.pc-02{background:url("../images/content/example_slide_04_2.png") 60% 0 no-repeat; }
/* 텍스트 */
.example-slide .example-slide-con .txt-wrap{margin-top:150px; position:relative; z-index:1; padding-right:42%}
.example-slide .example-slide-con .txt-wrap .txt-01{font-weight:500; font-size:40px; letter-spacing:-0.7px; color:#000; line-height:1.2; animation-delay:0.2s !important}
.example-slide .example-slide-con .txt-wrap.wh .txt-01{color:#fff}
.example-slide .example-slide-con .txt-wrap .txt-02{padding-top:40px; animation-delay:0.4s !important}
.example-slide .example-slide-con .txt-wrap .txt-02 span{display:block; font-weight:500; font-size:16.5px; letter-spacing:-0.7px; color:#545454; line-height:1.81; margin-top:20px}
.example-slide .example-slide-con .txt-wrap.wh .txt-02 span{color:#e8e8e8}
.example-slide .slick-dots{position:absolute; bottom:38px; left:0; width:100%; text-align:center; z-index:9}
.example-slide .slick-dots li{display:inline-block; margin:0 10px; width:16px; height:16px; border-radius:50%; border:1px solid #787878; box-sizing:border-box; cursor:pointer}
.example-slide .slick-dots li.slick-active{background-color:#787878}
.example-slide .slick-dots li button{font-size:0}
.example-slide.wh .slick-dots li{border-color:#bebebe}
.example-slide.wh .slick-dots li.slick-active{background-color:#bebebe}
/* active 효과 */
.example-slide li.active-item .txt-wrap .txt-01,
.example-slide li.active-item .txt-wrap .txt-02{animation: slideTxt 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;}
.example-slide li.active-item .deco-bg{animation: slideBg 1s cubic-bezier(0.4, 0, 0.2, 1) both;}

@keyframes slideTxt {
	from {	
		opacity:0;
		transform:translateX(8%);
	}
	to {	
		opacity:1;
		opacity:1; transform:translateX(0);
	}
}
@keyframes slideBg{
	from {	
		opacity:0;
		transform:translateX(30px);
	}
	to {	
		opacity:1;
		opacity:1; transform:translateX(0);
	}
}

/* ------- 고객사례 :: 컨텐츠03 (고객사) ------- */
.example-con-03{margin:247px 0 210px; text-align:center}
.partners-tab-con{text-align:center}
.partners-tab-con .partners-tab{max-width:895px; width:100%; display:inline-block; background-color:#dbe6ff; border-radius:50px}
.partners-tab-con .partners-tab ul{width:100%}
.partners-tab-con .partners-tab ul li{display:inline-block; width:25%; margin:0 -2px}
.partners-tab-con .partners-tab ul li a{position:relative; display:table; width:100%; height:100px; font-size:24px; letter-spacing:-0.7px; color:#000; line-height:1.2}
.partners-tab-con .partners-tab ul li a em{display:table-cell; vertical-align:middle; font-weight:500; position:relative; z-index:2}
.partners-tab-con .partners-tab ul li.selected a:after{position:absolute; content:""; width:calc(100% - 18px); height:calc(100% - 18px); top:50%; left:50%; transform:translate(-50%,-50%); z-index:0; background-color:#2e79eb; border-radius:50px; box-shadow:0 0 10px 0 rgba(31,75,143,0.25)}
.partners-tab-con .partners-tab ul li.selected a em{color:#fff}
.partners-tab-content{margin-top: 60px; }
.partners-tab-content .partners-list{margin:0 -2.833%}
.partners-tab-content .partners-list li{float:left; margin:0 2.833% 10%;  text-align:center; width:11%; border:1px solid #cad2e9; border-radius: 20%; box-sizing:border-box; position:relative; height:0; padding-top:11%}
.partners-tab-content .partners-list li span{position:absolute; top:0; left:0; width:100%; height:100%}
.partners-tab-content .partners-list li span img{max-width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.partners-tab-content .partners-more{display:inline-block; margin-top:-3%}
.partners-tab-content .partners-more.open{/*transform:rotate(180deg)*/ display:none}
.partners-tab-content .partners-list.hide-partners{display:none; }
/* ------- 요금 :: 컨텐츠04 (하단 배너) ------- */
.example-banner.sub-bt-banner .banner-wrap .banner-inner{padding:100px 37% 85px 8%}
.example-banner.sub-bt-banner .banner-wrap .banner-inner .banner-link{margin-top:45px}
.example-banner.sub-bt-banner .banner-wrap .banner-img{width:38%; right:6.2%}





/* ****************** 주요기능 ********************** */
/* ********* 공통스타일 ******** */
.function-top-area{padding-top:185px}
.function-con-wrap{max-width:1345px; margin:80px auto 0}
.function-list{}
.function-list .function-sec{position:relative; padding-bottom:252px}
.function-list .function-sec:last-child{padding-bottom:170px}
.function-list .function-sec .txt-con,
.function-list .function-sec .img-con{display:inline-block; margin:0 -2px; vertical-align:middle; box-sizing:border-box; position:relative; z-index:1}
.function-list .function-sec .img-con img{max-width:100%}
.function-list .function-sec .txt-con .tit{font-weight:400; font-size:50px; letter-spacing:-1.5px; line-height:1.375; color:#1a1361}
.function-list .function-sec .txt-con .tit.wh{color:#fff}
.function-list .function-sec .txt-con .tit .orange{color:#ff9d9d}
.function-list .function-sec .txt-con .txt{font-weight:500; font-size:20px; letter-spacing:-0.8px; color:#646a7c; line-height:1.6; margin-top:40px}
.function-list .function-sec .txt-con .txt.wh{color:#fff}
.function-list .function-sec .txt-con .txt.blue{color:#c5d9f8}
.function-list .function-sec .txt-con .txt .more-link{display:block}
.function-list .function-sec .txt-con .txt .more-link a{display:inline-block; font-weight:400; font-size:20px; letter-spacing:-0.25px; color:#0079ff; margin-top:15px}
.function-list .function-sec .txt-con .txt .more-link a .arrow{margin-left:15px}
.function-list .function-sec .img-con img.main{position:absolute; top:0; left:0}
/* --------- 그라데이션 텍스트 ------- */
.function-block-list .function-sec .txt-con .tit{font-size:40px;}
.function-block-list .function-sec .txt-con .txt{color:#fff}
.gradient-txt {
    /* old browsers */
    background: #0adaff;
    /* IE10+ */
    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;
}
.gradient-txt.gradient-short{	
	/* old browsers */
    background: #0adaff;
	/* IE10+ */
	background: -ms-linear-gradient(top right, #54ffcd 68%, #0adaff 100%);
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, right top, left bottom, color-stop(68, #54ffcd), color-stop(100, #0adaff));
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top right, #54ffcd 68%, #0adaff 100%);
    /* W3C Markup */
    background: linear-gradient(top right, #54ffcd 68%, #0adaff 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .gradient-txt {
        color: #0adaff !important;
        background: transparent;
    }
	.gradient-txt.gradient-short {
        color: #0adaff !important;
        background: transparent !important;
    }
}

/* ********* 주요기능 :: 문서유출차단 ******** */
.function-block-content{position:relative; padding-bottom:485px}
.function-block-content:after{position:absolute; content:""; width:100%; height:342px; background:url("../images/content/function_block_bt.png") no-repeat; background-size:100% 100%; bottom:143px; left:0}
.function-block-con-wrap{background-color:#081230; }
.function-block-list .function-sec:after,
.function-block-list .function-sec:before{position:absolute; content:""; bottom:0; left:50%; transform:translateX(-50%); }
.function-block-list .function-sec:after{background-size:cover !important}
.function-block-list .function-sec:before{background-color:#081230; z-index:1; transition:all 1s 0.4s;}
.function-block-list .function-sec.block-01:after,.function-block-list .function-sec.block-01:before{width:396px; height:415px; /*margin:0 0 -2% 6%*/margin:0 0 -11% 5%}
.function-block-list .function-sec.block-01:after{background:url("../images/content/function_block_line01.png") no-repeat;}
.function-block-list .function-sec.block-02:after,.function-block-list .function-sec.block-02:before{width:396px; height:416px; /*margin:0 0 -10% 5%*/ margin:0 0 -21% 6%}
.function-block-list .function-sec.block-02:after{background:url("../images/content/function_block_line02.png") no-repeat;}
.function-block-list .function-sec.block-03:after,.function-block-list .function-sec.block-03:before{width:396px; height:415px; /*margin:0 0 -1% 5%*/margin:0 0 -11% 6%}
.function-block-list .function-sec.block-03:after{background:url("../images/content/function_block_line03.png") no-repeat;}
.function-block-list .function-sec.block-04:after,.function-block-list .function-sec.block-04:before{width:392px; height:407px; /*margin:0 0 -1% -2%*/margin:0 0 -11% -4%}
.function-block-list .function-sec.block-04:after{background:url("../images/content/function_block_line04.png") no-repeat;}
.function-block-list .function-sec.block-05:after,.function-block-list .function-sec.block-05:before{width:395px; height:415px; /*margin:0 0 -10% -1%*/margin:0 0 -20% -4%}
.function-block-list .function-sec.block-05:after{background:url("../images/content/function_block_line05.png") no-repeat;}
.function-block-list.function-list .function-sec .middle-inner{height:745px}
.function-block-list .function-sec .img-con{width:28% !important;}
.function-block-list .function-sec .img-con .img-con-wrap{position:relative}
.function-block-list .function-sec.lf-img{padding-left:4%}
.function-block-list .function-sec.lf-img .txt-con{padding-left:15%;}
.function-block-list .function-sec.rt-img{ padding-right:3%}
.function-block-list .function-sec.rt-img .txt-con{padding-right:2%; }
.function-block-list .function-sec.rt-img .img-con{text-align:right}
/* active 효과 */
.img-effect-01 .function-sec .txt-con{transition-delay:0.2s}
.img-effect-01 .function-sec .img-con .bg{opacity:0; transition:all 1s}
.img-effect-01 .function-sec .img-con .main{opacity:0; transform:translateX(-5%); transition:all 1.3s 0.2s}
.img-effect-01 .function-sec.rt-img .img-con .main{transform:translateX(5%); }
.img-effect-01 .aos-animate.function-sec .img-con .bg,
.img-effect-01 .aos-animate.function-sec .img-con .main{opacity:1; transform:translate(0,0) !important}
.function-block-list .aos-animate.function-sec:before{height:0 !important}

 /* ********* 주요기능 :: 문서 유실 방지 ******** */
.function-prevent-content{overflow:hidden}
.function-prevent-content .function-con-wrap{max-width:1395px; margin:210px auto 0}
.function-prevent-list .function-sec{text-align:right}
.function-prevent-list .function-sec.prevent-last{margin:25% 0 37%; padding-bottom:0}
.function-prevent-list .function-sec .txt-con .tit{line-height:1.3}
.function-prevent-list .function-sec:after{position:absolute; content:""; background-size:cover !important; z-index:0; }
.function-prevent-list .function-sec.prevent-01:after{width:947px; height:1048px; background:url("../images/content/function_prevent_deco01.png") no-repeat;  left:50%; margin-left:14%; top:-70px; }
.function-prevent-list .function-sec.prevent-04:after{width:1646px; height:1855px; background:url("../images/content/function_prevent_deco02.png") no-repeat; right:50%; margin-right:1%; top:-430px; z-index:0}
.function-prevent-list .function-sec.prevent-last:after{width:3095px; height:3531px; background:url("../images/content/function_prevent_deco03.png") no-repeat;  left:50%; bottom:-2950px; margin-left:-64%; z-index:0}
.function-prevent-list .function-sec.prevent-01 .img-con{right:-45px}
.function-prevent-list .function-sec.prevent-last .txt-con{padding-top:6%}
.function-prevent-list .function-sec .img-con{width:43.9%; }
.function-prevent-list .function-sec .txt-con{width:56.1%; text-align:left}
.function-prevent-list .function-sec.rt-img .txt-con{padding-right:4%}
.function-prevent-list .function-sec.lf-img .txt-con{text-align:right; padding-left:5%}
.function-prevent-list .function-sec.lf-img .txt-con .txt-inner{display:inline-block; text-align:left}
/* 컨텐츠01 */
.function-prevent-list .function-sec.prevent-01 .img-con{max-width:595px;}
.function-prevent-list .function-sec.prevent-01 .img-con .img02{transform:translateX(35px); transition-delay:0.6s}
.function-prevent-list .function-sec.prevent-01 .img-con .img03{transform:translateX(-35px); transition-delay:0.9s}
.function-prevent-list .function-sec.prevent-01 .img-con .img02-bar{position:absolute; top:50%; right:6.7%; max-width:325px; height:10px; background-color:#ddd; margin-top:-20.6%; width:54.5%; border-radius:5px; overflow:hidden}
.function-prevent-list .function-sec.prevent-01 .img-con .img02-bar:after{position:absolute; content:""; width:0; height:100%; background-color:#ef5480; left:0; top:0; transition:all 1.5s 0.9s}
/* 컨텐츠02 */
.function-prevent-list .function-sec.prevent-02 .img-con{max-width:612px;}
.function-prevent-list .function-sec.prevent-02 .img-con .img02{transform:translate(-35px, -35px); transition-delay:0.4s}
.function-prevent-list .function-sec.prevent-02 .img-con .img03{transform:translateX(35px); transition-delay:0.8s}
/* 컨텐츠03 */
.function-prevent-list .function-sec.prevent-03 .img-con{max-width:589px;}
.function-prevent-list .function-sec.prevent-03 .img-con .img02{transform:translateX(-35px); transition-delay:0.6s}
.function-prevent-list .function-sec.prevent-03 .img-con .img03{transform:translateX(-35px); transition-delay:1s}
.function-prevent-list .function-sec.prevent-03 .img-con .img04{transform:translateX(35px); transition-delay:1s}
/* 컨텐츠04 */
.function-prevent-list .function-sec.prevent-04 .img-con{max-width:611px;}
.function-prevent-list .function-sec.prevent-04 .img-con .img02{transform:rotate(-20deg); transition-delay:0.4s; z-index:1}
.function-prevent-list .function-sec.prevent-04 .img-con .img03{transform:translateX(-35px); transition-delay:0.9s; z-index:0}
/* 컨텐츠05 */
.function-prevent-list .function-sec.prevent-last .img-con{max-width:771px;}
.function-prevent-list .function-sec.prevent-last .img-con .img02{transform:scale(0.85); transition-delay:0.5s;}
.function-prevent-list .function-sec.prevent-last .img-con .img03{transform:scale(0.85); transition-delay:0.9s;}
.function-prevent-list .function-sec.prevent-last .img-con .img04{transform:scale(0.85); transition-delay:1.1s;}
.function-prevent-list .function-sec.prevent-last .img-con .img05{transform:scale(0.85); transition-delay:1.3s;}

/* active 효과 */
.txt-img-effect .img-con .deco{position:absolute; top:0; left:0}
.txt-img-effect .txt-con,
.txt-img-effect .bg{opacity:0; transform:translateY(-30px); transition:all 1s}
.txt-img-effect .deco{opacity:0; transition:all 1s}
.txt-img-effect.aos-animate .txt-con,
.txt-img-effect.aos-animate .bg,
.txt-img-effect.aos-animate .deco{opacity:1 !important; transform:translate(0,0) scale(1) perspective(500px) rotate(.001deg) !important;}
.txt-img-effect.aos-animate .effect-02.txt-con{transition-delay:0.2s}
.txt-img-effect.aos-animate .effect-02 .bg{transition-delay:0.2s}
.function-prevent-list .aos-animate.function-sec.prevent-01 .img-con .img02{}
.function-prevent-list .aos-animate.function-sec.prevent-01 .img-con .img02-bar:after{width:100%}
.function-prevent-list .aos-animate.function-sec.prevent-01 .img-con .img03{}



 /* ********* 주요기능 :: 랜섬웨어 대응 ******** */
 /* 그라데이션 타이틀 */
.ransomware-tit{
    background: #c539ff;
    background: -ms-linear-gradient(135deg, #c539ff, #007eff);
    background: -webkit-linear-gradient(135deg, #c539ff, #007eff);
    background: linear-gradient(135deg, #c539ff, #007eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {
   .ransomware-tit {
        color: #007eff !important;
        background: transparent;
    }
}
/* 상단 :: 비디오컨텐츠 */
.ransomware-top-wrap{position:relative; background-color:#081230; }
.ransomware-top-wrap:after{position:absolute; content:""; width:100%; height:180px; background-color:#fff; bottom:0; left:0; }
.ransomware-video-con{margin-top:350px} 
.ransomware-video-con .video-iframe-wrapper{position:relative; max-width:699px; margin:0px auto; z-index:9}
.ransomware-video-con .video-iframe-wrapper:before{position:absolute; content:""; width:221px; height:149px; background:url("../images/content/ransomware_video_deco.png") no-repeat; background-size:cover !important; z-index:1; top:-73px; left:-160px}
.ransomware-video-con .video-iframe-box{position:relative; padding-top:56.2%; height:0; border-radius:29px; overflow:hidden; box-shadow:7px 7px 24px -2px rgba(0,0,0,0.2); z-index:2}
.ransomware-video-con .video-iframe-box iframe{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.ransomware-video-con .video-cover-box{position:absolute; top:0px; left:0px; width:100%; height:100%;  z-index:2}
.ransomware-video-con .video-cover-box .thumb{display:block; width:100%; height:100%;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.ransomware-video-con .video-cover-box .thumb img{width:100%; height:100%;}
.ransomware-video-con .video-cover-box .icon{position:absolute; top:50%; left:50%;  z-index:1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor:pointer; width:14.6%}
.ransomware-video-con .video-cover-box .icon img{max-width:100%}
.ransomware-video-con .video-txt{text-align:center; margin-top:70px; position:relative; z-index:3}
.ransomware-video-con .video-txt h4{font-weight:400; font-size:50px; letter-spacing:-0.5px; color:#fff; line-height:1.2; }
.ransomware-video-con .video-txt p{font-size:20px; letter-spacing:-0.25px; color:#dcdcdc; line-height:1.6; margin-top:35px}
/* 하단 :: 암호화 영역 */
.ransomware-bt-wrap{position:relative; padding-top:550px;}
.ransomware-bt-wrap:after{position:absolute; content:""; width:100%; height:846px; background:url("../images/content/ransomware_bg_01.png") no-repeat; top:-180px; left:0; background-size:100% 100%; z-index:2}
.ransomeware-encryption{display:table; width:100%; height:850px; background:url("../images/content/ransomware_bg_02.png") no-repeat 50% 0; text-align:center; background-attachment:fixed; background-size:cover}
.ransomeware-encryption .encryption-inner{display:table-cell; vertical-align:middle}
.ransomeware-encryption .icon{}
.ransomeware-encryption .tit{display:block; font-weight:400; font-size:50px; letter-spacing:-0.25px; color:#1a1361; line-height:1.28; margin-top:55px}
.ransomeware-encryption .txt{font-weight:500; font-size:20px; letter-spacing:-0.25px; color:#3d4865; line-height:1.6; margin-top:60px}
/* 하단 :: 공통스타일 (이미지 텍스트) */
.ransomware-list{padding:200px 0 100px}
.ransomware-list .function-list .function-sec .img-con{width:47.2%}
.ransomware-list .function-list .function-sec .txt-con{width:52.8%; text-align:left; padding-left:9.3%}
/* active 효과 */
.ransomware-list .function-list .function-sec .img-con .deco{position:absolute; top:0; left:0}
.ransomware-list .function-list .function-sec .img-con .img02{transform:translateY(-15px); transition-delay:0.5s;}
.ransomware-list .function-list .function-sec .img-con .img03{transform:scale(0.85); transition-delay:0.8s;  top:auto; bottom:12%; left:auto; right:0; width:20.2%;}
.ransomware-list .function-list .function-sec.aos-animate .img-con .img03{animation: spinIcon 6s ease-in-out infinite;}

@keyframes spinIcon {
	0% {
		transform:rotate(0)
	}
	30% {
		transform:rotate(0)
	}
	70% {
		transform:rotate(-360deg)
	}
	100% {
		transform:rotate(-360deg)
	}
}
@-webkit-keyframes spinIcon {
	0% {
		transform:rotate(0)
	}
	30% {
		transform:rotate(0)
	}
	70% {
		transform:rotate(-360deg)
	}
	100% {
		transform:rotate(-360deg)
	}
}


 /* ********* 주요기능 :: 문서 통합 관리 ******** */
.function-integrate-wrap{margin-top:280px}
.function-integrate-list{position:relative}
.function-integrate-list:after{position:absolute; content:""; width:1100px; height:1223px; background:url("../images/content/function_integrate_deco.png") no-repeat; background-size:cover !important; z-index:0; top:0; margin-top:-26%}
.function-integrate-list.integrate-list-01:after,
.function-integrate-list.integrate-list-03:after{right:50%; margin-right:40%}
.function-integrate-list.integrate-list-02:after{left:50%; margin-left:40%}
.function-integrate-list .integrate-sec{position:relative; margin-bottom:160px}
.function-integrate-list .integrate-sec:before{position:absolute; content:""; width:30px; height:30px; border:8px solid #c4eef7; background-color:#89ddef; border-radius:50%; top:10px; z-index:9}
.function-integrate-list:last-child .integrate-sec:last-child{margin-bottom:200px}
.function-integrate-list .integrate-sec.integrate-02:before{background-color:#b1fdd3; border-color:#d8fee9}
.function-integrate-list .integrate-sec.integrate-03:before{background-color:#f9cfcd; border-color:#fce7e6}
.function-integrate-list .integrate-sec.integrate-04:before{background-color:#c3bbf9; border-color:#e1ddfc}
.function-integrate-list .integrate-sec.integrate-05:before{background-color:#a3c1fd; border-color:#d1e0fe}
.function-integrate-list .integrate-sec.integrate-06:before{background-color:#f8d190; border-color:#feeac9}
.function-integrate-list .integrate-sec > div{float:left; box-sizing:border-box; position:relative; z-index:1}
.function-integrate-list .integrate-sec .img-con.top-01{top:-70px}
.function-integrate-list .integrate-sec .img-con.top-02{top:-35px}
.function-integrate-list .integrate-sec .img-con.top-03{top:-90px}
.function-integrate-list .integrate-sec .img-con img{max-width:100%}
.function-integrate-list .integrate-sec .txt-con{}
.function-integrate-list .integrate-sec .txt-con .tit{font-weight:400; font-size:50px; letter-spacing:-1px; color:#1a1361; line-height:1.3}
.function-integrate-list .integrate-sec .txt-con .txt{font-weight:500; font-size:20px; letter-spacing:-0.7px; color:#646a7c; line-height:1.5; margin-top:40px}
/* 이미지 왼쪽 */
.function-integrate-list .integrate-sec.lf-img{padding-left:17%}
.function-integrate-list .integrate-sec.lf-img:before{left:0; margin-left:8%; }
.function-integrate-list .integrate-sec.lf-img .img-con{width:38%}
.function-integrate-list .integrate-sec.lf-img .txt-con{width:62%}
/* 이미지 오른쪽 */
.function-integrate-list .integrate-sec.rt-img{padding:0 17.5% 0 8.5%}
.function-integrate-list .integrate-sec.rt-img:before{right:0; margin-right:8%; }
.function-integrate-list .integrate-sec.rt-img .img-con{float:right; width:31%; text-align:right; }
.function-integrate-list .integrate-sec.rt-img .txt-con{width:69%; }

/* active 효과 */
.function-integrate-list .integrate-sec .img-con-wrap{position:relative; display:inline-block}
.function-integrate-list .integrate-sec .img-con-wrap .deco{position:absolute; top:0; left:0;}
.function-integrate-list .integrate-sec .img-con-wrap .ani,
.function-integrate-list .integrate-sec .only-img{animation: upDownIcon 1.5s ease-in-out infinite; opacity:0; transition:transform 1s, opacity 1s; transform:translateY(-30px)}
.function-integrate-list .integrate-sec .img-con-wrap .ani.deco{transition-delay:0.3s}
.function-integrate-list .integrate-sec .img-con-wrap .bg{opacity:0; transform:translateY(-10px); transition:all 1s}
.function-integrate-list .integrate-sec .txt-con.effect-02,
.function-integrate-list .integrate-sec .effect-02 .only-img{transition-delay:0.2s}
.function-integrate-list .integrate-sec.integrate-01 .img-con-wrap{max-width:271px;}
.function-integrate-list .integrate-sec.integrate-01 .img-con-wrap .bg{opacity:0; transition:all 1s}
.function-integrate-list .integrate-sec.aos-animate .img-con-wrap .bg,
.function-integrate-list .integrate-sec.aos-animate .img-con-wrap .ani,
.function-integrate-list .integrate-sec.aos-animate .only-img{opacity:1; transform:translateY(0);}

@keyframes upDownIcon {
	0% {
		transform:  translateY(-4px);
	}
	50% {
		transform: translateY(4px);
	}
	100% {
		transform:  translateY(-4px);
	}
}


 /* ********* 주요기능 :: 공유와 협업 ******** */
 .function-share-content{margin-bottom:100px}
.function-share-top{background-color:#081230; padding:210px 0 200px}
.function-list.middle-con .function-sec{padding-bottom:0 !important;}
.function-list .function-sec .middle-inner{display:table; width:100%; height:845px; }
.function-list .function-sec .middle-inner > div{display:table-cell; vertical-align:middle; width:50%;}
.function-share-list .function-sec .txt-con{text-align:left}
.function-list .function-sec .middle-inner .img-con-wrap{position:relative; display:inline-block;}
.function-share-list .function-sec.lf-img .txt-con{padding-left:4.2%}
.function-share-list .function-sec.rt-img .txt-con{padding-right:4.2%}
.function-share-list .function-sec.rt-img .img-con{text-align:right}
.function-share-list .function-sec.share-01{background:linear-gradient(80deg, #80e9ff, #45aaff)}
.function-share-list .function-sec.share-02,
.function-share-list .function-sec.share-04{background-color:#081230}
.function-share-list .function-sec.share-03{background:linear-gradient(80deg, #b980ff, #8630d3)}
.function-share-list .function-sec.share-05{background:linear-gradient(80deg, #74e2d6, #15bdd1)}
.function-share-list .function-sec.share-05 .area{position:relative}
.function-share-list .function-sec.share-05 .img-con{position:absolute; left:-245px; top:50%; transform:translateY(-50%); width:63%}
.function-share-list .function-sec.share-05 .img-con .mb{display:none}
.function-share-list .function-sec.share-05 .txt-con{width:53%; left:3%}
.function-share-list .function-sec.share-06{display:block; height:auto; background:url("../images/content/function_share_bg.png") no-repeat 70% 0; background-size:100% 100%; margin-bottom:40px}
.function-share-list .function-sec.share-06 .middle-inner{padding:117px 0 375px; margin-left:55px}
.function-share-list .function-sec.share-06 .sharet-06-area{max-width:1510px; margin:0 auto}
.function-share-list .function-sec.share-06.rt-img .txt-con{width:48.8%; padding-right:4%}
.function-share-list .function-sec.share-06.rt-img .img-con{width:51.2%}
/* active효과 */
.function-share-list .function-sec .img-con .deco{position:absolute; top:0; left:0}
.function-share-list .function-sec .img-con img{transition:all 1s; opacity:0}
.function-share-list .function-sec .txt-con.effect-02{transition-delay:0.2s}
.function-share-list .function-sec .img-con.effect-02 .bg{transition-delay:0.2s}
/* active효과 컨텐츠01 */
.function-share-list .function-sec.share-01 .img-con .img02{transition-delay:0.4s; z-index:1}
.function-share-list .function-sec.share-01 .img-con .img03{transition-delay:0.9s; z-index:1}
.function-share-list .function-sec.share-01 .img-con .img04{transition-delay:1.2s; z-index:0}
/* active효과 컨텐츠02 */
.function-share-list .function-sec.share-02 .img-con .img02{transition-delay:0.5s;}
.function-share-list .function-sec.share-02 .img-con .img03{transform:translate(-110px,110px); transition-delay:0.8s;}
/* active효과 컨텐츠03 */
.function-share-list .function-sec.share-03 .img-con .img01{transform:translateX(-30px);}
.function-share-list .function-sec.share-03 .img-con .img02{transform:translateX(30px); transition-delay:0.5s;}
/* active효과 컨텐츠04 */
.function-share-list .function-sec.share-04 .img-con .img01{transform:translateX(-30px);}
.function-share-list .function-sec.share-04 .img-con .img02{transform:translateX(30px); transition-delay:0.5s; }
.function-share-list .function-sec.share-04 .img-con .img03{transform:translateY(-30px); transition-delay:0.8s;}
/* active효과 컨텐츠05 */
.function-share-list .function-sec.share-05 .img-con .img01{transform:translateX(-30px); z-index:1}
.function-share-list .function-sec.share-05 .img-con .img02{transform:translateX(30px); transition-delay:0.5s; z-index:1}
.function-share-list .function-sec.share-05 .img-con .img03{transition-delay:1s; z-index:-1}
/* active효과 컨텐츠06 */
.function-share-list .function-sec.share-06 .img-con .img01{transform:translateY(-30px); transition-delay:0.3s}
.function-share-list .function-sec.share-06 .img-con .img02{transform:translateX(-30px); transition-delay:0.6s;}

.function-share-list .function-sec.aos-animate .img-con img{opacity:1; transform:translateX(0) perspective(500px) rotate(.001deg) !important;}



 /* ********* 주요기능 :: 재택 근무 활용 ******** */
.function-home-content{margin-bottom:100px}
.function-home-top{position:relative; padding:200px 0 135px}
.function-home-top:after{position:absolute; content:""; width:1825px; height:1945px; background:url("../images/content/function_home_top_deco.png") no-repeat; left:50%; bottom:-110px; z-index:-1;  transform:translateX(-50%); margin-left:19%}
.function-home-list .function-sec.lf-img .txt-con{padding-left:4.2%}
.function-home-list .function-sec.home-01{background-color:#bde1e8}
.function-home-list .function-sec.home-01 .img-con{position:absolute; left:50%; top:50%; transform:translateY(-50%); width:73%; margin-left:-1000px}
.function-home-list .function-sec.home-02{background-color:#edf2f8}
.function-home-list .function-sec.home-02 .img-con{position:absolute; right:50%; bottom:0; width:59%; margin-right:-1000px; text-align:right; z-index:0}
.function-home-list .function-sec.home-04{background-color:#2e79eb; overflow:hidden}
.function-home-list .function-sec.home-04 > div{position:relative}
.function-home-list .function-sec.home-04 > div:after,
.function-home-list .function-sec.home-04 > div:before{position:absolute; content:""; background-size:cover !important}
.function-home-list .function-sec.home-04 > div:after{width:873px; height:402px;  background:url("../images/content/function_home_bg01.png") no-repeat; top:0; right:-100px}
.function-home-list .function-sec.home-04 > div:before{width:107px; height:162px; background:url("../images/content/function_home_bg02.png") no-repeat; top:255px; right:-275px; z-index:1}
.function-home-list .function-sec.home-04 .img-con{position:absolute; right:0; bottom:-50px; width:44%; margin-right:20px}
/* active효과 컨텐츠01 */
.function-home-list .function-sec.home-01 .img-con .img01{z-index:9}
.function-home-list .function-sec.home-01 .img-con .img02{transform:scale(0.8); transition-delay:0.4s;}
.function-home-list .function-sec.home-01 .img-con .img03{transform:scale(0.8); transition-delay:0.6s;}
.function-home-list .function-sec.home-01 .img-con .img04{transform:scale(0.8); transition-delay:0.8s;}
/* active효과 컨텐츠02 */
.function-home-list .function-sec.home-02 .img-con{z-index:99}
.function-home-list .function-sec.home-02 .img-con .img01{transform:translate(-20px,0);}
.function-home-list .function-sec.home-02 .img-con .img02{transform:translate(-20px,0); transition-delay:0.5s;}
.function-home-list .function-sec.home-02 .img-con .img03{transform:translate(-20px,0); transition-delay:0.8s;}
/* active효과 컨텐츠03 */
.function-home-list .function-sec.home-03 .img-con .img02{transform:translateX(30px); transition-delay:0.4s;}
.function-home-list .function-sec.home-03 .img-con .img03{transform:translateX(50px); transition-delay:0.7s; z-index:-1}
/* active효과 컨텐츠04 */
.function-home-list .function-sec.home-04 .img-con img{transform:translateY(50px); opacity:0;  transition:all 1s 0.4s}
.function-home-list .aos-animate.function-sec.home-04 .img-con img{transform:translateY(0); opacity:1}

 /* ********* 주요기능 :: 강력한 보안 ******** */
.function-security-wrap{margin-top:250px}
.function-security-list .function-sec:after{position:absolute; content:""; background-size:cover !important; z-index:0; }
.function-security-list .function-sec.security-01:after{width:1294px; height:1460px; background:url("../images/content/function_security_deco01.png") no-repeat;  left:50%; margin-left:20%; top:190px; }
.function-security-list .function-sec.security-03:after{width:722px; height:801px; background:url("../images/content/function_security_deco02.png") no-repeat;  left:0; margin-left:-240px; top:155px; }
.function-security-list .function-sec.security-04:after{width:1075px; height:1037px; background:url("../images/content/function_security_deco03.png") no-repeat; left:50%; margin-left:18.5%; top:-120px; }
.function-security-list .function-sec .img-con{width:41% !important}
.function-security-list .function-sec .txt-con{width:59% !important}
.function-security-list .function-sec.lf-img .txt-con{padding-left:14.8%}
.function-security-list .function-sec.rt-img .txt-con{padding-right:10%}
.function-security-list .function-sec .img-con .img-con-wrap{max-width:551px;}
/* active효과 컨텐츠01 */
.function-security-list .function-sec.security-01 .img-con .img02{transform:translateX(-30px); transition-delay:0.4s}
/* active효과 컨텐츠02 */
.function-security-list .function-sec.security-02 .img-con .img-con-wrap{overflow:hidden; padding-top:30px}
.function-security-list .function-sec.security-02 .img-con .img02{transform:translateX(50px); transition-delay:0.4s; top:30px}
.function-security-list .function-sec.security-02 .img-con .img03{transform:translateY(10px); transition-delay:0.85s; top:30px}
/* active효과 컨텐츠03 */
.function-security-list .function-sec.security-03 .img-con .img02{transform:translateX(-30px); transition-delay:0.4s}
/* active효과 컨텐츠04 */
.function-security-list .function-sec.security-04 .img-con .img02{transform:translateX(-30px); transition-delay:0.4s}
.function-security-list .function-sec.security-04 .img-con .img03{transform:translateX(30px); transition-delay:0.8s}


/* 하단 배너 */
.security-banner.sub-bt-banner{margin-bottom:100px}
.security-banner.sub-bt-banner .banner-wrap{border-radius:0; overflow:visible; background-color:#081131}
.security-banner.sub-bt-banner .banner-wrap > div{position:relative}
.security-banner.sub-bt-banner .banner-wrap .banner-inner{position:relative; padding:80px 0 95px 8%; overflow:hidden}
.security-banner.sub-bt-banner .banner-wrap .banner-inner:after{position:absolute; content:""; width:657px; height:375px; background:url("../images/content/function_security_bt_banner01.png") no-repeat; background-size:cover !important; top:-25px; left:50%; margin-left:-9.5%; z-index:-1 }
.security-banner.sub-bt-banner .banner-wrap .banner-img{right:-50px; bottom:-37px; z-index:9; width:44%;}

 /* ********* 주요기능 :: 편리한 관리 ******** */
 .function-convenient-content{margin-bottom:100px}
 .convenient-con-wrap{max-width:1422px; margin:60px auto 0}
.function-convenient-list .function-sec .middle-inner{height:735px; position:relative}
.function-convenient-list .function-sec .img-con{width:38% !important}
.function-convenient-list .function-sec .img-con .img-con-wrap{position:relative; max-width:443px; display:inline-block}
.function-convenient-list .function-sec .txt-con{width:62% !important}
.function-convenient-list .function-sec:after,
.function-convenient-list .function-sec:before{position:absolute; content:""; bottom:0; left:50%; transform:translateX(-50%); width:396px; height:415px; }
.function-convenient-list .function-sec:after{background-size:cover !important;}
.function-convenient-list .function-sec:before{background-color:#fff; z-index:1; transition:all 1s 0.4s}
.function-convenient-list .function-sec.convenient-01:after,.function-convenient-list .function-sec.convenient-01:before{margin:0 0 -10% 3%}
.function-convenient-list .function-sec.convenient-01:after{background:url("../images/content/function_convenient_line01.png") no-repeat;}
.function-convenient-list .function-sec.convenient-02:after,.function-convenient-list .function-sec.convenient-02:before{margin:0 0 -19% 4%}
.function-convenient-list .function-sec.convenient-02:after{background:url("../images/content/function_convenient_line02.png") no-repeat;}
.function-convenient-list .function-sec.convenient-02:before{background-color:#f8faff; border-top-left-radius:300px; width:28%;}
.function-convenient-list .function-sec.convenient-03:after,.function-convenient-list .function-sec.convenient-03:before{margin:0 0 -9.5% 4%}
.function-convenient-list .function-sec.convenient-03:after{background:url("../images/content/function_convenient_line01.png") no-repeat;}
.function-convenient-list .function-sec.convenient-03:before{background-color:#f8faff}
.function-convenient-list .function-sec.convenient-04:after,.function-convenient-list .function-sec.convenient-04:before{margin:0 0 -19% 5%}
.function-convenient-list .function-sec.convenient-04:after{background:url("../images/content/function_convenient_line02.png") no-repeat;}
.function-convenient-list .function-sec .middle-inner:before{position:absolute; content:""; background-size:cover !important; z-index:0; left:50%; }
.function-convenient-list .function-sec.convenient-01 .middle-inner:before{width:1035px; height:1097px; background:url("../images/content/function_convenient_deco01.png") no-repeat; margin-left:-1260px; top:70px; }
.function-convenient-list .function-sec.convenient-02 .middle-inner:before{width:1612px; height:1551px; background:url("../images/content/function_convenient_deco02.png") no-repeat; margin-left:-360px; top:400px; }
.function-convenient-list .function-sec.convenient-04 .middle-inner:before{width:383px; height:394px; background:url("../images/content/function_convenient_deco03.png") no-repeat; margin-left:-76%; top:550px; }
/* 왼쪽 이미지 */
.function-convenient-list .function-sec.lf-img{padding-left:4%}
.function-convenient-list .function-sec.lf-img .img-con{}
.function-convenient-list .function-sec.lf-img .txt-con{padding-left:12%}
/* 오른쪽 이미지 */
.function-convenient-list .function-sec.rt-img{padding-right:4%}
.function-convenient-list .function-sec.rt-img .img-con{text-align:right}
.function-convenient-list .function-sec.rt-img .txt-con{padding-right:2.5%}
/* active 효과 */
.function-convenient-list .aos-animate.function-sec:before{height:0}


/* 클라우드 스토리지 모니터링 */
.cloud-monitoring{position:relative; padding:185px 0 220px; z-index:1}
.cloud-monitoring:before{position:absolute; content:""; width:100%; height:100%; background:url("../images/content/cloud_monitoring_bg.png") no-repeat 24% 0; background-size:100% 100%; bottom:0; left:0; z-index:0}
.cloud-monitoring > .area{position:relative; z-index:1}
.cloud-monitoring .deco-img{ width:25%}
.cloud-monitoring .deco-img img{max-width:100%}
.cloud-monitoring .txt-wrap{padding-left:25%}
.cloud-monitoring .txt-wrap .tit{	
	font-weight:400; font-size:50px; letter-spacing:-0.75px; line-height:1.2;
    background: #0adaff;
    background: -ms-linear-gradient(135deg, #0adaff, #54ffcd);
    background: -webkit-linear-gradient(135deg, #0adaff, #54ffcd);
    background: linear-gradient(135deg, #0adaff, #54ffcd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {
   .cloud-monitoring .txt-wrap .tit {
        color: #0adaff !important;
        background: transparent;
    }
}
.cloud-monitoring .txt-wrap .txt{padding-top:10px}
.cloud-monitoring .txt-wrap .txt span{display:block; font-weight:500; font-size:20px; letter-spacing:-0.1px; color:#fff; line-height:1.5; margin-top:30px}



/* ****************** 요금 ********************** */
/* ------- 요금 :: 컨텐츠01 (상단) ------- */
.charge-con-01{background-color:#f8faff; padding:155px 0 150px}
.charge-con-01 .charge-con01-list{margin:130px -2% 0}
.charge-con-01 .charge-con01-list li{float:left; width:21%; margin:0 2%; text-align:center}
.charge-con-01 .charge-con01-list li .icon img{max-width:100%}
.charge-con-01 .charge-con01-list li .txt{font-size:20px; letter-spacing:-0.6px; color:#6d6d6d; line-height:1.4; margin-top:38px}

/* ------- 요금 :: 컨텐츠02 (합리적인 요금제) ------- */
.charge-con-02{padding:180px 0 0}
.con-sub-tit{text-align:center; font-weight:400; font-size:55px; letter-spacing:-0.25px; color:#111b35; line-height:1.3}
/* 탭스타일 */
.charge-con02-tab{ margin-top: 0px }
.charge-con02-tab .charge-tab-style{text-align:center;  background-color: #f9f9f9; }
.charge-con02-tab .charge-tab-style .charge-tab-list{width: 100%; max-width: 1400px;  display:inline-block; position:relative; }
.charge-con02-tab .charge-tab-style .discount-txt{position:absolute; top:-15px; right:-35px; font-weight:500; font-size:15px; letter-spacing:0; color:#f05334; padding-left:15px}
.charge-con02-tab .charge-tab-style .discount-txt:before{position:absolute; content:""; width:10px; height:10px; background:url("../images/content/payment_system_tab_deco.png") no-repeat; background-size:cover !important; left:0; bottom:0}
.charge-con02-tab .charge-tab-style ul{background-color:#f9f9f9; display:inline-block; width:100%; overflow:hidden}
.charge-con02-tab .charge-tab-style li{display:inline-block; vertical-align:top; margin:0 -1px; width:50%; min-width: 120px; border-bottom: 1px solid #20728b; }
.charge-con02-tab .charge-tab-style li a{position:relative; display:table; width:100%; height:45px; text-align:center; font-size:16.5px; color: #757575; letter-spacing:-0.7px}
.charge-con02-tab .charge-tab-style li.selected a{color:#ffffff; }
.charge-con02-tab .charge-tab-style li.selected a:after{position:absolute; content:""; width:calc(100%); height:calc(100%); background-color:#0ba29a; top: 0%; left: 0%; transform:translate( 0%, 0%); z-index:0; box-shadow:0 3px 5px 0 rgba(31,75,143,0.05)}
.charge-con02-tab .charge-tab-style li a em{display:table-cell; vertical-align:middle; font-weight:500; position:relative; z-index:2}
/* 요금제 내용 */
.charge-tab-content{margin-top:70px}
.payment-system-wrap{position:relative; margin:0 4.3%; padding:70px 0}
.payment-system-wrap:before{position:absolute; content:""; width:90%; max-width:1085px; height:100%; background-color:#f8faff; top:0; left:50%; transform:translateX(-50%); z-index:0; border-radius:40px; opacity:0; transition:all  0.3s 0.1s}
.payment-system-wrap.aos-animate:before{opacity:1}
.payment-system-list{margin:0 -2.8%; display:flex; flex-wrap:wrap;}
.payment-system-list li{position:relative; float:left; width:27.7333%; margin:0 2.8%; text-align:center; border-radius:40px; overflow:hidden; box-shadow:3px 10px 33px 0 rgba(31,75,143,0.06);}
.payment-system-list li a{display:block; padding:50px 8.7% 180px; height:100%; box-sizing:border-box; background-color:#fff; transition:background-color 0.3s}
.payment-system-list li a .txt-01{display:block; color:#000; transition:color 0.3s}
.payment-system-list li a .txt-01 .icon{display:inline-block; vertical-align:middle; margin-right:10px}
.payment-system-list li a .txt-01 .tit{display:inline-block; vertical-align:middle; font-weight:400; font-size:24px; letter-spacing:-0.7px;}
.payment-system-list li a .txt-02{display:block; font-weight:400; font-size:50px; letter-spacing:-1.25px; color:#091737; margin:60px 0; transition:color 0.3s}
.payment-system-list li a .txt-03{font-weight:500; font-size:24px; letter-spacing:-0.03em; color:#333; line-height:1.45; transition:color 0.3s}
.payment-system-list li a .txt-03 span{display:block; margin-bottom:5px}
.payment-system-list li a .txt-04{font-weight:500; font-size:14px; letter-spacing:-0.65px; color:#838383; line-height:1.5; margin-top:25px; transition:color 0.3s}
.payment-system-list li a .txt-04 span{display:block; margin-bottom:5px}
.payment-system-list li a .txt-04 span:last-child{margin-bottom:0}
.payment-system-list li a .btn-form{position:absolute; bottom:50px; left:8.7%; right:8.7%; width:82.6%; text-align:center; background-color:#2577f4; border-radius:50px; font-weight:500; font-size:20px; letter-spacing:-0.6px; color:#fff; height:60px; line-height:60px; display:block}
.payment-system-list li a .btn-form .arrow{margin-left:10px}
.payment-system-list li a:hover{background-color:#10193a}
.payment-system-list li:hover .txt-01,
.payment-system-list li:hover .txt-02,
.payment-system-list li:hover .txt-03,
.payment-system-list li:hover .txt-04{color:#fff}
/* 요금제 주의사항 */
.charge-con02-notice{padding:0 10% 0 16%; margin:30px 0 90px}
.charge-con02-notice p{position:relative; font-weight:500; font-size:15px; letter-spacing:-0.65px; color:#838383; line-height:1.75; padding-left:12px}
.charge-con02-notice p:before{position:absolute; content:"-"; left:0; top:0}

/* ------- 요금 :: 컨텐츠03 (하단 배너) ------- */
.charge-banner.sub-bt-banner .banner-wrap{overflow:visible; background:#1f284a url("../images/content/charge_bt_banner_bg.png") right bottom no-repeat}
.charge-banner.sub-bt-banner .banner-wrap .banner-inner{padding-right:37%}
.charge-banner.sub-bt-banner .banner-wrap .banner-img{width:49%; right:3.6%}



/* ****************** 비교 ********************** */
/* ------- 비교 :: 컨텐츠01 (상단) ------- */
.compare-con-01{margin:160px 0}

/* ------- 비교 :: 컨텐츠02 (텍스트 이미지 나열) ------- */
.compare-con-02{margin-bottom:200px}
.charge-con02-sec{}
.charge-con02-sec.sec-01 .sec-inner .sec-inner-img{vertical-align:top; width:55.7%}
.charge-con02-sec .sec-tit .tit{font-weight:400; font-size:55px; letter-spacing:-0.5px; line-height:1.25}
.gradient-tit.gradient-01{
    /* old browsers */
    background: #0084ff;
    /* IE10+ */
    background: -ms-linear-gradient(135deg, #00fff0, #0084ff, #0037a7);
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(135deg, #00fff0, #0084ff, #0037a7);
    /* W3C Markup */
    background: linear-gradient(135deg, #00fff0, #0084ff, #0037a7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .gradient-tit.gradient-01 {
        color: #0084ff;
        background: transparent;
    }
}

.gradient-tit.gradient-02{
    /* old browsers */
    background: #c52edb;
    /* IE10+ */
    background: -ms-linear-gradient(135deg, #c52edb, #ae08e5, #007be3);
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(135deg, #c52edb, #ae08e5, #007be3);
    /* W3C Markup */
    background: linear-gradient(135deg, #c52edb, #ae08e5, #007be3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .gradient-tit.gradient-02{
        color: #c52edb;
        background: transparent;
    }
}

.gradient-tit.gradient-03{
    /* old browsers */
    background: #1499ff;
    /* IE10+ */
    background: -ms-linear-gradient(135deg, #1499ff, #005dea, #0024ff);
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(135deg, #1499ff, #005dea, #0024ff);
    /* W3C Markup */
    background: linear-gradient(135deg, #1499ff, #005dea, #0024ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .gradient-tit.gradient-03{
        color: #1499ff;
        background: transparent;
    }
}

.charge-con02-sec .sec-tit .tit img{display:inline-block; margin-bottom:8px; max-width:100%}
.charge-con02-sec .sec-tit .txt{font-weight:600; font-size:24px; letter-spacing:-0.7px; color:#2c2c2c; line-height:1.5; margin-top:50px}
.charge-con02-sec .sec-inner > div{display:inline-block; margin:0 -1px; box-sizing:border-box; vertical-align:top; position:relative}
.charge-con02-sec .sec-inner .sec-inner-explain p{font-weight:400; font-size:20px; letter-spacing:-0.7px; color:#6d6d6d; line-height:1.7}
.charge-con02-sec .sec-inner .sec-inner-explain .more-view{display:inline-block; font-weight:500; font-size:20px; letter-spacing:-0.6px; color:#2e79eb; margin-top:45px}
.charge-con02-sec .sec-inner .sec-inner-explain .more-view .arrow{margin-left:19px;}
.charge-con02-sec .sec-inner .sec-inner-img{box-shadow:5px 5px 10px 0 rgba(16,55,115,0.2); border-radius:30px; overflow:hidden}
.charge-con02-sec .sec-inner .sec-inner-img img{max-width:100%; }
.charge-con02-sec.rt-img{background-color:#f8faff}
.charge-con02-sec.rt-img.sec-01{padding:225px 0 185px}
.charge-con02-sec.rt-img.sec-03{padding:200px 0}
.charge-con02-sec.rt-img.sec-01 .sec-inner{margin-top:40px}
.charge-con02-sec.rt-img .sec-inner .sec-inner-explain{width:44.3%; padding-right:8.6%; padding-top:50px}
.charge-con02-sec.rt-img.sec-03 .sec-inner .sec-inner-explain{padding-right:9.1%}
.charge-con02-sec.rt-img .sec-inner .sec-inner-img{width:55.7%}
.charge-con02-sec.rt-img.sec-03 .sec-inner .sec-inner-img{right:-80px}
.charge-con02-sec.lf-img{padding:220px 0 270px; text-align:right; background:url("../images/content/compare_con02_bg.png") no-repeat right bottom}
.charge-con02-sec.lf-img .sec-inner{margin-top:25px}
.charge-con02-sec.lf-img .sec-inner .sec-inner-explain{width:44.3%; padding-left:9%; padding-top:60px}
.charge-con02-sec.lf-img .sec-inner .sec-inner-img{width:55.7%;}

/* active 효과 */
.charge-con02-sec .sec-tit{}
.charge-con02-sec .effect-01{transition-delay:0.2s}
.charge-con02-sec .effect-02{transition-delay:0.4s}

/* ------- 비교 :: 컨텐츠03 (하단 배너) ------- */
.compare-banner.sub-bt-banner .banner-wrap .banner-inner{padding-right:36%}
.compare-banner.sub-bt-banner .banner-wrap .banner-img{width:26%; right:4.3%}


/* ****************** 지원 ********************** */
/* ********* 지원 :: 공지사항 ******** */
.notice-content{margin-top:100px}
.notice-tit{font-weight:400; font-size:64px; color:#111b35; letter-spacing:-0.5px; text-align:center; margin-bottom:50px}
.notice-content .cm-btn-controls{padding-top:30px}
.notice-content .cm-btn-controls a{height:42px; line-height:42px; font-size:16px; border-radius:0; width:150px}

/* ********* 지원 :: 기술지원 ******** */
/* ------- 기술지원 :: 컨텐츠01 (상단) ------- */
.technology-con-01{margin:150px 0 250px}

/* ------- 기술지원 :: 컨텐츠02 (pc 원격지원, 문의) ------- */
.tech-con02-wrap{position:relative; margin:0 8.2%; padding:70px 0}
.tech-con02-wrap:after{position:absolute; content:""; width:90%; max-width:860px; height:100%; background-color:#f8faff; border-radius:40px; z-index:0; top:0; left:50%; transform:translateX(-50%); opacity:0; transition:all  0.3s 0.1s}
.tech-con02-wrap.aos-animate:after{opacity:1}
.tech-con02-wrap .tech-con02-select{display:flex; flex-wrap:wrap; margin:0 -1.5%; position:relative; z-index:1}
.tech-con02-wrap .tech-con02-select li{position:relative; float:left; background:#fff; border-radius:50px; overflow:hidden; width:47%; margin:0 1.5%; text-align:center; transition: all 0.3s; box-shadow:2px 2px 6px -1px rgba(31,75,143,0.05)}
.tech-con02-wrap .tech-con02-select li:after,
.tech-con02-wrap .tech-con02-select li:before{position:absolute; content:""; width:100%; height:100%; opacity:0;}
.tech-con02-wrap .tech-con02-select li:after{background-size:100% 100% !important; top:0; left:0; z-index:0; transition: all 0.3s;}
.tech-con02-wrap .tech-con02-select li:before{right:0; bottom:0; z-index:1;}
.tech-con02-wrap .tech-con02-select li.box-01:after{background:url("../images/content/tech_con02_bg01.png") no-repeat;}
.tech-con02-wrap .tech-con02-select li.box-02:after{background:url("../images/content/tech_con02_bg02.png") no-repeat;}
.tech-con02-wrap .tech-con02-select li.box-01:before{background:url("../images/content/tech_con02_img01.png") no-repeat right bottom;}
.tech-con02-wrap .tech-con02-select li.box-02:before{background:url("../images/content/tech_con02_img02.png") no-repeat right bottom;}
.tech-con02-wrap .tech-con02-select li a{position:relative; height:100%; box-sizing:border-box; display:block; padding:80px 15px 70px; z-index:9; position:relative}
.tech-con02-wrap .tech-con02-select li a .tit{display:block; font-weight:500; font-size:40px; letter-spacing:-0.7px; color:#000; transition: all 0.3s}
.tech-con02-wrap .tech-con02-select li a .txt{font-weight:400; font-size:16.5px; color:#454545; line-height:1.81; margin:45px 0 55px; transition: all 0.3s}
.tech-con02-wrap .tech-con02-select li a .arrow-txt{position:absolute; bottom:54px; left:0; width:100%; font-weight:600; font-size:20px; letter-spacing:0; color:#2e79eb; transition: all 0.3s}
.tech-con02-wrap .tech-con02-select li a .arrow-txt .arrow{margin-left:10px}

.tech-con02-wrap .tech-con02-select li:hover:after,
.tech-con02-wrap .tech-con02-select li:hover:before{opacity:1}
.tech-con02-wrap .tech-con02-select li:hover:before{transition: all 0.2s 0.1s;}
.tech-con02-wrap .tech-con02-select li:hover a .tit,
.tech-con02-wrap .tech-con02-select li:hover a .txt,
.tech-con02-wrap .tech-con02-select li:hover a .arrow-txt{color:#fff}

/* ------- 기술지원 :: 컨텐츠03 (자주 묻는 질문) ------- */
.technology-con-03{margin:124px 0 200px;}
.qna-con-top{text-align:center}
.qna-con-top .con-sub-tit{margin-top:40px}
.qna-con-top .total-qna{display:inline-block; font-weight:500; font-size:20px; letter-spacing:0; color:#2e79eb; margin-top:35px}
.qna-con-top .total-qna .arrow{margin-left:5px}
.qna-list-wrap{width:100%; max-width:1024px; margin: 0px auto; }

/* ------- 기술지원 :: 컨텐츠04 (하단 배너) ------- */
.technology-banner.sub-bt-banner .banner-wrap{background:#111c45 url("../images/content/technology_bt_banner_bg.png") no-repeat right bottom}
.technology-banner.sub-bt-banner .banner-wrap .banner-inner{padding-right:35%; }
.technology-banner.sub-bt-banner .banner-wrap .banner-img{max-width:714px; width:60%; right:0; z-index:9}
.technology-banner.sub-bt-banner .banner-wrap .banner-img .mb{display:none}


/* ****************** 견적요청서 ********************** */
.estimate-content{background:#081230 url("../images/content/estimate_bg.png") no-repeat 50% bottom; padding:150px 0 295px; background-size:contain}
.estimate-area{max-width:895px; margin:0 auto; position:relative}
.estimate-area .deco-img{position:absolute; top:50%; animation: upDown 1.5s ease-in-out infinite;}
.estimate-area .deco-img.deco-01{left:-255px; margin-top:25%}
.estimate-area .deco-img.deco-02{right:-370px; margin-top:-10%}
.estimate-top{text-align:center; margin-bottom:150px}
.estimate-top .tit{font-weight:400; font-size:64px; letter-spacing:-3.3px; color:#fff; line-height:1.2; margin-top:100px}
.estimate-top .txt{font-size:24px; color:#a1a9c9; letter-spacing:-0.65px; line-height:1.4; margin-top:75px}



.scale-option-box{position:relative}
.scale-option-box button{ background:#ffffff url("../images/content/select_arrow2.png") no-repeat; background-position: calc(100% - 10px); display:block; border: solid 1px #242f54; height:45px; width:100%; border-radius: 10px; text-align:left; padding-left:10px; box-sizing:border-box; font-size:16px; letter-spacing:-0.7px; color: #666}
/* .scale-option-box.select button{color:#fff} */
.scale-option-box .scale-option-list{display:none; position:absolute; top:45px; left:0; width:100%; background:#ffffff; padding: 10px; box-sizing:border-box; z-index:9; border-radius: 4px; border:1px solid #e2e2e2}
.scale-option-box .scale-option-list li{width:100%}
.scale-option-box .scale-option-list li a{display:block; font-size:16px; color:#666; padding:10px 0}

.custom-check { margin-right: 10px;}
.search-container .custom-check { display: inline-block; }
.custom-check input{display:none;}
.custom-check label{position:relative; padding-left:37px; font-weight:500; font-size:16.5px; letter-spacing:-0.7px; color:#000000; padding-top:1px}
.custom-check label .icon{position:absolute; top:2px; left:0px; display:inline-block; width:24px; height:24px; background:#b1b1b1 url("../../images/content/check_icon.png") no-repeat center; border-radius:5px}
.custom-check input:checked + label .icon{background: #00607c url("../../images/content/check_icon.png") no-repeat center;}

.radio-item{ text-align: left; vertical-align:middle; padding: 2px 0px; overflow: hidden; }
.search-container .radio-item{ display:inline-block; }

.radio-item input[type="radio"]{display:none;}
.radio-item label{display:inline-block; position:relative; padding-left: 25px; color:#000000; font-size:16.5px; letter-spacing:-0.3px; line-height:20px; white-space: nowrap; width: 100%; text-align: left; }
.radio-item label::before{content:""; position:absolute; top:2px; left:0px; width:16px; height:16px; border:2px solid #e6e6e6; background-color:#fff; -webkit-border-radius:16px; -moz-border-radius:16px; -o-border-radius:16px; border-radius:16px;}
.radio-item label i{position:absolute; top:0px; left:0px; line-height:20px; text-align:center; display:none; color:#fff; font-size:20px}
.radio-item input[type="radio"]:checked + label::before{ border-color: #00607c; background-color: 589446; }
.radio-item input[type="radio"]:checked + label::after{display:block;}
.radio-item input[type="radio"]:checked + label i{display:block;}


.roundGradientBtn{
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	max-width: 140px;
  	height: 36px;
/*   	background: linear-gradient(#91e5e1, #2078a6); */
/*   	background: linear-gradient(#0ba29a, #09295f); */
  	background: #13c7be;
/*   	border-radius: 10px; */
  	border-radius: 4px;
	padding: 2px 2px;
	box-sizing: border-box;
	font-size: 18px;
	line-height: 32px;
	cursor: pointer;
	-webkit-transition: background 0.5s, color 0.5s; transition: background 0.5s, color 0.5s;
}
.roundGradientBtn:hover { background: #09295f; }
.roundGradientBtn:hover .contentLabel { color: #ffffff; }


.roundGradientBtn .contentLabel{
  	width: 100%;
  	height: 100%;
/*   	background: #ffffff; */
	border-radius: 8px;
	text-align: center;
	
	color: #00607c;
/* 	color: #ffffff; */
    font-size: 19px;
    letter-spacing: 0;
    font-weight: 600;
}
.roundGradientBtn .contentLabel em{ font-weight: 600; }

/* .cm-modal-open-btn { border: 1px solid #e3e3e3; border-radius: 10px; padding: 0 20px; } */

.siteChangeBtn {
	width: auto; height: 36px; 
	background: #0ba29a; 
	padding: 9px 7px; 
	box-sizing: border-box; 
	margin: 13px auto 16px auto; 
	border-radius: 4px; 
	border: 1px solid #0ba29a; 
	margin-left: 40px; 
	cursor: pointer; 
	position: absolute; 
	font-weight: bold; 
	z-index: 99; 
	color: #ffffff;
}


@keyframes upDown {
	0% {
		transform:  translateY(-7px);
	}
	50% {
		transform: translateY(7px);
	}
	100% {
		transform:  translateY(-7px);
	}
}




.mainBanner {
	width: 100%;
/*   	height: 184px; */
/*   	align-self: stretch; */
/*   	flex-grow: 0; */
/*   	display: flex; */
/*   	flex-direction: row; */
/*   	justify-content: space-between; */
/*   	gap: 8px; */
/*   	padding: 24px 20%; */
  	
  	background-image: linear-gradient(to bottom, #ddf6e2 0%, #bff4e1 100%);
  	box-sizing: border-box;
  	position: relative;
  	overflow: hidden;
  	
/* 	height: 965px; */
	height: 769px;
	background-repeat: no-repeat;
	background-position: center;
}

.mainBanner .mainTitle { 
	flex-grow: 0;
/*   	font-size: 50px; */
  	font-size: 60px;
  	font-weight: bold;
  	font-stretch: normal;
  	font-style: normal;
  	line-height: 1.24;
  	letter-spacing: normal;
  	text-align: left;
  	color: #ffffff; 
}
.mainBanner .subTitle { 
	flex-grow: 0;
/*   	font-size: 24px; */
  	font-size: 20px;
  	font-weight: normal;
  	font-stretch: normal;
  	font-style: normal;
/*   	line-height: 1.24; */
  	line-height: 1.6;
  	letter-spacing: normal;
  	text-align: left;
  	color: #ffffff;
  	margin-top: 20px;
    font-family: none;
} 

.mainContentsTitle { 
	flex-grow: 0;
  	font-size: 38px;
  	font-weight: bold;
  	font-stretch: normal;
  	font-style: normal;
  	line-height: 1.24;
  	letter-spacing: normal;
  	text-align: left;
/*   	color: #09295f;  */
  	color: #000000; 
}
.mainContentsSubTitle { 
	flex-grow: 0;
/*   	font-size: 20px; */
  	font-size: 18px;
  	font-weight: normal;
  	font-stretch: normal;
  	font-style: normal;
  	line-height: 1.6;
  	letter-spacing: normal;
  	text-align: left;
/*   	color: #09295f; */
  	margin-top: 5px;
  	color: #000000; 
} 

/* .mainSlideArrow { cursor: pointer; border: 2px solid #072454; padding: 10px; border-radius: 50%; width: 24px; height: 24px; } */
.mainSlideArrow { cursor: pointer; width: 27px; height: 55px; }
/* .mainSlideArrow:hover { border: 2px solid #ffffff; } */
.mainSlideArrow .prev{  }
.mainSlideArrow .next{  }

.mainSlideArrow2 { cursor: pointer; width: 20px; height: 30px; }
/* .mainSlideArrow2:hover { border: 2px solid #ffffff; } */
.mainSlideArrow2 .prev{  }
.mainSlideArrow2 .next{  }
.slidePlayControlBtn { width: 31px; height: 30px; margin: -5px 0px -5px 10px; background-repeat: no-repeat; background-size: 120%; background-position: center;aspect-ratio: 55/54; cursor: pointer; border: 5px solid #a6a6a6; border-radius: 25px; overflow: hidden; box-sizing: border-box; }
.slidePlayControlBtn.play { background-image: url(../imgs/common/slidePlayBtn.png);}
.slidePlayControlBtn.stop { background-image: url(../imgs/common/slideStopBtn.png);}

.slideDot { background-color: #7c7c7c; width: 20px; height: 20px; cursor: pointer; border-radius: 10px; }
.slideDot.active { background-color: #000000; width: 50px; }

.mainVision_leftBox { width: 100%; max-width: 1400px; }
.mainVision_leftBox img { width: fit-content; max-width: 389px; height: auto; aspect-ratio: 389/244; }
.mainVision_rightBox { width: 65%; display: flex; justify-content: left; flex-wrap: nowrap; gap: 1%; overflow: hidden; overflow-x: auto; align-self: flex-end; padding-bottom: 10px; box-sizing: border-box; }
.mainVision_rightBox img { width: fit-content; max-width: 262px; height: auto; aspect-ratio: 262/351; opacity: 1.0;  }
.mainVision_rightBox img.active { max-width: 262px; height: auto; opacity: 1.0;  }
.mainVision_rightBox img.waiting { width: fit-content; max-width: 389px; height: 80%; margin: auto 0 0 0; aspect-ratio: 262/351; opacity: 0.5; }

/* .mainVision_rightBox .neItem { width: 100%; max-width: 262px; cursor: pointer; align-self: flex-end; } */
.mainVision_rightBox .neItem { width: 100%; max-width: 262px; cursor: pointer;  }
.mainVision_rightBox .ne01 { background-image: url(../imgs/front/main/main_vision_01_off.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 262/299; }
.mainVision_rightBox .ne02 { background-image: url(../imgs/front/main/main_vision_02_off.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 262/299; }
.mainVision_rightBox .ne03 { background-image: url(../imgs/front/main/main_vision_03_off.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 262/299; }
.mainVision_rightBox .ne04 { background-image: url(../imgs/front/main/main_vision_04_off.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 262/299; }
.mainVision_rightBox .ne05 { background-image: url(../imgs/front/main/main_vision_05_off.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 262/299; }
.mainVision_rightBox .ne06 { background-image: url(../imgs/front/main/main_vision_06_off.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 262/299; }
.mainVision_rightBox .ne07 { background-image: url(../imgs/front/main/main_vision_07_off.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 262/299; }
.mainVision_rightBox .ne01:hover { background-image: url(../imgs/front/main/main_vision_01.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne02:hover { background-image: url(../imgs/front/main/main_vision_02.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne03:hover { background-image: url(../imgs/front/main/main_vision_03.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne04:hover { background-image: url(../imgs/front/main/main_vision_04.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne05:hover { background-image: url(../imgs/front/main/main_vision_05.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne06:hover { background-image: url(../imgs/front/main/main_vision_06.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne07:hover { background-image: url(../imgs/front/main/main_vision_07.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne01.active { background-image: url(../imgs/front/main/main_vision_01.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne02.active { background-image: url(../imgs/front/main/main_vision_02.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne03.active { background-image: url(../imgs/front/main/main_vision_03.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne04.active { background-image: url(../imgs/front/main/main_vision_04.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne05.active { background-image: url(../imgs/front/main/main_vision_05.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne06.active { background-image: url(../imgs/front/main/main_vision_06.png); aspect-ratio: 262/351; }
.mainVision_rightBox .ne07.active { background-image: url(../imgs/front/main/main_vision_07.png); aspect-ratio: 262/351; }


.mainSuccess_Title { margin: 0 auto 0 calc( (100% - 1400px) / 2); width: 100%; max-width: 519px; }


.mainSuccessCompany { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 2%; width: 100%; max-width: 1400px; margin: 50px 0px 20px 0px; }
.mainSuccessCompany .successCompBox { width: 100%; max-width: 260px; height: auto; margin-bottom: 2%; }
.mainSuccessCompany .successCompBox .successCompInfo { opacity: 0; width: 100%; height: 100%; border-radius: 2%; padding: 10% 2%; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.7); }
.mainSuccessCompany .successCompBox .successCompInfo img { width: 100%; background: #ffffff; }
.mainSuccessCompany .successCompBox .successCompInfo .compName { width: 100%; height: 60px; font-size: 24px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.2; letter-spacing: normal; text-align: left; color: #09295f; margin-top: 20px; } 
.mainSuccessCompany .successCompBox .successCompInfo .compService { width: 100%; font-size: 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.2; letter-spacing: normal; text-align: left; color: #09295f; margin: 20px 0px; } 
.mainSuccessCompany .successCompBox .successCompInfo .compService span{ font-size: 16px; font-weight: normal; } 
.mainSuccessCompany .successCompBox .successCompInfo .compSW { width: 100%; font-size: 20px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.2; letter-spacing: normal; text-align: left; color: #09295f; } 
.mainSuccessCompany .successCompBox .successCompInfo .compSW span{ font-size: 18px; font-weight: normal; } 

.mainSuccessCompany .successCompBox.comp01 { background-image: url(../imgs/front/main/main_success_01.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 260/360; }
.mainSuccessCompany .successCompBox.comp02 { background-image: url(../imgs/front/main/main_success_02.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 260/360; }
.mainSuccessCompany .successCompBox.comp03 { background-image: url(../imgs/front/main/main_success_03.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 260/360; }
.mainSuccessCompany .successCompBox.comp04 { background-image: url(../imgs/front/main/main_success_04.png); background-repeat: no-repeat; background-size: 100%; aspect-ratio: 260/360; }
.mainSuccessCompany .successCompBox:hover .successCompInfo{ opacity: 1; }



.mainProduct_Title { margin: 0 auto 0 calc( (100% - 1400px) / 2); width: 100%; max-width: 397px; }
/* .mainProduct_box img { width: fit-content; max-width: 341px; height: fit-content; aspect-ratio: 341/401; opacity: 1.0; border: 1px solid #cfcfcf; border-radius: 20px; box-shadow: 6px 6px 1px 1px rgb(0 0 0 / 5%); cursor: pointer; } */
/* .mainProduct_box img.large { aspect-ratio: 340/501; } */
.productBox { width: 100%; max-width: 1200px; display: flex; justify-content: space-between; gap: 2%; flex-wrap: wrap; margin: 0 auto; padding: 50px 1%; box-sizing: border-box; } 
.productItem { width: 31.4%; max-width: 411px; box-shadow: rgb(17 17 26 / 10%) 0px 4px 16px, rgb(17 17 26 / 10%) 0px 8px 24px, rgb(17 17 26 / 10%) 0px 16px 56px; border-radius: 5%; cursor: pointer; margin-bottom: 2%; } 
.productItem.p01 { background-image: url(../imgs/front/main/main_product_01.png); background-repeat: no-repeat; background-size: 100% 100%; aspect-ratio: 1/1; } 
.productItem.p02 { background-image: url(../imgs/front/main/main_product_02.png); background-repeat: no-repeat; background-size: 100% 100%; aspect-ratio: 1/1; }
.productItem.p03 { background-image: url(../imgs/front/main/main_product_03.png); background-repeat: no-repeat; background-size: 100% 100%; aspect-ratio: 1/1; }
.productItem.p04 { background-image: url(../imgs/front/main/main_product_04.png); background-repeat: no-repeat; background-size: 100% 100%; aspect-ratio: 1/1; }
.productItem.p05 { background-image: url(../imgs/front/main/main_product_05.png); background-repeat: no-repeat; background-size: 100% 100%; aspect-ratio: 1/1; }
.productItem.p06 { background-image: url(../imgs/front/main/main_product_06.png); background-repeat: no-repeat; background-size: 100% 100%; aspect-ratio: 1/1; }
 
.productItem .bg { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 30px; background: rgba(0,0,0, 0.3); border-radius: 20px; }
.productItem div.pName{ color: #ffffff; font-size: 30px; width: 100%; text-align: center; } 
.productItem a{ width: 100%; text-align: center; } 
.productItem div.pLink{ color: #ffffff; font-size: 20px; width: auto; text-align: center; width: 125px; display: inline-block; border: 1px solid #ffffff; border-radius: 25px; cursor: pointer; padding: 10px 0px; } 

.productItem .bg:hover { background: rgba(0,0,0, 0.7); } 
/* .productItem.p01:hover { background-image: url(../imgs/front/main/main_product_01_on.png); }  */
/* .productItem.p02:hover { background-image: url(../imgs/front/main/main_product_02_on.png); }  */
/* .productItem.p03:hover { background-image: url(../imgs/front/main/main_product_03_on.png); }  */
/* .productItem.p04:hover { background-image: url(../imgs/front/main/main_product_04_on.png); }  */
/* .productItem.p05:hover { background-image: url(../imgs/front/main/main_product_05_on.png); }  */
/* .productItem.p06:hover { background-image: url(../imgs/front/main/main_product_06_on.png); }  */
    
.mainSuccess_leftBox { width: 100px; }
.mainSuccess_rightBox { width: calc(100% - 100px); display: flex; justify-content: space-around; flex-wrap: nowrap; }

.support_txt { width: 676px; display: block; margin: 0px auto; }
.support_btn { width: 50%; height: auto; aspect-ratio: 676/628; max-width: 676px; cursor: pointer; opacity: 0.6; }
.support_btn:hover { opacity: 1; }

.mypage_btn { width: 33%; height: auto; aspect-ratio: 481/601; max-width: 481px; cursor: pointer; opacity: 0.6; }
.mypage_btn:hover { opacity: 1; }

.introduce_about_txt_01 { width: 85%; margin-top: 60px; }
.vision_leftBox { width: 55%; gap: 30px; display: flex; justify-content: center; flex-wrap: wrap; }
.vision_vision_rightBox { width: 45%; }

.newExperienceBox { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: calc(1vw); margin: 0 auto; }
.newExperienceBox img { width: 100%; max-width: 280px; }
.newExperienceBox > div { position: relative; }
.newExperienceBox .neBoxText { color: #ffffff; font-size: 20px; position: absolute; top: 15px; left: 15px; text-align: left; line-height: 1.3; }

.partnerBox { display: flex; flex-wrap: wrap; gap: 25px; justify-content: left; width: 100%; max-width: 1000px; margin: 0 auto; }
.partnerBox img { margin-bottom: 20px; }
.partnerBox img:first-child { margin-left: -100px; }
.partnerBox img:last-child { margin-right: -100px; }
.partnerBoxMask { position: absolute; top: -253px; left: 0px; width: 100%; height: calc(100% + 303px); }


.partnerClientBox { width: 100%; height: auto; margin-top: 50px; position: relative; display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 1400px;
    margin: 30px auto; }
.partnerClientBox img { border-radius: 10px; overflow: hidden; }


.supportContents { width: 100%; max-width: 980px; aspect-ratio: 49/15; border-radius: 10px; margin: -20px auto; display: flex; flex-direction: column; justify-content: center; }
.supportContents.s01 { background-image: url(../imgs/front/support/support_01.png); background-repeat: no-repeat; background-size: 80% 80%; background-position: left; }
.supportContents.s02 { background-image: url(../imgs/front/support/support_02.png); background-repeat: no-repeat; background-size: 80% 80%; background-position: right; }
.supportContents.s03 { background-image: url(../imgs/front/support/support_03.png); background-repeat: no-repeat; background-size: 80% 80%; background-position: left; }
.supportContents.s04 { background-image: url(../imgs/front/support/support_04.png); background-repeat: no-repeat; background-size: 80% 80%; background-position: right; }
.supportContents.s05 { background-image: url(../imgs/front/support/support_05.png); background-repeat: no-repeat; background-size: 80% 80%; background-position: left; }
.supportContents > div { font-size: 28px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.6; letter-spacing: normal; padding: 0px 50px; color: #000000; }


.supportContentsBox { width: 100%; display: flex; justify-content: center; gap: 1%; flex-wrap: wrap; margin: 0 auto; box-sizing: border-box; }
.supportItem .bg { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 30px; border-radius: 20px; }
.supportItem div.pName{ color: #ffffff; font-size: 30px; font-weight: bold; width: 100%; text-align: center; } 
.supportItem a{ width: 100%; text-align: center; } 
/* .supportItem div.pLink{ color: #ffffff; font-size: 20px; width: auto; text-align: center; width: 125px; display: inline-block; border: none; border-radius: 8px; cursor: pointer; padding: 15px 15px; margin: 0 auto; background: #13c7be; } */
.supportItem div.pLink{ color: #02013a; font-size: 20px; font-weight: bold; width: auto; text-align: center; width: 125px; display: inline-block; border: none; border-radius: 8px; cursor: pointer; padding: 15px 15px; margin: 0 auto; background: #ffffff; 
	-webkit-transition: background 0.5s, color 0.5s; transition: background 0.5s, color 0.5s; }
/* .supportItem div.pLink:hover { background: linear-gradient(#0ba29a, #09295f); color: #ffffff; } */
.supportItem div.pLink:hover { background: #13c7be; color: #ffffff; }

.privacyTextArea { width: 100%; box-sizing: border-box; height: calc(28vh) !important; }

.mapArea { display: inline-block; width: 100%; max-width: 1360px; height: auto; background-color: #b8b8b8; aspect-ratio: 340/181; margin-top: 50px; }

.deco-img { position: absolute; top: 25%; animation: upDown 1.5s ease-in-out infinite; }

.contentsSlideArea { display: flex; width: 100%; max-width: 1400px; margin: 0 auto; justify-content: center; flex-direction: row; flex-wrap: wrap; gap: 3%; }
.contentsSlideArea .contentsSlideAreaLeft { width: calc(35%); min-width: 360px; max-width: 445px; }
.contentsSlideDescArea .descMainTitle{ 
  	font-size: 52px;
  	font-weight: bold;
  	font-stretch: normal;
  	font-style: normal;
  	line-height: 1.4;
  	letter-spacing: normal;
  	text-align: left; 
  	color: #000000; 
  	margin-bottom: 20px; 
}
.contentsSlideDescArea .descSubTitle{ 
	font-size: 20px;
  	font-weight: normal;
  	font-stretch: normal;
  	font-style: normal;
  	line-height: 1.8;
  	letter-spacing: normal;
  	text-align: left;
  	color: #000000; 
  	margin-bottom: 30px; 
}
.contentsSlideDescArea .descSubTitle02{ 
	font-size: 16px;
  	font-weight: normal;
  	font-stretch: normal;
  	font-style: normal;
  	line-height: 2.2;
    letter-spacing: -0.5px;
  	text-align: left;
  	color: #000000; 
  	margin-bottom: 40px; 
}

.contentsSlideArea .contentsSlideAreaRight { width: calc(60%);}
.contentsSlideControlBox { display: flex; margin-bottom: 30px; }
.contentsSlideControlBox .contentsSlideCount { font-size: 24px; }
.contentsSlideControlBox .contentsSlidePosition { display: flex; width: 100%; height: 2px; background-color: #999999; box-sizing: border-box; margin: 12px 20px; }
.contentsSlideControlBox .contentsSlidePosition .position { width: 100%; background-color: #999999; }
.contentsSlideControlBox .contentsSlidePosition .position.active { background-color: #09295f; border: 3px solid #09295f; margin-top: -2px; }
.contentsSlideControlBox .contentsSlideArrow { width: 12px !important; height: 23px !important; cursor: pointer; margin: 0px 10px; }
.contentsSlideViewBox { width: 100%; max-width: 910px; height: auto; aspect-ratio: 910/512; overflow: hidden; }
.contentsSlideViewBox .cmp-video { width: 100%; height: 100%; display: none; }
.contentsSlideViewBox .cmp-image { width: 100%; height: 100%; display: none; }
.contentsSlideViewBox .cmp-video.selected { display: block; }
.contentsSlideViewBox .cmp-image.selected { display: block; }
.contentsSlideThumbnailBox { display: flex; flex-direction: row; justify-content: space-between; }
.contentsSlideThumbnailBox .contentsSlideThumbnails { width: auto; aspect-ratio: 16/9; cursor: pointer; margin: 10px 1% 10px 0px; }

@media (max-width: 1500px) {
	.mainSlideArrow { display: none; }
}

@media (max-width: 1400px) {
	.vision_leftBox img { margin: auto 0px !important; height: fit-content !important; }
	.mainVision_leftBox img { width: 100% !important; height: auto !important; }
	.mainVision_rightBox img { width: 24% !important; height: auto !important; }
	.mainSuccess_Title { margin: 0px auto 0px 30px; }
	.mainProduct_Title { margin: 0px auto 0px 30px; }
}

@media (max-width: 1200px) {
	.visionImageList img { width: 100% !important; margin: 0px auto !important; max-width: 463px; }
	.visionImageList>div { text-align: center !important; }
}

@media (max-width: 1167px) {
	.introduce_CI { width: 100%; }
	.introduce_CI_txt { width: 100%; }
}

@media (max-width: 1056px) {
	.mainProduct_box img { width: 33% !important; height: auto !important; }
	
	.partnerBox { gap: 1%; }
	.partnerBox img { width: 19%; margin-bottom: 20px; }
	.partnerBox img:first-child { margin-left: 0px; }
	.partnerBox img:last-child { margin-right: 0px; }
	.partnerBoxMask { display: none; }
	
	.supportContentsSection { background-size: cover !important; padding: 25px 0px !important; }
	.supportContentsBox .supportItem { width: 49% !important; border-right: none !important; }
	
	.supportContentsBgBox { height: auto !important; }
	
	.visionImageList img { width: 49% !important; margin: 0px auto !important; }
	
	.introduce_CI { width: 100% !important; }
	.introduce_CI_txt { width: 100% !important; }
}

@media (max-width: 856px) {
	.charge-con02-tab .charge-tab-style li { width: 13% !important; min-width: 100px; }
	.charge-con02-tab .charge-tab-style li a { font-size: 14.5px; letter-spacing: 0px; }
}

@media (max-width: 676px) {
	.newExperienceBox > div { width: 45%; }
	.mainSuccessCompany .successCompBox { width: 45%; }
	.mainSuccessCompany .successCompBox .successCompInfo .compName { height: auto; font-size: calc(5.5555vw); margin-top: calc(1vw); }
	.mainSuccessCompany .successCompBox .successCompInfo .compService { height: auto; font-size: calc(4.4444vw); margin: calc(3vw) 0px; }
	.mainSuccessCompany .successCompBox .successCompInfo .compService span { font-size: calc(3.4444vw); }
	.mainSuccessCompany .successCompBox .successCompInfo .compSW { height: auto; font-size: calc(4.4444vw); margin-bottom: calc(1vw); }
	.mainSuccessCompany .successCompBox .successCompInfo .compSW span { font-size: calc(3.4444vw); }
	
	.support_txt { width: 100%; }
	.support_btn { width: 100%; }
	
	.introduceImg01 { height: calc(100% / 4 * 1.4); }
	.introduceText01 .mainContentsTitle{ margin-top: calc(13%); font-size: 32px; }
	.introduceText01 .mainContentsSubTitle{ font-size: 18px; }
	
	.visionImageList img { width: 48.2% !important; }
	
	.supportContents > div { padding: 50px 10px; font-size: 24px; }
	
	#mainContainer .mainTitle { font-size: 44px; }
	#mainContainer .middleTitle { font-size: 18px; }
	#mainContainer .subTitle { font-size: 16px; }
	
	.productItem { width: 48% }
	
	.mainBanner .mainTitle { font-size: 44px; }
	.mainBanner .subTitle { font-size: 16px; }
	
	.mainContentsTitle { font-size: 30px; }
	.mainContentsSubTitle { font-size: 14px; } 

	.productTypeText.sTitle{ font-size: 16px !important; }
	.productTypeText .lTitle{ font-size: 30px !important; }
	
	.product_cover .desc_cover { opacity: 1 !important; font-size: 14px !important; height: 400px !important; }
	.product_cover .moreview { font-size: 18px !important; }
	
	.contentsSlideDescArea .descMainTitle{ font-size: 44px; }
	.contentsSlideDescArea .descSubTitle{ font-size: 16px; }
	.contentsSlideDescArea .descSubTitle02{ font-size: 12px; }
	
	.contentsSlideArea .contentsSlideAreaRight { width: 90% !important; }
	.contentsSlideViewBox  { width: 90% !important; }
	
	.board-box img { width: 96%; }
	.w_p100max1400 { padding-left: calc(2vw); padding-right: calc(2vw); box-sizing: border-box; }
	.w_p100max1400 img { width: 100% !important; }
	
	.partnerClientBox img { width: 48% !important; }
}

@media (max-width: 576px) {
	#mainContainer .fullScreenHeightDiv { height: calc(100vh - 65px) !important; }
	
	.siteChangeBtn { display: none; }
	.mypage_btn { width: 100%; }
	.mainSuccess_Title { width: 100%; }
	
	.supportContentsSection { height: 700px !important; background-size: cover !important; padding: 25px 0px !important; }
	.supportContentsBox .supportItem { width: 100% !important; border-right: none !important; }
	
	.supportContents > div { padding: 50px 10px; font-size: 20px; }
	
	.productTypeText.sTitle { font-size: calc(2.7890vw) !important; }
	.productTypeText .lTitle { font-size: calc(5.4321vw) !important; }
	
	.contentsSlideViewBox { width: 100% !important; }
	
	.mainContentsTitle { font-size: calc(6.2345vw); }
}

@media (max-width: 450px) {
	.introduce_CI_title { width: 100%; }
	.charge-con02-tab .charge-tab-style li { width: 12% !important; min-width: 89px; }
	.charge-con02-tab .charge-tab-style li a { font-size: 14px; }
	
	.productTypeText.sTitle > div:first-child { display: none; }
	.adobe .productTypeText.sTitle > div:first-child { display: block; }
	
	.product_cover .desc_cover { height: 60px !important; }
	.adobe .product_cover .desc_cover { height: 300px !important; }
	.product_cover .desc_cover > div:first-child { display: none; }
	.adobe .product_cover .desc_cover > div:first-child { display: block; }
	.product_cover .moreview { font-size: 16px !important; bottom: calc(5vw) !important; }
	
	.board-box { width: 100% !important; padding: calc(10vw) calc(2vw) !important; box-sizing: border-box; }
	.board-box img { width: 100% !important; }
	
	.partnerClientBox img { width: 48% !important; }
}

@media (max-width: 400px) {
	.mainProduct_Title { width: calc(100% - 30px); }
}