/* Style for our fullpage 
* --------------------------------------- */
h1{
	font-family: 'SEBANG_Gothic_Regular';
    font-size: 5em;
    font-weight: 500;
    color: #fff;
    margin:0;
}
.section{
    text-align:center;
}
.section p,
.intro p{
    color: #fff;
}


/* Centered texts in each section
* --------------------------------------- */
.section{
    text-align:center;
    background-size: cover;
}
.section .inner{
    margin-top: -50px;
}
.section .main-info{
	font-size: 1.4em;
    margin-bottom: 40px;
}
.section .main-info:after {
    display: block;
    content: '';
    margin: 0 auto;
    margin-top: 10px;
    width: 50px;
    height: 1px;
    background: rgba(255, 255, 255, 1.0);
}
.section .main-tit{
    font-size: 4.5em;
    margin-bottom: 30px;
    word-break: keep-all;
}
.section .main-desc{
    font-size: 1.8em;
    margin-bottom: 20px;
    word-break: keep-all;
    margin-left: 36px;
    margin-right: 36px;
}
.section .main-link a{
	font-size: 0.6em;
	font-weight: 600;
	background-color: #fafafa;
	padding:10px 30px;
	border-radius: 25px;
}
.section .main-link a:after{
	padding-left: 10px;
	content: '>';
}
#fp-nav ul li a span {
	background: #fafafa !important;
}

/* Sections backgrounds
* --------------------------------------- */
#section1{
    /*background-image: linear-gradient(128deg,#40afff,#3f61ff);*/
    /*background-image: url(../img/main/bg_section_001.png);*/
}

#section2{
    /*background-image: linear-gradient(128deg,#ff9a3f,#ff4b40);*/
    background-image: url(../img/main/bg_section_002.png);
}

#section3{
   /*background-image: linear-gradient(128deg,#fc40ff,#543fff);*/
    background-image: url(../img/main/bg_section_003.png);   
}

#section4{
    /*background-image: linear-gradient(128deg,#40fff2,#3fbcff);*/
	background-image: url(../img/main/bg_section_004.png);    
}
#section5{
    /*background-image: linear-gradient(128deg,#ff9a3f,#ff4b40);*/
    background-image: url(../img/main/bg_section_005.png);
}
#section6{
    /*background-image: linear-gradient(128deg,#ff9a3f,#ff4b40);*/
    background-image: url(../img/main/bg_section_006.png);
}
#last_section {
	/*max-height: 100%;
	width: 100%;
	height:  auto !important;*/
	position: relative;
	height: auto !important;
	/*background-image: linear-gradient(30deg,#fc40ff,#543fff);*/
	background-image: url(../img/main/bg_section_009.png);
}

/* Section1 Background Video
* --------------------------------------- */
#video_section1{
	position: absolute;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
		background-color: black; /* in case the video doesn't fit the whole page*/
		background-image: /* our video */;
		background-position: center center;
		background-size: contain;
		object-fit: cover; /*cover video background */
		z-index:3;
}

/* Layer with position absolute in order to have it over the video
* --------------------------------------- */
#section1 .inner{
	position: absolute;
	z-index: 4;
	width: 100%;
	left: 0;
	top: 38%;

	/* 
	* Preventing flicker on some browsers 
	* See http://stackoverflow.com/a/36671466/1081396  or issue #183
	*/
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* solves problem with overflowing video in Mac with Chrome 
* --------------------------------------- */
#section1{
	overflow: hidden;
}

.ft-box-container {
	display: block;
	position: absolute;
	margin:  0 auto;
	width: 100%;
	bottom: 0;
	padding: 20px 40px;
	background: rgba(2, 31, 54, 0.8);
}
.ft-box-container .ft-left-box {
	float: left;
}
.ft-box-container .ft-right-box {
	float: right;
}

.shortcut-wrap {
	margin: 0 auto;
	max-width: 1200px;
	padding-top: 50px;
}
.shortcut-wrap .shortcut-item .shortcut-item-box {
	padding: 0 10px;
}
.shortcut-wrap .shortcut-item .shortcut-item-box p {
	font-size: 1.2em;
}
@media only screen and (max-width: 1000px) {
    .section .main-tit {
        font-size:  2.7em;
    }
    .section .main-info {
        font-size:  1.1em;
    }
    .section .main-desc {
        font-size:  1.2em;
    }
    .section .main-link a {
        font-size: 0.4em;
    }
    .shortcut-item-box img {
        width: 60px;
        height: auto;
        margin-bottom: 10px;
    }
    .shortcut-wrap .shortcut-item .shortcut-item-box p {
        font-size: 0.8em;
    }
}
@media only screen and (max-width: 680px) {
    .section .main-tit {
        font-size: 2.0em;
    }
    .shortcut-wrap {
        padding-top: 10px;
    }
}
@media only screen and (max-width: 480px) {
    .section .main-tit {
        padding: 0 32px;
    }
    .shortcut-wrap > ul.cols-05 > li {
        width: 33.3333%;
    }
    .shortcut-wrap .shortcut-item .shortcut-item-box {
        margin-bottom: 20px;
    }
    .shortcut-item-box img {
        width: 40px;
        height: auto;
    }
}
@media only screen and (max-width: 320px) {
    .m-header-logo-wrap img {
        width: 110px;
        height: auto;
        margin-top: 8px;
    }
}
@media only screen and (max-height: 280px) {
    #section1 .inner{
        top: 28%;
    }
    #section2 .inner,
    #section3 .inner,
    #section4 .inner,
    #section5 .inner {
        margin-top: -10px;
    }
    #last_section .inner {
        margin-top: -48px;
    }
    .section .main-desc {
        font-size:  0.9em;
    }
    #section5 .inner .main-info {
    	margin-bottom: 20px;
    }
    #section5 .inner .main-tit {
    	margin-bottom: 6px;
    	font-size: 1.8em;
    }
    #last_section .inner .main-info {
    	margin-bottom: 20px;
    }
    #last_section .inner .main-desc {
    	margin-bottom: 10px !important;
    }
    .shortcut-item-box img {
    	width: 32px;
    	height: auto;
    	margin-bottom: 0;
    }
    .ft-link-box ul > li {
    	padding-right: 20px;
    }
    .ft-box-container * {
    	font-size: 10px !important;
    }
}

/*2024-04-11 한국전자제조산업전 */
.modal_popup {
  position: absolute;
  top: 90px;
  left: 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  
  /* 임시 지정 */
  width: 320px;
  height: 420px;

  &.on {
    display: block;
    background-color: #fff;
  }

  .img_wrap {
    width: 320px;
    height: 380px;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .btn_today_close {
    width: 100%;
    background-color: #333;
    text-align: center;
    color: #fff;
    font-size: 14px;
    display: block;
    span {
      display: block;
      line-height: 40px;
      vertical-align: bottom;
      opacity: 0.8;
    }
  }

}
.modal_popup .modal_footer {
    text-align: center;
    background: rgba(0, 0, 0, 1.0);
}
.modal_popup .modal_footer a {
    padding: 4px 0;
}
.modal_popup .modal_footer a span {
    color: #fff;
}

/*2024-04-11 월드IT쇼 */
.modal_popup1 {
  position: absolute;
  top: 90px;
  left: 380px;
  background-color: #ffffff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  
  /* 임시 지정 */
  width: 320px;
  height: 420px;

  &.on {
    display: block;
    background-color: #fff;
  }

  .img_wrap {
    width: 320px;
    height: 380px;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .btn_today_close {
    width: 100%;
    background-color: #333;
    text-align: center;
    color: #fff;
    font-size: 14px;
    display: block;
    span {
      display: block;
      line-height: 40px;
      vertical-align: bottom;
      opacity: 0.8;
    }
  }

}
.modal_popup1 .modal_footer {
    text-align: center;
    background: rgba(0, 0, 0, 1.0);
}
.modal_popup1 .modal_footer a {
    padding: 4px 0;
}
.modal_popup1 .modal_footer a span {
    color: #fff;
}