/****************** Fonts ******************/
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareNeo-Variable';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/****************** Common & Reset ******************/
*{ margin:0; padding:0;}
body{font-family: 'Poppins','Pretendard-Regular', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: #333;}
a{cursor: pointer; color:inherit; -moz-transition:0.3s;
    -o-transition:0.3s;
    -webkit-transition:0.3s;
    transition:0.3s; }
a,a:focus, a:active{color:inherit;color:inherit;
    text-decoration:none;}
img { border:0;}
li, ul, ol{list-style: none;}
.fl{float: left  !important;}
.fr{float: right !important;}
.width-100{width: 100%;}


/****************** Text ******************/
.text-left{text-align:left;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.en{letter-spacing: .5px;}
.font-weight-normal{font-weight: normal;}
.font-weight-bold{font-weight: bold;}
strong{font-weight: bold;}

h2{font-size: 41px;font-weight: normal;}
h3{font-size: 30px;font-weight: normal;}
h4{font-size: 28px; font-weight: normal;}
h5{font-size: 24px; font-weight: normal;}
b{font-weight: 600;}
.point-font-color{color: #717eea;}
.text-underline{text-decoration: underline;}

.lsp_en{letter-spacing: 0.01em; font-family: 'poppins,san-serif';}
.col-blue{  color: #2f62cc; font-weight: 500;}
.col-fff{color:#ffffff;}
.underline{  display: block; height: 1px;  background: #2f62cc;  margin: 0 auto;   width: 80px;  position: relative; bottom: 3px;} 

input:focus, textarea:focus{outline:none;border-color: #4a5df7 !important;}
input,select,textarea {  -webkit-appearance: none;  -webkit-border-radius: 0;}
button{font-family: 'Poppins','Pretendard-Regular', sans-serif;outline: 0;}
select {outline: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url(/manager/themes/images/intro/droparrow.png) no-repeat 97% 50%;
        border-color: #b9b9b9;} 
select::-ms-expand { display: none; }/* IE 10, 11*/
textarea::placeholder, input:placeholder{
    color: #9ea4aa;
    font-family: 'Pretendard-Regular', sans-serif !important;
	letter-spacing:-.5px;
	font-size: 14px;
	line-height: 34px;
}

/************************************************************************ 
Page Loader
************************************************************************/
.loaderWrap{
    /*display: none;*/
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;}
.loader {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid #303333;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    margin: 450px auto;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}/* Safari */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/************************************************************************ 
Custom Scrollbar
************************************************************************/
.scrollbox::-webkit-scrollbar { width: 8px;} /* width */ 
.scrollbox::-webkit-scrollbar-track { background: transparent;} /* Track */
.scrollbox::-webkit-scrollbar-thumb {  background: #ddd; border-radius:50px;}/* Handle */
.scrollbox::-webkit-scrollbar-thumb:hover { background: #eee;} /* Handle on hover */


/************************************************************************ 
Buttons
************************************************************************/
.round{  display: inline-block; border-radius: 50px; padding: 0px 17px; height: 37px;  line-height: 36px;  width: 82px; text-align: center;  font-weight: normal;}
.round.white{color: transparent; background: #ffffff; border:1px solid #2f62cc; color: #2f62cc;}
.round.gray{color: #484848; background: #ffffff; border: 1px solid #b1b1b1;}
.round.black{color: #ffffff; background: #333333; border: 1px solid #333333;}


/************************************************************************ 
Custom Checkbox
************************************************************************/
.check{ padding: 15px 10px 0 0; border-top: 1px solid #ddd;}
input[type=checkbox]{display: none;}
input[type=checkbox]+label{display: inline-block;cursor: pointer;vertical-align: middle;position: relative;top: -2px;}
input[type=checkbox]+label span{ display: inline-block;  width: 20px;  height: 20px; background-image: url(../images/chk_bg.png);  background-position: left top;    vertical-align: middle;  background-size: 40px 20px;  margin-right: 5px;}
input[type=checkbox]:checked + label span{background-position: right top;}
.check label{cursor:pointer;font-size: 14px;}

/*Button*/
.btnGroup{padding-top: 92px; display:flex;} 
.btnGroup a{display: block; margin: 0 5px; font-size: 18px; padding: 12px 45px;}
.btnGroup a:focus, .btnGroup a:active{color:#fff;}
.square-blue{background: #3047FF; border: 1px solid #3047FF; color: #fff; font-size: 18px;  font-weight: 400;}
.line-white{background: transparent; border:1px solid #eee; color:#fff;}


/************************************************************************ 
Header
************************************************************************/
header{font-size: 15px;  width: 100%; height: 80px;  line-height: 80px;  float: left; display: flex;  box-sizing: border-box; position: fixed; top: 0;  z-index: 1; font-weight: 700;  border-bottom: 1px solid #eeeeee33; }
.hdWrap{width: 100%;  height: 100%;  padding: 0;  box-sizing: border-box; display: block; justify-content: space-between;  }
header:hover .hdWrap{ background: #ffffff;  border-bottom: 1px solid #dddddd;}
header:hover .logo, header:hover #gnb li a{color:#000 !important;}
header.outstanding .logo1 {display:inline-block;}
header.outstanding .logo2 {display:none;}
header .logo1 {display:none;}
header .logo2 {display:inline-block;}
header:hover .logo2 {display:none;}
header:hover .logo1 {display:inline-block;}
/*width: 60%;*/
ul#gnb{ display: flex; justify-content: flex-end; float: left;}
.hd-logo{width: 30%; margin: 0 auto;  display: block; font-size: 18px;  font-family: 'Poppins', sans-serif;}

/*navigation*/
#gnb li{ float: left; margin-right: 16px; text-align: center;  width: 100px; position: relative;}
#gnb li a{ text-align: center; display: inline-block; font-size: 17px; color:#fff; font-weight: 500; }
#gnb span{ display: none; width: 0px; height: 2px; background: #7b97d6;  position: absolute;  bottom: 0; left: 27px;}
#gnb li:hover span{ display: block; width: 45px; display:none;}
#gnb li:hover {color:#2f62cc;}
#snb{float: right;}
#snb li { float: left; margin-left: 38px; margin-right: 38px;  cursor: pointer;}
.loginBtn{ color: #fff; background: #000; padding: 8px 30px; border-radius: 50px;}
.loginBtn:focus, .loginBtn:active{color:#fff;}

/* header outstanding*/
#hd.outstanding{ background: #ffffff;  transition: 0.3s;  border: none; }
#hd.outstanding .hdWrap{ border-bottom: 1px solid #dddddd;}
#hd.outstanding .logo, #hd.outstanding #gnb li a{color:#000;}
.home{ float: left; display: inline-block;  height: 80px; line-height: 75px; margin-left:20px; }
.home img { width:210px; position:absolute; top:50%; transform:translateY(-50%);}
.logo{ font-size: 24px;  font-weight: 700; display: block;  margin-right: 100px; letter-spacing: .5px; color:#fff;}

.detail { width: 100%; margin: 0 auto; clear:both;}
.detail > h1{text-align: center;padding: 120px 0 55px;font-size: 33px;font-weight: 100;font-family: 'NanumSquareNeo-Variable';}
.detail > h1 span{font-family: 'GmarketSansMedium';color: #000;}
.detail > h1 span.en{ font-weight: bold; font-size: 35px;}
.detail .imgbox { clear: both;width: 1280px;margin: 0 auto; text-align:center;}
.detail .imgbox_100 { clear: both;width: 100%;margin: 0 auto; text-align:center;}
.imgbox img, .imgbox_100 img {max-width:100%; image-rendering: -webkit-optimize-contrast;}

/* Tablet, mobile header*/
#qGnb{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
#md-hd{ display: none; z-index: 1; position: fixed; height: 50px; line-height: 45px; background-color: rgba(255, 255, 255, 1); left: 0; top: 0; width: 100%; z-index: 1; text-align: center; font-size: 24px; }
#md-hd .nav-icon{display:none !important; width: 40px; height: 40px;  z-index: 2;  text-align: center;  line-height: 40px;  font-size: 16px;  cursor: pointer;  position: absolute; left: 0; top: 0;}
#md-hd .md-login{ display: inline-block; background: none;  border: none;  height: 40px;  line-height: 40px;  padding-right: 10px;  cursor: pointer; font-size: 14px; position: absolute;  right: 0; top: 0;font-family: 'NanumSquareNeo-Variable';}
#m-quick{display: none;position: fixed;width: 100%;height: 42px;line-height: 42px;background: #ffffff;border-bottom: 1px solid #ededed;z-index: 1;}
#m-quick li{float: left;width: 33.3333%;text-align: center;color: #9c9c9c;font-weight: 500;font-size: 16px;flex: 0 0 auto;}
#m-quick li.active{ color: #333333; border-bottom: 2px solid #333;}

/* Mobile Toggle Ver.2018
#m-nav{ display: none; position: fixed;  top: 70px;  background: #ffffff;  z-index: 1;  width: 100%;}
#m-nav ul{}
#m-nav li{ background: #e2d1c0; height: 45px; line-height: 45px;  text-indent: 20px;  border-bottom: 1px solid #c1b5a9;}
#m-nav li a{color: #333333;  display: block;}
.m-cs{ clear: both; background: #292929;  width: 100%;   padding: 20px;  box-sizing: border-box;  color: #d0d0d0; height: 130px; font-size: 12px;}
.m-cs div{float: left; width: 80%;}
.fa-headset{ display: block;  width: 20%;  float: right;  font-size: 35px;  color: #e2d1c0;  text-align: center;  line-height: 110px !important;}
*/


/************************************************************************ 
Main Visual Banner
************************************************************************/
#banFrame{clear: both;  width: 100%; height: 84vh;  background-image: url(../images/mainbg.png); background-repeat: no-repeat;  background-position: center;  background-size: cover;} /*height: calc(100vh + 180px);/*height:100vh;*/
/* banner contents*/
.visualBan{  clear: both; display: flex;  align-items: center;  justify-content: center;  box-sizing: border-box; height: 100%; }
.vb-wrap{width: 100%; height: 100%; max-width: 1280px; margin: 0 auto;padding-top: 80px;box-sizing: border-box;}
#banImg{ width: 60%; flex: 0 0 60%; /* max-width: 620px;*/ max-width:60%;}
#banImg img{filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.25));width: 100%;}
#banText{ text-align: left;  width: 40%; flex: 0 0 40%; }
#banText > div{ margin: 0px 2%;}
#banText span.en{ color: #fff; display: block;  padding-bottom: 20px; font-weight: bold;}
#banText h2{font-weight: 500;line-height: 1.3;color: #fff;letter-spacing: 0;padding-top: 8%;font-size: 42px;}
#banText p{ font-size: 14.5px; color: #fff; line-height: 26px; }
.subt{color:#fff;font-size: 21px;}

/****************** Contents Common ******************/
.conWrap{clear: both;width: 1280px;margin: 0 auto;}

/* container */
#container{}
/* Content headline */
.content{margin-bottom: 10%;clear: both;overflow:hidden;}
.content > h1{  text-align: center; padding: 120px 0 55px;  font-size: 33px; font-weight: 100;  font-family: 'NanumSquareNeo-Variable';}
.content > h1 span{font-family: 'GmarketSansMedium';color: #000;}
.content > h1 span.en{ font-weight: bold; font-size: 35px;}
.pencilUnder{position: relative;}
.pencilUnder::before{ content: ' '; position: absolute; left: 0;  right: 0;  bottom: 0;  height: 18px; background-image: url('../images/linebl2.png'); border-radius: 13px; transform: translateY(60%); background-size: cover;}
.pencilUnder.ver1::before{ background-image: url('../images/linebl.png');}


/************************************************************************ 
01 Client
************************************************************************/
.clientsDiv{padding: 45px 0;}
.clientsDiv ul{display: flex;  justify-content: space-between; align-items: flex-end;}
.clientsDiv ul li{
    width: 25%;
    flex: 0 0 25%;
    text-align: center;
    padding: 0 40px;
    box-sizing: border-box;
}
.clientsDiv ul li:nth-child(3){position: relative; top: -4px;}
.clientsDiv ul li img{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    height: auto;
}
.conBox{width: 50%;/* float: left; *//* height: 352px; */}
.contDesc{ display: flex; align-items: center; margin-bottom: 100px; position: relative; display:none !important;}
.contDesc::after{content:'';width: 2px;height: 88px;background: #e6e6e6;display: block;position: absolute;bottom: -92px;left: 50%;transform: translateX(-50%);}
.imgDiv{position: relative;text-align: center;display: flex;align-items: center;justify-content: center;}
.imgDiv img{}



/************************************************************************ 
01 About
************************************************************************/
/****** 01. AS IS TO BE *****/
.as-is-to-be{display: flex;justify-content: center;}
.astb-cont{width: 50%;flex: 0 0 50%;display: flex;justify-content: center;position: relative;}
.astb-cont:first-child::after{content:'';width: 63px;height: 29px;background-image:url('../images/arrow.png');background-repeat: no-repeat;background-position: center;background-size: cover;-webkit-background-size: cover;background-size: cover;display:block;position: absolute;top: 50%;right: -5%;transform: translateY(-50%);}
.astb-cont ul{  padding: 0 40px;  box-sizing: border-box;}
.astb-cont ul > li{}
.astb-cont .cont-tit{ text-align: center;  font-size: 25px;  font-weight: bold;  line-height: 38px;  font-family: 'GmarketSansMedium';font-family: 'NanumSquareNeo-Variable'; letter-spacing: 1px; color: #000; margin: 34px 0 50px;}
.cont-img{ width: 100%;  height: 324px; margin: 30px auto 30px;}
.astb-cont .cont-img > div{  width: 100%; height: 100%;}
.astb-cont .cont-img > div > img{  width: auto; max-width: 100%; max-height: 100%;}
.cont-bottom-tit{padding: 12px 10px;  text-align: center;  font-size: 20px;  color: #fff;   background: #3147ff;  border-radius: 8px; /* width: 80%; */ margin: 0 auto; font-weight: 500;}
.astb-cont ul > li p{ text-align: center;  font-size: 20px; margin: 24px 0; font-family: 'Pretendard-Regular'; letter-spacing: 0; line-height: 30px; color: #000000;  font-family: 'NanumSquareNeo-Variable';}
.astb-cont.tb-cont{/* justify-content: flex-end; */}

/****** 02. Service Points ******/
.svPoints{padding: 0 8%;}
.svPoints ul{}
.svPoints ul > li{ display: flex; align-items: center;  line-height: 150px;}
.svPoints ul > li .point{width: 30%; flex: 0 0 30%;}
.svPoints ul > li .point label{ display: inline-flex; font-size: 37px;  font-weight: bold; font-family: 'Shrikhand', cursive; letter-spacing: 1px; position:relative; color: #000;}
.svPoints ul > li .point label::after{ content: ' '; position: absolute; left: 0;  right: 0; bottom: 54px; height: 0.44em; background-color: #eff2f7; z-index: -1;}
.svPoints ul > li > p{ font-size: 30px; Letter-spacing: 1px;}

/****** 03. MES Video ******/
#videoFrame iframe{margin-top: 40px;}
.v-wrap{position: relative;height: 800px;background: #16151c;overflow:hidden;}
.v-cont{width: 100%;max-width: 1100px;position:absolute;left: 0;right:0;margin:0 auto;top: 50%;transform: translateY(-50%);}
.v-cont::before{ content:''; display: block; width: 100%; height: 0; padding-top: 56.25%;}
.video{/*position: absolute;left:0;top: 0;width: 100%;height: 100%; */height: 432px;}


/************************************************************************ 
02 Price 
************************************************************************/
#price{background: #f5f5f5;padding: 0 0 110px;}
#price .conWrap{margin: 0 auto;}
#price .content{margin-bottom: 0;}
#price .headline{padding-top: 0; margin-bottom: 50px;}
#priceTable{width: 95%;margin: 0 auto;display: flex;align-items: flex-start;}
#priceTable li.plan{ width: 33.3333%; background: #ffffff;  border: 1px solid #dddddd;  box-sizing: border-box; padding: 20px;  margin: 0 1%; position: relative; overflow: hidden;  text-align: center; }
#priceTable li.plan:hover{transform: translateY(-2%); transition: 0.5s; border-color:#333333;}

/* top */
.plan div.top{text-align: center;padding-bottom: 20px;border-bottom: 1px solid #6a6a6a;margin-bottom: 20px;}
.planName{font-weight: 500; height: 60px; line-height: 60px;}
.comnt{color: #8b8b8b;}
.price{font-weight: 500;letter-spacing: -1px; display: inline-block;}
.price span{font-size: 16px; text-indent: 2px; }
/* middle */
.middle ol{padding-left: 0;box-sizing: border-box;}
.middle ol li{line-height: 28px;}
.middle ol li::before{content: "";margin-right: 8px;width: 20px;height: 20px;display: inline-block;background-image: url('../images/chk.png');vertical-align: middle;background-size: 11px;background-repeat: no-repeat;background-position: center;}
/* enterprise */
#enterprise .price{font-size: 22px;line-height: 45px;}
/* best */
span.tag{background: #000000;display: block;-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);color: #ffffff;text-align: center;position: absolute;width: 150px;top: 24px;right: -39px;display: none;}


/************************************************************************ 
03 Trial
************************************************************************/
#trial{ margin-top: 2.5%;}
#trial h1{padding-bottom: 60px;}
#trialWrap{display: flex;}
#trialWrap small{font-family:'Pretendard-Regular', sans-serif; font-size: 14px;}
.trial-info{width: 56%; padding-right: 23px; margin-right: 1%; border-right: 1px solid #eee; box-sizing: border-box;}
.trial-info, .trial-form{}



/************************************************************************  
03-1 / Trial Info, Agreements
************************************************************************/
.cs{border-bottom: 1px solid #eeeeee; }
.cs h3 span{font-weight: 600; }
.cs .call, .cs p{font-weight: 500;}
.cs p{padding:30px 0;}
.red{color: #f74b4b;}
.notice{ line-height: 23px; padding-top: 0;}

.agreement{padding-top: 20px;}
.agreement .title{font-size: 15px; height: 40px; line-height: 40px;}
.agreement .scrollbox{ box-sizing: border-box; overflow: auto; overflow-x: hidden;  width: 100%;  height: 300px; padding: 10px 15px 0 0;  }
.agreement .scrollbox p{  line-height: 24px; font-size: 13.5px; margin-bottom: 20px; }
.agreement .scrollbox p span{display:block;margin-bottom: 10px;font-size: 14px;color: #000;}
.agreement .scrollbox table{text-align: center;font-size: 14px;border-collapse: collapse;border: 1px solid #ededed;margin-bottom: 19px;}
.agreement .scrollbox table th, .agreement .scrollbox table td{padding: 2%;}
.agreement .scrollbox table td{background: #fff;}
.agreement .scrollbox table th{background: #f3f3f3;}

/************************************************************************  
03-2 / Application From 
************************************************************************/
.trial-form{ width: 44%;}
.application-form{}
.application-form li{line-height: 55px;display: flex;width: 100%;align-items: center;position: relative;}
.application-form li:last-child{margin-top: 10px;}
.application-form li > label{font-weight: 500;display: inline-block;width: 30%;flex: 0 0 30%;font-weight: 600;font-family: 'Pretendard-Regular', sans-serif;}
.application-form li > input{ }
.application-form li > select{ }
.application-form li > textarea{display: block;width: 100%;resize: none;height: 116px;padding: 10px;box-sizing: border-box;border: 1px solid #b9b9b9;outline: none;font-family:inherit;}
.application-form input, .application-form select {  display: inline-block; width: 70%;  flex: 0 0 70%; height: 38px; line-height: 38px; text-indent: 10px; box-sizing: border-box;  border: 0; border-bottom: 1px solid #b9b9b9; font-family: 'Pretendard-Regular'; letter-spacing:.2px; font-size: 14px;}

#freeTrial, .agree, .apply{width: 90%;margin: 0 auto;}
label.ess::after{content: '*'; color: #f74b4b; font-size: 12px; margin: 0 2px;}/* Label essentail asterisk */
.double{line-height: 24px; vertical-align: middle;}

/* Email Check Button */
.emailchk{display:flex;width: 70%;flex: 0 0 70%;justify-content: space-between;position: relative;}
.emailchk #chkBtn{ height: 100%; line-height: 36px; padding: 0 5px; box-sizing: border-box;  background: #fff; border: 1px solid #b9b9b9; margin-left: 7px; cursor: pointer; font-size: 14px; width: 100%; text-align: center; background: #fafafa;}
.emailchk input{flex: 0 0 68%;}

/* Show Password */
.btn-show-pass{font-size:15px;color:#999;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;
    position:absolute;height:100%;top:0;right:0;padding-right:5px;cursor:pointer;-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s;transition:all .4s}
.zmdi{font-family: xeicon !important;font-style: normal;font-size: 22px;color: #adadad;}
.zmdi-eye-off:before{content: "\e950";/* content: "\e951"; */color: #2c2c2c;}
.zmdi-eye:before{content: "\e952";content: "\e953";}

/* Validation Message */
.li_msg{margin-left: 30%; line-height: 5px !important;  padding: 8px 0 16px; font-size: 13px; width: 70% !important;}
.li_msg.o_msg{color: #4a5df7;}
.li_msg::before{    font-family: 'xeicon';  margin-right: 3px;  font-size: 14.5px; position: relative; top: 1px;}
.li_msg.o_msg::before{content: "\e92c";}
.li_msg.x_msg{color: #df0000;}
.li_msg.x_msg::before{ content: "\e9ab";}


/* Apply button */
.agree{padding: 20px 0 20px;margin-top: 30px;}
.agree div{margin-bottom: 6px;}
.apply button{ width: 100%; height: 56px; background: #4a5df7;  border: 1px solid #4a5df7;  color: #fff; cursor: pointer; border-radius: 5px;  font-size: 17.5px;    }


/************************************************************************  
Footer 
************************************************************************/
footer{  clear: both; width: 100%; height: 110px;  font-weight: 500; border-top: 1px solid #ddd;  padding: 20px;  box-sizing: border-box;  display: flex; justify-content: center;}
footer > div{ display: flex; align-items: center; }
.comInfo{}
.comInfo li ,.link li{line-height: 25px;font-size: 13.5px;}
.link, .link ol{}
.link ol > li{ float: left; margin: 0 5px; font-weight: normal; text-align: center;}
.link ol > li > a::after{  content: "|"; margin-left: 10px; font-size: 12px;  position: relative; bottom: 1px;}
.link ol > li:last-child > a::after{display: none;}


/************************************************************************ 
Modal
************************************************************************/
.dim{ display: none; position: fixed; z-index: 9; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.2);} /*dim*/
.modal{ background-color: #fff;  margin: auto;  position: absolute;  left: 50%;  top: 50%; transform: translate(-50%, -50%);  width: 1100px; height: 80%; padding: 20px; box-sizing: border-box; min-width: 1100px;}
.modal h5{  font-size: 16px;  font-weight: 500;  height: 34px; line-height: 34px;  border-bottom: 1px solid #ededed; margin-bottom: 15px; text-align: left;}
.modal-content{position: relative;}
.modal-body{ background: #eee; overflow-y: auto;  height: 663px; overflow-x: hidden;}
.modal img{width: 80%; margin: 10px auto; display: block;}
.mClose{position: absolute;  top: -44px;  right: -49px;  font-size: 44px; }


/************************************  
Floatings
************************************/
/*scorll Top*/
.moveTopBtn{z-index: 1;position: fixed;right: 30px;bottom: 30px;cursor: pointer;display: none;background: #222;border-radius: 100px;width: 45px;height: 45px;line-height: 45px;text-align: center;}
.moveTopBtn i{font-size: 16px;color: #ededed;}
.moveTopBtn img{ display: block; }
.moveTopBtn:hover img{opacity: 0.8; transition: 0.3s;}
/*Floating*/
.floating{margin: 40px 30px;box-shadow: -1px 3px 20px 0 rgba(0,0,0,0.15);background-color: #ffffff;color: white;position: fixed;right: 0;top: 80px;box-sizing: border-box;width: 90px;text-align: center;height: 90px;display: flex;/* flex-direction: column; *//* justify-content: space-between; *//* padding: 30px 10px 10px; */z-index: 10;border-radius: 14px;}
.floating p{color:#000;}
.floating img{width: 90px;}
.floating a{/* background: #3147ff; *//* padding: 8px; *//* border-radius: 5px; */}


/**************************************
Price
************************************/
.pricing-box { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; }

.pricing-card { background: #f9f9f9; border-radius: 16px; padding: 2rem 3rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); max-width: 480px; text-align: center; }

.plan-title { font-size: 1.5rem; margin-bottom: 1rem; font-family: 'NanumSquareNeo-Variable'; font-weight: 200; }
.plan-title > .pencilUnder { font-family: 'GmarketSansMedium'; font-weight: 100; }

.price-main { font-family: 'Poppins','Pretendard-Regular', sans-serif; font-size: 1.6rem; font-weight: 500; color: #333; margin-bottom: 1.2rem; }
.price-main > .price-main-sub { font-size: 1rem; }

.pricing-details { list-style: none; padding: 0; margin: 0 0 1.2rem 0; }
.pricing-details li { font-size: 1rem; line-height: 1.6; margin-bottom: 0.5rem; }

.note { font-size: 0.9rem; color: #888; }


/************************************  
Responsive
************************************/
@media (max-width: 1600px){    
    #banText{width: 100%;}
	.floating{bottom: 80px !important;
    top: unset;
    margin: 15px 30px;}

	#gnb li{margin-right: 12px;}
}

@media (max-width: 1390px){
    #gnb li{margin-right: 0;}
	#snb li{margin:0 14px;}
}

@media (max-width: 1300px){
    .logo{margin-right: 50px;}
    #gnb li{margin-right: -2px;}
	.floating{display:none;}
}

@media (max-width: 1200px){
    body{font-size: 14px;}
    .conBox{width: 100%; height: auto;}
    .imgDiv img{}
	.vb-wrap{width: 100%;padding-top: 42px;}
    #banFrame{padding-top: 49px;}
	.visualBan{ box-sizing: border-box;}
    #banText{flex-direction: column;text-align: center;padding: 40px 10px 40px;}   
	#banText > div:last-child{padding-top:20px;}
	.conWrap, .detail .imgbox{width: 100%;padding: 0 20px;box-sizing: border-box;}
	.application-form{width: 90% !important;}
	#banImg{    width: 45%; flex: 0 0 45%;}
	.svPoints{padding: 0 4%;}

	#m-quick{display: block;}
	#md-hd{display: block;}
	#hd{display: none;}
	#banFrame {padding-top: 49px;}
	#m-quick li {width:20%;}
}


@media (max-width: 1024px){
    #banImg{display:none;}
	.visualBan .btnGroup{justify-content: center;}
    #m-quick{display: block;}
	body{font-size: 14px;}
	#banFrame{height: 65vh;}
	#banText{display: flex; flex: 0 0 80%;
    align-items: center;}

	#hd{display: none;}
    #md-hd{display: block;}
	.contDesc{flex-direction: column;}
	.txtDiv, .txtbox{text-align:center !important;width: 65%;}	
	#des02 .imgDiv{order:1;}
	#des02 .txtDiv{order:2;}
	#des04 .imgDiv{order:3;}
	#des04 .txtDiv{order:4;}

	#trialWrap{flex-direction: column;}
	#freeTrial, .agree, .apply{width: 100%;}
	#trialWrap > div{width: 100% !important;padding: 0;  border: 0;}
	.application-form{width: 100% !important;}

	.svPoints ul > li{line-height: 76px;flex-direction: column; text-align:center;margin-bottom: 15%;}
	.svPoints ul > li .point{width: 100%; flex:0 0 100%;}
	.svPoints ul > li .point label::after{bottom:17px;}
	.svPoints ul > li .point label{ font-size: 35px;}
	.svPoints ul > li > p{font-size: 26px;}
	.pencilUnder::before{height: 14px;}

	.content > h1{padding: 80px 0;}
	.detail > h1{font-size: 28px;}
}

@media (max-width: 768px){ 
	#m-quick li {width:25%;}
	.svPoints ul > li .point label{font-family: 'Shrikhand', cursive; letter-spacing: -1px;}
	#conWrap{width: 100%;}
	.conWrap{padding: 0 10px;}
	#price .conWrap{margin: 55px auto 0;}
	body{font-size: 13px;background: none; /*font-size: 18px; line-height: 26px; padding: 0 10px;*/ 
    box-sizing: border-box;}
	.hd-logo{letter-spacing: -0.5px;}
	h3{font-size: 25px !important;}
    #banText h2{font-size: 27.5px !important; letter-spacing: -.5px;font-family: 'NanumSquareNeo-Variable';}
	.round{width: 90px; height: 40px; line-height: 40px; font-size: 14px;}   
	.subt{font-size: 16px;}
	.btnGroup{padding-top: 55px;}
	.btnGroup a{padding: 12px 34px;font-size: 15px;}

    #banImg{width: 100%; background: none;}
    #banText{width: 100%;}
	#banText p{width: 100%;font-size: 13px;}
	#banText p br{display:none;}
    .txtDiv{padding: 30px;width: 100%;}
    #banImg,#banText,#banFrame{/*height: 100vh; */padding-bottom: 20px;} 
	#banFrame{height: 55vh;}
	.clientsDiv{display:none;}
    
    .moveTopBtn{ right: 10px; bottom: 10px;}  
    .trial-info{ width: 92%; margin: 0 auto; float: none; border-right: none; padding-right: 0;}
    .trial-form{width: 100%; margin-top: 20px;}
    .slider-box > li{width: 100%;}
    .hoverTxt{overflow: auto;}   	
	.conTit{font-size: 21px !important;text-align: left;}
	.txtDiv p{  font-size: 15px; text-align: left;  line-height: 29px;  margin-top: 20px;}
	
	/*pricing plan*/
	#priceTable{  flex-direction: column;}
	#priceTable li.plan{   width: 100%;  margin: 0; height: auto;  margin-bottom: 15px;  padding: 20px 10px;  text-align: center;  }
	.top{/* border-bottom:none !important; */}
	.middle{  font-size: 15px;}
	.planName{font-size: 16px;height: 40px;line-height: 40px;}
	.price{font-size: 22px !important;}
	.middle ol li::before{margin-right:0;}
    .bottom{position: static; transform: initial;  margin-top: 30px;}
	#enterprise .price{font-size: 16px !important; line-height: 30px;}
	
	.plan.active {width: 100% !important; padding: 10px !important; height: 495px !important; font-size: }
	.plan.active .middle{display: block !important;}
	.plan:hover{transform:none !important;}
	#pro.active, #enterprise.active{height: 600px !important;}
	
	.moveTopBtn img{width: 30px;}
	.content#price, #trial .headline{margin-bottom: 0 !important;}
	/*.cs h3, .cs p{display: none;}*/
	.cs{display: none;}
	.scrollbox{ background: #f7f7f7; padding: 20px 22px !important;}

	.application-form{width: 92% !important;}
	.application-form li{  line-height: 34px !important; margin-bottom: 10px !important;}
	.application-form li.li_msg{line-height: 0 !important;}
	.application-form input, .application-form select{width: 100% !important;}
	#freeTrial, .agree, .apply{width: 100% !important;}
	.agree{font-size: 12px;}
	.apply button{font-size: 16px; height: 60px;}
		
	/*support*/
	.supWrap{background: #000; color: #868686;}
	.csCenter, .faq-more{display: none;}
	.supMenu-Label{font-size: 15px;  height: 45px;  line-height: 45px;color: #ffffff;}
	.supMenu{height: 385px;}
	.supMenu-items > li{width: 50%;}
	.supMenu-items > li:last-child{ width: 100%;}
	
	footer{background: #000; padding: 30px 20px 0; box-sizing: border-box; color: #868686; font-size: 11px; height: 250px;border-color: #333333;}
	
	.content > h1 span.en{font-size: 20px;letter-spacing: 0;display: block;margin-bottom: 11px;}
	.content > h1{font-size: 28px;padding: 40px 0 50px !important;}
	.astb-cont .cont-tit{font-size: 20px;line-height: 32px; letter-spacing: -.5px;}
	.astb-cont ul > li p{font-size: 17px;}
	.svPoints ul > li .point label{font-size: 25px;letter-spacing: 1px;}
	.svPoints ul > li .point label::after{bottom:25px;}
	.svPoints ul > li > p{font-size: 19px;line-height: 34px;letter-spacing: -.3px;}
	.pencilUnder::before{height: 11px;width: 100%;left: 50%;transform: translateX(-50%);bottom: -5px;}
	.pencilUnder.en::before{width:55%;}
	.svPoints p br{display:block !important;}

	.link, .link ol{float: left;}
	.link ol > li:first-child{margin-left: 0;}
	#price{padding-bottom: 30px; }

	.as-is-to-be{flex-direction: column;}
	.astb-cont{width: 100%; flex: 0 0 100%;margin-bottom: 8vh;}
	.astb-cont:first-child::after{display:none;}
	.astb-cont ul{padding: 0 10px;}
	.v-wrap{height: auto; overflow:initial; min-height: 50vw;}
	#about.content{margin-bottom: 0;}
	#video{height: 100px; !important;}
	.application-form li > label{font-size: 13.5px;}
	.application-form input, .application-form select{height: 40px; line-height: 40px;}
	.comInfo span{display:none;}
	.comInfo li > div{display:block !important; margin-top: 20px;}
}

@media (min-width: 768px) and (max-width: 1024px){
.cs{border: 1px solid #eee;
    padding: 26px 38px 12px;
    background: #f7f7f7;
    border-radius: 20px;
	}

.astb-cont ul{padding: 0 30px;}
.astb-cont .cont-tit{font-size: 20px; line-height: 32px;}
.cont-img{height: 270px;}
.astb-cont ul > li p{font-size: 16px; line-height: 30px;}
.astb-cont:first-child::after{top: 57%;background-size: 58%;}
}