* {
    margin: 0;
    padding: 0;
    word-break: keep-all;
	font-family: 'Noto Sans KR', sans-serif;
}
body {
	overflow-x: hidden;
}
.hana3-1 {}
.mark {position:fixed;top:0;left:0;z-index:999; }
.img {position:absolute; left:50%; transform:translateX(-50%);}
.m_img {width:100%;}
.m_img img{width:100%;}
@media(min-width:1100px){
	.m_img {display:none;}
}
@media(max-width:1099px){
	.img {display:none;}
}


.mont { font-family: "Montserrat"; }

/*
 * contents, wrapper
 */

 .contents {
	width: 100%;
	height: 100%;
	
 }

 .wrapper {
	max-width: 2000px;
	margin: auto;
	background: #f4f4f4;
	overflow: hidden;
 }


/*
 * top section
 */

 .top_obj {
	position: absolute;
	top: 0;
	max-width: 100%;
 }

  .top_sec_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rem 0;
    text-align: center;
	background: center / cover url('../img/top_bg.jpg') no-repeat;
 }

 .top_title {
 	width: 600px;
	max-width: 50%;
	margin-bottom: 45px;
 }

 .top_pc_desc {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: auto;
 }

 .top_pc_desc iframe {
	min-width: 1200px;
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 4.8;
}

 .top_m_desc { 
	display: none;
	margin-bottom: 3rem;
  }

 .top_m_desc embed{
    width: 100%;
 }

 @media only screen and (max-width: 1023px) {
   .top_pc_desc { display: none; }
   .top_m_desc { display: block; }
   .top_title { margin-bottom: 10px; }
 }


 /*
  * mid section
  */

  .mid_sec {
	background: bottom / contain url('../img/mid_bg.png') no-repeat;
  }
  
  .mid_wr { position: relative; }

  .mid_wr:first-child { margin: 10rem 0; }

  .mid_title { text-align: center; }

  .mid_title .mont {
	font: bold 0.938rem "Montserrat";
	letter-spacing: 0.375em;
    text-transform: uppercase;
  }

  .mid_title h1 {
	font: 400 2.75rem "Noto Sans kr";
	margin: 1.25rem 0 3.625rem;
	letter-spacing: -0.025em;
  }

  .mid_book_wr {
  	position:relative;
	display: grid;
	max-width: 1174px;
	box-shadow: 16px 16px 13px rgb(27 27 27 / 26%);
	margin: 8.5rem auto;
  }

  .mid_book a {
    display: block;
    background: #fff;
    width: 100%;
    height: 100%;
  }

  .mid_book_wr > * {
	grid-area: 1/-1;
  }

  .mid_book_wr > div {
	display: flex;
  }
  
  .book_labels {
	position: absolute;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
	pointer-events: none;
  }

  .labels {
	font: 900 548px "Montserrat";
  }

  .label1 {
	color: #e1ecf6;
	transform: translate(-570px, 30px);
  }

  .label2 {
	color: #f4e0d3;
	transform: translate(650px, -100px);
  }

  .label3 {
	color: #dce9ca;
	transform: translate(-665px, -180px);
    font-family: "Noto Sans kr";
  }

  .label4 {
	color: #c3e8e0;
	transform: translate(650px, -140px);
  }

  

  .mid_book_tb {
	max-width: 50%;
	z-index: 1;
  }

  .mid_book_grid {
    display: grid;
    grid: 1fr / 1fr 1fr;
    grid-gap: min(2vw, 2.25rem);
    margin: auto;
    padding: 1.25rem;
  }

  .mid_book_wr .tmp {
	max-width: 490px;
	margin: auto;
    padding: 1.25rem;
    width: calc(50% - 2.5rem);
	z-index: 1;
  }


  .mid_book {
    position: relative;
    max-width: 230px;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
	box-shadow: 0.375rem 0.375rem 0.688rem rgb(28 28 28 / 33%);
  }

  .mid_book img {
	width: 100%;
	transition: opacity .3s;
	aspect-ratio: 1 / 1;
  }

  .mid_book img:hover { opacity: .6; }

  .mid_book p {
    position: absolute;
    width: 100%;
    bottom: 5%;
    text-align: center;
    font: 500 1.125rem "Noto Sans kr";
	pointer-events: none;
  }

  .mid_connect_wr {
	max-width: 1080px;
    margin: 5rem auto;
  }

  .mid_flex {
	display: flex;
	justify-content: space-around;
  }
  
  .site_con {
    width: 100%;
    max-width: 266px;
    text-align: center;
  }

  .site_div {
    padding: 40px 0 50px;
    border: 3px solid #178cdb;
    border-radius: 20px;
	background: #fff;
    transition: box-shadow .3s;
  }

  .site_div:hover {
    box-shadow: 0 4px 9px #178cdb60;
  }

  .site_div a {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
	gap: 1rem;
  }

  .site_div p {
	font-size: 15px;
    font-weight: 700;
    color: #178cdb;
  }

  @media only screen and (max-width: 1200px) {
	  .mid_wr:first-child {
		margin: 5rem 0;
	  }

    .mid_book_wr, .mid_book_wr > div { 
		display: flex;
		flex-direction: column;
		width: fit-content;
	    text-align: center;
	}
	.mid_book_tb, .mid_book_wr .tmp { 
		max-width: 88%;
		margin: auto;
		margin-top: 20px;
	}
	.mid_book_wr .tmp { width: 90%; }
	.book_labels { display: none; }

  }

  @media only screen and (max-width: 1024px) {
	.site_con {
		width: 100%;
		margin: 0 auto 2.5rem;
	}

	.mid_connect_wr {
		margin: 1rem auto;
	}

	.mid_wr { padding: 0 1.25rem; }
  }

  @media only screen and (max-width: 768px) {
	.mid_title h1 { font-size: 1.75rem; margin-bottom: 2rem; }
	.mid_book p { font-size: 1rem; }

	.site_div { padding: 30px 0; }
  }

  

  /*
   * 컨퍼런스
   */

.conference {
	display: flex;
	min-height: 800px;
	justify-content: center;
    background: center / cover url('../img/conf_bg.png') no-repeat;
    padding: 3rem 2rem;
}

.conf_cont_wr {
	position: relative;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    max-width: 1150px;
    margin: auto;
}

.conf_cont_wr > div {
	transition: transform .4s;
	cursor: pointer;
}

.conf_cont_wr > div:hover {
	transform: scale(1.02);
}

.conf_title {
	background: #00679e;
    width: fit-content;
}

.conf_link {
    display: flex;
    place-content: center;
    place-items: center;
    width: 227px;
    height: 68px;
    border-radius: 45px;
    padding-right: 1rem;
    margin: 5rem 0 3rem;
    background: #1c953f 88% / auto url('../img/arrow_r.svg') no-repeat;
	font: 500 1.375rem "Noto Sans kr";
    text-align: center;
    color: #fff;
    transition: background 0.2s;
    cursor: pointer;
	text-decoration: none;
	box-shadow: 0.5rem 0.5rem 0 1px rgb(46 46 46 / 33%);
}

.conf_link:hover {
	background-color: #2d9d4e;
}

.conf_content {
	width: 100%;
	background: #fff;
}

.conf_content h4 {
	color:#006d71;
	font-weight:400;
}

.plan_div { 
	display: flex;
	margin-top: 45px;
}

.conf_content .plan_title {
	width: 30%;
	max-width: 100px;
	display: inline-block;
	border-top: 2px solid #006d71;
	padding-top: 5px;
	margin-right: 20px;
	font-weight: 500;
	vertical-align: top;
}

.plan_cont {
	display: inline-block;
	width: fit-content;
}

.plan_cont img {
	width: 100%;
}

.conf_ch {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
}


@media only screen and (max-width: 1200px) {
	.conf_cont_wr {
	    padding: 0 1rem;
	}
	.conf_title img { max-width: 60%; }
}

@media only screen and (max-width: 1024px) {
	.mid_flex {
		width: 100%;
		flex-direction: column !important;
	}

	.conf_cont_wr > div, .conf_ch {max-width: 35%;}

	.conf_link { margin-bottom: 0; }
}

@media only screen and (max-width: 800px) { 
	.conf_title { min-width: 0; }
	.conf_content { width: auto; }
	.conf_content .plan_title { margin-bottom: 0.6em; }
	.conf_link {
		width: 180px;
		height: 55px;
		font-size: 18px;
		margin: 0;
		margin-top: 3rem;
		padding-right: 1rem;
	}
	.plan_cont { width: 100%; font-size: 16px; }
	.plan_cont .mont, .plan_cont em, .plan_cont .mont b { font-size: 18px; }
	.plan_cont p {margin: 5px 0 -5px; font-size: 14px;}
}

@media only screen and (max-width: 600px) {
	.plan_div { display: block; }


	.conference {
        min-height: 120vmin;
	}
	
	.conf_ch {
		bottom: 0;
		max-width: 38%;
	}
}

@media only screen and (max-width: 425px) {
	.plan_cont .plan_wb::after {
		content: '';
		display: block;
		height: 0px;
	}
}


.btm_sec {
	width: 100%;
	background: #2d2d2d;
	padding: 2rem 0;
	text-align: center;
}

.btm_sec img {
	max-width: 90%;
    margin: auto;
}


.mod_btn { cursor: pointer; }


/* 모달 윈도우 */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  position: relative;
  width: 92%;
  max-width: 850px;
  max-height: calc(100vh - 30px);
  top: 1rem;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  overflow-y: auto;
}

.close {
  color: #fff;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
	position: sticky;
  top: 0;
  padding: 2px 16px;
  background-color: #FF4200;
  color: #fff;
  line-height: 35px;
}

.modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	padding: 0.5rem;
	overflow: auto;
	overflow-x: hidden;
}

.modal-body > div {
	display: none;
	width: 100%;
}

.modal-body > div img {
    width: fit-content;
    max-width: 100%;
}

.prev_img {
	width: fit-content !important;
}

@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:1rem; opacity:1}
}