/* 2022 리뉴얼 CSS **********************************************************************************************************************************************************************************/

#contents_wrap { 
	padding-top:160px;
	}


/* 제품 */

#product_wrap {
  /*width:1200px;*/
  width:1220px;
  margin:64px auto;
  display: flex;
  justify-content: center;
  gap: 28px;
}

#product_wrap .flex-group{
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  border-radius: 25px;
}

#product_wrap .prdt-box{
  position: relative;
  font-family: 'Gmarket Sans';
  width: 228px;
  height: 300px;
  border-radius: 25px;
  transition: all .2s;
}

#product_wrap .prdt-box.ai::before,
#product_wrap .prdt-box.erp::before{

  content:"";
  background: url('/images/main/dotline.png') no-repeat 0 0;
  display: block;
  width: 2px;
  height: 100%;
  position: absolute;
  right: -1px;
  top: 33px;
}

#product_wrap .prdt-box:hover.ai::before,
#product_wrap .prdt-box:hover.erp::before{
  background: none;
}

#product_wrap .prdt-box .icon{
  position: absolute;
  bottom: 18px;
  right: 18px;
}

#product_wrap .prdt-box:hover{
  background: rgb(0 100 255);
}

#product_wrap .prdt-box.olma,.prdt-box.sign{
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}
 
#product_wrap .prdt-box.erp{position: relative;}
#product_wrap .prdt-box.erp .deco{
  position: absolute;
  bottom: 31px;
  right: 19px;
}

#product_wrap .prdt-box.erp .deco>span{
  display: block;
  font-family: 'Gmarket Sans';
  color: rgb(119 119 119);
  font-size: 14px;
  line-height: 28px;
}

#product_wrap .prdt-box.erp .deco>span::before{
  content: "";
  width: 4px;
  height: 4px;
  display: inline-block;
  background: rgb(179 179 179);
  margin: 0 7px 3px 0;
}

#product_wrap .prdt-box.erp:hover .deco>span::before{
  content: "";
  background: rgba(255,255,255,.85);
}

#product_wrap .prdt-box.erp:hover .deco>span{
  color: rgba(255,255,255,.85);
}

#product_wrap .prdt-box .txt{
  margin: 44px 0 0 31px;
}

#product_wrap .prdt-box .txt strong{
  font-size: 26px;
  color: rgb(0 100 255);
  font-weight: 700;
  font-family: 'Gmarket Sans';

}

#product_wrap .prdt-box:hover .txt strong{
  color: #fff;
}

#product_wrap .prdt-box .txt p{
  font-family: 'Gmarket Sans';
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 14px;
}

#product_wrap .prdt-box:hover .txt p {
  color: #fff;
}
/* 부가서비스 */

#addition_wrap { 
	width:100%;
	min-width:1500px;
	background:#ebf2f9;
	}

#addition_wrap .addition { 
	/*width:1200px;*/
	width:1227px;
	margin:0 auto;
	padding: 37px 0 38px;
	overflow:hidden;
	}

#addition_wrap .addition dl { 
	float:left;
    /*margin-right:42px; 그룹웨어*/
    margin-right:52px;
    }

#addition_wrap .addition a:last-child dl { 
	margin-right:0;
	}

.addition dl dt { 
	font-family:'Gmarket Sans';
	font-size:16px;
	text-align:center;
	}

.addition dl:hover dt { 
    color:#0064ff;
    }
    
    
.addition dl dd { 
	text-align:center;
	margin-bottom:15px;
	}

#mainB_wrap { 
	background:#ebf2f9;
	text-align:center;
	}


/* 이벤트&프로모션 */

#event_wrap .event {
	width:1200px;
	margin:100px auto;
	position:relative;
	}

#event_wrap .event h1 {
	font-family:'Gmarket Sans';
	font-size:40px;
	font-weight:300;
	margin-bottom:45px;
	}

#event_wrap .event span {
	font-family:'Gmarket Sans';
	font-size:13px;
	color:#0f60ff;
	position:absolute;
	top:20px;
	right:0;
	}

#event_wrap .event span::before {
    content:"";
    position:absolute;
    top:4px;
    left:-60px;
    width:50px;
    height:3px;
    background:#0064ff;
	}
	
.event ul.event_list li{
	width:582px;
	height:192px;
	background:#f2f4f8;
	border-radius:30px;
	margin-right:36px;
	float:left;
	overflow:hidden;
	}

.event ul.event_list a:last-child li{
	margin-right:0;
	}

.event ul.event_list li p {
	float:left;
	}

.event ul.event_list li p img {
width:300px;
}

.event ul.event_list li dl {
	float:left;
	margin:55px 0 0 40px;
	width:205px;
	}

.event ul.event_list li dt {
	font-family:'Gmarket Sans';
	font-size:22px;
	font-weight:700;
	line-height:1.3;
	margin-bottom:20px;
	word-break:keep-all;
	width:205px;
	overflow:hidden;
	text-overflow:ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	}

.event ul.event_list li dd {
	font-family:'Gmarket Sans';
	font-size:16px;
	color:#999999;
    line-height:1.1;
	overflow:hidden;
	}

#event_wrap .event .btn_list .main_btn_pr {
    background:url('/images/main/btn_main_arrow_pr.png') center no-repeat;
    border:0;
    font-size:0;
    text-indent:-99999px;
    width:50px;
    height:50px;
	position:absolute;
	top:156px;
    left:-80px;
    cursor:pointer;
	}

#event_wrap .event .btn_list .main_btn_nx {
    background:url('/images/main/btn_main_arrow_nx.png') center no-repeat;
    border:0;
    font-size:0;
    text-indent:-99999px;
    width:50px;
    height:50px;
	position:absolute;
	top:156px;
    right:-80px;
    cursor:pointer;
	}


/* 새소식&공지사항 */

#news_wrap .news_inner {
	width:1200px;
	margin:100px auto;
	overflow:hidden;
	}

#news_wrap h1 {
	font-family:'Gmarket Sans';
	font-size:40px;
	font-weight:300;
	margin-bottom:45px;
	}

#news_wrap .news {
	width:582px;
	float:left;
	}

.news .news_list ul {
	border-top:1px solid #cccccc;
	overflow:hidden;
	padding:29px 20px 27px
	}

.news .news_list a:last-child ul {
	border-bottom:1px solid #cccccc;
	}

.news .news_list ul li {
	float:left;
	font-family:'Gmarket Sans';
	font-size:16px;
	}
	
.news .news_list ul li:hover {
    color:#0064ff;
    }

.news .news_list ul li.date {
	float:right;
	color:#999999;
	}

#news_wrap .experience {
	float:right;
	width:582px;
    height:220px;
    background:#f2f4f8;
    border-radius:30px;
	position:relative;
	}

.experience dl {
	margin:55px 0 0 60px;
	}

.experience dl dt {
	font-family:'Gmarket Sans';
	font-size:32px;
	font-weight:700;
	margin-bottom:15px;
	}

.experience dl dd {
	font-family:'Gmarket Sans';
	font-size:18px;
	line-height:1.4;
	}

.experience img {
	position:absolute;
	top:-80px;
	right:20px;
	}


/* 고객후기 */

#review_wrap {
    background:linear-gradient(#ffffff 50%, #ebf2f9 50%);
	overflow:hidden;
	width:100%;
	min-width:1500px;
	}

#review_wrap .review {
	width:1200px;
	height:315px;
	margin:20px auto;
    position:relative;
	}

#review_wrap .title {
	position:absolute;
    top:15px;
	}

#review_wrap .title h1 {
	font-family:'Gmarket Sans';
	font-size:40px;
	font-weight:700;
	margin-bottom:22px;
	}

#review_wrap .title span {
	font-family:'Gmarket Sans';
	font-size:20px;
	line-height:1.4;
	}

.review .btn_list {
	position:relative;
	}

.review .btn_list .review_btn_pr {
    background:url('/images/main/btn_main_arrow_pr.png') center no-repeat;
    border:0;
    font-size:0;
    text-indent:-99999px;
    width:50px;
    height:50px;
    position:absolute;
    top:50px;
    left:0px;
    cursor:pointer;
	}

.review .btn_list .review_btn_nx {
    background:url('/images/main/btn_main_arrow_nx.png') center no-repeat;
    border:0;
    font-size:0;
    text-indent:-99999px;
    width:50px;
    height:50px;
    position:absolute;
    top:50px;
    left:60px;
    cursor:pointer;
	}

#review_wrap .btn_list .more {
    font-family:'Gmarket Sans';
    font-size:13px;
    color:#0f60ff;
    position:absolute;
    top:69px;
    left:200px;
	}

.btn_list .more::before {
    content:"";
    position:absolute;
    top:4px;
    left:-60px;
    width:50px;
    height:3px;
    background:#0064ff;
	}
	
.review .review_swiper{
	border-radius: 40px; 
	height:335px;
	}
	
.review .review_list dl {
	box-sizing:border-box;
    /*border:1px solid #cccccc;*/
    box-shadow: 0 0 8px 8px rgb(0 100 255 / 6%);
    background:#ffffff;
    border-radius:25px;
    width:352px;
    height:315px;
    margin-top:10px;
    padding:44px 40px;
    position:relative;
	}

.review .review_list dt {
	font-family:'Gmarket Sans';
    font-size:20px;
    font-weight:700;
    color:#0064ff;
    letter-spacing:-0.8px;
    line-height:1.4;
    margin:20px 0 16px;
    height:70px;
    max-height:56px;
   
    overflow:hidden;
    display:-webkit-box;
    word-break:break-all;
	text-overflow:ellipsis;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	}

.review .review_list dd {
	font-family:'Pretendard';
    font-size:15px;
    font-weight: 500;
    line-height:1.4;
    max-height:65px;
    
    overflow:hidden;
    display:-webkit-box;
    word-break:break-word;
	text-overflow:ellipsis;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	}

.review .review_list .company {
	font-family:'Pretendard';
    font-size:15px;
    font-weight:700;
    color:#777777;
    
    overflow:hidden;
    display:-webkit-box;
    word-break:break-all;
	text-overflow:ellipsis;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	}

.review .review_list .date {
	font-family:'Gmarket Sans';
    font-size:14px;
    color:#777777;
    margin-top:30px;
	}

.review .review_list .on{
	z-index:2;
	position:absolute;
	border:1px solid #0064ff;
    background:#0064ff;
    box-shadow: 0 0 8px 8px rgb(0 100 255 / 6%);
	}

.review .review_list .on dt {
	color:#ffffff;
	}

.review .review_list .on dd {
	color:#a4c3ff;
	}

.review .review_list .on .company {
	color:#b2ccff;
	}

#review_Layer .modal {
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.5);
	opacity:100;
    visibility:visible;
    z-index: 100000 !important;
	}

#review_Layer .layer {
	background:#fff;
	width:850px;
	height:660px;
	position:fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index:100001;
	}

#review_Layer .btn_close {
	position:absolute;
    top:32px;
    right:32px;
	}

#review_Layer .layer .title {
	box-sizing:border-box;
	width:760px;
	margin:0 auto;
    padding:50px 22px 35px;
	border-bottom:1px solid #111;
	}

#review_Layer .layer h1 {
	font-size:30px;
    font-weight:600;
    color:#5980ff;
    line-height:37px;
    word-break:keep-all;
	}

#review_Layer .layer span {
	display:inline-block;
	padding:20px 0 0;
    font-size:15px;
    color:#939393;
    word-break: keep-all;
	}

#review_Layer .layer .contents {
	box-sizing:border-box;
    width:760px;
    margin:0 auto;
    padding:24px 22px 0px 22px;
	font-size:17px;
	line-height:30px;
    letter-spacing:-0.8px;
    height:450px;
	overflow:auto; 
	}

#review_Layer .layer .contents img {
	margin-top: 20px;
	display:block;
	width:100%;
	}

/* 서포트 */

#support_wrap {
	width:100%;
	min-width:1500px;
	background:#ebf2f9 url('/images/main/bg_main_support.png') center center no-repeat; 
	padding:100px 0;
	}

#support_wrap .support {
	width:1200px;
    margin:0 auto;
	position:relative;
	}

#support_wrap .title h1 {
    font-family:'Gmarket Sans';
    font-size:40px;
    font-weight:700;
    margin-bottom:22px;
	}

#support_wrap .title span {
    font-family:'Gmarket Sans';
    font-size:20px;
    line-height:1.4;
	}

#support_wrap .support_list {
	height:400px;
	}

.support_list dl {
	position:absolute;
	}

.support_list .dedicated {
	top:188px;
	left:0;
	}

.support_list .visit {
	top:130px;
	left:350px;
	}

.support_list .routine {
	top:190px;
	left:688px;
	}

.support_list .video {
	top:40px;
	left:1010px;
	}

.support_list dt {
    font-family:'Gmarket Sans';
    font-size:24px;
    font-weight:700;
	text-align:center;
    margin-bottom:10px;
	}

.support_list dd {
	font-family:'Pretendard';
    font-weight:500;
    font-size:18px;
	text-align:center;
	line-height:1.3;
	margin-bottom:15px;
	}

.support_list dd.img {
	margin-bottom:0;
	}

.support_list dd.text {
	text-align:left;
	}

.support_list dd p {
    font-family:'Pretendard';
    font-size:15px;
	font-weight:500;
	margin-bottom:5px;
	}

.support_list dd p span{
	box-sizing:border-box;
    background:#0064ff;
	border-radius:50px;
	display:inline-block;
	width:16px;
	height:16px;
    font-family:'Pretendard';
	font-size:10px;
	color:#ffffff;
	text-align:center;
    vertical-align:middle;
	padding:1px 0 0 1px;
	}

.support_list dd .btn_shortcut {
	box-sizing:border-box;
	display:inline-block;
    background:#ffffff;
	border:1px solid #7da9fc;
	border-radius:8px;
    font-family:'Gmarket Sans';
    font-size:15px;
	color:#0064ff;
    text-align:left;
    padding:8px 18px 4px;
    position:relative;
	}

.support_list .routine dd .btn_shortcut {
	width:175px;
	}

.support_list .video dd .btn_shortcut {
	width:190px;
	}

.support_list dd .btn_shortcut::after {
    content:"";
    position:absolute;
    bottom:15px;
    right:18px;
    width:30px;
    height:3px;
    background:#0064ff;
	}
	

/* 모바일 APP */

#mobile_wrap {
    background:linear-gradient(#ebf2f9 50%, #ffffff 50%);
	margin-bottom:100px;
	}

#mobile_wrap .mobile_app {
    box-sizing:border-box;
	background:#0064ff;
	border-radius:25px;
    width:1200px;
	height:495px;
	margin:0 auto;
    padding:90px 0;
	}

.mobile_app .title {
	text-align:center;
	margin-bottom:60px;
	}

.mobile_app .title h1 {
    font-family:'Gmarket Sans';
    font-size:40px;
    font-weight:700;
	color:#ffffff;
    margin-bottom:20px;
	text-shadow:0px 2px rgb(0 0 0 / 0.1);
	}

.mobile_app .title span {
    font-family:'Gmarket Sans';
    font-size:20px;
	color:#ffffff;
	text-shadow:0px 2px rgb(0 0 0 / 0.1);
	}

.mobile_app .app_list {	
	overflow:hidden;
    /*width:611px;*/
    width:617px;    margin:0 auto;
	}

.mobile_app .app_list dl {	
	margin-right:40px;
	float:left;
	}

.mobile_app .app_list a:last-child dl {	
	margin-right:0;
	}

.mobile_app .app_list dt {	
	font-family:'Gmarket Sans';
    font-size:22px;
	font-weight:700;
	color:#ffffff;
	text-align:center;
	text-shadow:0px 2px rgb(0 0 0 / 0.1);
	}

.mobile_app .app_list dd {	
	text-align:center;
	margin-bottom:20px;
	}
	
	
	
/*교육영상 유튜브*/


#eduvideo_wrap {
    width:100%;
    min-width:1500px;
    background:#ebf2f9; 
    padding:130px 0 0;
    }

#eduvideo_wrap .eduvideo_con {
    background-color:#d5e3fa;
    width:1200px;
    margin:0 auto;
    border-radius:30px;
    overflow:hidden;
    }

#eduvideo_wrap .eduvideo_con .left_box {
    background-color:#fff;
    border-radius:30px;
    float:left;
    padding:70px 30px 0;
    width:300px;
    text-align:center;     
    box-sizing: border-box;
    height:300px;
    }

#eduvideo_wrap .eduvideo_con .left_box .tit {
    font-family: 'Gmarket Sans';
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 22px;
    }


#eduvideo_wrap .eduvideo_con .left_box .txt {
    font-family: 'Gmarket Sans';
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 22px;
    }

#eduvideo_wrap .eduvideo_con .left_box .txt span {
    font-family: 'Gmarket Sans';
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 22px;
    line-height:30px;
    }

#eduvideo_wrap .eduvideo_con .left_box .more_btn {
    background-color:#0064ff;
    width:200px;
    height:35px;
    border-radius:35px;
    color:#fff;
    font-family: 'Gmarket Sans';
    font-size: 15px;
    padding-top:10px;
    box-sizing:border-box;
    margin:25px auto 0;
    }

#eduvideo_wrap .eduvideo_con .left_box .more_btn img {
    margin-top: -3px;
    vertical-align:middle;
    }

#eduvideo_wrap .eduvideo_con .video_list {
    overflow:hidden;
    padding:0 30px;
    }
#eduvideo_wrap .eduvideo_con .video_list .videoDiv {
    position: relative;
    width: 700px;
    display: inline-block;
    margin: 0; 
    padding: 0;
    left: 80px;
    }

#eduvideo_wrap .eduvideo_con .btn_list button:first-child {
    float:left;
    background: url(/images/main/btn_main_arrow_pr.png) center no-repeat;
    border: 0;
    font-size: 0;
    text-indent: -99999px;
    width: 50px;
    height: 50px; 
    cursor: pointer;
    margin-right:30px;
    }

#eduvideo_wrap .eduvideo_con .btn_list button:last-child {
    float:right;
    background: url(/images/main/btn_main_arrow_nx.png) center no-repeat;
    border: 0;
    font-size: 0;
    text-indent: -99999px;
    width: 50px;
    height: 50px; 
    cursor: pointer;
    }

#eduvideo_wrap .eduvideo_con .video_list .youtube_warp {
    float:left;
    margin:60px 30px 0 0;
    position:relative;
    }

#eduvideo_wrap .eduvideo_con .video_list .youtube_warp iframe {
    box-shadow: 0 0 0 15px #fff inset;
    border-radius:20px;
    outline: solid 10px #fff;
    outline-offset: -9px;
    }

#eduvideo_wrap .eduvideo_con .btn_list {
	position:relative;
	bottom:110px;
}

