@charset "utf-8";
/* CSS Document */
.box0 {
  width: 94%;
  margin: 0 auto;
}
.box1 {
  width: 1200px;
  margin: 0 auto;
}
.box2 {
  width: 900px;
  margin: 0 auto;
}

.gnb li.m_hide {
  display: none;
}

body:not(.pop) {
  display: flex;
  flex-direction: column;
}
body:not(.isIE) {
  min-height: 100vh;
}

#header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  background: var(--bgF);
  transition: transform 0.3s;
}
#header .top_wrap .wrapH {
  height: 5em;
}
.headerT,
body:not(.main) #contents {
  padding-top: 5em;
}
#header .top_wrap .logo > a {
  display: block;
  height: 2.875em;
  overflow: hidden;
}
#header .top_wrap .logo .in {
  display: block;
  height: 100%;
}
#header .top_wrap .logo .in img {
  display: block;
  height: 100%;
}
#header .top_wrap .gnb_wrap {
  margin: 0 1vw;
  flex: 1 1 0%;
  min-width: 0;
}
#header .top_wrap .gnb_wrap .gnb {
  justify-content: space-around;
  max-width: 56em;
  width: 100%;
}
#header .top_wrap .gnb_wrap .gnb > li .dp1 {
  padding: 0.5em;
  box-sizing: border-box;
  height: 5em;
  text-align: center;
  position: relative;
}
#header .top_wrap .gnb_wrap .gnb > li .dp1:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #7c4dff;
  background: var(--bgP);
  transform: translate(-50%, 50%);
}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1 {
  color: #7c4dff;
  color: var(--coP);
}
#header .top_wrap .gnb_wrap .gnb > li.on .dp1:after {
  width: 2.5em;
}
.scroll #header .top_wrap .gnb_wrap .gnb > li.on .dp1:after {
  width: 0;
}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va {
  font-size: 1.188em;
  font-weight: 500;
}
#header .top_wrap .gnb_wrap .gnb > li .dp2 {
  display: none;
}
#header .top_wrap .etc_wrap .lang {
  margin-left: 2em;
  position: relative;
}
#header .top_wrap .etc_wrap .lang .langBtn {
  padding: 0.5em;
  color: #666;
  color: var(--co6);
  font-size: 0.938em;
}
#header .top_wrap .etc_wrap .lang .langBtn .icon {
  margin-right: 0.25em;
}
#header .top_wrap .etc_wrap .lang .langBtn .tt {
  font-weight: 500;
}
#header .top_wrap .etc_wrap .lang .langBtn .arrow {
  margin-left: 0.5em;
  transition: 0.3s;
}
#header .top_wrap .etc_wrap .lang .list {
  position: absolute;
  width: 100%;
  left: 0;
  padding: 1em;
  box-sizing: border-box;
  background: #fff;
  background: var(--bgF);
  border-radius: 0.5em;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
#header .top_wrap .etc_wrap .lang .list > li > a {
  display: block;
  padding: 0.25em;
  padding-right: 1em;
  color: #999;
  color: var(--co9);
  position: relative;
  overflow: hidden;
}
#header .top_wrap .etc_wrap .lang .list > li > a .tt {
  font-weight: 800;
  font-size: 0.875em;
}
#header .top_wrap .etc_wrap .lang .list > li > a .arrow {
  position: absolute;
  right: -1em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  opacity: 0;
  transition: 0.3s;
}
#header .top_wrap .etc_wrap .lang .list > li > a .arrow:before {
  content: "\e90b";
}
#header .top_wrap .etc_wrap .lang .list > li > a:hover {
  color: #111;
  color: var(--co1);
}
#header .top_wrap .etc_wrap .lang .list > li > a.on {
  color: #111;
  color: var(--co1);
}
#header .top_wrap .etc_wrap .lang .list > li > a:hover .arrow,
#header .top_wrap .etc_wrap .lang .list > li > a.on .arrow {
  opacity: 1;
  right: 0;
}
#header .top_wrap .etc_wrap .lang .list > li > a.on .arrow:before {
  content: "\e92b";
}
#header .top_wrap .etc_wrap .lang.on .langBtn {
  color: #111;
  color: var(--co1);
}
#header .top_wrap .etc_wrap .lang.on .langBtn .arrow {
  transform: rotate(180deg);
}
#header .top_wrap .etc_wrap .lang.on .list {
  opacity: 1;
  visibility: visible;
}
.scroll #header {
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.1);
}

.appDown {
  display: inline-flex;
  align-items: center;
}
.appDown .app_tit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 3.25em;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 0.5em;
  color: #7c4dff;
  color: var(--coP);
  position: relative;
  transition: 0.3s;
}
.appDown .app_tit .ico {
  height: 1.875em;
  margin-right: 0.5em;
  overflow: hidden;
}
.appDown .app_tit .ico .in,
.appDown .app_tit .ico .in img {
  height: 100%;
  display: block;
}
.appDown .app_tit .tt {
  font-weight: 500;
}
.appDown .app_tit .tt:before {
  content: "Download";
}
.appDown .app_tit .arrow {
  font-family: xeicon;
  font-size: 1em;
  margin-left: 1em;
  display: none;
}
.appDown .app_tit .arrow:before {
  content: "\ea3e";
}
.appDown .app_tit .link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.appDown.st_hover .app_tit {
  padding: 0 1.25em;
}
.appDown.st_hover:hover .app_tit {
  border-color: #7c4dff;
  border-color: var(--lineP);
}
.appDown.white .app_tit {
  border-color: #fff;
  border-color: var(--lineF);
  color: #fff;
  color: var(--coF);
}
.appDown.white .app_tit .ico .in {
  transform: translateY(-100%);
}
.appDown.st_hover.white:hover .app_tit {
  background: #7c4dff;
  background: var(--bgP);
  border-color: transparent;
}
.appDown.s1 {
  font-size: 1.125em;
}
.appDown.st_link .app_tit .link {
  display: block;
}
.appDown.st_link .app_list {
  display: none;
}
.appDown.st_arrow .arrow {
  display: block;
}
.appDown.st_titN .app_tit {
  display: none;
}

.appDown .app_list > li > a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.appDown.st_list1 .app_list {
  margin-left: 0.5em;
}
.appDown.st_list1 .app_list > li > a {
  height: 3.25em;
  width: 3.5em;
  border: 1px dotted #fff;
  border-color: var(--lineF);
  box-sizing: border-box;
  border-radius: 0.5em;
  margin-left: 0.25em;
  flex-direction: column;
}
.appDown.st_list1 .app_list > li > a[href]:hover {
  background: #7c4dff;
  background: var(--bgP);
  border-color: transparent;
}
.appDown.st_list1 .app_list > li > a[href]:hover .ico {
  font-size: 1em;
}
.appDown.st_list1 .app_list > li > a[href]:hover .name {
  font-size: 0.75em;
  font-weight: 500;
}
.appDown.st_list1 .app_list > li > a[href]:hover .name:before {
  content: attr(data-name);
}
.appDown.st_list2 .app_list {
  margin-left: 1em;
}
.appDown.st_list2 .app_list > li > a {
  font-size: 0.813em;
  padding: 0.25em 1em;
  margin-right: 2em;
  position: relative;
  border: 1px solid transparent;
  margin-left: 0.5em;
  border-radius: 0.5em;
  color: #666;
  color: var(--co6);
}
.appDown.st_list2 .app_list > li:not(:last-child) > a:after {
  content: "";
  position: absolute;
  right: -1em;
  top: 50%;
  height: 50%;
  transform: translateY(-50%);
  width: 1px;
  background: #ccc;
  background: var(--bgC);
}
.appDown.st_list2 .app_list > li > a .ico {
  margin-right: 0.25em;
}
.appDown.st_list2 .app_list > li > a .name:before {
  content: attr(data-mName);
}
.appDown.st_list2 .app_list > li > a[href]:hover {
  border-color: #7c4dff;
  border-color: var(--lineP);
  color: #7c4dff;
  color: var(--coP);
}
.appDown.st_list3 {
  display: flex;
  justify-content: center;
}
.appDown.st_list3 .app_list > li {
  width: 17em;
}
.appDown.st_list3 .app_list > li > a {
  display: block;
  font-size: 1.063em;
  padding: 0.75em 2em;
  text-align: center;
  background: #222;
  background: var(--bg2);
  color: #fff;
  color: var(--coF);
  margin: 0.5em;
  border-radius: 3em;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
.appDown.st_list3 .app_list > li > a .ico {
  margin-right: 0.25em;
}
.appDown.st_list3 .app_list > li > a .arrow {
  margin-left: 1em;
  font-size: 1em;
  transition: 0.3s;
}
.appDown.st_list3 .app_list > li > a .name {
  font-weight: 500;
}
.appDown.st_list3 .app_list > li > a .name:before {
  content: attr(data-name);
}
.appDown.st_list3 .app_list > li > a .t_down {
  vertical-align: baseline;
  font-size: 0.875em;
  font-weight: 400;
}
.appDown.st_list3 .app_list > li > a .t_down:before {
  content: "Download";
}
.appDown.st_list3 .app_list > li > a[href]:hover {
  background: #7c4dff;
  background: var(--bgP);
}
.appDown.st_list3 .app_list > li > a[href]:hover .arrow {
  transform: translateX(0.5em);
}

.appIco {
  display: inline-flex;
  width: 2.5em;
  height: 2.5em;
  justify-content: center;
  align-items: center;
  border-radius: 0.5em;
  background: #7c4dff;
  background: var(--bgP);
}
.appIco img {
  height: 60%;
}
.appIco.s1 {
  font-size: 3em;
}

#footer .goTop {
  position: fixed;
  right: 2em;
  bottom: 2em;
  z-index: 1000;
  width: 3em;
  line-height: 3em;
  text-align: center;
  border-radius: 50%;
  background: #7c4dff;
  background: var(--bgP);
  color: #fff;
  color: var(--coF);
  opacity: 0;
  transition: 0.3s;
  transform: translateY(100%);
}
#footer .goTop .xi {
  font-size: 1.5em;
}
.scroll #footer .goTop {
  opacity: 1;
  transform: translateY(0);
}
#footer .menu_wrap {
  border-top: 1px solid #eee;
  border-top-color: var(--lineE);
  padding: 4em 0;
  position: relative;
}
#footer .menu_wrap .gnb > li {
  flex: 1 1 0%;
}
#footer .menu_wrap .gnb > li a {
  text-align: left;
}
#footer .menu_wrap .gnb > li > .dp1 {
  font-weight: 500;
  margin-bottom: 2em;
}
#footer .menu_wrap .gnb > li > .dp2 {
  display: block;
}
#footer .menu_wrap .gnb > li > .dp2 > li > a {
  font-size: 0.875em;
  margin-bottom: 1em;
  opacity: 0.7;
}
#footer .menu_wrap .gnb > li:hover > .dp1 {
  color: #7c4dff;
  color: var(--coP);
}
#footer .menu_wrap .gnb > li > .dp2 > li > a:hover {
  opacity: 1;
  color: #7c4dff;
  color: var(--coP);
}
#footer .menu_wrap .gnb > li > .dp2 > li > a:hover .tt {
  text-decoration: underline;
}
#footer .menu_wrap .etc {
  position: absolute;
  right: 0;
  bottom: -1em;
  width: 16.66%;
}
#footer .menu_wrap .etc .down {
  border: 1px solid #ddd;
  border-color: var(--lineD);
  padding: 0.5em 1em;
  padding-right: 1.5em;
  border-radius: 0.5em;
  font-size: 0.938em;
  transition: 0.3s;
}
#footer .menu_wrap .etc .down:hover {
  background: #7c4dff;
  background: var(--bgP);
  color: #fff;
  color: var(--coF);
  border-color: transparent;
  padding-right: 1em;
}
#footer .menu_wrap .etc .down .icon {
  font-size: 1em;
}
#footer .menu_wrap .etc .down .tt {
  font-weight: 500;
  margin: 0 0.25em;
}
#footer .menu_wrap .etc .down .arrow {
  font-size: 1em;
  margin-left: auto;
}
#footer .menu_wrap .etc .sns {
  margin: 1em 0 0 0;
}
#footer .menu_wrap .etc .sns > li > a {
  padding: 0.5em;
  margin: 0.25em;
  opacity: 0.5;
}
#footer .menu_wrap .etc .sns > li > a .xi {
  font-size: 1.375em;
}
#footer .menu_wrap .etc .sns > li > a:hover {
  opacity: 1;
  color: #7c4dff;
  color: var(--coP);
}
#footer .menu_wrap .etc .sns > li > a svg {
  width: 1em;
  margin: 0 0.125em;
}
#footer .menu_wrap .etc .sns > li > a:hover svg {
  fill: #7c4dff;
  fill: var(--coP);
}
#footer .info_wrap {
  padding: 2em 0 4em 0;
}
#footer .info_wrap .link {
  margin-left: -1.5em;
}
#footer .info_wrap .link > li > a {
  padding: 0.5em 1.5em;
  position: relative;
  font-size: 0.938em;
  color: #666;
  color: var(--co6);
}
#footer .info_wrap .link > li > a:hover {
  text-decoration: underline;
}
#footer .info_wrap .link > li:not(:last-child) > a:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  height: 40%;
  width: 1px;
  background: #ddd;
  background: var(--bgD);
  transform: translateY(-50%);
}
#footer .info_wrap .link > li.point > a {
  color: #111;
  color: var(--co1);
}
#footer .info_wrap .info {
  margin: 1.5em 0 0 0;
}
#footer .info_wrap .info > li {
  float: left;
  margin-right: 2em;
  margin-bottom: 0.25em;
  font-size: 0.875em;
  color: #888;
  color: var(--co8);
}
#footer .info_wrap .info > li.br {
  clear: left;
}
#footer .info_wrap .info > li.copyright {
  font-size: 0.75em;
  opacity: 0.5;
  text-transform: uppercase;
  margin-top: 1em;
}
#footer .info_wrap .info:after {
  content: "";
  display: block;
  clear: both;
}
#footer .info_wrap .logo img {
  height: 7em;
}
#footer .info_wrap .site {
  position: relative;
}
#footer .info_wrap .site .siteBtn {
  padding: 0.875em 1em;
  box-sizing: border-box;
  font-size: 0.875em;
  width: 12em;
  color: #777;
  color: var(--co7);
  position: relative;
  transition: 0.3s;
  background: #f5f5f5;
  background: var(--bgF5);
}
#footer .info_wrap .site .siteBtn:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: #7c4dff;
  background: var(--bgP);
  transition: 0.3s;
}
#footer .info_wrap .site .siteBtn .more {
  font-size: 1em;
  transition: 0.3s;
}
#footer .info_wrap .site.on .siteBtn .more {
  transform: rotate(45deg);
}
#footer .info_wrap .site .siteBtn:hover,
#footer .info_wrap .site.on .siteBtn {
  color: #7c4dff;
  color: var(--coP);
}
#footer .info_wrap .site .siteBtn:hover:after,
#footer .info_wrap .site.on .siteBtn:after {
  width: 100%;
}
#footer .info_wrap .site .list {
  display: none;
  position: absolute;
  bottom: 100%;
  width: 100%;
  background: #7c4dff;
  background: var(--bgP);
}
#footer .info_wrap .site .list > li > a {
  display: block;
  padding: 0.5em 1em;
  font-size: 0.875em;
  color: #fff;
  color: var(--coF);
  opacity: 0.7;
  position: relative;
  padding-right: 3em;
}
#footer .info_wrap .site .list > li:first-child {
  margin-top: 0.25em;
}
#footer .info_wrap .site .list > li:last-child {
  margin-bottom: 0.25em;
}
#footer .info_wrap .site .list > li > a:after {
  content: "\e980";
  font-family: xeicon;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
#footer .info_wrap .site .list > li > a:hover {
  opacity: 1;
}
#footer .info_wrap .site .list > li > a:hover:after {
  display: block;
}
#footer .info_wrap .site.on .list {
  display: block;
}

#contents .sub_nav {
  padding: 2.5em 0 0 0;
}
.sub_nav_st > li {
  color: #888;
  color: var(--co8);
  font-size: 0.875em;
  display: flex;
  align-items: center;
}
.sub_nav_st > li:before {
  content: "\e940";
  font-family: xeicon;
  padding: 0 0.5em;
  opacity: 0.5;
}
.sub_nav_st > li:first-child:before {
  display: none;
}
.sub_nav_st > li.home .xi {
  font-size: 1.125em;
}
#contents .sub_tit {
  text-align: center;
  padding: 1.75em 0 2.5em 0;
}
#contents .sub_tit .t1 {
  font-size: 1.125em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.375em;
  margin-left: 0.375em;
  word-spacing: 0.25em;
  margin-bottom: 0.375em;
  transform: scaleY(0.9);
}
#contents .sub_tit .t2 {
  font-size: 2.875em;
  font-weight: 700;
}

#contents .sub_tab {
  padding: 1em 0;
  border: 1px solid #eee;
  color: var(--lineE);
  box-sizing: border-box;
  border-left: none;
  border-right: none;
}
#contents .sub_tab .gnb {
  margin: -0.5em 0 0 -0.5em;
}
#contents .sub_tab .gnb > li {
  width: 100%;
}
#contents .sub_tab .gnb > li > .dp2 {
  justify-content: center;
}
#contents .sub_tab .gnb > li > .dp2 > li {
  margin: 0.5em 0 0 0.5em;
}
#contents .sub_tab .gnb > li > .dp2 > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4em;
  min-width: 6em;
  padding: 0.5em 1.5em;
  color: #888;
  color: var(--co8);
  position: relative;
  box-sizing: border-box;
  border-radius: 0.5em;
}
#contents .sub_tab .gnb > li > .dp2 > li > a .va {
  font-weight: 500;
  font-size: 1.125em;
}
#contents .sub_tab .gnb > li > .dp2 > li:hover > a {
  color: #7c4dff;
  color: var(--coP);
}
#contents .sub_tab .gnb > li > .dp2 > li.on > a {
  background: #7c4dff;
  background: var(--bgP);
  color: #fff;
  color: var(--coF);
  padding-top: 0.25em;
}
#contents .sub_tab.on {
  position: fixed;
  left: 0;
  top: 4em;
  width: 100%;
  padding: 0.75em 0;
  z-index: 999;
  border: none;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  background: var(--bgF95);
}
#contents .sub_tab.on .gnb > li > .dp2 > li > a {
  height: 2.5em;
  transition: height 0.3s;
}
#contents .sub_tab.on .gnb > li > .dp2 > li > a .va {
  font-size: 1.063em;
}
.on-gnb #header {
  box-shadow: none;
}
.on-gnb #header .wrapH {
  height: 4em;
  transition: 0.3s;
}

.dp1on .gnb .dp2 {
  display: none !important;
}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1,
.dp2on .gnb > li .dp3 {
  display: none !important;
}
.dp2on .gnb > li.on {
  display: block !important;
}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a {
  display: none !important;
}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on {
  display: block !important;
}

#contents .doc {
  padding: 4em 0 10em 0;
}

#contents .doc .linkScroll:not(:last-child) {
  padding-bottom: 8em;
}
#contents .doc .linkScroll:first-child .sub_visual {
  margin-top: -4em;
}
#contents .sub_visual {
  overflow: hidden;
  margin-bottom: 5em;
  padding-bottom: 15%;
  position: relative;
}
#contents .sub_visual.h1 {
  padding-bottom: 30%;
}
#contents .sub_visual .bg {
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  width: 94%;
  left: 3%;
}
.isIE #contents .sub_visual .bg {
  background-attachment: scroll;
  background-size: cover;
}
#contents .sub_visual .tit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}
#contents .sub_visual .tit .t1 {
  font-size: 2.75em;
  font-weight: 700;
  color: #fff;
  color: var(--coF);
}

/**/
.sub_company_greetings .sign .name {
  font-family: serif;
  font-size: 2.5em;
  font-weight: bold;
  margin-left: 0.5em;
  letter-spacing: 0.25em;
}
.sub_company_greetings .sign .sign_img {
  height: 3.5em;
  margin-left: 2.5em;
}

.sub_company_ci_h {
  height: 10em;
}
.sub_servie_ci_h {
  height: 7em;
}

.sub_vod_wrap {
  position: relative;
}
.sub_vod_wrap .wrap_big {
  width: 76%;
  background: #000;
  background: var(--bg0);
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
}
.sub_vod_wrap .wrap_thumb {
  width: 19.4%;
  box-sizing: border-box;
  padding-right: 1%;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}
.sub_vod_wrap .wrap_thumb .el {
  margin-bottom: 1vh;
  background: #000;
  background: var(--bg0);
  position: relative;
  border-radius: 0.5em;
  overflow: hidden;
  cursor: pointer;
}
.sub_vod_wrap .wrap_thumb .el:last-child {
  margin-bottom: 0;
}
.sub_vod_wrap .wrap_thumb .el:not(.on) .resize {
  opacity: 0.5;
}
.sub_vod_wrap .wrap_thumb .el:not(.on):before {
  content: "\ea40";
  font-family: xeicon;
  color: #fff;
  color: var(--coF);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 2em;
  z-index: 1;
}
.sub_vod_wrap .wrap_thumb .el.on:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 5px solid #7c4dff;
  border-color: var(--lineP);
}

.sub_service_list {
  margin-left: -2em;
}
.sub_service_list > li {
  width: 33.33%;
}
.sub_service_list > li .in {
  margin: 2em 0 0 2em;
  border: 1px solid #eee;
  border-color: var(--lineE);
  border-radius: 1em;
  padding: 2em;
  padding-bottom: 2em;
  box-sizing: border-box;
  height: calc(100% - 2em);
}
.sub_service_list > li .in .tag {
  position: relative;
  padding: 0.188em 0;
  padding-left: 2.5em;
  margin-bottom: 0.5em;
}
.sub_service_list > li .in .tag .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  line-height: 1.5em;
  text-align: center;
  background: #7c4dff;
  background: var(--bgP);
  color: #fff;
  color: var(--coF);
  border-radius: 50%;
  font-size: 1.5em;
}
.sub_service_list > li .in .tag .tt {
  background: #f5f5f5;
  background: var(--bgF5);
  padding: 0.25em 1em;
  border-radius: 1em;
  font-weight: 500;
  color: #555;
  color: var(--co5);
}
.sub_service_list > li .in .tt {
  line-height: 1.4;
}
.sub_service_list > li .in .tt .t1 {
  font-weight: 700;
  font-size: 1.375em;
}
.sub_service_list > li .in .tt .t2 {
  color: #777;
  color: var(--co7);
  margin-top: 1.5em;
  font-size: 0.938em;
}

.serviceSlider {
  padding: 3em 0;
}
.serviceSlider .el {
  width: 20%;
}
.serviceSlider .el .in {
  transform: scale(0.95);
  transition: 0.3s;
  border-radius: 1em;
  padding: 0.75em;
  cursor: pointer;
}
.serviceSlider .el .in .con {
  padding: 0.5em;
  opacity: 0;
  height: 4em;
  overflow: hidden;
  text-align: left;
}
.serviceSlider .el .in .con .t1 {
  font-weight: 700;
  font-size: 1.375em;
  color: #fff;
  color: var(--coF);
  line-height: 1.2;
}
.serviceSlider .el .in .img {
  padding: 1em;
  padding-bottom: 180%;
  background: #fff;
  background: var(--bgF);
  border-radius: 1em;
  background-size: 100% auto;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
}
.serviceSlider .el.swiper-slide-active .in {
  transform: scale(1.1);
  background: #7c4dff;
  background: var(--bgP);
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
}
.serviceSlider .el.swiper-slide-active .in .con {
  opacity: 1;
}
.serviceSlider .el.swiper-slide-prev .in {
  transform: translateX(-1em) scale(0.95);
}
.serviceSlider .el.swiper-slide-next .in {
  transform: translateX(1em) scale(0.95);
}
.serviceSlider.rtl .el.swiper-slide-prev .in {
  transform: translateX(1em) scale(0.95);
}
.serviceSlider.rtl .el.swiper-slide-next .in {
  transform: translateX(-1em) scale(0.95);
}
.serviceSlider-pagination {
  width: 30em;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.swiper-pagination-progressbar span.swiper-pagination-progressbar-fill {
  background: #7c4dff;
  background: var(--bgP);
}

.platformSlider {
  height: 82%;
  overflow: hidden;
}
.platformSlider .el {
  width: 33.33%;
}
.platformTab {
  margin: -1em 0 0 -1em;
}
.platformTab > li {
  flex: 1 1 1%;
}
.platformTab > li > .in {
  display: block;
  padding: 1em;
  color: #999;
  color: var(--co9);
  text-align: center;
  border-radius: 1em;
  border: 1px solid #eee;
  border-color: var(--lineE);
  margin: 1em 0 0 1em;
  transition: 0.3s;
}
.platformTab > li > .in .tt {
  height: 3em;
}
.platformTab > li > .in .tt .t1 {
  display: block;
  font-weight: 500;
  font-size: 1.125em;
}
.platformTab > li > .in .xi {
  font-size: 1.5em;
}
.platformTab > li > .in .xi-gamepad {
  transform: scale(1.2);
}
.platformTab > li.on > .in {
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
  color: #7c4dff;
  color: var(--coP);
  border-color: transparent;
}
.platformTab > li.platformClick:not(.on):hover > .in {
  border-color: #7c4dff;
  border-color: var(--lineP);
  color: #7c4dff;
  color: var(--coP);
}
.platformTab > li.platformClick > .in {
  cursor: pointer;
}
.platformSlider_con {
  position: relative;
}
.platformSlider_con .twrap {
  width: 20em;
  padding: 2em 2em 0 0;
}

.sub_organization .wrap_in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.sub_organization .division .wrap_in {
  width: 13em;
  margin: 0 auto;
  color: #fff;
  color: var(--coF);
  background: #7c4dff;
  background: var(--bgP);
  border-radius: 0.5em;
  height: 5em;
}
.sub_organization .division.s1 .wrap_in {
  width: 11em;
  height: 4em;
}
.sub_organization .division.c1 .wrap_in {
  background: #7c4dff;
  background: var(--bgP);
}
.sub_organization .division.c2 .wrap_in {
  background: #777;
  background: var(--bg7);
}
.sub_organization .division .wrap_in .t1 {
  font-size: 1.375em;
  font-weight: 700;
}
.sub_organization .division .wrap_in .t2 {
  font-size: 1.25em;
  font-weight: 500;
}
.sub_organization .division:not(:first-child) .wrap_in {
  margin-top: 3em;
}
.sub_organization .division:not(:first-child) .wrap_in:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 3em;
  background: #ddd;
  background: var(--bgD);
}
.sub_organization .division.right {
  margin-left: 22em;
}
.sub_organization .division.right .wrap_in:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 6.5em;
  height: 1px;
  background: #ddd;
  background: var(--bgD);
}
.sub_organization .list {
  display: flex;
  position: relative;
  margin-top: 4em;
  padding-top: 4em;
}
.sub_organization .list:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  height: 4em;
  width: 1px;
  background: #ddd;
  background: var(--bgD);
}
.sub_organization .list > li {
  flex: 1 1 1%;
  position: relative;
}
.sub_organization .list > li:before,
.sub_organization .list > li:after {
  content: "";
  position: absolute;
  background: #ddd;
  background: var(--bgD);
}
.sub_organization .list > li:before {
  left: 50%;
  bottom: 100%;
  height: 4em;
  width: 1px;
}
.sub_organization .list > li:after {
  right: 50%;
  bottom: calc(100% + 4em);
  height: 1px;
  width: 100%;
}
.sub_organization .list > li:first-child:after {
  display: none;
}
.sub_organization .list > li > .wrap_in {
  border: 2px solid #666;
  border-color: var(line6);
  margin: 0 1em;
  height: 4em;
  border-radius: 1em;
  overflow: hidden;
  padding: 0.5em;
  color: #555;
  color: var(--co5);
}
.sub_organization .list > li > .wrap_in .t1 {
  font-weight: 500;
  font-size: 1.125em;
}
.sub_organization .list.st1 {
  padding-top: 0;
  margin-top: 4em;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.sub_organization .list.st1:before {
  bottom: 0;
  height: calc(100% + 4em);
}
.sub_organization .list.st1 > li:before {
  display: none;
}
.sub_organization .list.st1 > li:after {
  bottom: 50%;
  z-index: -1;
}

.sub_map {
  padding-bottom: 30%;
}
.sub_add .list > li {
  margin-top: 2em;
}
.sub_add .list > li.vt .tt {
  padding: 0.188em 0 0 0.25em;
}

.sub_img_map .img {
  width: 50%;
}
.sub_img_map .con {
  width: 45%;
}

.sub_form > li {
  width: 47%;
  margin-bottom: 1em;
}
.sub_form > li.w100 {
  width: 100%;
}

.agree_box {
  border-radius: 0.5em;
  overflow: hidden;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
}
.agree_box .agree_con {
  padding: 4em 3em;
  line-height: 1.5;
}
.agree_box .agree_con p {
  color: #666;
  color: var(--co6);
  margin-bottom: 0.5em;
}
.agree_box .agree_con p > strong {
  font-size: 1.25em;
  font-weight: 500;
  margin: 2em 0 0.5em 0;
  color: #111;
  color: var(--co1);
}
.agree_box .agree_con p:first-child > strong {
  margin-top: 0;
}
.agree_box .agree_con .div_page {
  margin-bottom: 3em;
}
.agree_box.st1 .agree_con {
  padding: 1.5em;
  font-size: 0.938em;
  color: #666;
  color: var(--co6);
}
.agree_box .agree_con .tit {
  font-weight: 500;
  color: #333;
  color: var(--co3);
  font-size: 1.125em;
  margin-bottom: 1em;
}
.agree_box .agree_check {
  padding: 1em 1.5em;
  border-top: 1px solid #eee;
  border-top-color: var(--lineE);
}

.sub_career_list > li {
  width: 33%;
}
.sub_career_list > li .in {
  text-align: center;
}
.sub_career_list > li .in .ico {
  height: 8em;
  margin-bottom: 3em;
}
.sub_career_list > li .in .ico img {
  height: 100%;
}
.sub_career_list > li .in .ico.h1 {
  height: 5em;
}
.sub_career_list > li .in .tit {
  padding: 0 0 1.5em 0;
}
.sub_career_list > li .in .tit .t1 {
  font-weight: 700;
  font-size: 1.625em;
  color: #666;
  color: var(--co6);
  margin-bottom: 0.25em;
}
.sub_career_list > li .in .tit .t2 {
  font-size: 1.5em;
}
.sub_career_list.step {
  margin: -6em 0 0 -6em;
}
.sub_career_list.step > li {
  position: relative;
}
.sub_career_list.step > li .in {
  border: 1px solid #ddd;
  border-radius: 1em;
  margin: 6em 0 0 6em;
  padding: 4em 2em;
  box-sizing: border-box;
  height: calc(100% - 6em);
  position: relative;
}
.sub_career_list.step > li:not(:last-child) .in:before {
  content: "\e93e";
  font-family: xeicon;
  font-size: 3em;
  position: absolute;
  width: 2em;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  color: #7c4dff;
  color: var(--coP);
}

.sub_welfare_list > li {
  width: 33%;
  margin-bottom: 1.5em;
}
.sub_welfare_list > li:nth-of-type(n + 7) {
  margin-bottom: 0;
}
.sub_welfare_list > li .in {
  text-align: center;
}
.sub_welfare_list > li .in .ico {
  height: 4em;
  margin-bottom: 3em;
}
.sub_welfare_list > li .in .ico .xi {
  font-size: 5.5em;
}
.sub_welfare_list > li .in .tit {
  padding: 0 0 0.5em 0;
}
.sub_welfare_list > li .in .tit .t1 {
  font-weight: 700;
  font-size: 1.625em;
  color: #666;
  color: var(--co6);
  margin-bottom: 0.25em;
}
.sub_welfare_list > li .in .tit .t2 {
  font-size: 1.2em;
}
.sub_welfare_list.step {
  margin: -6em 0 0 -6em;
}
.sub_welfare_list.step > li {
  position: relative;
}
.sub_welfare_list.step > li .in {
  border: 1px solid #ddd;
  border-radius: 1em;
  margin: 6em 0 0 6em;
  padding: 4em 2em;
  box-sizing: border-box;
  height: calc(100% - 6em);
  position: relative;
}
.sub_welfare_list.step > li:not(:last-child) .in:before {
  content: "\e93e";
  font-family: xeicon;
  font-size: 3em;
  position: absolute;
  width: 2em;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  color: #7c4dff;
  color: var(--coP);
}

/**/
.sub_titwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 12em;
  background: #f5f5f5;
}
.sub_titwrap:not(:first-child) {
  margin-top: 6em;
}
.sub_titwrap .icon {
  margin-bottom: 1em;
}
.sub_titwrap .icon img {
  height: 3em;
}
.sub_titwrap .t1 {
  font-size: 2em;
  font-weight: 700;
}
.sub_twrap {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.sub_twrap:not(:first-child) {
  margin-top: 3em;
}
.sub_twrap .wrap_tit {
  width: 15em;
  box-sizing: border-box;
}
.sub_twrap .wrap_tit .t1 {
  font-size: 1.375em;
  font-weight: 700;
}
.sub_twrap .wrap_con {
  width: calc(100% - 15em);
  box-sizing: border-box;
  padding: 0 0 0 5em;
}
.sub_imgwrap {
  padding: 3em;
  text-align: center;
  border: 1px solid #eee;
  border-color: var(--lineE);
  border-radius: 0.5em;
}

/* 특허부분 */
.certi_layout {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}
.certi_images {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 15px;
  /* flex: 1; */
  width: 32.3333%;
  text-align: center;
}
.certi_images span {
  height: 40px;
}
.certi_images > div {
  border: solid 1px #c3c3c3;
}
.company_map_img a {
  display: block;
}
.company_map_img_desc figcaption {
  max-width: 354px;
}
.sub_img_map .map_title {
  font-size: 20px;
  padding: 20px 0;
}
.sub_img_map > div {
  padding-bottom: 30px;
  gap: 45px;
  justify-content: center;
}
.sub_img_map figcaption > ul > li:not(.map_title) {
  margin-bottom: 10px;
}
.sub_img_map .zip_code_label {
  border: 1px solid #888;
  border-radius: 15px;
  padding: 2px 8px;
  font-size: 13px;
  margin-right: 10px;
}
.sub_img_map > div:first-child {
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}
.sub_img_map figure {
  margin: 0;
}
.sub_img_map .img {
  width: 50%;
}
.sub_img_map .con {
  width: 45%;
}
.certi_img1 {
  /* width: 23em; */
}
.certi_img2 {
  /* width: 18em; */
}
.certi_img3 {
  /* width: 16em; */
  /* border-left:solid 1px #aaaaaa; */
}
.desc {
  font-size: 0.9em;
  letter-spacing: -0.42px;
}
.tit1 {
  font-size: 2.25em;
  font-weight: 700;
}
.tit2 {
  font-size: 3em;
  font-weight: 700;
}
.tit3 {
  font-size: 2em;
  font-weight: 700;
}
.tt1 {
  font-size: 1.01em;
  color: #777;
  color: var(--co7);
  line-height: 1.7;
}
.tt2 {
  font-size: 1.125em;
}
.tt3 {
  font-size: 1.25em;
}
.tt4 {
  font-size: 1.375em;
}
.tt5 {
  font-size: 1.5em;
}
.tt6 {
  font-size: 1.75em;
}
.mg1:not(:first-child) {
  margin-top: 2em;
}
.lh1 {
  line-height: 1.5;
}
.lh2 {
  line-height: 1.5;
}

.bg_grid {
  background-image: repeating-linear-gradient(
      #eee,
      #eee 1px,
      transparent 0,
      transparent 0.5em
    ),
    repeating-linear-gradient(
      90deg,
      #eee,
      #eee 1px,
      transparent 0,
      transparent 0.5em
    );
  background-image: repeating-linear-gradient(
      var(--bgE),
      var(--bgE) 1px,
      transparent 0,
      transparent 0.5em
    ),
    repeating-linear-gradient(
      90deg,
      var(--bgE),
      var(--bgE) 1px,
      transparent 0,
      transparent 0.5em
    );
  border-top: none;
  border-left: none;
  overflow: hidden;
}

.page_box {
  padding: 6em 0;
}
.page_box.bg1 {
  background: #f5f5f5;
  background: var(--bgF5);
}
.page_box.h1 {
  height: 38em;
}

.icon_st {
  width: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ddd;
  margin-right: 0.375em;
}
.icon_st.c1 {
  background: #7c4dff;
  background: var(--bgP);
  color: #fff;
  color: var(--coF);
  border-color: transparent;
}
.icon_st.c2 {
  background: #666;
  background: var(--bg6);
  color: #fff;
  color: var(--coF);
  border-color: transparent;
}

.list_st > li {
  position: relative;
  padding-left: 1.75em;
  box-sizing: border-box;
  margin-bottom: 1.25em;
}
.list_st > li:not(:first-child) {
}
.list_st > li:before {
  content: "\e928";
  font-family: xeicon;
  color: #7c4dff;
  color: var(--coP);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.375em;
}
.list_st > li .t1 {
  font-size: 1.075em;
  font-weight: 500;
  color: #555;
  color: var(--co5);
  padding-top: 0.125em;
}
.list_st.st1 > li {
  margin-bottom: 0.75em;
}
.list_st.st1 > li:before {
  content: "";
  left: 0.625em;
  top: 0.375em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ccc;
  background: var(--bgC);
}
.list_st.flex > li {
  width: 100%;
}
.list_st.space > li:last-child {
  margin-right: auto;
}
.main_tech > li .wrap_in .con_wrap .in .listH2 > li {
  width: 100%;
}

.link_st {
  padding: 0.5em 1.5em;
  background: #7c4dff;
  background: var(--bgP);
  color: #fff;
  font-weight: 500;
  border-radius: 2em;
}

/**/
.visualSlider .el {
  position: relative;
  overflow: hidden;
  height: 100vh;
  background: #fff;
  background: var(--bgF);
}
.visualSlider .el .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.3);
  opacity: 0.5;
}
.visualSlider .el .vod {
  position: absolute;
  left: 50%;
  top: 5em;
  width: 100%;
  height: calc(100% - 5em);
  transform: translateX(-50%);
  object-fit: cover;
}
.visualSlider .el .vod:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
.visualSlider_wrap {
  position: relative;
}
.visualSlider .wrapL {
  left: 10%;
  width: 50%;
  box-sizing: border-box;
}
.visualSlider_wrap .slogan {
  color: #fff;
  color: var(--coF);
  z-index: 10;
  position: absolute;
  top: 50%;
  padding-left: 4%;
  width: 100%;
  box-sizing: border-box;
  transform: translateY(-50%);
}
.visualSlider_wrap .slogan .t1 {
  font-size: 2em;
  font-weight: 500;
}
.visualSlider_wrap .slogan .logo {
  margin: 2.5em 0;
}
.visualSlider_wrap .slogan .logo img {
  height: 4.5em;
}
.visualSlider_wrap .slogan .t2 {
  font-size: 1.188em;
  line-height: 1.7;
}
.visualSlider_wrap .slogan .btn {
  margin-top: 5em;
  transition: 0.3s;
}
.visualSlider_wrap .slogan .inc {
  transform: translateX(20vw);
  opacity: 0;
}
.visualSlider_wrap .swiper-container-initialized + .slogan .inc {
  transform: translateX(0);
  transition: 1.5s;
  transition-timing-function: ease-in-out;
  opacity: 1;
}
.visualSlider_wrap .swiper-container-initialized + .slogan .t1 {
  transition-delay: 0;
}
.visualSlider_wrap .swiper-container-initialized + .slogan .logo {
  transition-delay: 0.2s;
}
.visualSlider_wrap .swiper-container-initialized + .slogan .t2 {
  transition-delay: 0.4s;
}
.visualSlider_wrap .swiper-container-initialized + .slogan .btn {
  transition-delay: 0.6s;
}
.visualSlider .el.swiper-slide-active .bg,
.visualSlider .el.swiper-slide-duplicate-active .bg {
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  transition: 3s;
}
.visualSlider_wrap .swiper_control {
  position: absolute;
  bottom: 2em;
  right: 3%;
  z-index: 10;
  color: #fff;
  color: var(--coF);
}
.visualSlider_wrap .paging {
  display: flex;
  align-items: flex-end;
}
.visualSlider_wrap .paging > span {
  position: relative;
  background: #fff;
  background: var(--bgF);
  opacity: 0.5;
  height: 3px;
  width: 2em;
  margin: 0 0.25em;
  margin-top: 2em;
  border-radius: 0;
  position: relative;
  transition: 0.3s;
}
.visualSlider_wrap .paging > span:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #fff;
  background: var(--bgF);
}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active {
  width: 7em;
  opacity: 1;
}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active:before {
  opacity: 1;
}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active:after {
  width: 100%;
  transition: 4s;
  transition-delay: 0.5s;
  transition-timing-function: ease-out;
}

.mainScroll {
  position: absolute;
  left: 50%;
  bottom: 2em;
  transform: translateX(-50%);
  z-index: 100;
}
.mainScroll a {
  line-height: 1;
  color: #fff;
  color: var(--coF);
  animation-name: downAni;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  position: relative;
}
.mainScroll a .xi {
  font-size: 2.5em;
}
.mainScroll a:before {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 100%;
  width: 1px;
  height: 4em;
  background: #fff;
  background: var(--bgF);
}
@keyframes downAni {
  70% {
    transform: translateY(0);
  }
  85% {
    transform: translateY(0.5em);
  }
  100% {
    transform: translateY(0);
  }
}

.main_special > li .in {
  padding: 1em 2em;
  border-radius: 1em;
  width: 28em;
  margin: 1em;
  height: 6em;
  background: #f5f5f5;
  background: var(--bgF5);
}
.main_special > li .in .ico {
  height: 4.75em;
  margin-right: 1.5em;
}
.main_special > li .in .tt .t1 {
  font-size: 1.25em;
  color: #666;
  color: var(--co6);
}
.main_special > li .in .tt .t2 {
  font-size: 1.75em;
  font-weight: 500;
}

.main_intro {
  margin: 5em 0;
  text-align: center;
}
.main_intro .logo {
  height: 6.125em;
}
.main_intro .t1 {
  font-size: 1.875em;
  margin: 0.75em 0 0 0;
}
.main_intro .t2 {
  font-size: 3em;
}

.main_tech > li .wrap_in .img_wrap {
  width: 50%;
}
.main_tech > li .wrap_in .con_wrap {
  width: 50%;
}
.main_tech > li .wrap_in .con_wrap .in {
  padding: 2em;
  padding-bottom: 0;
}
.main_tech > li .wrap_in .con_wrap .in .icon {
  font-size: 2em;
  width: 1.75em;
  line-height: 1.75em;
  text-align: center;
  border-radius: 0.25em;
  border: 1px solid #ddd;
  border-color: var(--lineD);
}
.main_tech > li .wrap_in .con_wrap .in .tit {
  font-size: 1.875em;
  font-weight: 700;
  margin: 0.375em 0;
}
.main_tech > li .wrap_in .con_wrap .in .listH {
  height: auto;
}
.main_tech > li .wrap_in .con_wrap .in .listH2 {
  height: auto;
}
.main_tech > li:nth-child(2n) .wrap_in .img_wrap {
  order: -1;
}
.main_tech > li:nth-child(2n) .wrap_in .con_wrap .in {
  padding-left: 2em;
}

.main_phone_wrap {
  background: #f5f5f5;
  background: var(--bgF5);
  padding-bottom: 5em;
}
.main_phone {
  position: relative;
  padding: 2em 0 6em 0;
}
.main_phone .con_wrap {
  width: 50%;
  position: relative;
}
.main_phone .con_wrap .el {
  text-align: center;
  position: relative;
  padding: 2em;
}
.main_phone .con_wrap .el .img img {
  width: 60%;
}
.main_phone .con_wrap .el .t1 {
  font-size: 2em;
  font-weight: 700;
  margin: 1em 0;
}
.main_phone .con_wrap .el .t2 {
  font-size: 1.5em;
  font-weight: 500;
}
.main_phone .con_wrap .el:not(:first-child):before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 1px;
  height: 10em;
  background: #ddd;
  background: var(--bgD);
  margin-bottom: 4em;
}
.main_phone .con_wrap .el:not(:first-child):after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7em;
  transform: translate(-50%, -50%);
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: #7c4dff;
  background: var(--bgP);
}
.main_phone .phone_wrap {
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
}
.main_phone .phone_wrap .box_in {
  max-width: 100%;
  text-align: center;
}
.phone_st {
  display: inline-block;
  position: relative;
}
.swiper-slide .phone_st {
  display: block;
}
.phone_st .phone_img {
  max-height: calc(90vh - 5em);
}
.phone_st .screen {
  position: absolute;
  left: 50%;
  /* top: 50%;
  width: 80%; */
  top: 51%;
  width: 73%;
  height: 85%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.phone_st .screen .in {
  overflow: hidden;
  width: 400%;
  transition: 0.3s;
}
.on-fixPhoneB .main_phone .phone_st .screen .in {
  transform: translateX(-25%);
}
.on-fixPhoneC .main_phone .phone_st .screen .in {
  transform: translateX(-50%);
}
.on-fixPhoneD .main_phone .phone_st .screen .in {
  transform: translateX(-75%);
}
.phone_st .in .img {
  width: 25%;
}
.phone_st .screen .in .img img {
  width: 99%;
}
.main_phone.on .phone_wrap {
  position: fixed;
  width: 100%;
  top: auto;
  bottom: 5vh;
}
.main_phone.on .phone_wrap .box_in2 {
  width: 50%;
  margin-left: auto;
}
.main_phone.bottom .phone_wrap {
  top: auto;
  bottom: 0;
  transform: translateY(0);
  position: absolute;
}

.main_platform {
}

.main_link_wrap {
  overflow: hidden;
}
.main_link > li {
  width: 50%;
  position: relative;
  color: #fff;
  color: var(--coF);
}
.main_link > li .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 50vw;
  height: 100%;
}
.main_link > li .bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  background: var(--bg0);
  opacity: 0.1;
  transition: 0.3s;
}
.main_link > li:nth-child(2n-1) .bg {
  left: auto;
  right: 0;
}
.main_link > li .in {
  position: relative;
  padding: 5vw;
}
.main_link > li .in .t1 {
  opacity: 0.7;
  font-size: 1.125em;
  margin-top: 1em;
}
.main_link > li .in .link {
  border: 1px solid #fff;
  border-color: var(--lineF);
  padding: 0.5em 1.5em;
  border-radius: 0.5em;
  margin-top: 2em;
  font-size: 0.938em;
  transition: 0.3s;
}
.main_link > li:hover .bg:after {
  opacity: 0.4;
}
.main_link > li:hover .in .link {
  background: #7c4dff;
  background: var(--bgP);
  border-color: transparent;
}

.main_pr .fix_wrap {
  width: 100%;
}
.main_pr .fix_wrap > li {
  width: 33.33%;
}
.main_pr .grid_wrap {
  width: 52.6%;
  display: none;
}
.main_pr .grid_wrap .el {
  width: 50%;
}
.main_pr .list {
  margin: 0 0 -2em -1em;
}
.main_pr .el .wrap_in {
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 0 0 2em 2em;
  cursor: pointer;
  position: relative;
  transition: 0.3s;
}
.main_pr .el .wrap_in:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #7c4dff;
  border-color: var(--lineP);
  border-radius: 1em;
  box-sizing: border-box;
  opacity: 0;
  transition: 0.3s;
}
.main_pr .el .wrap_in:hover {
  transform: translateY(-0.25em);
}
.main_pr .el .wrap_in:hover:after {
  opacity: 1;
}
.main_pr .el .wrap_in .cate {
  padding: 2em 2em 1.5em 2em;
}
.main_pr .el .wrap_in .cate .icon {
  width: 1.5em;
  line-height: 1.5em;
  font-size: 1.375em;
  margin-right: 0.25em;
  text-align: center;
  color: #fff;
  color: var(--coF);
  border-radius: 50%;
  font-family: xeicon;
}
.main_pr .el.press .wrap_in .cate .icon {
  background: #7c4dff;
  background: var(--bgP);
}
.main_pr .el.event .wrap_in .cate .icon {
  background: #f18bad;
  background: var(--bgC1);
}
.main_pr .el.ir .wrap_in .cate .icon {
  background: #6acacd;
  background: var(--bgC2);
}
.main_pr .el.data .wrap_in .cate .icon {
  background: #7ab0ed;
  background: var(--bgC3);
}
.main_pr .el.media .wrap_in .cate .icon {
  background: #ff3030;
  background: var(--bgC4);
}
.main_pr .el.press .wrap_in .cate .icon:before {
  content: "\ea5b";
}
.main_pr .el.event .wrap_in .cate .icon:before {
  content: "\eb16";
}
.main_pr .el.ir .wrap_in .cate .icon:before {
  content: "\e9cf";
}
.main_pr .el.data .wrap_in .cate .icon:before {
  content: "\ea9f";
}
.main_pr .el.media .wrap_in .cate .icon:before {
  content: "\ec32";
}
.main_pr .el .wrap_in .cate .tt:before {
  font-weight: 500;
  font-size: 1.25em;
  font-weight: 700;
}
.main_pr .el.press .wrap_in .cate .tt:before {
  content: "Press Release";
}
.main_pr .el.event .wrap_in .cate .tt:before {
  content: "Event";
}
.main_pr .el.ir .wrap_in .cate .tt:before {
  content: "IR";
}
.main_pr .el.data .wrap_in .cate .tt:before {
  content: "Archive";
}
.main_pr .el.media .wrap_in .cate .tt:before {
  content: "Media";
}
.main_pr .el .wrap_in .con {
  padding: 0 2em 3em 2em;
}
.main_pr .el .wrap_in .con .t1 {
  font-size: 1.125em;
  font-weight: 500;
}
.main_pr .el .wrap_in .con .t1.s1 {
  font-size: 1.5em;
}
.main_pr .el .wrap_in .con .t2 {
  font-size: 0.938em;
  color: #777;
  color: var(--co7);
  margin-top: 1.5em;
}
.main_pr .el .wrap_in .con .t2.s1 {
  font-size: 1em;
}
.main_pr .el .wrap_in .img img {
  width: 100%;
}
.main_pr .el .wrap_in .no_con {
  padding: 2em 0 3em 0 !important;
}
/* 협력사 */
.content {
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.content_row {
  width: inherit;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.listStyle {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
}
.linkList {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.imageContainer1 {
  display: flex;
  width: 210px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.imageContainer2 {
  display: flex;
  width: 250px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.imageContainer3 {
  display: flex;
  width: 160px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.imageContainer4 {
  display: flex;
  width: 210px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.imageContainer5 {
  display: flex;
  width: 180px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.imageContainer6 {
  display: flex;
  width: 160px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.imageContainer7 {
  display: flex;
  width: 140px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.imageContainer8 {
  display: flex;
  width: 140px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.image {
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listName {
  width: 170px;
  color: #000;
  letter-spacing: -0.42px;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
}
.listName span {
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}

/* 회사 소개 ci */
.ci_wrap {
  padding: 15px !important;
}
.ci_logo_wrap {
  display: flex;
  flex-direction: row;
  /* align-items: center; */
  justify-content: space-evenly;
  padding-bottom: 50px;
}
.ci_logo_box {
  position: relative;
}
.ci_img_wrap {
  padding-top: 30px;
  padding-left: 90px;
}
.ci_left {
  /* position: absolute; */
}
.ci_right {
  position: relative;
}

.ci_logo_box .t1 {
  font-size: 1.375em;
  font-weight: 700;
  text-align: left;
}

.ci_number_wrap {
  display: flex;
  margin-top: 10px;
  align-items: center;
  position: absolute;
  bottom: -50px;
}
.ci_bar {
  padding-right: 10px;
}
.ci_number {
  display: flex;
  flex-direction: column;
}
.ci_number p {
  color: #666;
}