@charset "UTF-8";
/* base */
/* base */
/* reset */
html, body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, table, th, td, form, fieldset, legend, input, textarea, button, select {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Pretendard", sans-serif, "돋움", Dotum, "굴림", Gulim, Helvetica, sans-serif;
  color: #333333;
  font-weight: 400;
  line-height: 1;
  -webkit-text-size-adjust: none;
}

html, body { font-size: 16px;}

h1, h2, h3, h4, h5, h6, strong {  font-size: 100%; line-height: 1;}
select, button, input, textarea, pre { font-family: "Pretendard", sans-serif, "돋움", Dotum, "굴림", Gulim, Helvetica, sans-serif; font-size: 16px; color: #333333;}
pre {  white-space: pre-wrap;}
fieldset, img, button, iframe {  border: 0;}
img, input, button { vertical-align: top;}
table { table-layout: fixed; width: 100%; border-collapse: collapse;  border-spacing: 0;  word-break: break-all;  word-wrap: break-word;}
address, em {  font-style: normal;}
ol, ul, li {  list-style: none;}
hr {  display: none;}
a {  text-decoration: none;  color: inherit;}
a:hover, a:active {  text-decoration: none;}
legend {  position: absolute;  left: -9999px;  top: 0;}
button {  background: none;  cursor: pointer;  -webkit-appearance: none;}
button::-moz-focus-inner { padding: 0;  border: 0;}

:focus {  outline: 0;}

* {  box-sizing: border-box;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}

/* Pretendard */
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Light.eot");
  src: url("fonts/Pretendard-Light.eot?#iefix") format("embedded-opentype"), url("fonts/Pretendard-Light.woff2") format("woff2"), url("fonts/Pretendard-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Regular.eot");
  src: url("fonts/Pretendard-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/Pretendard-Regular.woff2") format("woff2"), url("fonts/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Medium.eot");
  src: url("fonts/Pretendard-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/Pretendard-Medium.woff2") format("woff2"), url("fonts/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-SemiBold.eot");
  src: url("fonts/Pretendard-SemiBold.eot?#iefix") format("embedded-opentype"), url("fonts/Pretendard-SemiBold.woff2") format("woff2"), url("fonts/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Bold.eot");
  src: url("fonts/Pretendard-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Pretendard-Bold.woff2") format("woff2"), url("fonts/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-ExtraBold.eot");
  src: url("fonts/Pretendard-ExtraBold.eot?#iefix") format("embedded-opentype"), url("fonts/Pretendard-ExtraBold.woff2") format("woff2"), url("fonts/Pretendard-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Black.eot");
  src: url("fonts/Pretendard-Black.eot?#iefix") format("embedded-opentype"), url("fonts/Pretendard-Black.woff2") format("woff2"), url("fonts/Pretendard-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* base */

body:before {  content: "";  display: none;  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.3);  z-index: 99;}

header { position: fixed;  left: 0;  top: 0; width: 100%;  height: 150px;  margin: 0 auto;  z-index: 99;  transition: transform 0.6s;  transform: translateY(0);}
header.active { transform: translateY(-100%);}
header > div {  position: relative;  display: flex;  flex-wrap: wrap; justify-content: space-between; align-items: center;  width: 100%;  height: 100%;  margin: 0 auto; padding: 0 60px;
  background-color: #fff; border-bottom: 1px solid #BEDEFC;  transition: background 0.3s, border 0.3s;}
header .inner { width: calc(100% - 200px); max-width: 100%; padding: 0;}
header .gnb_wrap { display: flex;  flex-wrap: wrap;  justify-content: space-between;  align-items: center;}
header h1 a { display: block;}
header h1 a .logo { font-size: 0; text-indent: -9999px; display: block;  width: 200px; height: 47px; background-size: 100%; background-position: center;background-repeat: no-repeat;background-image: url("../img/common/logo.svg");}

@media (max-width: 480px) 
  {header h1 a .logo { width: 154px; height: 36px;}
}
header nav { margin: 0 auto;}
header nav > ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
header nav > ul > li { position: relative; padding: 0 20px; cursor: pointer;}

header nav > ul > li > a { position: relative; display: block; width: 100%; padding: 40px 25px; text-align: center;  font-size: 22px;  letter-spacing: -0.03em;  line-height: 1;  font-weight: 800;
  color: #333333;  transition: all 0.15s ease-in-out;}
header nav > ul > li > a:Hover {  color: #ff00d4;}
header nav > ul > li:last-child { padding-left: 40px;}



header .mo_menu { display: none;}

body.gnb-open:before {  display: block;}
@media (max-width: 1399px) {
  body.gnb-open {   overflow: hidden;  }
  body.gnb-open:before {    display: none;  }
}
body.gnb-open header {  background-color: transparent;}


@media (min-width: 1399px) {
  #gnbDim {position: absolute; top: 100px; left: 0; width: 100%; height: 0; background-color: #fff;z-index: -9999;transition: height 0.4s linear; }
  body.gnb-open #gnbDim { border-bottom: 1px solid #BEDEFC;  }
}

@media (max-width: 1399px) {
  body.gnb-open { overflow: hidden;  }
  body.gnb-open header .inner, body.gnb-open header .search-box {    right: 0;  }
  body.gnb-open header .search-box {  opacity: 1;  visibility: visible;  }
  body.gnb-open header .mo_menu {   top: 14px;   right: 20px;   animation-name: opacity;   animation-duration: 0.25s;   z-index: 999;  }
  body.gnb-open header .mo_menu:after {   background-image: url(../img/common/icon_close_bk.svg);  }
  body.gnb-open #gnbDim {  position: fixed;  top: 0;   right: 0; width: 100vw; height: 100vh !important; background: rgba(0, 0, 0, 0.3); transition: none !important; z-index: -1;}
  header {   height: 68px; }
  header > div {  align-items: flex-start;    padding: 16px 65px;  }
  header .inner {   position: fixed;    top: 0;    right: -100%;    transition: right 0.3s linear;    z-index: 9;  }
  header .gnb_wrap {   position: absolute;   top: 0;    right: 0;    max-width: 440px;    min-height: 100vh;    width: 100%;    height: 100%;  background-color: #fff; overflow-y: auto;   z-index: 999;  }
  header .gnb_wrap:before {  content: ""; position: absolute; width: 100%;  height: 100%; background-color: #fff;  }
  header .mo_menu { display: block; position: absolute;  top: 14px;  right: 65px;  width: 40px;    height: 40px;    margin-right: -8px;    z-index: 10;  }
  header .mo_menu:after { content: "";position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%); width: 24px;  height: 24px;  background-image: url(../img/common/icon_menu_bk.svg);
    background-repeat: no-repeat;    background-position: center;    background-size: 100% auto;  }
  header nav { display: block;  position: absolute;  top: 80px;  left: 0;  width: 100%;    padding: 0 20px;  overflow-y: auto; background-color: #fff; }
  header nav > ul {   flex-direction: column; align-items: baseline;  }
  header nav > ul > li {  width: 100%;   margin: 0; border-bottom:1px solid #000;  }
  header nav > ul > li.on > a:after, header nav > ul > li.current > a:after {   width: 0;  }
  header nav > ul > li.on .depth2, header nav > ul > li.current .depth2 {   height: auto;  opacity: 1;  }
  header nav > ul > li > a {    width: 100%;    padding: 20px 0;    text-align: left;    font-size: 18px;    letter-spacing: 0;    line-height: 1;  }
  header nav > ul > li:last-child { padding-left: 0px;padding-top: 20px;padding-bottom: 20px;}
  
}
@media (max-width: 1023px) {
  header > div {
    padding: 16px 20px;
  }
  header .mo_menu {
    right: 20px;
  }
 
}
@media (max-width: 767px) {
  header .inner {
    width: 100%;
  }
  header .gnb_wrap{
    max-width: 100%;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
footer { position: relative; width: 100%; margin: 0px auto 0;  background-color: #ddd;}
footer .footer_inner { padding: 48px 60px;  text-align: center;}

footer  img {  width: 180px;  height: auto; padding-bottom: 10px;}

footer p { line-height: 1.4; color: #000;  margin-top: 10px;}
footer .copyright { margin-top: 15px; color: #999999; font-size:13px;}



.pl{ border:none;padding: 10px 50px 10px 20px; border-radius: 10px; background-color: #ad00ed;  color:#fff;}
.pl:focus{border: 1px solid #ad00ed; box-sizing: border-box; border-radius: 10px;  outline: 2px solid #ad00ed; }

select{ appearance:none; background:url('../img/icon_arrow_down.svg') no-repeat right 10px center; background-size:12px;;}


@media (max-width: 1449px) {
  footer .left .logo {  margin-right: 40px; }
}
@media (max-width: 1399px) {
  footer .footer_inner {  width: 100%;  padding: 45px 65px;  }
  footer .copyright {    margin-top: 8px;  }
   
}
@media (max-width: 1023px) {
  footer { margin-top: 96px;  }
  footer .footer_inner { width: 100%;  padding: 48px 20px;  }
}


.floating { position: fixed; bottom: 64px; right: 60px; z-index: 99999;}
.floating ul li {margin-top:10px;width:90px; height:90px; background-color: #fff;border-radius:50%;box-shadow: 0 2px 20px 0 rgba(55, 25, 90, 0.75);cursor:pointer; display:block; display: table; font-size:14px; font-weight:700;}
.floating ul li:nth-child(1) {margin-top:0;}
.floating ul li span { margin:0 auto;text-align: center;color:#fff; display: table-cell; vertical-align: middle;}
.floating ul li.btn-support {background-color: #ad00ed}
.floating ul li.btn-pay {background-color: #0381ff;}
.floating ul li.btn-support{
  -webkit-animation: support-floating 1.5s ease-in-out infinite;
  -moz-animation: support-floating 1.5s ease-in-out infinite;
  -o-animation: support-floating 1.5s ease-in-out infinite;
  animation: support-floating 1.5s ease-in-out infinite;
}
@-webkit-keyframes support-floating {
	0% {-webkit-transform:translateY(5px)}
	50% {-webkit-transform:translateY(-5px);}
	100% {-webkit-transform:translateY(5px)}
}
@-moz-keyframes support-floating {
	0% {-moz-transform:translateY(5px)}
	50% {-moz-transform:translateY(-5px);}
	100% {-moz-transform:translateY(5px)}
}
@-o-keyframes support-floating {
	0% {-o-transform:translateY(5px)}
	50% {-o-transform:translateY(-5px);}
	100% {-o-transform:translateY(5px)}
}
@keyframes support-floating {
	0% {transform:translateY(5px)}
	50% {transform:translateY(-5px);}
	100% {transform:translateY(5px)}
}

.floating ul li.btn-top {background-color: #fff;text-align: center;}
.floating ul li.btn-top p{width: 30px;height: 30px; background-image: url("../img/common/topBtn_bl.svg");background-repeat: no-repeat; background-position: center; background-size:cover;margin:0 auto;}

@media (max-width: 1023px) {
  .floating { right: 40px;}
}
@media (max-width: 890px) {
  .floating { right: 20px;}
  .floating ul li {width:75px; height:75px; font-size:12px;;}

}



#wrap { overflow: hidden;}
body { position: relative;}
.inner { width: 100%; max-width: 1000px; padding: 0 65px; margin: 0 auto;}
@media (max-width: 1023px) {
  .inner {   padding: 0 24px;}
}
@media (max-width: 767px) {
  .inner {    padding: 0 20px; }
}

.btn { position: relative; display: inline-block; min-width: 160px; width: auto; padding: 16px 24px;  border-radius: 99px;  font-size: 18px;  letter-spacing: -0.03em;
  line-height: 1;  color: #fff;  text-align: center;  vertical-align: middle;  box-sizing: border-box;  background-color: #004eff;  overflow: hidden;  transition: color 0.2s linear;}
.btn span {  position: relative;  display: block;  width: 100%;}
.btn:before {  content: "";  position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 0;  background-color: #00309e; transition: height 0.2s linear;}
.btn.small { min-width: 84px; padding: 8px 16px; border-radius: 99px; font-size: 14px; letter-spacing: -0.03em;  line-height: 1.125rem;}


@media (min-width: 1024px) {
  .btn:hover:before {   height: 100%;  }
}
.btn.arrow span:after {
  background-image: url("../img/common/btn_arrow.svg");
}

.btn:disabled.type1 {
  background-color: #B8B8B8;
}
.btn:disabled.type1.arrow span:after {
  background-image: url("../img/common/btn_arrow.svg");
}
.btn:disabled.type2 {
  color: #999999;
  background-color: #DBDBDB;
  border: 1px solid #CaCaCa;
}
.btn:disabled.type2.arrow span:after {
  background-image: url("../img/common/btn_arrow_gray.svg");
}
.btn:disabled:hover:before {
  height: 0;
}
.btn.arrow {
  text-align: left;
}
.btn.arrow span {
  padding-right: 32px;
}
.btn.arrow span:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 17px;
  height: 13px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.btn.redirect span:after {
  transform: translateY(-50%) rotate(-45deg);
}
.btn.download {
  transition: all 0.25s linear;
}
.btn.download span {
  padding-right: 32px;
}
.btn.download span:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: background 0.25s linear;
  width: 20px;
  height: 20px;
  background-image: url("../img/common/icon_download.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.btn.download.blueLine span:after {
  background-image: url("../images/common/icon_download_hover.svg");
}
@media (min-width: 1024px) {
  .btn.download.blueLine:hover span:after {
    background-image: url("../img/common/icon_download.svg");
  }
}
@media (min-width: 1024px) {
  .btn.download:hover span:after {
    background-image: url("../img/common/icon_download.svg");
  }
}

@media (max-width: 1023px) {
  .btn {
    min-width: 150px;
    padding: 14px 24px;
    font-size: 16px;
    letter-spacing: -0.015em;
    line-height: 1;
  }

  .btn.download.icon {
    min-width: auto;
    width: 21px;
    height: 21px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }
  .btn.download.icon:before {
    border: none;
  }
  .btn.download.icon:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: background 0.25s linear;
    width: 20px;
    height: 20px;
    background-image: url("../img/common/icon_download_hover.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
  }
  .btn.download.icon span {    display: none;  }
}

.w_block { display: block;}

@media (max-width: 1023px) {
  .w_block {  display: inline-block;}
}

.m_block {  display: inline-block;}

@media (max-width: 1023px) {
  .m_block {    display: block;  }
}

.m_none { display: inline-block;}
@media (min-width: 768px) {
  .m_none {    display: block;  }
}
.w-only{display: block;}
@media all and (max-width:1024px){
	.w-only{display: none;}
}

.bg_gray {background-color: #f3f3f3;}
.bg_gray[data-motion] {transform: translateY(30%); transition: transform 0.75s, opacity 0.75s; opacity: 0;}
.bg_gray[data-motion].is_animated { transform: translateY(0); opacity: 1;}

@media (max-width: 767px) {
  .bg_gray.flex-container p { width:100%;  padding-right: 0px; padding-bottom:1.8rem;}
}


.mb100{margin-bottom:100px!important}
.mt20{margin-top:20px!important}

.mt50{margin-top:50px!important}
.mt100{margin-top:100px!important}
.mb30{margin-bottom:30px!important}
.mb10{margin-bottom:10px!important}
.fc-white{color: #fff!important;}
.d_flex {  display: flex;}
.txtc{text-align: center!important;}
.txtl{text-align: left!important;}




#wrap.main header {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}
#wrap.main header > div {
  background-color: transparent;
  border-bottom-color: transparent;
}
#wrap.main header h1 a .logo {
  background-image: url("../img/common/logo-wh.svg");
}

#wrap.main header nav > ul > li > a {
  color: #fff;
}
#wrap.main header nav > ul > li > a:Hover {
  color: #ff00d4;
}
#wrap.main header .mo_menu:after {
  background-image: url(../img/common/icon_menu.svg);
}
#wrap.main header.white > div {
  background-color: #fff;
  border-bottom-color: #BEDEFC;
}
#wrap.main header.white h1 a .logo {
  background-image: url("../img/common/logo.svg");
}
#wrap.main header.white nav > ul > li > a {
  color: #333;
}
#wrap.main header.white nav > ul > li > a:hover {
  color: #ff00d4;
}



@media (min-width: 1024px) {
  #wrap.main header.white .help:hover {
    background-color: #00309e;
  }
  #wrap.main header.white .help:hover span {
    transform: rotate(180deg);
    transition: transform 0.5s;
  }
}
#wrap.main header.white .mo_menu:after {
  background-image: url(../img/common/icon_menu_bk.svg);
}
#wrap.main #content .header_main {
  height: 100px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#wrap.main #content .header_main header {
  width: 100%;
  position: absolute;
}
#wrap.main #content .header_main header .inner {
  width: calc(100% - 200px);
  max-width: none;
}
#wrap.main footer {
  margin-top: 0;
}
#wrap.main h3 {
  font-size: 60px;
  letter-spacing: -0.03em;
  line-height: 3.75rem;
  font-weight: 800;
  color: #FFF;
  text-align: center;
  margin-bottom: 30px;
}

#wrap.main h3[data-motion] { transform: translateY(30%);transition: transform 0.75s, opacity 0.75s; opacity: 0;}
#wrap.main h3[data-motion].is_animated {transform: translateY(0); opacity: 1;}


#wrap.main h3 p {
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1;
  word-break: keep-all;
  word-wrap: break-word;
  line-height: 1.4;
  font-weight: 400;
  color: #FFF;
  margin-top: 30px;
}

@media (max-width: 1539px) {
 
  #wrap.main h3 {
    font-size: 56px;
    letter-spacing: -0.03em;
    /* 0.0625 * 16 = 1px */
    line-height: 3.5rem;
    margin-bottom: 48px; 
  }
  #wrap.main h3 p {
    font-size: 24px;
    letter-spacing: -0.03em;
    line-height: 1;
    line-height: 1.4;
  }
}
@media (max-width: 1023px) {
  #wrap.main h3 {
    font-size: 36px;
    letter-spacing: -0.03em;
    /* 0.0625 * 16 = 1px */
    line-height: 2.25rem;
    margin-bottom: 35px;
  }
  #wrap.main h3 p {
    font-size: 18px;
    letter-spacing: -0.03em;
    line-height: 1;
    line-height: 1.4;
    margin-top: 16px;
  }
  
}

#wrap.main #content .inner { width: 100%; max-width: 1400px; margin: 0 auto; position: relative;}

#wrap.main .sec_visual { width: 100%; height: 100vh; position: relative; overflow: hidden; background-color: #37195a;}
#wrap.main .sec_visual .conts-box {position: absolute; z-index: 99;top:200px; right:0;width:1068px;height:1085px; background-image: url("../img/visual-ob3.png"); background-repeat: no-repeat; background-size: cover; background-position: center; }
#wrap.main .sec_visual .txt-box {position: relative; z-index: 999;color:#fff;margin-top:18%;}
#wrap.main .sec_visual .txt-box [data-motion] { transform: translateY(30%);transition: transform 0.75s, opacity 0.75s; opacity: 0;}
#wrap.main .sec_visual .txt-box [data-motion].is_animated {transform: translateY(0); opacity: 1;}

#wrap.main .sec_visual .txt-box p {font-size: 22px; line-height: 1.5; font-weight: 800;margin-top:30px;}
#wrap.main .sec_visual .txt-box img {width:450px;}
#wrap.main .sec_visual .txt-box iframe{position: relative;}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 15s linear infinite;
  -moz-animation: rotating 15s linear infinite;
  -ms-animation: rotating 15s linear infinite;
  -o-animation: rotating 15s linear infinite;
  animation: rotating 15s linear infinite;
}


@media (max-width: 1330px) {
  #wrap.main .sec_visual {height: 900px; }
  #wrap.main .sec_visual .txt-box {text-align: center;margin-top:35%;}
  #wrap.main .sec_visual .conts-box {top:250px; right:-20px; }
}
@media (max-width: 768px) {
  #wrap.main .sec_visual {height: 800px; }
  #wrap.main .sec_visual .txt-box {margin-top:40%;}
  #wrap.main .sec_visual .conts-box {top:250px;}
}
@media (max-width: 545px) {
  #wrap.main .sec_visual {height: 600px; }
  #wrap.main .sec_visual .txt-box {margin-top:60%;}
  #wrap.main .sec_visual .conts-box {top:200px;right:-350px}
  #wrap.main .sec_visual .txt-box img {width:280px;}
  #wrap.main .sec_visual .txt-box p {font-size: 18px;;}

}

#wrap.main .sec01 { background-image: url(../img/main-about.jpg);  background-size: cover;  background-position: center;  padding: 150px 0;  overflow: hidden;}
#wrap.main .sec01 .inner .about p { color:#fff; font-size:18px; line-height: 1.5;text-align: center;;}
#wrap.main .sec01 .inner .about p[data-motion] { transform: translateY(30%);transition: transform 0.75s, opacity 0.75s; opacity: 0;}
#wrap.main .sec01 .inner .about p[data-motion].is_animated {transform: translateY(0); opacity: 1;}

#wrap.main .sec01 .inner .about .yoyaktable{padding-top:30px;max-width:980px; margin:0 auto;overflow-x: auto}
#wrap.main .sec01 .inner .about .yoyaktable table{ border-collapse: collapse;background-color: rgba(0, 0, 0, 0.4);backdrop-filter: blur(6.8px); color:#fff;}
#wrap.main .sec01 .inner .about .yoyaktable table td{font-size:15px;text-align:left;padding:10px 20px;word-break:keep-all; line-height:1.5; border-bottom:1px solid #4c2e50;}
#wrap.main .sec01 .inner .about .yoyaktable table td:first-child { font-weight:800; text-align: center; border-right:1px solid #4c2e50;}
#wrap.main .sec01 .inner .about .yoyaktable table td a{color:#fff; }
#wrap.main .sec01 .inner .about .yoyaktable table td.bb0{border-bottom:0; }
#wrap.main .sec01 .inner .about .yoyaktable table td img{vertical-align: middle; padding-right:20px;}

#wrap.main .sec01 .inner .about .yoyaktable[data-motion] { transform: translateY(30%);transition: transform 0.75s, opacity 0.75s; opacity: 0;}
#wrap.main .sec01 .inner .about .yoyaktable[data-motion].is_animated {transform: translateY(0); opacity: 1;}


@media (max-width: 1539px) {
  #wrap.main .sec01 {    padding: 100px 0;  }
  
}
@media (max-width: 1023px) {
  #wrap.main .sec01 {    padding: 60px 0;  }
  

}
@media (max-width: 890px) {
  #wrap.main .sec01 .inner .about p {font-size:16px;;}
  #wrap.main .sec01 .inner .about .yoyaktable table td{font-size:13px;;padding:7px 10px;}
  
}


#wrap.main .sec02 { padding: 150px 0; background: #0381ff;}
#wrap.main .sec02 .speaker { padding-top:10px;}

.speaker ul{ display: flex;margin-top:30px;flex-wrap: wrap; flex-direction: row; justify-content: left;}
.speaker ul li{width:32%; color:#fff; text-align: center; margin-right:2%; margin-bottom:2%;background-color: rgb(36, 39, 46, 0.9); 
  text-align: left;  border-radius: 12px;  padding: 80px 40px; box-sizing: border-box; overflow: hidden;position: relative;transition:all 0.3s ease;}
.speaker ul li[data-motion] { transform: translateY(30%);transition: transform 0.75s, opacity 0.75s; opacity: 0;}
.speaker ul li[data-motion].is_animated {transform: translateY(0); opacity: 1;}
.speaker ul li:hover, .speaker ul li:focus {transform:translateY(-10px); box-shadow:0 32px 28px rgba(0, 0, 0, 0.50);transition:all 0.3s ease;}


.speaker ul li:nth-child(3n){ margin-right:0%;}

.speaker ul li .name{text-align: left;}
.speaker ul li .name h4{font-size:2.3rem; font-weight:800; }
.speaker ul li .name p{font-size:1.4rem;color:#ad00ed;font-weight:700;margin-top:20px; }
.speaker ul li .name span{font-size:20px;margin-top:10px; display: block;color:#ddd;; }

.speaker ul li .career{margin-left:20px;margin-top:20px;}
.speaker ul li .career dd{font-size: 13px; line-height: 1.5; padding-top:5px; text-align: left; display: list-item; list-style-type: disc;}

.speaker ul li .photo{width:100px; height:100px; border-radius:99px; background:url(../img/speaker01.jpg) center no-repeat;background-size:cover; position: absolute;right:40px;top:60px; overflow: hidden; }
.speaker ul li .photo.spk2{ background:url(../img/speaker02.jpg) center no-repeat;background-size:cover; }
.speaker ul li .photo.spk3{ background:url(../img/speaker03.jpg) center no-repeat;background-size:cover; }
.speaker ul li .photo.spk4{ background:url(../img/speaker04re.jpg) center no-repeat;background-size:cover; }
.speaker ul li .photo.spk5{ background:url(../img/speaker05.jpg) center no-repeat;background-size:cover; }
.speaker ul li .photo.spk6{ background:url(../img/speaker06.jpg) center no-repeat;background-size:cover; }
.speaker ul li .photo.spk7{ background:url(../img/speaker07.jpg) center no-repeat;background-size:cover; }
.speaker ul li .photo.spk8{ background:url(../img/speaker08.jpg) center no-repeat;background-size:cover; }
.speaker ul li .photo.spk9{ background:url(../img/speaker09.jpg) center no-repeat;background-size:cover; }



@media (max-width: 1399px) {
  #wrap.main .sec01 {padding: 100px 0;  }
}
@media (max-width: 1023px) {
  #wrap.main .sec02 { padding: 80px 0; }
  .speaker ul li{width:48%;}
  .speaker ul li:nth-child(2n){ margin-right:0%;}
  .speaker ul li:nth-child(3n){ margin-right:2%;}
  
}
@media (max-width: 890px) {
  .speaker ul li{width:100%;margin-right:0%;}
  .speaker ul li:nth-child(3n){ margin-right:0%;}
}

@media (max-width: 767px) {
  #wrap.main .sec02 { padding:60px 0;}
  
}
@media (max-width: 680px) {
.speaker ul li .name p{font-size:1.2rem;}
.speaker ul li .name p.ls10{letter-spacing:-2px;}

}

#wrap.main .sec03 { padding: 150px 0;  background-color: #37195a; }
#wrap.main .sec03 .session { margin-top:10px;}

#wrap.main .sec03 .session[data-motion] { transform: translateY(30%);transition: transform 0.75s, opacity 0.75s; opacity: 0;}
#wrap.main .sec03 .session[data-motion].is_animated {transform: translateY(0); opacity: 1;}

.session .timetable{overflow-x: auto;overflow-y:hidden;}
.session .timetable table{ border-collapse: collapse;margin-top:10px; }
.session .timetable table th{font-size:22px;text-align:center;padding:20px;word-break:keep-all; line-height:1.5; border-top:2px solid #fff; border-right:1px solid #fff;border-bottom:2px solid #fff;color:#fff;}
.session .timetable table th:last-child{border-right:0;}

.session .timetable table td{font-size:16px; text-align:center;padding:30px 20px; word-break:keep-all; line-height:1.5;border-bottom:2px solid #fff;border-right:1px solid #fff;color:#fff; vertical-align: middle;}
.session .timetable table td:last-child{border-right:0;}
.session .timetable table td.tit{ text-align:center;padding:15px 20px; ;background: linear-gradient(90deg, #ad00ed 0%, #2c124b 100%); }
.session .timetable table td.tit2{ text-align:center;padding:15px 20px; ;background: linear-gradient(90deg, #03b5ff 0%, #245afe 100%); }

.session .timetable table td.break{ text-align:center;padding:10px 20px; }

.session .timetable table td p{font-size:22px;font-weight:800; margin-bottom:4px; color:#ff6df3}
.session .timetable table td p.p2{color:#1bdcff}

.session .timetable table td span{display: inline-block;padding:7px 15px; border-radius: 99px;font-size:12px;font-weight:600; margin:10px 10px 0px 0; letter-spacing: -0.5px;background-color: #4d326c;;}
.session .timetable table td.time{text-align: center; padding:0px 20px;}

.session .timetable table td strong{font-weight: 800;}

#wrap.main .sec03 .session small {padding-top:10px;color:#fff;display: block;}

@media (max-width: 1539px) {
  #wrap.main .sec03 {  padding: 160px 0;  }
}
@media (max-width: 1023px) {
  #wrap.main .sec03 { padding: 120px 0; }
  .session .timetable table th{font-size:20px;padding:15px;}
  .session .timetable table td{font-size:15px; padding:20px 10px; }

}
@media (max-width: 767px) {
  #wrap.main .sec03 {  padding: 75px 0 75px;  }
  .session .timetable table th{font-size:18px;}
  .session .timetable table td{font-size:13px; padding:10px 5px; }
  .session .timetable table td p{font-size:18px;}
  .session .timetable table td span{padding:5px 10px;font-size:11px;font-weight:500; margin:7px 7px 0px 0; }

}
@media (max-width: 599px) {
  .session .timetable table { min-width: 550px !important;   display: block;}
}

.scroll::-webkit-scrollbar {
	width: 4px;
	height: 4px;
  }
  .scroll::-webkit-scrollbar-thumb {
	background-color: #107AF2;
	border-radius: 10px;
	background-clip: padding-box;
  }
  .scroll::-webkit-scrollbar-track {
	background-color: #D9D9D9;
	border-radius: 10px;
  }



#wrap.main .sec04 { background: #000; padding: 100px 0; }

/* 탭 전체 스타일 */
.tabs {padding-top:30px; overflow:hidden; max-width:980px; margin:0 auto;}
.tabs[data-motion] { transform: translateY(30%);transition: transform 0.75s, opacity 0.75s; opacity: 0;}
.tabs[data-motion].is_animated {transform: translateY(0); opacity: 1;}

/* 탭 스타일 */
.tab_item {width: 33%;padding:20px; background-color: #262626; border-radius:4px; box-sizing: border-box;letter-spacing: -0.06em;color:#fff;font-weight:800;line-height:1.4;font-size:20px; cursor: pointer; transition: all 0.2s ease;display:inline-block;text-align: center;}
.tab_item:hover { opacity: 0.75;}

/* 라디오 버튼 UI삭제*/
input[name="tab_item"] {  display: none;}

/* 탭 컨텐츠 스타일 */
.tab_content { display: none; clear: both; overflow: hidden;}
.tab_content [data-motion] { transform: translateY(30%);transition: transform 0.75s, opacity 0.75s; opacity: 0;}
.tab_content [data-motion].is_animated {transform: translateY(0); opacity: 1;}


/* 선택 된 탭 콘텐츠를 표시 */
#all:checked ~ #all_content,#programming:checked ~ #programming_content,#design:checked ~ #design_content {  display: block;}

/* 선택된 탭 스타일 */
.tabs input:checked + .tab_item {background-color: #ad00ed;;color:#000;border:1px solid #ad00ed;}


.faq{padding-top:30px;}
.accordion {background-color: #262626;color: #fff; font-weight:800;cursor: pointer; padding: 20px; border-radius:99px; width: 100%; font-size:20px; line-height: 1.5; text-align: left; outline: none;transition: 0.4s;}
.activeon, .accordion:hover {  background-color: #37195a; color:#fff;}
.accordion:after {content: '\002B'; color: #fff; font-weight: bold; float: right; margin-left: 5px;}
.activeon:after {content: "\2212";}
.panel {padding: 0 18px;  background-color: #262626; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;border-radius: 20px;margin-top:10px;margin-bottom:10px;}
.panel div{padding: 50px 20px;text-align: left; color:#fff; line-height: 1.5;font-size:20px;}
.accordion span {font-size: 22px; font-weight:900;color:#ad00ed;}
.panel span{ font-size: 18px; font-weight:800;color:#ad00ed;}



@media (max-width: 1539px) {
  #wrap.main .sec04 {
    padding: 100px 0 144px;
  }
}
@media (max-width: 1023px) {
  #wrap.main .sec04 { padding: 100px 0 80px; }
  .tab_item {width: 32%;;}
 
}

@media (max-width: 890px) {
  .tab_item {font-size:16px;;}
  .accordion { padding: 10px; border-radius:4px;font-size:16px;}
  .panel {padding: 0 12px; border-radius: 4px;;}
  .panel div{padding: 20px 10px;font-size:15px;}

}
#wrap.main .sec05{ background: #000; padding: 50px 0; box-sizing: border-box;}
#wrap.main .sec05 .location{ background: #ddd; height:350px;}
#wrap.main .sec05 .location[data-motion] { transform: translateY(30%);transition: transform 0.75s, opacity 0.75s; opacity: 0;}
#wrap.main .sec05 .location[data-motion].is_animated {transform: translateY(0); opacity: 1;}

#wrap.main .sec05 p{ margin-top:20px;color:#fff; text-align: center;line-height: 1.5; }
#wrap.main .sec05 span{margin-top:10px; font-size:14px;text-align: center; display: block;}

#wrap.main .sec06{ background: #420da8; padding: 100px 0; box-sizing: border-box;}
#wrap.main .sec06 p{ margin-top:50px;color:#fff; text-align: center;line-height: 1.5; }


@media (min-width: 1400px) {
  body.gnb-open #wrap.main header > div, body.gnb-search #wrap.main header > div {
    background: #fff;
    border-bottom-color: #BEDEFC;
  }
  body.gnb-open #wrap.main header > div:not(.bg), body.gnb-search #wrap.main header > div:not(.bg) {
    transition: 0s;
  }
  body.gnb-open #wrap.main header h1 a .logo, body.gnb-search #wrap.main header h1 a .logo {
    background-image: url("../img/common/logo.svg");
  }
  body.gnb-open #wrap.main header nav > ul > li > a, body.gnb-search #wrap.main header nav > ul > li > a {
    color: #333333;
  }
  body.gnb-open #wrap.main header nav > ul > li.current > a, body.gnb-search #wrap.main header nav > ul > li.current > a {
    color: #004eff;
  }
  body.gnb-open #wrap.main header .mo_menu:after, body.gnb-search #wrap.main header .mo_menu:after {
    background-image: url(../img/common/icon_close_bk.svg);
  }
}
@media (max-width: 1399px) {
  body.gnb-open #wrap.main header nav > ul > li > a, body.gnb-search #wrap.main header nav > ul > li > a {
    color: #333333;
  }
  body.gnb-open #wrap.main header nav > ul > li.current > a, body.gnb-search #wrap.main header nav > ul > li.current > a {
    color: #004eff;
  }
  body.gnb-open #wrap.main header .mo_menu:after, body.gnb-search #wrap.main header .mo_menu:after {
    background-image: url(../img/common/icon_close_bk.svg);
  }
}
.modal { position: fixed; top:15%; left: 35%; display:block;z-index: 999999999999; overflow: hidden; outline: 0;background-color: none;}
.modal.start_pop {}
.modal.start_pop .modal-footer{width:auto; background-color: #000; color:#ddd; padding:7px 15px; box-sizing: border-box;font-size:12px;}
.modal.start_pop .modal-footer .pop-close { cursor: pointer; display: inline-block;color:#ddd; float: right;}
.modal.start_pop .modal-footer .check-area {display: inline-block;}
.modal.start_pop .modal-footer .check-area label{ cursor: pointer; color:#ddd;display: inline-block;}
.modal.start_pop .modal-footer .check-area input { width:10px; height:10px;cursor: pointer; color:#ddd;display: inline-block;
    -webkit-border-radius: 0;
    -webkit-appearance:auto ;
    -moz-appearance: auto;
    appearance: auto;}

.modal.start_pop .modal-body{margin:0;}
.modal.start_pop .modal-body img{width:auto;border:1px solid #0a0770;}

@media screen and (max-width: 1200px) {
  .floating_banner, .modal {
      top: 10%;
      left: 20%;
  }
  .floating_banner .floating_banner_close {
      top: 19px;
      right: 20px;
  }
}
@media screen and (max-width: 900px) {
  .floating_banner {
    top: 10%;
    left: 10%;
    margin-left: 100px;
  }
}
@media screen and (max-width: 600px) {
  .floating_banner {
    top: 10%;
    left: 10%;
    margin-left: 10px;
  }
  .floating_banner a img{
      width:320px!important;
  }
  .modal.start_pop .modal-body img{width:320px!important;}

}

@media screen and (max-width: 400px) {
  .floating_banner, .modal {
    top: 10%;
    left: 1.5%;
    margin-left: 30px;
  }
  .floating_banner a img{
      border:0;
      width:270px!important;
  }
  .modal.start_pop .modal-body img{width:270px!important;}

}