.subpage-main {
  /* overflow-x: hidden; */
  /* overflow-y: visible; */
  width: 100%;
  margin-top: -130px;
  background: #181716;
}

.subpage-main.follow {
  margin-top: 50px;
}

/* <이미지 슬라이드> */

.subpage-main .visualpannel {
  position: relative;
  overflow: hidden;
  z-index: 3;
  display: flex;
  /* flex-direction: column; */
  /* align-content: center; */
  align-items: center;
  justify-content: center;
  /* text-align: center; */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* max-width: 2560px; */
  height: 351px;
  padding: auto;
  /* background:  */
  /* url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_pattern+black.png) center, */
  /* url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_1.png) center; */
  /* url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_1_bg.png) no-repeat 50%; */
  /* background-position: -75px 0px; */
  /* animation-name: subslide01; */
  /* animation-duration: 1s; */
  animation-direction: alternate;
  /* animation-delay: 10s; */
  /* animation-timing-function: ease-out; */
  animation-iteration-count: infinite;
}

.subpage-main .visualpannel.close {
  height: 58px;
}


.subpage-main .visualpannel .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../../../images/iosf/ko/sub/bg_sub01_3840x351.jpg) no-repeat center;
  /* background-image: 2000px 229px; */
  background-color: #000;
  /* animation-name: subslide01;
  animation-duration: 26s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-iteration-count: infinite; */
}

/* .subpage-main .visualpannel .wrap{
  z-index: 1;
  width: 100%;
  height: 100%;
  position: relative;
} */

.subpage-main .visualpannel .bg2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../../../images/iosf/ko/sub/img_black25_6x6.png)repeat center;
}

.subpage-main .visualpannel .bg3 {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    url(../../../../images/iosf/ko/sub/img_pattern30_6x6.png)repeat center;
}

.subpage-main .visualpannel.page-01 .bg .slide-img {
  background: url(../../../../images/iosf/ko/sub/bg_sub_2560x267_01.png) no-repeat left;
  background-image: 2000px 229px;
  /* animation-name: subslide01; */
}

.subpage-main .visualpannel.page-02 .bg .slide-img {
  background: url(../../../../images/iosf/ko/sub/bg_sub_2560x267_02.png) no-repeat left;
  background-image: 2000px 229px;
  /* animation-name: subslide02; */
}

.subpage-main .visualpannel.page-03 .bg .slide-img {
  background: url(../../../../images/iosf/ko/sub/bg_sub_2560x267_03.png) no-repeat left;
  background-image: 2000px 229px;
  /* animation-name: subslide03; */
}

.subpage-main .visualpannel.page-04 .bg .slide-img {
  background: url(../../../../images/iosf/ko/sub/bg_sub_2560x267_04.png) no-repeat left;
  background-image: 2000px 229px;
  /* animation-name: subslide04; */
}

.subpage-main .visualpannel.page-05 .bg .slide-img {
  background: url(../../../../images/iosf/ko/sub/bg_sub_2560x267_05.png) no-repeat left;
  background-image: 2000px 229px;
  /* background-color: #000; */
  /* animation-name: subslide05; */
}

.subpage-main .visualpannel.page-05 .bg .slide-img {
  background: url(../../../../images/iosf/ko/sub/bg_sub_2560x267_06.png) no-repeat left;
  background-image: 2000px 229px;
  /* background-color: #000; */
  /* animation-name: subslide05; */
}

.subpage-main .visualpannel.page-01 .bg {
  background:
    url(../../../../images/iosf/ko/sub/bg_sub01_3840x351.jpg) no-repeat center;
    /* background-size: 100%; */
}
.subpage-main .visualpannel.page-02 .bg {
  background:
    url(../../../../images/iosf/ko/sub/bg_sub02_3840x351.jpg) no-repeat center;
    /* background-size: 100%; */
}
.subpage-main .visualpannel.page-03 .bg {
  width: 100%;
  height: 100%;
  background:
    url(../../../../images/iosf/ko/sub/bg_sub03_3840x351.jpg) no-repeat center;
    /* background-size: 100%; */
}
.subpage-main .visualpannel.page-04 .bg {
  background:
    url(../../../../images/iosf/ko/sub/bg_sub04_3840x351.jpg) no-repeat center;
    /* background-size: 100%; */
}
.subpage-main .visualpannel.page-05 .bg {
  background:
    url(../../../../images/iosf/ko/sub/bg_sub05_3840x351.jpg) no-repeat center;
    /* background-size: 100%; */
}
.subpage-main .visualpannel.page-06 .bg {
  background:
    url(../../../../images/iosf/ko/sub/bg_sub06_3840x351.jpg) no-repeat center;
    /* background-size: 100%; */
}
  



/* .subpage-main .visualpannel .bg2:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background:
  rgba(0, 0, 0, 0.3);
} */


@keyframes subslide01 {
  0% {
    left: 0px;
  }

  100% {
    left: -80px;
  }
}

.subpage-main .visualpannel section {
  z-index: 3;
  text-align: center;
  margin-top: 114px;
}

.subpage-main .visualpannel section.close {
  opacity: 0;
}

.subpage-main .visualpannel section b {
  font: bold 23px/1.4em "나눔스퀘어";
  font-weight: 800;
  display: inline-block;
  text-align: center;
  color: #fff;
}


.subpage-main .visualpannel section p {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subpage-main .visualpannel p {
  position: relative;
  z-index: 2;
  font: bold 45px/1.3em "나눔스퀘어";
  font-weight: 800;
  color: #fff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.85);
  margin-bottom: 4px;
  margin-top: 16px;
}

.subpage-main .visualpannel small {
  position: relative;
  z-index: 2;
  font: 23px/1.4em "나눔스퀘어";
  color: #fff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.85);
}

.subpage-main .visualpannel small span {
  color: #fff1db;

}

/* </이미지 슬라이드> */

/* <네비게이션> */

.subpage-main .sub-navi {
  z-index: 3;
  position: relative;
  /* margin-top: -58px; */
  width: 100%;
  height: 64px;
  background: #fff;
  /* background: rgba(118, 0, 35, 1); */
  border-bottom: 1px solid #d8d8d8;
}

.subpage-main .sub-navi nav {
  display: flex;
  align-items: flex-start;
  /* justify-content: space-between; */
}

.subpage-main .sub-navi nav .btn {
  z-index: 0;
  display: flex;
  /* height: 74px; */
}

.subpage-main .sub-navi nav .btn:last-of-type {
  margin-left: auto;
}


.subpage-main .sub-navi nav .btn a,
.subpage-main .sub-navi nav .btn button {
  display: block;
  width: 64px;
  height: 64px;
  border-left: 1px solid #d8d8d8;
  border-right: 1px solid #d8d8d8;
  /* background: #65001e; */
}

.subpage-main .sub-navi nav .btn button:first-of-type {
  position: relative;
  right: -1px;
}

.subpage-main .sub-navi nav .btn a {
  background: url(../../../../images/iosf/ko/sub/icon_home_22x22.png) no-repeat center;
  background-size: 20px 20px;
}

.subpage-main .sub-navi nav .btn .sharebtn {
  background: url(../../../../images/iosf/ko/sub/icon_share_22x22.png) no-repeat center;
  background-size: 20px 20px;
}

.subpage-main .sub-navi nav .btn .printbtn {
  background: url(../../../../images/iosf/ko/sub/icon_print_22x22.png) no-repeat center;
  background-size: 20px 20px;
}

.subpage-main .sub-navi nav .btn .closeformbtn {
  background:
    url(../../../../images/iosf/ko/sub/icon_visualform_close_24x24.png) no-repeat center;
    /* #65001e; */
  background-size: 16px 16px;
}

.subpage-main .sub-navi nav .btn .closeformbtn.close {
  background:
    url(../../../../images/iosf/ko/sub/icon_visualform_open_24x24.png) no-repeat center;
    /* #65001e; */
  background-size: 16px 16px;
}


.subpage-main .sub-navi nav .menu {
  z-index: 2;
  display: flex;
  width: calc(100% - 174px);
  height: 64px;
}

.subpage-main .sub-navi nav .menu dl {
  display: block;
  flex-direction: column;
  align-items: stretch;
  /* border-right: 1px solid #e1e1e1; */
}

.subpage-main .sub-navi nav .menu dl dt a,
.subpage-main .sub-navi nav .menu dl dd a {
  display: flex;
  align-items: center;
  position: relative;
  font: 17px/1.4em "나눔바른고딕";
  color: #313131;
  /* background: #fff; */
  min-width: 271px;
  width: 100%;
  height: 64px;
  padding-left: 30px;
  padding-right: 30px;
}

.subpage-main .sub-navi nav .menu dl dd a {
  color: #535353;
}

/* .subpage-main .sub-navi nav .menu dl dd a{
    width: calc(100% - 1px);
} */

.subpage-main .sub-navi nav .menu dl dt a {
  padding-right: 48px;
  /* background: rgba(118, 0, 35, 0.9); */
  /* border-bottom: 1px solid #e9e9e9; */
}

.subpage-main .sub-navi nav .menu dl:hover dt a{
  /* padding-right: 48px; */
  /* border-bottom: 1px solid #2c000b; */
  background: #830020;
  color: #fff;
}

.subpage-main .sub-navi nav .menu dl dt.more a::after {
  content: "";
  position: absolute;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  width: 14px;
  height: 8px;
  /* background: url(../../../../images/iosf/ko/sub/icon_arrowbottom_off_14x14.png) no-repeat center; */
  background: url(../../../../images/iosf/ko/sub/icon_navigation_grey_16x16.png) no-repeat center;
  background-size: 14px 14px;
}

.subpage-main .sub-navi nav .menu dl:hover dt.more a::after {
  background: url(../../../../images/iosf/ko/sub/icon_navigation_white_16x16.png) no-repeat center;
  background-size: 14px 14px;
}



.subpage-main .sub-navi nav .menu dl dd a {
  height: 0;
  background: #fff;
  border-bottom: 0px solid #e9e9e9;
}

.subpage-main .sub-navi nav .menu dl:hover dd a{
  height: 64px;
  background: #660019;
  color: #fff;
  border-bottom: 1px solid #500014;
}

.subpage-main .sub-navi nav .menu dl dd div:last-of-type a {
  border-bottom: 0px solid #2c000b;

}

.subpage-main .sub-navi nav .menu dl:hover dd div:last-of-type a{
  border-bottom: 1px solid #2c000b;
}

.subpage-main .sub-navi nav .menu dl dt a,
.subpage-main .sub-navi nav .menu dl dd a {
  /* border-left: 1px solid #e1e1e1; */
  border-right: 1px solid #e9e9e9;
}

.subpage-main .sub-navi nav .menu dl dd a {
  border-left: 1px solid #5C001B;
}

.subpage-main .sub-navi nav .menu dl:hover dt a,
.subpage-main .sub-navi nav .menu dl:hover dd a {
  /* border-left: 1px solid #5C001B; */
  /* border-right: 1px solid #5C001B; */
}

.subpage-main .sub-navi nav .menu dl dd div a:hover {
  color: #fff;
  background: #500014;
}

/* 서브메뉴기본:끄기 */

.subpage-main .sub-navi nav .menu dl dd {
  display: block;
  position: relative;
  margin-top: -5000px;
  /* opacity: 0; */
  background: #F9F8F4;
  z-index: -1;

  /* transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; */
}

/* .subpage-main .sub-navi nav .menu dl dd div{
    margin-top: -20%;
    overflow: hidden;
} */
.subpage-main .sub-navi nav .menu dl > dt:hover + dd,
.subpage-main .sub-navi nav .menu dl > dt + dd:hover{
/* .subpage-main .sub-navi nav .menu dl dt:hover + dd, */
/* .subpage-main .sub-navi nav .menu dl dt + dd:hover { */
  z-index: 1;
  display: block;
  margin-top: 0;
  /* opacity: 1; */
  /* transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.15s; */
}


/* </네비게이션>  */

/* <컨텐츠 전체> */


.subpage-main>.contents {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background: #fff;
  padding-top: 80px;
  padding-bottom: 120px;
}

.subpage-main .contents .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* <좌측서브메뉴> */


.subpage-main .contents .left-menu {
  width: 260px;
  /* height: 118px; */
  /* background: #830020; */
}

.subpage-main .contents .left-menu .bg {
  position: relative;
  padding: 36px 30px;
  width: 100%;
  height: 180px;
  background: 
  url(../../../../images/iosf/ko/sub/bg_sub_pattern_247x180.png)no-repeat right,
  url(../../../../images/iosf/ko/sub/bg_sub_tiger_247x180.png)no-repeat right,
  #830020;
  border-top: 2px solid #600017;
  /* background: url(../../../../images/iosf/ko/sub/bg_submenu_left_232x118.png); */
  /* background-size: 232px 118px; */
}

.subpage-main .contents .left-menu .bg p {
  font: bold 25px/1.4em "나눔스퀘어";
  font-weight: 800;
  color: #fff;
  text-shadow: 1px 1px 0px #000;
}
.subpage-main .contents .left-menu .bg p + p{
  font: bold 17px/1.4em "나눔스퀘어";
  margin-top: 3px;
  color: #e1d7c7;
  text-shadow: 1px 1px 0px #000;
}

.subpage-main .contents .left-menu .bg span {
  position: absolute;
  display: inline-block;
  bottom: 40px;
  width: 44px;
  height: 2px;
  background: #e1d7c7;
}

.subpage-main .contents .left-menu dl {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 69px;
  /* overflow: hidden; */
  transition: all 0.5s;
}

/* .subpage-main .contents .left-menu dl.open {
  height: auto;
  transition: all 0.5s;
} */

.subpage-main .contents .left-menu dl dt {
  z-index: 1;
  position: relative;
  width: 100%;
  /* min-height: 76px; */
  background: #fff;
  /* border: 1px solid #e1e1e1; */
  border-top: 0px solid #000;
  border-bottom: 1px solid #E9E9E9;
}

.subpage-main .contents .left-menu dl dt a,
.subpage-main .contents .left-menu dl dt button {
  font: bold 19px/1.4em "나눔바른고딕";
  color: #000000;
  background: #fff;
}

.subpage-main .contents .left-menu dl.open dt button,
.subpage-main .contents .left-menu dl dt.on a {
  font: bold 19px/1.4em "나눔바른고딕";
  color: #fff;
  text-shadow: 1px 1px 0px #000;
  background: #8f816a;
  /* cursor: default; */
}


.subpage-main .contents .left-menu dl dt:hover a,
.subpage-main .contents .left-menu dl:not(.open) dt:hover button {
  color: #837257;
}

.subpage-main .contents .left-menu dl dt.on:hover a {
  color: #fff;
}


.subpage-main .contents .left-menu dl dt.more:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../../../../images/iosf/ko/sub/img_sub_link_brown_16x16.png);
  background-size: 16px 16px;
}

.subpage-main .contents .left-menu dl.open dt.more:after {
  background: url(../../../../images/iosf/ko/sub/img_sub_link_white_open_16x16.png)no-repeat;
  background-size: 16px 16px;
}

/* .subpage-main .contents .left-menu dl.open dt {
  border: 1px solid #2c000b;
  background: #2c000b;
}

.subpage-main .contents .left-menu dl.open dt button,
.subpage-main .contents .left-menu dl.open dt a {
  background: #2c000b;
  color: #fff;
} */

.subpage-main .contents .left-menu dl dd {
  width: 260px;
  /* height: 48px; */
  font: 17px/1.3em "맑은 고딕";
  background: #ececec;
  /* border: 1px solid #e1e1e1; */
  border-top: 0px solid #000;
}

.subpage-main .contents .left-menu dl dd a {
  color: #313131;
}

/* .subpage-main .contents .left-menu dl.open dd a, */
.subpage-main .contents .left-menu dl dd.on a,
.subpage-main .contents .left-menu dl dd:hover a {
  /* background: #f6f6f6; */
  color: #830020;
}

.subpage-main .contents .left-menu dl dt button,
.subpage-main .contents .left-menu dl dt a,
.subpage-main .contents .left-menu dl dd a {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  width: 100%;
  min-height: 68px;
  /* background: red; */
}
.subpage-main .contents .left-menu dl dd a {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 0 30px;
  min-height: 0px;
  margin-top: 10px;
  
}

.subpage-main .contents .left-menu dl dd:first-of-type a {
  margin-top: 18px;
}
.subpage-main .contents .left-menu dl dd:last-of-type:not(:only-of-type) a {
  margin-bottom: 0px;
}
.subpage-main .contents .left-menu dl.open dd:last-of-type a {
  margin-bottom: 18px;
}


.subpage-main .contents .left-menu dl dd a:before {
  content: "";
  display: inline-block;
  min-width: 6px;
  height: 6px;
  background: #8f816a;
  border-radius: 10px;
  margin-right: 8px;
  margin-top: 9px;
}
.subpage-main .contents .left-menu dl dd.on a:before,
.subpage-main .contents .left-menu dl dd:hover a:before {
  background: #000;
}


/* 서브메뉴 기본 닫기 */
.subpage-main .contents .left-menu dl dd {
  display: block;
  margin-top: -48px;
  transition: all 0.2s;
}

.subpage-main .contents .left-menu dl.open dd {
  display: block;
  margin-top: 0;
  transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s;
}




/* </좌측서브메뉴> */

/* <컨텐츠> */

.subpage-main .contents .right-content {
  width: 1100px;
  height: 100%;
}

.subpage-main .contents .right-content .menu_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 68px;
  /* margin-bottom: 35px; */
  border-bottom: 1px solid #D7D7D7;
}

.subpage-main .contents .right-content .menu_title h1 {
  text-align: left;
  font: bold 35px/1.4em "나눔스퀘어";
  font-weight: 800;
  color: #000;
}
  
.subpage-main .contents .right-content .menu_title button{
  position: relative;
  font: bold 15px/1.3em "나눔바른고딕";
  color: #000000;
  background: #Fff;
}
.subpage-main .contents .right-content .menu_title button b{
  color: #626262;
}

.subpage-main .contents .right-content .menu_title button.rss:before{
  content: "";
  position: absolute;
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url(../../../../images/iosf/ko/sub/img_rss_40x40.png)no-repeat left;
  background-size: 100%;
  left: -35px;
  top: -5px;
}


.subpage-main .contents .right-content .ex{
  width: 100%;
  height: 1000px;
  background: #a0a0a0;
}


/* 캘린더 개조 */


.calendar-wrapper {
  display: inline-flex;
  align-items: center;
}

.calendar-wrapper input {
  min-width: 94px;
  font: 15px/1.2em "맑은 고딕";
  color: #313131;
  border: 1px solid #CBC9C9 !important;
}

.calendar-wrapper .ui-datepicker-trigger {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0 6px;
}

.common_datetime .time input {
  font: 15px/1.2em "맑은 고딕";
  color: #313131;
  padding: 0 1px 0 5px;
  min-width: 112px;
  height: 28px;
  border: 1px solid #CBC9C9;
  border-radius: 0;
}

.tdtbl-date {
  display: inline-block;
  padding: 0 !important;
}

.tdtbl-date .common_datetime {
  display: flex;
}

.tdtbl-date .common_datetime .etc_calendar-sep {
  margin: 0 6px;
}

.tdtbl-date .time_select {
  width: 75px;
  height: 28px;
  padding: 0 6px;
  font: 15px/1.2em "맑은 고딕";
  color: #313131;
  border: 1px solid #CBC9C9;
}



/* 반응형------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */



@media screen and (max-width: 1440px) {


  .subpage-main.follow {
    margin-top: 76px;
  }


  .subpage-main .sub-navi .wrap {
    padding: 0 20px;
  }

  .subpage-main .sub-navi nav .menu {
    width: calc(100% - 127px);
    display: table;
    table-layout: fixed;
  }

  .subpage-main .sub-navi nav .menu dl {
    position: relative;
    z-index: 1;
    display: table-cell;
  }

  .subpage-main .sub-navi nav .menu dl.open dt {
    height: 61px;
    /* overflow: hidden; */
  }

  .subpage-main .sub-navi nav .btn button {
    margin-left: -1px;
  }

  .subpage-main .sub-navi nav .btn button:first-of-type {
    position: relative;
    right: 0px;
  }

  .subpage-main .sub-navi nav .menu dl dd div {
    /* display: flex; */
    /* width: 100%; */
    /* overflow: hidden; */
    /* white-space:nowrap; */
    /* text-overflow: ellipsis; */
  }

  .subpage-main .sub-navi nav .menu dl dt a,
  .subpage-main .sub-navi nav .menu dl dd a {
    display: block;
    width: 100%;
    /* vertical-align: middle; */
    /* margin: auto; */
    /* height: 62px; */
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .subpage-main .sub-navi nav .menu dl dt a {
    line-height: 64px;
  }

  .subpage-main .sub-navi nav .menu dl dd a {
    line-height: 64px;
  }


  /* .subpage-main .sub-navi nav .menu dl dt a:before,
    .subpage-main .sub-navi nav .menu dl dd a:before{
      content: "";
      display: inline;
      width: 1px;
      height: 100%;
      opacity: 0;
    } */


  .subpage-main>.contents {
    padding-top: 80px;
  }

  .subpage-main .contents .left-menu {
    display: none;
  }

  .subpage-main .contents .right-content {
    width: 100%;
  }

  .subpage-main .contents .right-content .menu_title{
    padding: 0 0 75px;
  }


}


/* 반응형------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */




@media screen and (max-width: 1040px) {

  .subpage-main{
    margin-top: -90px;
  }

  .subpage-main .visualpannel{
    height: 311px;
  }
  .subpage-main .visualpannel section{
    margin-top: 74px;
  }

  .subpage-main .sub-navi nav .menu dl dt a, 
  .subpage-main .sub-navi nav .menu dl dd a{
    min-width: auto;
  }
}

/* 반응형------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */


@media screen and (max-width: 960px) {

  .subpage-main .visualpannel{
    height: 251px;
  }

  .subpage-main .visualpannel p{
    font-size: 27px;
  }
  .subpage-main .visualpannel section b{
    font-size: 17px;
  }
  .subpage-main .contents .right-content .menu_title h1{
    font-size: 27px;
  }



  .subpage-main .sub-navi .wrap{
    padding: 0;
  }
  .subpage-main .sub-navi nav .btn button{
    display: none;
  }
  .subpage-main .sub-navi nav .menu {
    width: calc(100% - 64px);
  }


  .subpage-main>.contents{
    padding-top: 60px;
  }
  .subpage-main .contents .right-content .menu_title{
    padding-bottom: 60px;
  }
}

/* 반응형------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */


@media screen and (max-width: 640px) {


  .subpage-main .sub-navi nav {
    align-items: flex-start;
  }

  .subpage-main .sub-navi{
    height: auto;
  }


  .subpage-main .sub-navi nav .menu dl > dt:hover + dd,
  .subpage-main .sub-navi nav .menu dl > dt + dd:hover{
    z-index: 1;
    display: block;
    margin-top: -5000;
    /* opacity: 1; */
    /* transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.15s; */
  }

  .subpage-main .sub-navi nav .menu dl dt dd,
  .subpage-main .sub-navi nav .menu dl.on dt dd{
    z-index: 1;
    display: block;
    margin-top: 0;
    /* opacity: 1; */
  }



  .subpage-main .sub-navi nav .btn a,
  .subpage-main .sub-navi nav .btn button {
    z-index: 10;
  }

  .subpage-main .sub-navi nav .menu dl.on dd,
  .subpage-main .sub-navi nav .menu dl.hover {
    z-index: 10;
  }

  /* .subpage-main .sub-navi nav .menu dl.close {
    z-index: 3;
  }

  .subpage-main .sub-navi nav .menu dl dt {
    position: relative;
    z-index: 4;
  } */

  /* .subpage-main .sub-navi nav .menu dl:hover dd {
    margin-top: 0;
  } */

  .subpage-main .sub-navi nav .menu dl dd {
    /* margin-top: 0; */
  }

  .subpage-main .sub-navi nav .menu dl:hover dd div:last-of-type a {
    border-bottom: 0px solid #2c000b;
  }

  .subpage-main .sub-navi nav .menu dl.open dd div:last-of-type a {
    border-bottom: 1px solid #2c000b;
  }

  .subpage-main .sub-navi nav .menu dl dd a {
    height: 0
  };
  .subpage-main .sub-navi nav .menu dl:hover dd a {
    height: 0px ;
    border-bottom: 1px solid #e9e9e9;
    transition: all cubic-bezier(1, 0, 0, 1) 0.2s;
    border: 0 ;
  }

 

  .subpage-main .sub-navi nav .menu dl:hover dd div:last-of-type a {
    border-bottom: 1px solid #2c000b;
  }


  .subpage-main .sub-navi nav .menu dl.on dd a {
    height: 64px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    transition: all cubic-bezier(1, 0, 0, 1) 0.3s;
  }


  .subpage-main .sub-navi nav .menu dl.close dd {
    z-index: -1;
  }

  .subpage-main .sub-navi nav .menu dl dd {
    /* z-index: 0; */
    width: 100vw;
    position: relative;
    left: -63px;
    border-top: 0px solid #2c000b;
    /* transition: all 0.1s; */
  }

  .subpage-main .sub-navi nav .menu dl dd {
    left: -64px;
  }
  .subpage-main .sub-navi nav .menu dl+dl dd {
    left: calc(-100% - 64px);
  }

  .subpage-main .sub-navi nav .menu dl+dl+dl dd {
    left: calc(-200% - 64px);
  }

  .subpage-main .sub-navi nav .menu dl dt a {
    padding-right: 34px;
    /* border-right: 0; */
  }

  .subpage-main .sub-navi nav .menu dl dd a {
    padding-right: 10px;
    height: 0;
  }

  .subpage-main .sub-navi nav .menu dl dt a,
  .subpage-main .sub-navi nav .menu dl dd a {
    /* display: block; */
    /* width: 50px; */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* width: 100%; */
    padding-left: 12px;
  }

  .subpage-main .sub-navi nav .menu dl.on dt a {
    /* .subpage-main .sub-navi nav .menu dl:hover dd a{ */
    /* border-bottom: 1px solid #2c000b; */
  }


  .subpage-main .sub-navi nav .menu dl dt.more a::after {
    right: 14px;
  }

  .subpage-main .sub-navi nav .menu dl.on {
    z-index: 100;
  }

  .subpage-main .sub-navi nav .menu dl.on,
  .subpage-main .sub-navi nav .menu dl dd {
    height: auto;
  }

  /* .subpage-main .sub-navi nav .menu dl:hover dt a{
      border-bottom: 1px solid #2c000b;
      background: #2c000b;
      color: #fff;
    } */
  .subpage-main .sub-navi nav .menu dl.on dt a {
    /* border-bottom: 1px solid #2c000b; */
    /* background: #2c000b; */
    /* color: #fff; */
  }

  .subpage-main .sub-navi nav .menu dl.on dd div:last-of-type a {
    /* border-bottom: 1px solid #2c000b; */
  }

  .subpage-main .sub-navi nav .menu dl.on dt a,
  .subpage-main .sub-navi nav .menu dl.on dd a {
    /* border-left: 1px solid #2c000b; */
    border-right: 1px solid #2c000b;
  }

  .subpage-main .sub-navi nav .menu dl dd a,
  .subpage-main .sub-navi nav .menu dl.on dd a {
    padding: 0 20px;
  }

  .subpage-main .sub-navi nav .menu dl:hover dd {
    margin-top: 0px;
    /* margin-top: -500px; */
  }

  .subpage-main .sub-navi nav .menu dl.on dd {
    margin-top: 0px;
    /* border-top: 1px solid #2c000b; */
  }

  .subpage-main .sub-navi nav .menu dl dd a {
    position: relative;
    /* display: block; */
    margin-top: 0px;
    /* transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.15s; */
  }

  .subpage-main .sub-navi nav .menu dl.on dt a {
    /* padding-right: 48px; */
    /* border-bottom: 1px solid #2c000b; */
    background: #830020;
    color: #fff;
  }
  .subpage-main .sub-navi nav .menu dl:not(.on):hover dt a{
    background: #fff;
    color: #313131;
  }
  .subpage-main .sub-navi nav .menu dl:not(.on) dt.more a:after{
    background: url(../../../../images/iosf/ko/sub/icon_navigation_grey_16x16.png) no-repeat center;
    background-size: 14px 14px;
  }

  .subpage-main .sub-navi nav .menu dl.off dd a{
    height: 0 !important;
    border: 0 !important;
  }
  .subpage-main .sub-navi nav .menu dl:hover dt a{
    border: 0;
  }

  
  .subpage-main .sub-navi nav .menu dl dd a,
  .subpage-main .sub-navi nav .menu dl.on dd a {
    height: 64px;
    background: #660019;
    color: #fff;
    border-bottom: 1px solid #500014;
  }

  .subpage-main .sub-navi nav .menu dl.on dt.more a::after {
    background: url(../../../../images/iosf/ko/sub/icon_navigation_white_14x14.png) no-repeat center;
    background-size: 14px 14px;
  }

  

}


/* 반응형------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */


@media screen and (max-width: 520px) {
  /* .tdtbl-date .etc_calendar-sep::after {
    content: "";
    display: inline-block;
    width: 0px;
    height: 1px;
  } */

  .tdtbl-date .common_datetime {
    flex-wrap: wrap;
  }

  .tdtbl-date .common_datetime .br {
    display: block;
    width: 100%;
    height: 8px;
  }



}


@media screen and (max-width: 480px) {

  /* .subpage-main .visualpannel.page-01 .bg2 {
    background:
      url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_1_1_353x229.png) no-repeat 29% 0,
      url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_1_2_320x229.png) no-repeat 70.5% 0;
    background-size: 353px 229px, 320px 229px;
  }

  .subpage-main .visualpannel.page-02 .bg2 {
    background:
      url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_2_1_390x229.png) no-repeat 50% 0;
    background-size: 390px 229px;
  }

  .subpage-main .visualpannel.page-03 .bg2 {
    background:
      url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_3_1_182x229.png) no-repeat 39% 0,
      url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_3_2_218x229.png) no-repeat 62.5% 0;
    background-size: 182px 229px, 218px 229px;
  }

  .subpage-main .visualpannel.page-04 .bg2 {
    background:
      url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_4_1_488x229.png) no-repeat 50% 0;
    background-size: 488px 229px;
  }

  .subpage-main .visualpannel.page-05 .bg2 {
    background:
      url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_5_1_361x229.png) no-repeat 27.5% 0,
      url(../../../../images/iosf/ko/sub/bg_visualform_1920x229_5_2_313x229.png) no-repeat 71% 0;
    background-size: 361px 229px, 313px 229px;
  } */




}


@media screen and (max-width: 320px) {

  body {
    max-width: 320px;

  }

  .public-popup.share,
  .public-popup.share article dl {
    width: 320px;
  }

  .public-popup.share article dl dd {
    padding: 30px 26px;
  }

}