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

/* 팝업1 */
.modal_popup {
  position: absolute;
  top: 90px;
  left: 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  
  /* 임시 지정 */
  width: 320px;
  z-index: 10000;

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

  .img_wrap {
    width: 320px;
    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: 0;
}
.modal_popup .modal_footer a span {
    color: #fff;
}

/* 팝업2 */
.modal_popup1 {
  position: absolute;
  top: 90px;
  left: 380px;
  background-color: #ffffff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  
  /* 임시 지정 */
  width: 320px;
  z-index: 10001;

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

  .img_wrap {
    width: 320px;
    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: 0;
}
.modal_popup1 .modal_footer a span {
    color: #fff;
}

/* 팝업3 */
.modal_popup2 {
  position: absolute;
  top: 90px;
  left: 740px;
  background-color: #ffffff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  
  /* 임시 지정 */
  width: 350px;
  z-index: 10002;

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

  .img_wrap {
    width: 350px;
    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_popup2 .modal_footer {
    text-align: center;
    background: rgba(0, 0, 0, 1.0);
}
.modal_popup2 .modal_footer a {
    padding: 0;
}
.modal_popup2 .modal_footer a span {
    color: #fff;
}


/* 0) 공통: 컨테이너 / 콘텐츠를 칼같이 붙이는 레이아웃 */
.modal_popup,
.modal_popup1,
.modal_popup2 {
  position: absolute;
  top: 90px;
  background-color: #ffffff;
  box-shadow: 0 2px 7px rgba(0,0,0,.3);
  width: 320px;              /* ★ 세 팝업 모두 320으로 통일 */
  display: block;            /* JS로 토글한다면 여기 block 유지 */
}

/* 팝업별 좌표/레이어만 다르게 */
.modal_popup  { left: 20px;  z-index: 10000; }  /* 008 */
.modal_popup1 { left: 380px; z-index: 10001; }  /* 007 */
.modal_popup2 { left: 740px; z-index: 10002; }  /* 006 */

/* 1) 중첩 제거(순수 CSS로 전개) */
.modal_popup .img_wrap,
.modal_popup1 .img_wrap,
.modal_popup2 .img_wrap {
  width: 320px;              /* ★ 팝업3의 350 → 320으로 맞춤 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2) 이미지 하단 여백(인라인 베이스라인 간격) 제거 */
.modal_body img { display: block; width: 100%; height: auto; }

/* 3) 버튼/푸터 높이를 명확히 지정(여백 발생 원천 차단) */
.modal_footer { margin: 0; padding: 0; background: #000; text-align: center; }
.modal_footer a.btn_today_close {
  display: block;
  height: 40px;              /* ★ 고정 */
  line-height: 40px;         /* ★ 고정 */
  background: #333;
  color: #fff;
  text-decoration: none;
}
.modal_footer a.btn_today_close span { display: inline; color: #fff; }

/* 4) 혹시 남는 미세 공백 방지(컨테이너 바닥 붙이기) */
.modal_content { display: flex; flex-direction: column; }
.modal_body    { flex: 0 0 auto; }
.modal_footer  { flex: 0 0 auto; }