@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;}
.sTit{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%; letter-spacing: -0.54px;}

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

/* 버튼 */
.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); border:0;}
.moreBtn.whiteBtn:before{background:var(--main);}
.moreBtn.whiteBtn:after{color:var(--main);}
.moreBtn.whiteBtn font{color:var(--main);}

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

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



/* visual */
#visual{position: relative; width: 100%; height:900px; overflow:hidden; background:var(--black);}
#visual .visual_in{position:relative; width:100%; height:100%; 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{position:absolute; left:0; top:0; width:100%; height:900px;}
#visual .visual_in .roll .v_cont{display:flex; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:9999;}
#visual .visual_in .roll .v_cont > div{box-sizing:border-box; width:50%;}
#visual .visual_in .roll .v_cont .imgArea{text-align:left; transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0; padding:0 50px 0 0;}
#visual .visual_in .roll .v_cont .imgArea img{max-width:100%; animation: bounce 7s linear infinite;}
#visual .visual_in .roll .v_cont .txtArea{display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#visual .visual_in .roll .v_cont .txtArea h3{font-size:var(--fs26); font-weight: 600; color:var(--white); letter-spacing: -1.3px; line-height:120%; padding:0 0 8px; transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_cont .txtArea h2{font-size:var(--fs56); font-weight: 700; color:var(--white); letter-spacing: -3.92px; line-height:120%; transition:all .6s 0.6s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_cont .txtArea .mTxt{padding:20px 0 0; color:var(--white); transition:all .6s 0.9s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_cont .txtArea .btnArea{display:flex; padding:60px 0 0; transition:all .6s 1.2s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_cont .txtArea .btnArea .moreBtn{margin:0 10px 0 0;}
#visual .visual_in .roll .v_cont .txtArea .btnArea .moreBtn:last-child{margin:0;}
#visual .visual_in .roll .v_bg{position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}

#visual .visual_in .roll.action .v_cont .imgArea{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_cont .txtArea h3{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_cont .txtArea h2{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_cont .txtArea .mTxt{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_cont .txtArea .btnArea{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}

#visual .slick-dots{font-size:0; text-align:center; position: absolute; left: 50%; bottom: 40px; 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;}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}




/* 주요 기능 */
#function{overflow: hidden;}
#function .function_style{}
#function .function_style.mobile{display: none;}
#function .function_style .function_style_in{display: flex; flex-wrap:wrap;}
#function .function_style .roll{width: auto; height: auto; padding:50px; box-sizing:border-box; background:var(--white); border-radius:var(--borderR20); box-shadow: 30px 30px 50px 0px rgba(0, 0, 0, 0.08); margin: 0 30px 30px 0; width: calc((100% - 60px)/3); position: relative; transition:all .3s linear;}
#function .function_style .roll:nth-child(3n){margin-right:0;}
#function .function_style .roll:nth-child(1),
#function .function_style .roll:nth-child(3),
#function .function_style .roll:nth-child(4),
#function .function_style .roll:nth-child(6){top:70px;}
#function .function_style .roll small{display:block; font-size:0.938rem; color:var(--main); font-weight:900; line-height:120%; padding:0 0 6px; transition:all .3s linear;}
#function .function_style .roll .sTit{transition:all .3s linear;}
#function .function_style .roll .txt{padding:16px 0 70px; transition:all .3s linear;}
#function .function_style .roll .icon{display: flex; justify-content: flex-end;}
#function .function_style .roll img{width: 150px;}

#function .function_style .roll:hover{background:var(--main);}
#function .function_style .roll:hover .sTit{color:var(--white);}
#function .function_style .roll:hover small{color:var(--white);}
#function .function_style .roll:hover .txt{color:var(--white);}




/* 고객 사례 */
#case{overflow:hidden;}
#case .case_roll{margin:0 -15px; width:calc(100% + 30px);}
#case .case_roll .roll{margin:0 15px; border: 1px solid var(--border); border-radius:var(--borderR20); overflow: hidden;}
#case .case_roll .roll dt{position:relative; aspect-ratio: 3 / 2; overflow: hidden; transition:all .3s linear;}
#case .case_roll .roll dt img{display: block; width: 100%; height: 100%; object-fit: cover; transition:all .4s linear;}
#case .case_roll .roll:hover dt img{transform:scale(1.1);}
#case .case_roll .roll dd{box-sizing:border-box; padding:40px; position:relative;}
#case .case_roll .roll dd .home{display: block; position: absolute; right:47px; top:-30px; z-index: 2; width:60px; height:60px; border-radius:50%; box-shadow: 0px 10px 15px 0px rgba(21, 46, 146, 0.20);}
#case .case_roll .roll dd .home:before{content:''; display:block; width:74px; height:74px; border-radius:50%; position:absolute; left:50%; top:50%; margin-left: -37px; margin-top: -37px; opacity: 0.2; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.10); background:var(--main); transition:all .3s linear;}
#case .case_roll .roll dd .home:hover:before{transform: scale(2); opacity: 0; transition:all .5s linear;}
#case .case_roll .roll dd .home img{width:100%; position: relative; z-index: 3;}
#case .case_roll .roll dd small{font-size:var(--fs18); font-weight: 600; color:var(--main); line-height:120%; letter-spacing: -0.54px; margin:0 0 8px; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#case .case_roll .roll dd .sTit{line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#case .case_roll .roll dd p{font-size:1rem; letter-spacing:-0.35pt; line-height: 120%; margin: 10px 0 0; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}


#case .slick-arrow{padding:0; font-size:0; border:0; background:none; outline:none; cursor:pointer; width:40px; height:40px; box-sizing:border-box; position: absolute; top:50%; margin-top: -20px; z-index:9991; transition:all .3s linear; opacity: 0.5;}
#case .slick-arrow:hover{opacity: 1;}
#case .slick-prev{left: -75px;}
#case .slick-next{right: -75px;}
#case .slick-arrow:after{display:block; width: 40px; height:40px; line-height:40px; font-size:40px; text-align:center; color:var(--black); position:absolute; left:0; top:0; transition:all .3s linear; font-family: "Material Symbols Outlined";}
#case .slick-arrow.slick-prev:after{content:'\e5e1'; transform:rotate(180deg);}
#case .slick-arrow.slick-next:after{content:'\e5e1';}


/* 요금 안내 */
#charge{}
#charge .charge_style{display: flex;}
#charge .charge_style .box{margin:0 30px 0 0; width:calc((100% - 60px)/3); background:var(--white); border-radius:var(--borderR20); box-shadow: 30px 30px 50px 0px rgba(0, 0, 0, 0.08); box-sizing:border-box; text-align:center; padding:60px 50px; display: flex; flex-direction: column; justify-content: space-between;}
#charge .charge_style .box:last-child{margin:0;}
#charge .charge_style .box .charge_cate{display: inline-block; margin: 0 auto 10px; padding:0 16px; box-sizing:border-box; line-height: 30px; font-size:13px; font-weight: 700; border-radius:var(--borderR5);}
#charge .charge_style .box h4{font-size:var(--fs36); font-weight: 700; color:var(--black); line-height:120%; letter-spacing: -1.8px;}
#charge .charge_style .box .charge_txt{padding:8px 0 0; font-size:var(--fs24); font-weight: 700; letter-spacing: -0.72px; line-height:120%;}
#charge .charge_style .box .charge_data{padding: 50px 0 0; text-align:left;}
#charge .charge_style .box .charge_data li{display: flex; justify-content: space-between; padding:0 0 6px;}
#charge .charge_style .box .charge_data li:last-child{padding:0;}
#charge .charge_style .box .charge_data li strong{display: inline-block; font-size:var(--fs18); font-weight: 600; color:var(--black); letter-spacing: -0.54px; line-height:150%; padding: 0 10px 0 0;}
#charge .charge_style .box .charge_data li p{font-size:var(--fs18); letter-spacing: -0.54px; line-height:150%;}
#charge .charge_style .box .charge_data li.mobileApp strong{color:var(--sub);}
#charge .charge_style .box .charge_data li.mobileApp p{color:var(--sub);}
#charge .charge_style .box .charge_data li.mobileApp .iphone{display: inline-block; vertical-align: middle; margin: 0 5px 0 0; font-size:18px;}
#charge .charge_style .box .excess_cost{margin: 60px 0 0; overflow: hidden; border-radius:var(--borderR5); background:var(--grayBg);} 
#charge .charge_style .box .excess_cost dt{padding:10px 0; font-size:var(--fs18); font-weight:600; color:var(--white);}
#charge .charge_style .box .excess_cost dd{text-align:left; padding:15px 25px; box-sizing:border-box;}
#charge .charge_style .box .excess_cost dd ul{}
#charge .charge_style .box .excess_cost dd ul li{display: flex; justify-content: space-between; padding:0 0 4px;}
#charge .charge_style .box .excess_cost dd ul li:last-child{padding:0;}
#charge .charge_style .box .excess_cost dd ul li strong{display: inline-block; font-size:1rem; font-weight: 600; color:var(--black); letter-spacing: -0.54px; line-height:150%; padding: 0 10px 0 0;}
#charge .charge_style .box .excess_cost dd ul li p{font-size:1rem; letter-spacing: -0.54px; line-height:150%;}
#charge .charge_style .box .excess_cost dd ul li p small{display: inline-block; font-size:13px; color:#E32D6F; line-height: 150%; margin-left: 2px;}
#charge .btnArea{padding:60px 0 0; text-align:center;}

#charge .charge_style .box.starter .charge_cate{background:rgba(73,196,148,.15); color:var(--green);}
#charge .charge_style .box.starter .charge_txt{color:var(--green);}
#charge .charge_style .box.starter .excess_cost dt{background:var(--green);}
#charge .charge_style .box.standard .charge_cate{background:rgba(15,145,208,.15); color:var(--main);}
#charge .charge_style .box.standard .charge_txt{color:var(--main);}
#charge .charge_style .box.standard .excess_cost dt{background:var(--main);}
#charge .charge_style .box.professional .charge_cate{background:rgba(115,89,255,.15); color:var(--sub);}
#charge .charge_style .box.professional .charge_txt{color:var(--sub);}
#charge .charge_style .box.professional .excess_cost dt{background:var(--sub);}


/* 포트폴리오 */
#portfolio{overflow: hidden;}
#portfolio .slick-list{overflow:visible;}
#portfolio .portfolio_roll{margin:0 -15px; width:calc(100% + 30px);}
#portfolio .portfolio_roll .roll{margin: 0 15px; position: relative; border-radius:20px 20px 0 20px; overflow: hidden;}
#portfolio .portfolio_roll .roll:after{content:''; display:block; width:98px; height:98px; background:url('../../img/portfolio_deco.png') no-repeat center/100% auto; position:absolute; right:0; bottom:0;}
#portfolio .portfolio_roll .roll dt{position:relative; aspect-ratio: 1 / 1; overflow: hidden; transition:all .3s linear;}
#portfolio .portfolio_roll .roll dt:after{content:''; display:block; width:100%; height:100%; background: linear-gradient(180deg, rgba(34, 34, 34, 0.00) 50%, rgba(0, 0, 0, 0.60) 100%); position:absolute; left:0; bottom:0;}
#portfolio .portfolio_roll .roll dt img{display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition:all .4s linear;}
#portfolio .portfolio_roll .roll:hover dt img{transform:scale(1.1);}
#portfolio .portfolio_roll .roll.slick-active dt img{opacity: 1;}
#portfolio .portfolio_roll .roll dd{position:absolute; left:0; bottom:0; box-sizing:border-box; padding:40px 80px 40px 40px; width:100%; z-index: 2;}
#portfolio .portfolio_roll .roll dd .sTit{color:var(--white); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#portfolio .portfolio_roll .roll dd .btn{display:flex; align-items:center; justify-content:center; width:60px; height:60px; font-size:0; border-radius:50%; background:var(--black); position: absolute; right:0; bottom:0; transition:all .3s linear;}
#portfolio .portfolio_roll .roll dd .btn:hover{background:var(--main);}
#portfolio .portfolio_roll .roll dd .btn span{display: block; font-size:24px; color:var(--white); display:block;}
#portfolio .btnArea{padding:60px 0 0; text-align:center;}

#portfolio .slick-arrow{padding:0; font-size:0; border:0; background:none; outline:none; cursor:pointer; width:40px; height:40px; box-sizing:border-box; position: absolute; top:-125px; z-index:9991; transition:all .3s linear; opacity: 0.5;}
#portfolio .slick-arrow:hover{opacity: 1;}
#portfolio .slick-prev{left: 15px;}
#portfolio .slick-next{right: 15px;}
#portfolio .slick-arrow:after{display:block; width: 40px; height:40px; line-height:40px; font-size:40px; text-align:center; color:var(--black); position:absolute; left:0; top:0; transition:all .3s linear; font-family: "Material Symbols Outlined";}
#portfolio .slick-arrow.slick-prev:after{content:'\e5e1'; transform:rotate(180deg);}
#portfolio .slick-arrow.slick-next:after{content:'\e5e1';}



/* 데모 체험 */
#demo{}
#demo .demo_style{display:flex;}
#demo .demo_style dl{margin:0 30px 0 0; width:calc((100% - 30px)/2); display:flex; align-items:center; padding:60px; box-sizing:border-box; border-radius:var(--borderR20); background:rgba(15,145,208,.1);}
#demo .demo_style dl.admin{background:rgba(15,145,208,.1);}
#demo .demo_style dl.user{background:rgba(115,89,255,.1);}
#demo .demo_style dl:last-child{margin: 0;}
#demo .demo_style dl dt{width: 220px;}
#demo .demo_style dl dt img{width: 100%;}
#demo .demo_style dl dd{width: calc(100% - 220px); padding:0 0 0 60px; box-sizing:border-box;}
#demo .demo_style dl dd h4{font-size:var(--fs28); color:var(--black); font-weight: 700; line-height: 120%; letter-spacing: -1.4px;}
#demo .demo_style dl dd .txt{padding: 10px 0 0;}
#demo .demo_style dl dd .demoBtn{margin:30px 0 0; display:block; max-width:220px; width:100%; height:60px; line-height:58px; box-sizing:border-box; text-align:center; font-size:var(--fs18); letter-spacing: -0.35pt; font-weight: 700; color:var(--white); background:var(--main); border:1px solid var(--main); border-radius:var(--borderR5); transition:all .3s linear;}
#demo .demo_style dl.admin dd .demoBtn{background:var(--main); border-color:var(--main);}
#demo .demo_style dl.admin dd .demoBtn:hover{background:none; color:var(--main);}
#demo .demo_style dl.user dd .demoBtn{background:var(--sub); border-color:var(--sub);}
#demo .demo_style dl.user dd .demoBtn:hover{background:none; color:var(--sub);}
#demo .demo_style dl dd .demoBtn span{display: inline-block; vertical-align: middle; color:inherit; margin:-2px 8px 0 0; font-size:24px; font-weight: 400;}


/* 문의하기 */
#contact{position: relative; overflow: hidden;}
#contact .bg{position: absolute; left:0; top:0; width: 100%; height:100%; z-index: -1; background:url('../../img/contact_bg.jpg.jpeg') no-repeat center/cover; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#contact.action .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#contact .mTit{color:var(--white);}
#contact .mTxt{color:var(--white);}
#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: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(--white); letter-spacing:-0.35pt; line-height:120%;}
#contact .contact_form .contact_agree .agree_txt b{color:var(--white); 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);}




/* gray */

.grayscale {

/* Firefox 10-34 */

filter: data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale;

/*

Chrome 19+,

Safari 6+,

Safari 6+ iOS,

Opera 15+

*/

-webkit-filter: grayscale(1);

/* Firefox 35+ */

filter: grayscale(1);

/* IE 6-9 */

filter: gray;

}

.grayscale.grayscale-fade {

transition: filter .5s;

}

/* Webkit hack until filter is unprefixed */

@media screen and (-webkit-min-device-pixel-ratio: 0) {

.grayscale.grayscale-fade {

-webkit-transition: -webkit-filter .5s;

transition:         -webkit-filter .5s;

}

}

.grayscale.grayscale-off,

.grayscale.grayscale-fade:hover {

-webkit-filter: grayscale(0);

filter:         grayscale(0);

}

/* Background element */

.grayscale.grayscale-replaced {

-webkit-filter: none;

filter:         none;

}

.grayscale.grayscale-replaced > svg {

-webkit-transition: opacity .5s ease;

transition:         opacity .5s ease;

opacity: 1;

}

.grayscale.grayscale-replaced.grayscale-off > svg,

.grayscale.grayscale-replaced.grayscale-fade:hover > svg {

opacity: 0;

}




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


/* 고객 사례 */
#case{}
#case .titleArea{padding: 0 50px 50px; box-sizing:border-box;}
#case .slick-arrow{top:-125px; margin-top: 0;}
#case .slick-prev{left: 15px;}
#case .slick-next{right: 15px;}

}

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



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

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

/* Platform 섹션에서는 br 태그 표시 */
#platform .mTxt br{display: block;}


/* 데모 체험 */
#demo{}
#demo .demo_style{}
#demo .demo_style dl{padding:50px;}
#demo .demo_style dl dd{padding:0 0 0 40px;}


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





/* 주요 기능 */
#function .function_style{}
#function .function_style .roll{padding:40px;}
#function .function_style .roll .txt{padding:16px 0 50px;}
#function .function_style .roll img{width: 120px;}

/* 고객 사례 */
#case{}
#case .case_roll .roll dd{padding:30px;}
#case .case_roll .roll dd .home{right:20px; top:-25px; width:50px; height:50px;}
#case .case_roll .roll dd .home:before{width:64px; height:64px; margin-left: -32px; margin-top: -32px;}
#case .slick-arrow{top:-110px;}


/* 요금 안내 */
#charge{}
#charge .charge_style{}
#charge .charge_style .box{padding:50px 40px;}
#charge .charge_style .box .charge_data{padding: 40px 0 0;}
#charge .charge_style .box .excess_cost{margin: 50px 0 0;} 
#charge .charge_style .box .excess_cost dd{padding:15px;}



/* 포트폴리오 */
#portfolio .slick-arrow{top:-110px;}



/* 데모 체험 */
#demo{}
#demo .demo_style{}
#demo .demo_style dl{padding:40px;}
#demo .demo_style dl dt{width: 150px;}
#demo .demo_style dl dd{width: calc(100% - 150px); padding:0 0 0 30px;}
#demo .demo_style dl dd .demoBtn{margin:20px 0 0; height:50px; line-height:48px;}
#demo .demo_style dl dd .demoBtn span{margin:-2px 6px 0 0; font-size:20px;}



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


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


/* 버튼 */
.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{height:700px;}
#visual .visual_in .roll{height:700px;}
#visual .visual_in .roll .v_cont{}
#visual .visual_in .roll .v_cont .imgArea{padding:0 30px 0 0;}
#visual .visual_in .roll .v_cont .imgArea img{max-width:90%;}
#visual .visual_in .roll .v_cont .txtArea{}
#visual .visual_in .roll .v_cont .txtArea h3{padding:0 0 6px;}
#visual .visual_in .roll .v_cont .txtArea h2{letter-spacing:-1.8pt;}
#visual .visual_in .roll .v_cont .txtArea .mTxt{padding:15px 0 0;}
#visual .visual_in .roll .v_cont .txtArea .btnArea{padding:40px 0 0;}
#visual .visual_in .roll .v_cont .txtArea .btnArea .moreBtn{margin:0 5px 0 0;}
#visual .slick-dots{bottom: 30px;}





/* 주요 기능 */
#function .function_style{}
#function .function_style .roll{padding:30px; margin: 0 20px 20px 0; width: calc((100% - 40px)/3);}
#function .function_style .roll:nth-child(3n){margin-right:0;}
#function .function_style .roll:nth-child(1),
#function .function_style .roll:nth-child(3),
#function .function_style .roll:nth-child(4),
#function .function_style .roll:nth-child(6){top:50px;}
#function .function_style .roll .txt{padding:12px 0 30px;}
#function .function_style .roll img{width: 100px;}


/* 고객 사례 */
#case{}
#case .titleArea{padding: 0 40px 40px;}
#case .case_roll{margin:0 -10px; width:calc(100% + 20px);}
#case .case_roll .roll{margin:0 10px;}
#case .case_roll .roll dd{padding:20px;}
#case .case_roll .roll dd .home{top:-20px; width:40px; height:40px;}
#case .case_roll .roll dd .home:before{width:52px; height:52px; margin-left: -26px; margin-top: -26px;}
#case .case_roll .roll dd small{margin:0 0 6px;}
#case .case_roll .roll dd p{margin: 8px 0 0;}

#case .slick-arrow{width:30px; height:30px; top:-80px;}
#case .slick-prev{left: 10px;}
#case .slick-next{right: 10px;}
#case .slick-arrow:after{width: 30px; height:30px; line-height:30px; font-size:30px;}


/* 요금 안내 */
#charge{}
#charge .charge_style{flex-wrap:wrap;}
#charge .charge_style .box{margin:0 0 20px; width:100%; padding:40px 30px;}
#charge .charge_style .box .charge_cate{padding:0 12px; line-height: 26px; font-size:12px;}
#charge .charge_style .box .charge_txt{padding:6px 0 0;}
#charge .charge_style .box .charge_data{padding: 20px 0 0;}
#charge .charge_style .box .charge_data li.mobileApp .iphone{font-size:16px;}
#charge .charge_style .box .excess_cost{margin: 30px 0 0;} 
#charge .charge_style .box .excess_cost dt{padding:8px 0;}
#charge .charge_style .box .excess_cost dd ul li p small{font-size:12px;}
#charge .btnArea{padding:40px 0 0;}


/* 포트폴리오 */
#portfolio .portfolio_roll{margin:0 -10px; width:calc(100% + 20px);}
#portfolio .portfolio_roll .roll{margin: 0 10px;}
#portfolio .portfolio_roll .roll:after{width:80px; height:80px;}
#portfolio .portfolio_roll .roll dd{padding:30px 80px 30px 30px;}
#portfolio .portfolio_roll .roll dd .btn{width:50px; height:50px;}
#portfolio .portfolio_roll .roll dd .btn span{font-size:20px;}
#portfolio .btnArea{padding:40px 0 0;}
#portfolio .slick-arrow{width:30px; height:30px; top:-90px;}
#portfolio .slick-prev{left: 10px;}
#portfolio .slick-next{right: 10px;}
#portfolio .slick-arrow:after{width: 30px; height:30px; line-height:30px; font-size:30px;}


/* 데모 체험 */
#demo{}
#demo .demo_style{}
#demo .demo_style dl{margin:0 20px 0 0; width:calc((100% - 20px)/2); padding:20px 30px 30px; flex-wrap:wrap; text-align:center;}
#demo .demo_style dl dt{width: 150px; margin: 0 auto;}
#demo .demo_style dl dd{width: 100%; padding:20px 0 0;}
#demo .demo_style dl dd .txt{padding: 8px 0 0;}
#demo .demo_style dl dd .demoBtn{margin:20px auto 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;}

/* visual */
#visual{height:auto;}
#visual .visual_in .roll{height:auto; padding:150px 0 80px;}
#visual .visual_in .roll .v_cont{flex-wrap:wrap; position: relative; left:auto; top:auto; transform:translate(0,0);}
#visual .visual_in .roll .v_cont > div{width:100%;}
#visual .visual_in .roll .v_cont .imgArea{padding:0 0 20px; text-align:center;}
#visual .visual_in .roll .v_cont .imgArea img{max-width:50%;}
#visual .visual_in .roll .v_cont .txtArea{}
#visual .visual_in .roll .v_cont .txtArea h3{padding:0 0 6px;}
#visual .visual_in .roll .v_cont .txtArea .mTxt{padding:10px 0 0;}
#visual .visual_in .roll .v_cont .txtArea .btnArea{padding:20px 0 0;}
#visual .visual_in .roll .v_cont .txtArea .btnArea .moreBtn{margin:0 5px 0 0;}
#visual .slick-dots{bottom: 20px;}
#visual .slick-dots li{width:8px; height:8px; margin: 0 5px 0 0;}
#visual .slick-dots li.slick-active{width: 30px;}





/* 주요 기능 */
#function .function_style.pc{display: none !important;}
#function .function_style.mobile{display: block;}
#function .function_style.mobile{display: block; margin: 0 -20px 0 0; width: calc(100% + 20px);}
#function .function_style .roll{padding:30px; margin: 0 20px 0 0 !important; width:80%;}
#function .function_style .roll:nth-child(1),
#function .function_style .roll:nth-child(3),
#function .function_style .roll:nth-child(4),
#function .function_style .roll:nth-child(6){top:0;}
#function .function_style .roll .txt{padding:10px 0 30px;}
#function .function_style .roll img{width: 70px;}




/* 고객 사례 */
#case{}
#case .titleArea{padding: 0 0 30px;}
#case .case_roll{padding:0 50px; box-sizing:border-box;}
#case .case_roll .roll{opacity: 0.5;}
#case .case_roll .roll.slick-active{opacity: 1;}
#case .slick-list{overflow: visible;}
#case .slick-arrow{width:20px; height:20px; top:auto; bottom: -40px;}
#case .slick-arrow:after{width: 20px; height:20px; line-height:20px; font-size:20px;}

#case .slick-prev{left: 50%; margin-left: -30px;}
#case .slick-next{right: 50%; margin-right: -30px;}


/* 요금 안내 */
#charge{}
#charge .charge_style .box{padding:30px;}
#charge .charge_style .box .charge_cate{margin: 0 auto 6px; padding:0 10px;}
#charge .btnArea{padding:30px 0 0;}



/* 포트폴리오 */
#portfolio .portfolio_roll{box-sizing:border-box; padding:0 50px;}
#portfolio .portfolio_roll .roll:after{width:60px; height:60px;}
#portfolio .portfolio_roll .roll dd{padding:20px 60px 20px 20px;}
#portfolio .portfolio_roll .roll dd .btn{width:40px; height:40px;}
#portfolio .portfolio_roll .roll dd .btn span{font-size:16px;}
#portfolio .btnArea{padding:60px 0 0;}
#portfolio .slick-arrow{width:20px; height:20px; top:auto; bottom: -40px;}
#portfolio .slick-prev{left: 50%; margin-left: -30px;}
#portfolio .slick-next{right: 50%; margin-right: -30px;}
#portfolio .slick-arrow:after{width: 20px; height:20px; line-height:20px; font-size:20px;}



/* 데모 체험 */
#demo{}
#demo .demo_style{flex-wrap:wrap;}
#demo .demo_style dl{margin:0 0 20px; width:100%;}
#demo .demo_style dl dt{width: 150px;}
#demo .demo_style dl dd{width: 100%; padding:20px 0 0;}
#demo .demo_style dl dd .demoBtn{height:45px; line-height:43px;}





/* 문의하기 */
#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){


/* 고객 사례 */
#case{}
#case .case_roll{padding:0 30px;}

/* 포트폴리오 */
#portfolio .portfolio_roll{padding:0 30px;}

}