/*--------------------------------------------------------------
# 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;   }

a { color: #01adff; transition: all 0.4s;  }
a:hover {  color: #005198; text-decoration: none}

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

body {font-size:18px;  line-height: 1.4;}
h1 {font-size: 55px;  }
h2 {font-size: 27px;   }
h3 {font-size: 25px;   }
h4 {font-size: 22px;  }
h5 {font-size: 20px;  }
h6 {font-size: 19px;  line-height: 1.5; margin:0 }
p {font-size: 16px; }

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

@media (max-width: 990px) { 
body { font-size:16px;  }
h1 { font-size: 8.5vw }	
h2 { font-size: 24px;  }
h3 { font-size: 22px;  }    
h4 { font-size: 18px;  }
h5 { font-size: 18px;  }
h6 { font-size:16px;  }
p {font-size: 14px; }    
}


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {  padding:0 50px 0 25px  ;   overflow: hidden; border-bottom: 1px rgba(150,150,150,0.5) solid;}
.wrap { border-left: 1px rgba(150,150,150,0.5) solid; }  
.topline {border-top: 1px rgba(150,150,150,0.5) solid; }

.container {max-width: 1600px; padding: calc(2% + 10px) }
.regist-page .container {max-width: 1100px; } 

.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: 0 0 0 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 }


/*--------------------------------------------------------------
# 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: 2;  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 }



body  { background:#00284c url(../images/bg.jpg) no-repeat top left; background-size: 100%  }

#hero .wrap {  background: url(../images/wrap_bg.png) no-repeat top left; background-size: 100%; padding-top: 1% }

#hero .title { width: calc(100% - 70px);  margin:0 auto; max-width: 1500px;  color:#ffffff }
#hero .title th { width: 50%; padding: calc(6% + 30px) 5% 2% 50px  }

.regist-page #hero .title {max-width: 1300px; }
.regist-page #hero .title th { padding-left: 25px;}
.regist-page #hero .title td img { width: 500px;}

.btn-get-started {    font-size: 23px; 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: #dff73f;  transition: all 0.4s;  }
.btn-get-started:hover { color: #061525; background: #83c410;  text-decoration: none; }

@media (max-width: 1600px) { 

}


@media (max-width: 920px) { 

 body  { background:#00284c url(../images/bg.jpg) no-repeat top left; background-size: 150%  }

#hero .title { width: calc(100% - 40px); margin-left: 10px; }
#hero .title th {display: block; width:100%; padding-left: 10px  }
#hero .title td {display: block; width:100%; text-align: center}
    
.regist-page #hero .title td {display: none}
    
.topmenu { margin-bottom: 0 }
.btn-get-started {    font-size: 20px; width:220px; padding: 17px 10px 15px 10px;  }    
}



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

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

@media screen and (max-width: 1400px) {
   .highlight  {  background-size:100%  }
 }
@media screen and (max-width: 760px) {
  }

/*--------------------------------------------------------------
# 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% }
.agendatable th  { padding: 10px 5px 7px 3%; font-size: 14px; text-transform: uppercase; border-top:2px #101010 solid; border-bottom:1px #101010 solid; vertical-align: top; text-align: left }
.agendatable td  { padding: 13px 5px 10px 3%; border-bottom:1px #e5e5e5 solid; line-height: 1.3}
.agendatable td p {margin: 5px 0 0 0; color:#555d6a; }  
.agendatable .mobile {display: none}


@media screen and (max-width: 560px) {
 .agendatable th:nth-child(3)  {display: none}
    
 .agendatable .mobile {display: inline}    
 .agendatable th,  .agendatable td   { padding-left: 5px; padding-right: 0 }
 .agendatable td:first-child { min-width: 65px }    
 .agendatable .ses { display: block; width: 100%; border-bottom: 0;  }   
 .agendatable .sp  { display: block; width: 100%; padding-top: 0;  }   
}


/*--------------------------------------------------------------
# Speakers
--------------------------------------------------------------*/
.speakers {background: #ffffff}

.speakers .box {  padding: 10px 20px;  border-radius: 10px; background: #ffffff; border:1px #e0e0e0 solid; box-shadow: 3px 3px 3px  rgba(0,0,0,0.05);  margin-top: 10px; margin-bottom: 20px; cursor: pointer; transition: all 0.4s;  }    
.speakers .box:hover { border:1px #04d0e6 solid; background: #f0fffe} 

.speakers th {width: 30%; padding:12px 20px 12px 0; vertical-align: top}
.speakers th img{width: 100%; max-width: 200px; min-width: 150px; }
.speakers td {padding:12px 0;}
.speakers td h6 {font-weight: bold; margin-bottom: 7px;}
.speakers td p {display: block; width: 100%; border-top:1px #e0e0e0 solid; padding-top:10px; margin-top:10px; margin-bottom:0; color:#555d6a;  }

.btn_abstract {background: #04d0e6; color:#ffffff !important; font-size:14px; padding:4px 5px 3px 5px; border-radius: 3px; display: inline-block; letter-spacing: -0.5px; text-decoration: none !important;  float: right; cursor: pointer}
.btn_abstract:hover { color:#01adff !important; border:1px #01adff solid;}

.modal  {z-index: 10000; }
.modal-dialog {max-width: 700px;}
.modal-header {background: #005198; border-bottom:0; padding: 10px 20px 5px 20px; min-height: 40px; color:#ffffff} 
.modal-header h5 {margin: 5px 0 ;}
.modal-body  {padding: 20px; }
.modal-body ul {  list-style: disc; padding-left:20px; margin-top:20px;  }    
.modal-body ul li {margin-top:5px;}
.modal .close { width:50px !important; cursor: pointer}

.modal-body h6:first-child {font-size: 21px}
.btn_down {background: #01adff; color:#ffffff !important; font-size:15px; padding:10px 25px; border-radius: 5px; display: inline-block; text-decoration: none !important; cursor: pointer}
.btn_down:hover { background: #005198; }

@media screen and (max-width: 1280px) {
 .speakers th img{ min-width: 120px; }  
}
@media screen and (max-width: 560px) {
 .speakers .box { padding: 5px 10px;  margin-top: 5px; margin-bottom: 10px; }
 .speakers th img{ min-width: 80px; }  
.modal-body th  { display: block; width:100%; text-align: center }
.modal-body th img { width:150px }    
.modal-body td  { display: block; width:100% }    
}


/*--------------------------------------------------------------
# Event
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Info
--------------------------------------------------------------*/
.info  { color:#ffffff;}

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

@media screen and (max-width: 779px) {
.info iframe { margin-bottom: 40px; }
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer { color: #707070;   text-align: left; color:#ffffff }

@media screen and (min-width: 779px) {
.footer .container {padding-top:30px; padding-bottom:30px }
}

.footer th {padding-right:20px; white-space: nowrap}
.footer th img {  max-width: 150px;  }
.footer td { border-left: 1px rgba(150,150,150,0.4) solid; padding-left: 30px;  }
.footer td img {  max-width: 180px; margin-left:10px; }

.footer .sns a {opacity: 0.6 ; font-size: 12px;  transition: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;  }
.footer .sns a img {width: 50px ; margin: 5px 0}
.footer .sns a:first-child img {margin-left:-10px;}
.footer .sns a:hover {opacity: 1.0}

@media screen and (max-width: 780px) {
.footer th {padding-right: 10px; }
.footer th img {  max-width: 100px;  }
.footer td { padding-left: 15px; }
.footer td img { max-width: 130px; display: block; margin-left: 0; margin-top:5px}

.footer .sns a img {width: 32px ; margin: 10px 0}
.footer .sns a:first-child img {margin-left:-7px;}
}


/*--------------------------------------------------------------
# Regist
--------------------------------------------------------------*/
.regist {background: #ffffff}
.regist .bg {padding:60px 0}
.regist .check {font-size:15px; padding-left:40px; } 
.regist .check input[type="checkbox"] {margin-left:-40px; margin-right:7px; ;}

.mandatory {color:#202020}    
.regist label {display: block}
.regist .phone  {width:75px !important; display: inline; padding-left:5px; padding-right:5px;}

input[type="radio"]  {width:25px;height:25px;  margin:3px 3px 3px 0; vertical-align:middle}
input[type="checkbox"] {width:25px;height:25px;  margin:3px 3px 3px 0; vertical-align:middle}

.regist h5 {margin:40px 0 10px 0; color:#000000; font-size:20px;}
.join_text {background: #f9f9f9; margin-top: 20px; margin-bottom: 15px; border: 1px solid #eeeeee; padding: 15px; font-size: 15px;color: #666; overflow-x: hidden; overflow-y: hidden;}

input::placeholder { color: #a0a0a0 !important; font-size:14px;  font-style: italic; }
textarea::placeholder { color: #a0a0a0 !important; font-size:14px;  font-style: italic; }
input::-webkit-input-placeholder {color: #a0a0a0 !important; font-size:14px;  font-style: italic; }

.btn {  font-size: 20px; font-weight: bold; text-transform: uppercase;  display: inline-block; text-align: center;  width:250px; padding: 17px 10px 15px 10px;  border-radius: 50px;   line-height: 1;  margin: 10px 0;  
         background: #01adff; color:#fff;   transition: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;  }
.btn:hover {  background: #005198;  color:#fff; text-decoration: none; }


.regist ul { list-style: none; margin:0 0 20px 20px; padding: 10px 0 0 0;  }
.regist ul .n  {display: block; width: 20px; float:left; margin-left: -20px;  font-weight: bold}
.regist ul .q  { line-height: 1.5;  font-weight: bold; margin-bottom:5px; }
.regist ul .a  {padding-left: 30px; }
.regist ul .a input[type="radio"], .regist ul .a input[type="checkbox"] {margin:0 3px 0 -30px}
.regist ul .a div { margin-top:5px;  margin-bottom: 10px; }
.regist ul .a textarea {width:100%; height:80px; margin: 8px 0 0 -25px}
.etc {width: calc(100% - 60px); display: inline; margin-left:5px; }



@media screen and (max-width: 780px) {
    .join_text {padding: 10px;  font-size: 13px; }
}

/*--------------------------------------------------------------
# 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;  }
}