/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

@font-face {  font-family: "AkkuratPro";  font-style: normal;  font-weight: 400;  src: url("https://cdn-static.bizzabo.com/fonts/AkkuratPro_Regular.ttf");  font-display: swap;}
@font-face {  font-family: "Hexagon-Akkurat";  font-style: normal;  font-weight: 400;  src: url("https://cdn-static.bizzabo.com/fonts/Hexagon_Akkurat_Web.woff");  font-display: swap;}
@font-face {  font-family: "Hexagon-Akkurat";  font-style: italic;  font-weight: 400;  src: url("https://cdn-static.bizzabo.com/fonts/Hexagon_Akkurat_Web_Italic.woff");  font-display: swap;}
@font-face {  font-family: "Hexagon-Akkurat";  font-style: normal;  font-weight: 700;  src: url("https://cdn-static.bizzabo.com/fonts/Hexagon_Akkurat_Web_Bold.woff");  font-display: swap;}
@font-face {  font-family: "Hexagon-Akkurat";  font-style: italic;  font-weight: 700;  src: url("https://cdn-static.bizzabo.com/fonts/Hexagon_Akkurat_Web_Bold_Italic.woff");  font-display: swap;}
@font-face {  font-family: "Hexagon-Akkurat";  font-style: normal;  font-weight: 300;  src: url("https://cdn-static.bizzabo.com/fonts/Hexagon_Akkurat_Web_Light.woff");  font-display: swap;}
@font-face {  font-family: "Hexagon-Akkurat";  font-style: italic;  font-weight: 300;  src: url("https://cdn-static.bizzabo.com/fonts/Hexagon_Akkurat_Web_Light_Italic.woff");  font-display: swap;}

body {  font-style: normal;  font-family: Hexagon-Akkurat, Pretendard, 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0;  color: #212121;  word-break:keep-all; background:#061525; }

.container {max-width: 1200px;}

a { color: #005198; }
a:hover {  color: #00284c; text-decoration: none}

.sky {color:#01adff}
.sea {color:#04d0e6}
.green {color:#83c410}
.blue {color:#005198}
i {vertical-align: middle}

body {font-size:17px;  line-height: 1.4; font-weight: 400;   }
p  {font-size:15px;  }
h1 {font-size: 55px; font-weight: bold }
h2 {font-size: 29px;  font-weight: bold }
h3 {font-size: 25px;  font-weight: bold }
h4 {font-size: 22px;  font-weight: bold }
h5 {font-size: 19px;  font-weight: bold }
h6 {font-size:18px;  font-weight: normal; }

ul {padding-left:15px; margin-bottom:0 }
ul li {padding-top:3px}

@media (max-width: 991px) { 
.container { padding:0 ;}    

body { font-size:14px;  }
p { font-size:13px;  }    
h1 { font-size: 8.5vw }	
h2 { font-size: 24px;  }
h3 { font-size: 22px;  }    
h4 { font-size: 17px;  }
h5 { font-size: 16px;  }
h6 { font-size:15px;  }
}

/*--------------------------------------------------------------
# Header - 측면 네비게이션
--------------------------------------------------------------*/
#header {  position: fixed;  top: 0;  right: 0;  bottom: 0;  z-index: 9997;  transition: all 0.5s;  padding: 15px;  overflow-y: auto;}
@media (max-width: 991px) {
  #header {    width: 300px;    background: #fff;    border-right: 1px solid #e6e9ec;    right: -300px;  }
}
@media (min-width: 992px) {
  #main {    margin-left: 100px;  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
#header .nav-menu * {  margin: 0;   padding: 0;  list-style: none;}
#header .nav-menu > ul > li {  clear: right;  position: relative;  white-space: nowrap;}
#header .nav-menu a {  float: right;   display: flex;  align-items: center;  color: #005198;  padding: 6px 14px;  margin-bottom: 8px;  font-size: 14px;  border-radius: 50px;  background: #f2f3f5;  width:100%;  height: 45px;  overflow: hidden;  transition: 0.3s;}
#header .nav-menu a i { float: right;   font-size: 18px;}
#header .nav-menu a span {   padding: 3px 5px 0 5px;  color: #005198;}
@media (min-width: 992px) {
  #header .nav-menu a {    width: 45px;  }
  #header .nav-menu a span {    display: none;    color: #fff;  }
}
#header .nav-menu a:hover, #header .nav-menu .active > a, #header .nav-menu li:hover > a {  color: #fff;  background: #01adff;}
#header .nav-menu a:hover span, #header .nav-menu .active > a span, #header .nav-menu li:hover > a span {  color: #fff;}
#header .nav-menu a:hover, #header .nav-menu li:hover > a {  width: 100%;  color: #fff;}
#header .nav-menu a:hover span, #header .nav-menu li:hover > a span {  display: block;}
/* Mobile Navigation */
.mobile-nav-toggle {  position: fixed;  right: 10px;  top: 15px;  z-index: 9998;  border: 0;  background: none;  font-size: 24px;  transition: all 0.4s;  outline: none !important;  line-height: 1;  cursor: pointer;}
.mobile-nav-toggle i {  color: #99d6ff;}
.mobile-nav-active {  overflow: hidden;}
.mobile-nav-active #header {   right: 0;}
.mobile-nav-active #header i {display: none}
.mobile-nav-active .mobile-nav-toggle i {  color: #01adff;}


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.topmenu { margin-bottom: 50px; margin-top: 12px; }
.topmenu ul   { list-style: none; font-size:15px;   text-align: right}
.topmenu ul li { display: inline-block; margin-left: 32px;  }
.topmenu ul li a { color:#ffffff }
.topmenu ul li a:hover { color:#a5d867 }


#hero { text-align: right;   background:#061525 url(../images/bg2.jpg) fixed no-repeat top center;  }

#hero .logo img { width: 30%; max-width: 140px; }
#hero .h1 img { width: 85%; max-width: 850px;}
#hero .h1 img:last-child { display: none }
#hero h4 {color:#ffffff; }
#hero h4 a { color: #7dfffc }
#hero h4 a:hover {  color: #01adff }

.btn-get-started {    font-size: 22px; font-weight: bold; text-transform: uppercase;  display: inline-block; text-align: center;  width:260px; padding: 20px 10px 18px 10px;  border-radius: 50px;  transition: 0.5s;  line-height: 1;  margin: 10px 0;  color: #00284c; background: #7dfffc;  -webkit-animation-delay: 0.8s;  animation-delay: 0.8s;  }
.btn-get-started:hover { color: #061525; background: #04d0e6;  text-decoration: none; }

.btn-down {    font-size: 16px; font-weight: bold; display: inline-block; text-align: center;  padding: 12px 13px 10px 13px;  border-radius: 5px;  transition: 0.5s;  line-height: 1;  margin: 15px 0 5px 0;  background: #a5d867;  -webkit-animation-delay: 0.8s;  animation-delay: 0.8s;  }
.btn-down:hover {  background: #c3ff7a;  text-decoration: none; }


@media (max-width: 1400px) { 
#hero  { background-position : left 30% top; }    
}


@media (max-width: 990px) { 
    

#hero .logo {text-align: left}

#hero .h1 img:first-child  { display: none }    
#hero .h1 img:last-child  { display: inline-block; width: 95%; max-width: 500px; }
    
.btn-get-started {    font-size: 20px; width:220px; padding: 17px 10px 15px 10px;  }    
}



/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {  padding: calc(2% + 10px) 80px;  overflow: hidden;}
.section-title h2 {  padding: 0;  margin-top: 0 ; margin-bottom:20px;  letter-spacing: 1; font-weight: 800; text-align: left; text-transform: uppercase}

@media (max-width: 990px) { 
section {  padding: calc(2% + 10px);  overflow: hidden;}
.section-title h2 {  margin-bottom: 5px;  }
}

.infotable { width:100%; border-top:2px #101010 solid }
.infotable th, .infotable td { border-bottom:1px #101010 solid; vertical-align: top; padding-top: 15px; padding-bottom: 15px }
.infotable th  {padding-right:15px}
 
.infotable td ul {padding-left:20px; margin-bottom:0 }


/*--------------------------------------------------------------
# Intro
--------------------------------------------------------------*/
.intro .box  {background: url(../images/intro_bg.png) right bottom; padding: calc(2% + 10px) ; border-top-left-radius: 10px; text-align:left;  }
.intro h6 { color:#ffffff;  line-height: 1.5; margin:0 }
@media (max-width: 780px) { 
  .intro .box  { background-size: 150%  }    
  .intro h6 br {display: none}
}

/*--------------------------------------------------------------
# Highlight
--------------------------------------------------------------*/
.highlight  { background:#00284c url(../images/highlight_bg.png) fixed repeat-y left bottom; text-align: center; color:#ffffff }

@media screen and (min-width: 990px) {
    .highlight span { white-space: nowrap}
}
@media screen and (max-width: 991px) {
   .highlight  { background:#00284c url(../images/highlight_bg.png) no-repeat left bottom; background-size: cover; text-align: left;  }
 }
@media screen and (max-width: 760px) {
    .highlight img {width:48%}  
  }

/*--------------------------------------------------------------
# Agenda
--------------------------------------------------------------*/
.features .nav-tabs { border: 0;  }
.features .nav-link  { border: 1px solid #005072; padding: 15px 10px 12px 10px;  transition: 0.3s;  color: #005072;  border-radius: 0;  display: flex;  align-items: center;  justify-content: center;}
.features .nav-link h5 { margin: 0; }
.features .nav-link:hover { background: #005072;  color: #fff;  border-color: #005072;}
.features .nav-link.active { background: #005072;  color: #fff;  border-color: #005072;}

.agenda { background: #ffffff}
.agendatable { width:100%;  box-shadow: 3px 3px 3px  rgba(0,0,0,0.05);  }
.agendatable td { border-bottom:1px #eeeeee solid; border-left:1px #eeeeee solid; padding: 12px; line-height: 1.3}
.agendatable th  {font-size: 13px; background: #00284c; color:#ffffff; text-transform: uppercase; vertical-align: top; padding: 12px; text-align: center }
.agendatable span {display: block; font-size:15px; margin-top: 7px; color:#555d6a; line-height: 1.2}  

.agendatable td small {display: inline-block; font-weight: bold; color:#00284c; border:1px #00284c solid; padding: 2px 10px 1px 10px; border-radius: 20px; }

 @media screen and (max-width: 980px) {
.agendatable span {font-size:14px; margin-top:5px; }  
}
 @media screen and (max-width: 560px) {
.agendascroll {overflow-x: scroll; }
.agendatable td, .agendatable th  { padding: 8px; }  
}




/*--------------------------------------------------------------
# Speakers
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Sponsors
--------------------------------------------------------------*/
.sponsors {  background:#f4f5f8;  }
.sponsors .box {  padding:20px;  border-radius: 10px; background: #ffffff; border:1px #e0e0e0 solid; box-shadow: 3px 3px 3px  rgba(0,0,0,0.05); margin-top:5px; margin-bottom:15px;  }    
    
.sponsors .box img {  margin: 5px auto; width: 200px }
.sponsors .box h5  {  font-size: 20px; border-top:1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; padding:10px 0; margin: 15px 0  }
.sponsors .box h6  {  font-size: 15px; font-weight: 400; margin:20px 0 }
.sponsors .box p    {  margin-bottom: 0; color:#555d6a;    }
    
@media screen and (min-width: 780px) {
.platinum .row  { padding:10px 0;   }
}


/*--------------------------------------------------------------
# Info
--------------------------------------------------------------*/
.info  {background:#00284c url(../images/info_bg.png) fixed repeat-y bottom right;  color:#ffffff;}

@media screen and (max-width: 1020px) {
   .info  { background:#00284c url(../images/info_bg.png) no-repeat bottom right; background-size: cover }
 }
@media screen and (max-width: 740px) {
   .info  { background:#00284c }
 }

.contact a {color: #99d6ff}
.contact a:hover {color: #01adff}
.contact .email {margin-right: 20px;}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer { color: #707070;  font-size: 12px;  text-align: left;  }
.footer img { width: 45%; max-width: 200px;  }
.footer .sns a {opacity: 0.6 ;  transition: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;  }
.footer .sns a img {width: 50px ; margin:10px 0}
.footer .sns a:first-child img {margin-left:-10px;}
.footer .sns a:hover {opacity: 1.0}

/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq .faq-list {  padding: 0;}
.faq .faq-list ul {  padding: 0;  list-style: none;}
.faq .faq-list li + li {  margin-top: 10px;}
.faq .faq-list li {  padding: 0 15px;  background: #f9f9f9;  border-radius: 4px; border:1px #f0f0f0 solid;  position: relative;}
.faq .faq-list a { color:#005072;  display: block;   position: relative;  padding: 15px 30px 12px 30px;    outline: none; text-decoration: none; }
.faq .faq-list a h6 {font-weight: bold}
.faq .faq-list .icon-help {  font-size: 24px;  position: absolute;  right: 0;  top: 12px;  left: 15px;  color: #005072;}
.faq .faq-list .icon-show, .faq .faq-list .icon-close {  font-size: 24px;  position: absolute;  right: 0;  top: 12px;}
.faq .faq-list p { border-top:1px #e9e9e9 solid;  margin-bottom: 0;  padding: 15px 0 12px 30px ;}
.faq .faq-list p a { display: inline; padding:0; margin:0; font-size:16px; font-weight: normal }
.faq .faq-list .icon-show {  display: none;}
.faq .faq-list a.collapsed {  color: #343a40;}
.faq .faq-list a.collapsed:hover {  color: #000000;}
.faq .faq-list a.collapsed .icon-show {  display: inline-block;}
.faq .faq-list a.collapsed .icon-close {  display: none;}
@media (max-width: 1200px) {
  .faq .faq-list {    padding: 0;  }
}
.faq .info i {  font-size: 30px;  color: #606060;   background: #f0f0f0;  float: left;  width: 50px;  height: 50px;  display: flex;  justify-content: center;  align-items: center;  border-radius: 50px;  transition: all 0.3s ease-in-out;  margin-bottom:10px; }

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {  position: fixed;  display: none;  right: 10px;  bottom: 5px;  z-index: 99999;}
.back-to-top i {  display: flex;  align-items: center;  justify-content: center;  font-size: 28px;  width: 40px;  height: 40px;  border-radius: 50px;  background: rgba(255, 255, 255, 0); color: #a5d867;  transition: all 0.4s;}  
.back-to-top i:hover {  color: #a5d867;}

/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {    transition-delay: 0 !important;  }
}