@import url("common.css");


/*** 메인 css 공통 ***/

/* 폰트 */
.mTit{font-size:var(--fs50); font-weight:700; color:var(--black); line-height: 120%; letter-spacing: -1.5pt;}
.mTit .point{color:var(--main) !important; display: inline; font-weight:inherit; letter-spacing:inherit; line-height:inherit;}
.mTxt{font-size:var(--fs20); font-weight:400; color:var(--basic); line-height: 150%; letter-spacing: -0.55pt;}
.mStit{font-size:var(--fs30); font-weight:700; color:var(--black); line-height: 140%; letter-spacing: -1pt;}
.mStxt{font-size:var(--fs24); font-weight:700; color:var(--black); line-height: 140%; letter-spacing: -0.75pt;}
.txt{font-size:var(--fs18); font-weight:400; color:var(--basic); line-height: 160%;}
.reference_txt{font-size:1rem; letter-spacing:-0.35pt; line-height:140%; text-align:right; color:var(--basic); padding:12px 0 0;}
.reference_txt font{font-weight: 700; color:var(--main);}

/* 버튼 */
.moreBtn{display:inline-block; cursor:pointer; box-sizing:border-box; text-align:left; position:relative; transition:all .3s linear; height:55px; overflow:hidden; border:1px solid var(--main); padding: 0 25px; border-radius:var(--borderR5); background:var(--main); min-width:170px;}
.moreBtn:before{content:''; display:block; width: 0; height:100%; box-sizing:border-box; background:var(--white); position:absolute; left:0; top:0; transition:all .3s linear; z-index: 2;}
.moreBtn:after{content:'\e5c8'; font-family: "Material Symbols Outlined"; display:block; font-size:18px; color:var(--white); position:absolute; right:25px; top:50%; transform:translateY(-50%); transition:all .3s linear; z-index: 3; font-weight: 600;}
.moreBtn font{display:block; position:relative; z-index:9; font-size:var(--fs18); font-weight: 700; letter-spacing:-0.35pt; color:var(--white); line-height:55px; transition:all .3s linear;}

.moreBtn:hover:before{width: 100%;}
.moreBtn:hover:after{color:var(--main);}
.moreBtn:hover font{color:var(--main);}

.moreBtn.whiteBtn{background:var(--white);}
.moreBtn.whiteBtn:before{background:var(--main);}
.moreBtn.whiteBtn:after{color:var(--main);}
.moreBtn.whiteBtn font{color:var(--main);}

.moreBtn.whiteBtn:hover:after{color:var(--white);}
.moreBtn.whiteBtn:hover font{color:var(--white);}

.titleArea{text-align:center; padding:0 0 50px;}
.titleArea .mTxt{padding:15px 0 0;}


/* 리스트 */
.check_list{}
.check_list > li{position:relative; padding:0 0 8px 24px; font-size:var(--fs18); letter-spacing:-0.5pt; line-height:150%; box-sizing:border-box;}
.check_list > li:last-child{padding-bottom:0;}
.check_list > li:before{content:'\f88b'; font-family: "Material Symbols Outlined"; display:block; font-size:24px; position:absolute; left:0; top:1px;}

/* 배경 */
.grayBg{position: absolute; left:0; top:0; width: 100%; height:0; background:var(--grayBg); z-index: -1;}
.action .grayBg{transition: all 1s; height: 100%;}


/* visual */
#visual{padding:160px 0; margin: 100px 0 0; position:relative; overflow:hidden;}
#visual:before{content:''; display:block; width:calc(50% - 337px); height:100%; background:var(--main); position:absolute; left:0; top:0; z-index: -1; border-radius:0 0 200px 0; opacity: 0; transform:translateX(-300px); animation:visual_bg 2s 0.5s forwards;}


@keyframes visual_bg {
	from { opacity: 0; transform:translateX(-300px); }
	to { opacity: 1; transform:translateX(0); }
}

#visual .visual_in{opacity: 0; visibility:hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease;}
#visual .visual_in.slick-initialized{opacity: 1; visibility:visible;}
#visual .visual_in .roll{display:flex;}
#visual .visual_in .roll > div{box-sizing:border-box; width:50%;}
#visual .visual_in .roll .imgArea{overflow: hidden;	border-radius:var(--borderR20); opacity: 0; transition:all 1s .3s;}
#visual .visual_in .roll.action .imgArea{opacity: 1;}
#visual .visual_in .roll .imgArea img{width:100%; transform:scale(1.2); transition:all 1s .6s linear;}
#visual .visual_in .roll.action .imgArea img{transform:scale(1);}
#visual .visual_in .roll .txtArea{display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding:0 0 0 80px;}
#visual .visual_in .roll .txtArea h2{font-size:var(--fs60); font-weight: 700; color:var(--black); letter-spacing: -2pt; line-height: 110%; opacity: 0; transform:translateY(60px); transition:all 1s .6s;}
#visual .visual_in .roll .txtArea h2 .point{display: inline-block; color:var(--main); letter-spacing:inherit; line-height:inherit; font-weight:inherit;}
#visual .visual_in .roll .txtArea .mTxt{padding: 15px 0 0; opacity: 0; transform:translateY(60px); transition:all 1s .9s;}
#visual .visual_in .roll .txtArea .btnArea{padding: 60px 0 0; display: flex; opacity: 0; transform:translateY(60px); transition:all 1s 1.2s;}
#visual .visual_in .roll .txtArea .btnArea .moreBtn{margin:0 10px 0 0;}
#visual .visual_in .roll .txtArea .btnArea .moreBtn:last-child{margin:0;}
#visual .slick-dots{font-size:0; text-align:center; position: absolute; left: 50%; bottom: -110px; z-index: 9999; transform:translateX(-50%);}
#visual .slick-dots li{cursor:pointer; outline:none; display: inline-block; vertical-align: top; width:10px; height:10px; border-radius:50%; background:#B8C3CA; margin: 0 10px 0 0; border:0; transition:all .3s linear;}
#visual .slick-dots li.slick-active{width: 40px; border-radius:20px; background:var(--main);}
#visual .slick-dots li:last-child{margin: 0;}
#visual .slick-dots li button{border:0; font-size:0; padding: 0; background:none;}

#visual .visual_in .roll.action .txtArea h2{opacity: 1; transform:translateY(0);}
#visual .visual_in .roll.action .txtArea .mTxt{opacity: 1; transform:translateY(0);}
#visual .visual_in .roll.action .txtArea .btnArea{opacity: 1; transform:translateY(0);}


/* 글로벌 LMS */
#lms{position: relative; overflow: hidden;}
#lms .lms_list{width: calc(100% + 30px); margin:0 -15px;}
#lms .lms_list .roll{margin:0 15px;}
#lms .lms_list dl dt{position: relative; padding: 70px 0 0;}
#lms .lms_list dl dt .frame{padding: 23px; box-sizing:border-box; background:url('/img/lms_frame.jpg') no-repeat center/contain;}
#lms .lms_list dl dt .frame img{width: 100%;}
#lms .lms_list dl dt .icon{position:absolute; left:50%; top:0; transform:translateX(-50%); width: 100px;}
#lms .lms_list dl dt .icon img{width: 100%; box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.10); border-radius:50%;}
#lms .lms_list dl dd{padding:15px 0 0; text-align:center;}
#lms .lms_list dl dd .txt{color:var(--black); letter-spacing:-0.35pt;}

#lms .slick-dots{font-size:0; text-align:center; margin: 30px auto 0;}
#lms .slick-dots li{cursor:pointer; outline:none; display: inline-block; vertical-align: top; width:10px; height:10px; border-radius:50%; background:#B8C3CA; margin: 0 10px 0 0; border:0; transition:all .3s linear;}
#lms .slick-dots li.slick-active{width: 40px; border-radius:20px; background:var(--main);}
#lms .slick-dots li:last-child{margin: 0;}
#lms .slick-dots li button{border:0; font-size:0; padding: 0; background:none;}


/* 특장점 */
#feature{position: relative; overflow: hidden;}
#feature .feature_list{display: flex; flex-wrap:wrap;}
#feature .feature_list dl{margin:0 30px 30px 0; width: calc((100% - 90px)/4); padding:30px; box-sizing:border-box; background:var(--white); border-radius:var(--borderR10);}
#feature .feature_list dl:nth-child(4n){margin-right:0;}
#feature .feature_list dl dt{position:relative;}
#feature .feature_list dl dt img{width: 100%; border-radius:var(--borderR10); overflow:hidden;}
#feature .feature_list dl dt .num{display:block; width:40px; height:40px; line-height:40px; text-align:center; font-size:15px; font-weight:700; color:var(--white);  border-radius:50%; background:var(--main); position:absolute; left:50%; bottom:-20px; margin-left: -20px; z-index: 3;}
#feature .feature_list dl dt .num:before{content:''; display:block; width:100%; height:100%; border:1px solid var(--main); box-sizing:border-box; border-radius:50%; position:absolute; left:0; top:0; animation: active-circle 1.5s cubic-bezier(1, 2, 0.66, 3) infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
#feature .feature_list dl dt .num:after{content:''; display:block; width:100%; height:100%; border:1px solid var(--main); box-sizing:border-box; border-radius:50%; position:absolute; left:0; top:0; animation: active-circle 1.5s cubic-bezier(1, 2, 0.66, 3) infinite; -webkit-animation-delay: 1s; animation-delay: 1s;}
#feature .feature_list dl dd{padding:40px 0 0; text-align:center;}
#feature .feature_list dl dd .txt{padding:10px 0 0;}

@keyframes active-circle {
  0% {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 0.05; 
   }
  50% {
	opacity: 0.2; 
   }
  100% {
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
	opacity: 0;} 
}



/* 도입효과 */
#effect{position: relative; overflow: hidden;}
#effect .effect_vs{display: flex; align-items: center; justify-content: space-between; padding: 80px 0 0;}
#effect .effect_vs dl{width: 50%; border-radius:var(--borderR10); box-sizing:border-box; text-align:center; position: relative;}
#effect .effect_vs dl.global{background: linear-gradient(130deg, #7359FF 0%, #1954DB 100%); padding: 130px 55px 50px;}
#effect .effect_vs dl.global:before{content:''; display:block; width:50px; height: 100%; background:url('/img/effect_vs_bg.png') no-repeat center/auto 100%; position: absolute; right:-48px; top:0; z-index: -1;}
#effect .effect_vs dl.global:after{content:''; display:block; width:100px; height: 100px; background:url('/img/vs.png') no-repeat center/auto 100%; position: absolute; right:-65px; margin-top: -50px; top:50%; z-index: 2;}
#effect .effect_vs dl.overseas{background:var(--grayBg); padding:58px 55px 50px; width:calc(50% - 30px);}
#effect .effect_vs dl dt{position: relative;}
#effect .effect_vs dl.global .introduction_logo{position: absolute; left: 50%; top:-80px; margin-left: -80px; width: 160px; border-radius:50%; box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.15);}
#effect .effect_vs dl.global .introduction_logo img{width: 100%;}
#effect .effect_vs dl.global dt{padding: 0 0 30px;}
#effect .effect_vs dl.overseas dt{padding:0 0 20px;}
#effect .effect_vs dl dt h4{font-size:var(--fs24); font-weight: 700; color:var(--black); line-height: 120%; letter-spacing:-1.5pt;}
#effect .effect_vs dl.global dt h4{font-size:var(--fs40); color:var(--white);}
#effect .effect_vs dl dd{}
#effect .effect_vs dl dd .effect_check{}
#effect .effect_vs dl dd .effect_check li{display:flex; flex-direction: column; align-items: center; box-sizing:border-box; padding: 12px; background:var(--white); border:1px solid var(--border); border-radius:var(--borderR5); margin: 0 0 3px;}
#effect .effect_vs dl.global dd .effect_check li{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2);}
#effect .effect_vs dl dd .effect_check li:last-child{margin:0;}
#effect .effect_vs dl dd .effect_check li .txt{padding:0 0 0 26px; position: relative; box-sizing:border-box;}
#effect .effect_vs dl dd .effect_check li .txt:before{content:'\f88b'; font-family: "Material Symbols Outlined"; font-size:24px; display:inline-block; position:absolute; left: 0; top:1px;}

#effect .effect_vs dl.global dd .effect_check li .txt{font-size:var(--fs20); font-weight:600; color:var(--white);}
#effect .effect_vs dl.global dd .effect_check li .txt:before{color:var(--white); font-weight:400;}



/* 주요 기능 */
#function{position: relative; overflow: hidden;}
#function .function_style{display:flex;}
#function .function_style .functionTab{width: 315px;}
#function .function_style .functionTab .slick-track{display:block;}
#function .function_style .functionTab .roll{display:flex; align-items: center; width: 315px; height:55px; padding:0 60px 0 30px; box-sizing:border-box; border-radius:var(--borderR10); position:relative; cursor:pointer;}
#function .function_style .functionTab .roll.slick-current{background:var(--main);}
#function .function_style .functionTab .roll:after{content:'\e5c8'; display:block; font-size:18px; color:var(--white); font-family: "Material Symbols Outlined"; position:absolute; right:27px; top:50%; transform:translateY(-50%); opacity: 0;}
#function .function_style .functionTab .roll.slick-current:after{opacity:1;}
#function .function_style .functionTab .roll h5{font-size:var(--fs18); font-weight: 700; color:var(--black); padding:0 0 0 30px; position: relative;}
#function .function_style .functionTab .roll.slick-current h5{color:#fff;}
#function .function_style .functionTab .roll h5 small{display:inline-block; font-size:15px; position: absolute; left:0; top:2px;}
#function .function_style .functionCont{width: calc(100% - 315px); box-sizing:border-box; padding:0 0 0 30px;}
#function .function_style .functionCont .slick-track{align-items: flex-start;}
#function .function_style .functionCont .roll{border-radius:var(--borderR10); overflow: hidden; background:var(--white);}
#function .function_style .functionCont .roll dt{}
#function .function_style .functionCont .roll dt img{width: 100%;}
#function .function_style .functionCont .roll dd{box-sizing:border-box; padding:40px 40px 40px 167px; position: relative;}
#function .function_style .functionCont .roll dd .icon{display: flex; justify-content: center; align-items: center; width: 95px; height: 95px; border-radius:50%; background:rgba(15, 145, 208, 0.1); position: absolute; left:40px; top:40px;} 
#function .function_style .functionCont .roll dd .icon img{width: 80px; border-radius:50%; box-shadow:0px 10px 15px rgba(21, 46, 146, 0.20);}
#function .function_style .functionCont .roll dd .check_list{margin: 10px 0 0;}






/* 포트폴리오 */
#portfolio{position: relative; overflow: hidden;}
#portfolio .portfolio_list{display:flex; flex-wrap:wrap;}
#portfolio .portfolio_list dl{box-sizing:border-box; border-radius:var(--borderR10); border: 1px solid var(--border); margin:0 30px 30px 0; width: calc((100% - 90px)/4); overflow:hidden;}
#portfolio .portfolio_list dl:nth-child(4n){margin-right:0;}
#portfolio .portfolio_list dl a{display:block;}
#portfolio .portfolio_list dl dt{overflow: hidden; border-bottom: 1px solid var(--border);}
#portfolio .portfolio_list dl dt img{width: 100%; transition:all .4s linear;}
#portfolio .portfolio_list dl:hover dt img{transform:scale(1.1);}
#portfolio .portfolio_list dl dd{padding: 30px; box-sizing:border-box;}
#portfolio .portfolio_list dl dd .mStxt{text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#portfolio .portfolio_list dl dd p{margin: 8px 0 0; font-size:1rem; letter-spacing: -0.35pt; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#portfolio .btnArea{margin:30px auto 0; text-align:center;}
#portfolio .btnArea .moreBtn{width:242px;}





/* 서비스 요금 */
#service{position: relative; overflow: hidden;}
#service .tableMsg{color:var(--main); font-size:1rem; line-height: 150%; letter-spacing: -0.35pt; text-align:right; padding: 0 0 12px; display: none;}
#service .tablePic{}
#service .table_style{width:100%; border-collapse:separate; border-spacing:0px; text-align:center;}
#service .table_style th:first-child{border-left:1px solid #C3CDE5; border-bottom:1px solid #C3CDE5;}
#service .table_style th h4{font-size:var(--fs24); font-weight: 400; color:var(--white); letter-spacing: -0.5pt; line-height: 120%;padding-top:8px;}
#service .table_style th .price{padding: 4px 0 0; font-size:var(--fs18); font-weight: 400; color:#fff;}
#service .table_style th .price b{font-size:var(--fs24); font-weight:700; display: inline-block; letter-spacing: 0;}
#service .table_style th .txt{padding: 8px 0 0; color:var(--white); line-height: 120%;}
#service .table_style td{font-size:var(--fs18); letter-spacing:-0.35pt; line-height: 150%; padding:16px 10px; box-sizing:border-box; border-bottom:1px solid #C3CDE5; border-right:1px solid #C3CDE5; background:var(--white);}
#service .table_style td.first{border-left:1px solid #C3CDE5;}
#service .table_style td small{font-size:0.938rem; display: block; line-height: 140%;}
#service .table_style td.tit{font-size:var(--fs18); color:var(--black); line-height: 140%; border-left:1px solid #C3CDE5;}
#service .table_style td.tit.border_left_none{border-left:0;}
#service .table_style td.tit small{font-size:var(--fs18); color:var(--basic);}
#service .table_style td .material-symbols-outlined{vertical-align:middle; font-weight:700; font-size:30px;}
#service .table_scroll.ver2 th{padding: 20px 10px;border-bottom: 1px solid #0eb3d3;background-color: #0eb3d3;letter-spacing: -0.5pt;text-align: center;font-weight: 400;
	color: #fff;line-height: 1;border-right: 1px solid #ddd;}
#service .table_scroll.ver2 td.tab_tit {font-size: var(--fs18);color: var(--black);line-height: 140%;border-left: 1px solid #C3CDE5;}
#service .table_scroll.ver2 td.bln{border-left:none;}

#service .table_style th .hit{width: 100%; height: 100%; box-sizing:border-box; border:5px solid #E32D6F; background:url('/img/hit_icon.svg') no-repeat right top/60px auto; position: absolute; left: 0; top:0;}

#service .table_style .pointBox td:nth-child(1){border-left:3px solid var(--main); border-top:3px solid var(--main); border-bottom:3px solid var(--main);}
#service .table_style .pointBox td:nth-child(2){border-top:3px solid var(--main); border-bottom:3px solid var(--main);}
#service .table_style .pointBox td:nth-child(3){border-top:3px solid var(--main); border-bottom:3px solid var(--main);}
#service .table_style .pointBox td:nth-child(4){border-top:3px solid var(--main); border-bottom:3px solid var(--main);}
#service .table_style .pointBox td:nth-child(5){border-right:3px solid var(--main); border-top:3px solid var(--main); border-bottom:3px solid var(--main);}

#service .table_style .pointBox.pointBox_t td:nth-child(1),
#service .table_style .pointBox.pointBox_t td:nth-child(2),
#service .table_style .pointBox.pointBox_t td:nth-child(3),
#service .table_style .pointBox.pointBox_t td:nth-child(4),
#service .table_style .pointBox.pointBox_t td:nth-child(5){border-bottom:1px solid #C3CDE5;}

#service .table_style .pointBox.pointBox_b td:nth-child(1){border-top:0;}
#service .table_style .pointBox.pointBox_b td:nth-child(2){border-top:0;}
#service .table_style .pointBox.pointBox_b td:nth-child(3){border-top:0;}
#service .table_style .pointBox.pointBox_b td:nth-child(4){border-top:0;}
#service .table_style .pointBox.pointBox_b td:nth-child(5){border-top:0;}

#service .table_style th.one{border-radius:10px 0 0 0;}
#service .table_style th.two{border-radius:0 10px 0 0;}
#service .table_style td.three{border-radius:0 0 0 10px;}
#service .table_style td.four{border-radius:0 0 10px 0;}

#service .table_style .line-through{text-decoration:line-through;}
#service .table_style .red{color:#E32D6F;}
#service .table_style .tit.point{color:var(--main);}
#service .table_style .sky_bg{background:#DAE2F5;}
#service .table_style .mint_bg{background:#0EB3D3;}
#service .table_style .green_bg{background:#49C494;}
#service .table_style .blue_bg{background:#0F91D0;}
#service .table_style .purple_bg{background:#835CAB;}

#service .table_style .mint_bg2{background:#F1FBFC;}
#service .table_style .green_bg2{background:#F4FCF9;}
#service .table_style .blue_bg2{background:#F2F6FF;}
#service .table_style .purple_bg2{background:#F8F5FA;}

#service .table_style .mint_bg2 .material-symbols-outlined{color:#0EB3D3;}
#service .table_style .green_bg2 .material-symbols-outlined{color:#49C494;}
#service .table_style .blue_bg2 .material-symbols-outlined{color:#0F91D0;}
#service .table_style .purple_bg2 .material-symbols-outlined{color:#835CAB;}



/* 데모 체험 */
#demo{position: relative; overflow: hidden;}
#demo .demo_list{display:flex; flex-wrap:wrap;}
#demo .demo_list dl{display:flex; margin:0 30px 0 0; width: calc((100% - 30px)/2); padding:50px 60px; box-sizing:border-box; background:var(--blueBg); border-radius:var(--borderR10);}
#demo .demo_list dl:last-child{margin: 0;}
#demo .demo_list dl dt{width: 50%; text-align:center;}
#demo .demo_list dl dt img{max-width:100%;}
#demo .demo_list dl dd{width: 50%; box-sizing:border-box; padding:0 0 0 50px;}
#demo .demo_list dl dd h4{font-size:var(--fs34); font-weight:700; color:var(--black); line-height: 120%;}
#demo .demo_list dl dd .txt{padding:8px 0 0;}
#demo .demo_list dl dd .moreBtn{margin:30px 0 0;}






/* 문의하기 */
#contact{position: relative; overflow: hidden;}
#contact .contact_form{}
#contact .contact_form .contact_input{display: flex;}
#contact .contact_form .contact_input .box{margin: 0 10px 0 0; width:calc((100% - 10px)/2); overflow: hidden;}
#contact .contact_form .contact_input .box:last-child{margin:0;}
#contact .contact_form .contact_input .input{width: 100%; height: 50px; box-sizing:border-box; padding:0; border:0; font-size:1rem; color:var(--basic);}
#contact .contact_form .contact_input .textarea{width: 100%; height: 240px; border:0; padding: 0; font-size:1rem; color:var(--basic);}
#contact .contact_form .contact_input dl{background:var(--white); display: flex; align-items:center; padding:10px 25px; border-radius:var(--borderR5); box-sizing:border-box; margin:0 0 10px; border:1px solid var(--white);}
#contact .contact_form .contact_input dl.border{border-color:var(--main);}
#contact .contact_form .contact_input dl:last-child{margin:0;}
#contact .contact_form .contact_input dl dt{width: 90px; font-size:var(--fs18); font-weight: 700; color:var(--black); letter-spacing: -0.35pt; line-height: 120%;}
#contact .contact_form .contact_input dl dt span{color:var(--main); display: inline-block;}
#contact .contact_form .contact_input dl dd{width: calc(100% - 90px);}

#contact .contact_form .contact_input dl.textarea_type{display: block; padding:20px 25px; height: 316px;}
#contact .contact_form .contact_input dl.textarea_type dt{width: 100%; margin: 0 0 10px;}
#contact .contact_form .contact_input dl.textarea_type dd{width: 100%;}

#contact .contact_form .contact_agree{display: flex; align-items:center; justify-content: center; margin: 40px 0 0;}
#contact .contact_form .contact_agree .agree_checkbox{display:inline-block; width:17px; height:17px; margin:-2px 8px 0 0;}
#contact .contact_form .contact_agree .agree_txt{font-size:var(--fs18); color:var(--basic); letter-spacing:-0.35pt; line-height:120%;}
#contact .contact_form .contact_agree .agree_txt b{color:var(--main); margin:0 5px 0 0; font-weight:700; display:inline-block; letter-spacing:inherit; line-height:inherit;}
#contact .contact_form .contact_agree .agree_txt span{display:inline-block; letter-spacing:inherit; line-height:inherit; text-decoration:underline; cursor:pointer;}
#contact .contact_form .contact_btn{text-align:center; margin:26px auto 0;}




/* 개인정보 수집 동의 팝업 */
body.noScroll{overflow: hidden;}

#agree_popup{position:fixed; left:0; top:0; width:100%; height:100vh; z-index: 999999999; display: none;} 
#agree_popup .agree_popup_bg{position: absolute; left: 0; top:0; background:rgba(0,0,0,.7); width: 100%; height:100%; cursor:pointer;}
#agree_popup .agree_popup_wrap{max-width:800px; width: 100%; height: 75vh; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index: 9;}
#agree_popup .agree_popup_close{position: absolute; right: 0; top:-60px;}
#agree_popup .agree_popup_close span{font-size:50px; color:var(--white); cursor:pointer; transition:all .3s linear;}
#agree_popup .agree_popup_close:hover span{transform:rotate(180deg);}
#agree_popup .agree_popup_in{width: 100%; height: 100%; background:var(--white); box-sizing:border-box; padding:70px 50px; border-radius:var(--borderR10); overflow:hidden;}
#agree_popup .agree_popup_in .titBox{text-align:center; padding: 0 0 30px; border-bottom:1px solid var(--border);}
#agree_popup .agree_popup_in .titBox .mStit{line-height: 120%;}
#agree_popup .agree_popup_in .titBox .txt{padding: 12px 0 0; letter-spacing: -0.65pt;}
#agree_popup .agree_popup_in .agree_cont{height: calc(100% - 107px); overflow-y: auto; box-sizing:border-box; padding:0 20px 0 0;}
#agree_popup .agree_popup_in .agree_cont h5{font-size:var(--fs20); color:var(--black); letter-spacing: -0.5pt; line-height:140%; padding:30px 0 10px;}
#agree_popup .agree_popup_in .agree_cont .txt{padding:0 0 10px;}
#agree_popup .agree_popup_in .agree_cont dl{display:flex;}
#agree_popup .agree_popup_in .agree_cont dl dt{width:180px; display: flex; justify-content: center; align-items: center; text-align:center; font-size:var(--fs18); letter-spacing:-0.5pt; color:var(--black); background:var(--grayBg); border:1px solid var(--border); border-bottom:0; padding:10px; box-sizing:border-box;}
#agree_popup .agree_popup_in .agree_cont dl.last dt{border-bottom:1px solid var(--border);}
#agree_popup .agree_popup_in .agree_cont dl dd{width:calc(100% - 180px); text-align:left; font-size:var(--fs18); letter-spacing:-0.5pt; border:1px solid var(--border); border-bottom:0; border-left:0; padding:10px; box-sizing:border-box;}
#agree_popup .agree_popup_in .agree_cont dl.last dd{border-bottom:1px solid var(--border);}







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



/*** 메인 css 공통 ***/

/* 폰트 */
.mTit br{display: none;}
.mTxt br{display: none;}
.mStit br{display: none;}
.mStxt br{display: none;}
.txt br{display: none;}


/* visual */
#visual:before{width:25%;}


}
/*******************************************************************************
@media 1280px
******************************************************************************/
@media all and (max-width:1280px){


/* visual */
#visual{padding:120px 0;}
#visual:before{border-radius:0 0 150px 0;}
#visual .visual_in .roll .txtArea{padding:0 0 0 40px;}




/* 데모 체험 */
#demo{}
#demo .demo_list{}
#demo .demo_list dl{padding:40px 30px;}
#demo .demo_list dl dt{}
#demo .demo_list dl dd{padding:0 0 0 30px;}


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


/*** 메인 css 공통 ***/

/* 폰트 */
.reference_txt{padding:10px 0 0;}

/* 버튼 */
.moreBtn{height:45px; padding: 0 16px; min-width:140px;}
.moreBtn:after{font-size:16px; right:16px;}
.moreBtn font{line-height:45px;}

.titleArea{padding:0 0 40px;}
.titleArea .mTxt{padding:10px 0 0;}



/* visual */
#visual{padding:100px 0; margin: 119px 0 0;}
#visual:before{width:25%; border-radius:0 0 100px 0;}
#visual .visual_in{}
#visual .visual_in .roll{}
#visual .visual_in .roll .imgArea{}
#visual .visual_in .roll .txtArea{padding:0 0 0 30px;}
#visual .visual_in .roll .txtArea .mTxt{padding: 10px 0 0;}
#visual .visual_in .roll .txtArea .btnArea{padding: 30px 0 0;}
#visual .visual_in .roll .txtArea .btnArea .moreBtn{margin:0 5px 0 0;}
#visual .slick-dots{bottom: -50px;}
#visual .slick-dots li{width:8px; height:8px; margin: 0 5px 0 0;}
#visual .slick-dots li.slick-active{width: 30px;}



/* 글로벌 LMS */
#lms{}
#lms .lms_list{width: calc(100% + 20px); margin:0 -10px;}
#lms .lms_list .roll{margin:0 10px;}
#lms .lms_list dl dt{padding: 50px 0 0;}
#lms .lms_list dl dt .frame{padding: 18px;}
#lms .lms_list dl dt .icon{width: 80px;}
#lms .lms_list dl dd{padding:12px 0 0;}
#lms .slick-dots li{width:8px; height:8px; margin: 0 5px 0 0;}
#lms .slick-dots li.slick-active{width: 30px;}

/* 특장점 */
#feature{}
#feature .feature_list{}
#feature .feature_list dl{margin:0 20px 20px 0; width: calc((100% - 60px)/4); padding:20px;}
#feature .feature_list dl:nth-child(4n){margin-right:0;}
#feature .feature_list dl dt .num{width:30px; height:30px; line-height:30px; font-size:11px; bottom:-15px; margin-left: -15px;}
#feature .feature_list dl dd{padding:30px 0 0;}
#feature .feature_list dl dd .txt{padding: 8px 0 0;}




/* 도입효과 */
#effect{}
#effect .effect_vs{padding: 60px 0 0;}
#effect .effect_vs dl.global{padding: 80px 30px 40px;}
#effect .effect_vs dl.global:before{width:30px; right:-28px;}
#effect .effect_vs dl.global:after{width:80px; height: 80px; right:-50px; margin-top: -40px;}
#effect .effect_vs dl.overseas{padding:40px 30px 40px; width:calc(50% - 25px);}
#effect .effect_vs dl dt{}
#effect .effect_vs dl.global .introduction_logo{top:-60px; margin-left: -60px; width: 120px;}
#effect .effect_vs dl.global dt{padding: 0 0 20px;}
#effect .effect_vs dl.overseas dt{padding:0 0 10px;}



/* 주요 기능 */
#function{}
#function .function_style{}
#function .function_style .functionTab{width: 200px;}
#function .function_style .functionTab .roll{width: 200px; height:45px; padding:0 40px 0 20px;}
#function .function_style .functionTab .roll:after{font-size:16px; right:20px;}
#function .function_style .functionTab .roll h5{padding:0 0 0 24px;}
#function .function_style .functionTab .roll h5 small{font-size:11px; top:3px;}
#function .function_style .functionCont{width: calc(100% - 200px); padding:0 0 0 20px;}
#function .function_style .functionCont .roll dd{padding:30px 30px 30px 120px;}
#function .function_style .functionCont .roll dd .icon{width: 70px; height: 70px; left:30px; top:30px;} 
#function .function_style .functionCont .roll dd .icon img{width: 60px;}
#function .function_style .functionCont .roll dd .check_list{margin: 8px 0 0;}





/* 포트폴리오 */
#portfolio{}
#portfolio .portfolio_list dl{margin:0 20px 20px 0; width: calc((100% - 60px)/4);}
#portfolio .portfolio_list dl:nth-child(4n){margin-right:0;}
#portfolio .portfolio_list dl dd{padding: 20px;}
#portfolio .portfolio_list dl dd p{margin: 6px 0 0;}
#portfolio .btnArea{margin:30px auto 0;}
#portfolio .btnArea .moreBtn{width:180px;}


/* 서비스 요금 */
#service{}
#service .tableMsg{display: block;}
#service .tablePic{overflow-x: auto;}
#service .table_style{width: 980px;}
#service .table_style th{padding:15px 5px;}
#service .table_style th .price{padding: 6px 0 0;}
#service .table_style th .txt{padding: 6px 0 0;}
#service .table_style td{padding:10px 5px;}
#service .table_style td .material-symbols-outlined{font-size:24px;}
#service .table_style th .hit{border-width:3px; background-size:40px auto;}






/* 데모 체험 */
#demo{}
#demo .demo_list{}
#demo .demo_list dl{flex-wrap:wrap; text-align:center; margin:0 20px 0 0; width: calc((100% - 20px)/2); padding:30px 20px;}
#demo .demo_list dl dt{width: 100%;}
#demo .demo_list dl dt img{max-width:60%;}
#demo .demo_list dl dd{width: 100%; padding:20px 0 0;}
#demo .demo_list dl dd .txt{padding:6px 0 0;}
#demo .demo_list dl dd .moreBtn{margin:20px 0 0;}



/* 문의하기 */
#contact{}
#contact .contact_form{}
#contact .contact_form .contact_input{}
#contact .contact_form .contact_input .box{margin: 0 10px 0 0; width:calc((100% - 10px)/2);}
#contact .contact_form .contact_input .input{height: 40px;}
#contact .contact_form .contact_input .textarea{height: 180px;}
#contact .contact_form .contact_input dl{padding:5px 20px; margin:0 0 10px;}
#contact .contact_form .contact_input dl dt{width: 70px;}
#contact .contact_form .contact_input dl dd{width: calc(100% - 70px);}

#contact .contact_form .contact_input dl.textarea_type{padding:15px 20px; height: 236px;}

#contact .contact_form .contact_agree{margin: 30px 0 0;}
#contact .contact_form .contact_agree .agree_checkbox{width:15px; height:15px; margin:0 6px 0 0;}

/* 개인정보 수집 동의 팝업 */
#agree_popup .agree_popup_wrap{max-width:90%;}
#agree_popup .agree_popup_close{top:-40px;}
#agree_popup .agree_popup_close span{font-size:30px;}
#agree_popup .agree_popup_in{padding:40px 25px;}
#agree_popup .agree_popup_in .titBox{padding: 0 0 20px;}
#agree_popup .agree_popup_in .titBox .txt{padding: 8px 0 0;}
#agree_popup .agree_popup_in .agree_cont{height: calc(100% - 80px); padding:0 20px 0 0;}
#agree_popup .agree_popup_in .agree_cont h5{padding:20px 0 8px;}
#agree_popup .agree_popup_in .agree_cont .txt{padding:0 0 8px;}
#agree_popup .agree_popup_in .agree_cont dl dt{width:130px; padding:10px;}
#agree_popup .agree_popup_in .agree_cont dl dd{width:calc(100% - 130px); padding:10px;}




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

/*** 메인 css 공통 ***/

.titleArea{padding:0 0 30px;}
.titleArea .mTxt{padding:8px 0 0;}

/* 리스트 */
.check_list{}
.check_list > li{padding:0 0 6px 22px;}
.check_list > li:before{font-size:20px; top:0;}




/* visual */
#visual{padding:40px 0 80px; margin: 116px 0 0;}
#visual:before{width:100%; height: 30%; border-radius:0 0 50px 0;}
#visual .visual_in{}
#visual .visual_in .roll{flex-wrap:wrap;}
#visual .visual_in .roll > div{width:100%;}
#visual .visual_in .roll .imgArea{}
#visual .visual_in .roll .txtArea{padding:20px 0 0;}
#visual .visual_in .roll .txtArea .mTxt{padding: 8px 0 0;}
#visual .visual_in .roll .txtArea .btnArea{padding: 20px 0 0;}
#visual .slick-dots{bottom: -40px;}


/* 글로벌 LMS */
#lms{}
#lms .lms_list{width: calc(100% + 12px); margin:0 -6px;}
#lms .lms_list .roll{margin:0 6px;}
#lms .lms_list dl dt{padding: 30px 0 0;}
#lms .lms_list dl dt .frame{padding: 15px;}
#lms .lms_list dl dt .icon{width: 60px;}
#lms .lms_list dl dd{padding:10px 0 0;}
#lms .slick-dots{margin: 20px auto 0;}

/* 특장점 */
#feature{}
#feature .feature_list{flex-wrap:wrap;}
#feature .feature_list dl{margin:0 12px 12px 0; width: calc((100% - 12px)/2); padding:15px;}
#feature .feature_list dl:nth-child(4n){margin-right:12px;}
#feature .feature_list dl:nth-child(2n){margin-right:0;}
#feature .feature_list dl dd .txt{padding: 6px 0 0;}


/* 도입효과 */
#effect{}
#effect .effect_vs{padding: 50px 0 0; flex-wrap:wrap;	}
#effect .effect_vs dl{width: 100%;}
#effect .effect_vs dl.global{padding: 60px 20px 30px; margin: 0 0 20px;}
#effect .effect_vs dl.global:before{display: none;}
#effect .effect_vs dl.global:after{width:60px; height: 60px; right:50%; margin-right: -30px; margin-top: 0; top:auto; bottom: -40px;}
#effect .effect_vs dl.overseas{padding:30px 20px 20px; width:100%;}
#effect .effect_vs dl dt{}
#effect .effect_vs dl.global .introduction_logo{top:-50px; margin-left: -50px; width:100px;}
#effect .effect_vs dl.global dt{padding: 0 0 15px;}
#effect .effect_vs dl.overseas dt{padding:0 0 8px;}
#effect .effect_vs dl dd .effect_check li{padding: 10px;}
#effect .effect_vs dl dd .effect_check li .txt{padding:0 0 0 22px;}
#effect .effect_vs dl dd .effect_check li .txt:before{font-size:20px; top:0;}



/* 주요 기능 */
#function{}
#function .function_style{display: block;}
#function .function_style .functionTab{width: 100%; box-sizing:border-box; background:#fff; border-radius:var(--borderR10); overflow: hidden;}
#function .function_style .functionTab .slick-track{/* width: 100% !important; transform: translate3d(0,0,0) !important; */ display:flex;}
#function .function_style .functionTab .roll{width: auto; height:40px; padding:0 0 0 10px; justify-content: center; text-align:center;}
#function .function_style .functionTab .roll:after{display: none;}
#function .function_style .functionTab .roll h5{padding:0 0 0 20px;}
#function .function_style .functionTab .roll h5 small{top:1px;}
#function .function_style .functionCont{width:100%; padding:10px 0 0;}
#function .function_style .functionCont .roll dd{padding:20px 20px 20px 80px;}
#function .function_style .functionCont .roll dd .icon{width: 50px; height: 50px; left:20px; top:20px;} 
#function .function_style .functionCont .roll dd .icon img{width: 40px;}
#function .function_style .functionCont .roll dd .check_list{margin: 6px 0 0;}

/* 포트폴리오 */
#portfolio{}
#portfolio .portfolio_list dl{margin:0 16px 16px 0; width: calc((100% - 16px)/2);}
#portfolio .portfolio_list dl:nth-child(4n){margin-right:16px;}
#portfolio .portfolio_list dl:nth-child(2n){margin-right:0;}
#portfolio .portfolio_list dl dd{padding: 15px;}
#portfolio .portfolio_list dl dd p{margin: 4px 0 0;}
#portfolio .btnArea{margin:15px auto 0;}
#portfolio .btnArea .moreBtn{width:160px;}






/* 데모 체험 */
#demo{}
#demo .demo_list{}
#demo .demo_list dl{margin:0 0 10px; width: 100%;}
#demo .demo_list dl dd .moreBtn{margin:15px 0 0;}



/* 문의하기 */
#contact{}
#contact .contact_form{}
#contact .contact_form .contact_input{flex-wrap:wrap;}
#contact .contact_form .contact_input .box{margin: 0 0 5px; width:100%;}
#contact .contact_form .contact_input .input{height: 40px;}
#contact .contact_form .contact_input .textarea{height: 140px;}
#contact .contact_form .contact_input dl{padding:5px 15px; margin:0 0 5px;}
#contact .contact_form .contact_input dl dt{width: 60px;}
#contact .contact_form .contact_input dl dd{width: calc(100% - 60px);}

#contact .contact_form .contact_input dl.textarea_type{padding:15px 15px; height: 200px;}
#contact .contact_form .contact_input dl.textarea_type dt{margin: 0 0 6px;}
#contact .contact_form .contact_input dl.textarea_type dd{}

#contact .contact_form .contact_agree{margin: 20px 0 0;}
#contact .contact_form .contact_agree .agree_checkbox{width:13px; height:13px; margin:-2px 6px 0 0;}
#contact .contact_form .contact_btn{margin:15px auto 0;}


}
/*******************************************************************************
@media 480px
******************************************************************************/
@media all and (max-width:480px){


}