@charset "utf-8";
/****************************************/
/* Name: 국립해양박물관
/* Version: 1.0 / day: 2019-03-26
/* Author:
/****************************************/

/*
================================================================================
콘텐츠
================================================================================
*/
.main { min-width:1200px; }

/* 슬라이드 기본설정 */
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* Fix of Webkit flickering */
  z-index: 1;
}

/* psw 2020-01-19 popuparea 설정 */
.popup { width:100% !important; }
.popuparea{
	width:100%;
	position:relative;
	background-color:#000;
	text-align:center;
}
.popuparea a,
.popuparea button{
	color:#fff;
}
.popuparea img { max-height:110px; }
.popuparea .p_close_btn {
	width:20px; height:20px;
	position:absolute;
	top:50%; right:20px;
	margin-top:-10px;
  overflow: hidden;
  font-size:0;
}
.popuparea .p_close_btn i{display:inline-block;font-size:20px;}

/* 2020.05.28 hjh popup 수정 */
.popup-layer{z-index:1000 !important;}
.popup-layer .popuparea img{max-height:100%;}
.popup-layer .popuparea .p_close_btn{width:15%;height:auto;top:0;right:0;margin:0;line-height: 30px;background:#000;}
.popup-layer .bottom{position:relative;height:30px;text-align: left;}
.popup-layer .bottom button{box-sizing:border-box;display:inline-block;text-align:center;font-size:14px;font-family: 'Noto Sans KR',sans-serif;line-height: 30px;width:50%;text-align: center;}
.popup-layer .bottom .ppcheck{text-align: left;padding:0 10px;}
.popup-layer .popuparea .p_close_btn i{display:inline-block;line-height: 27px;}



.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.swiper-slide,
.swiper-slide a{
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}
.swiper-slide a {display:block}
.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.swiper-container-multirow > .swiper-wrapper {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {

  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {

}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {

}
/* Preloader */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 0;
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  -webkit-background-size: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}

.ffam{font-family: 'Open Sans Hebrew', sans-serif;}
.icGo{position:absolute;left:50%;bottom:20px;margin-left:-52px;padding-bottom:30px;width:104px;font-size:13px;color:#000;font-weight:300;text-align:center;overflow:hidden;background:url('/_public/images/main/ic_arrow2.png') no-repeat center bottom;transition: all 0.2s ease;-webkit-transition:all 0.2s ease;transition-delay: 0.5s;z-index:10}
.icGo.first{color:#fff;background:url('/_public/images/main/ic_arrow.png') no-repeat center bottom;}

.shake{animation-duration: 8s;animation-iteration-count: infinite; animation-name: shake;}
@keyframes shake {
	10%, 30%, 50%, 70%, 90% {transform: translateY(-3px);}
	20%, 40%, 60%, 80% {transform: translateY(0);}
}

/* 우측 퀵메뉴 */
.mConMenu{position:fixed;top:45%;right:10px;z-index:10}
.mConMenu li {position:relative;margin-bottom:5px;text-align:right}
.mConMenu li a{position:relative;display:block;padding-right:11px;}
.mConMenu li a::after{position:absolute;top:50%;right:0;width:4px;height:4px;content:'';background:#000;transform:translateY(-50%);-webkit-transform:translateY(-50%);transition:all 0.2s ease;-webkit-transition:all 0.2s ease}
.mConMenu li a span{position:relative;display:inline-block;font-size:13px;line-height:23px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease}
.mConMenu li a span::after{opacity:0;position:absolute;top:50%;right:-8px;content:'';border-left:7px solid #000;border-top:4px solid transparent;border-bottom:4px solid transparent;transform:translateY(-50%);-webkit-transform:translateY(-50%);transition:all 0.2s ease;-webkit-transition:all 0.2s ease}
.mConMenu li.active a{padding-right:17px}
.mConMenu li a:hover{}
.mConMenu li.active a span,
.mConMenu li a:hover span{padding:0 8px;color:#fff;background:#000;}
.mConMenu li.active a span::after{opacity:1;right:-5px;}

/* 우측 색상변경 */
.fp-viewing-firstPage .mConMenu li a span,
.fp-viewing-endPage .mConMenu li a span,
.fp-viewing-footPage .mConMenu li a span{color:#fff}
.fp-viewing-firstPage .mConMenu li.active a span,
.fp-viewing-firstPage .mConMenu li a:hover span,
.fp-viewing-endPage .mConMenu li.active a span,
.fp-viewing-endPage .mConMenu li a:hover span,
.fp-viewing-footPage .mConMenu li.active a span,
.fp-viewing-footPage .mConMenu li a:hover span{color:#000;background:#fff}
.fp-viewing-firstPage .mConMenu li a::after,
.fp-viewing-endPage .mConMenu li a::after,
.fp-viewing-footPage .mConMenu li a::after{background:#fff}
.fp-viewing-firstPage .mConMenu li a span::after,
.fp-viewing-endPage .mConMenu li a span::after,
.fp-viewing-footPage .mConMenu li a span::after{border-left:7px solid #fff;}


/* 상단비주얼 */
.topSlide{position:relative;width:100%;height:100vh}
.topSlide li{background-size:cover;background-position:center center;}
.topSlide li.bg1{background-image:url('/_public/images/main/m_visual_bg1.jpg')}
.topSlide li.bg2{background-image:url('/_public/images/main/m_visual_bg2.jpg')}
.topSlide li.bg3{background-image:url('/_public/images/main/m_visual_bg3.jpg')}
.topSlide li .con{position:absolute;top:33%;left:50%;color:#fff;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
.topSlide li .con .stit{display:inline-block;margin-bottom:25px;padding-bottom:10px;font-size:19px;border-bottom:1px solid #fff;position:relative;;color:#fff;font-weight:400}
.topSlide li .con .tit{display:block;margin-bottom:25px;font-size:54px;font-weight:400;line-height:1.2;color:#fff;}
.topSlide li .con .txt{display:block;margin-bottom:20px;font-size:18px;font-weight:300;letter-spacing:0;color:#fff;}
.topSlide li .con .btnGo{display:inline-block}
/*.topSlide li .con .btnGo a{display:block;width:67px;height:30px;text-indent:-999px;overflow:hidden;opacity:0.6;background:url('/_public/images/common/ic_arrow3.png') no-repeat right 9px center;border:1px solid #fff}
*/
.topSlide li .con .btnGo a {font-size:0;overflow:hidden;position:absolute;display:block;width:31px;height:31px;overflow:hidden;opacity:1;background:url('/_public/images/common/cplus.svg') no-repeat center center;}
.topSlide li.bg1 .con .btnGo a{right:28%;bottom:20%}
.topSlide li.bg2 .con .btnGo a{right:27%;bottom:14%}
.topSlide li.bg3 .con .btnGo a{right:37%;bottom:20%}
.topSlide li .con .btnGo a:hover {opacity:1}
.topSlide li .con:hover .btnGo a {animation-name: jump;animation-duration:0.5s;-webkit-animation-duration:0.5s}
@keyframes jump {
    0% {
       -webkit-transform: translateX(0);transform: translateX(0);
    }
    50% {
       -webkit-transform: translateX(8px);transform: translateX(8px);
    }
    100% {
       -webkit-transform: translateX(0);transform: translateX(0);
    }
}
.topSlide li .num_txt{position:absolute;left:192px;bottom:110px;font-size:15px;color:#fff;letter-spacing:0;font-weight:200}
.topSlide .mPage{position:absolute;left:346px;bottom:140px;z-index:20}
.topSlide .mPage button{display:inline-block;padding:5px 50px 30px 0;font-family: 'Roboto';font-size:20px;color:#fff;opacity:0.7;cursor:pointer;line-height:1;border-bottom:1px solid #fff;transition:all 0.2s ease}
.topSlide .mPage button.swiper-pagination-bullet-active{padding:0 50px 30px 0;font-size:25px;opacity:1;font-weight:500}

/* 애니효과 */
.topSlide li .con{display:none;transform:translateX(-100px);transition:all 0.5s ease}
.topSlide li.swiper-slide-active .con{display:block;transform:translateX(0);opacity:1}

.mBtnMore{display:inline-block;text-align:left}
.mBtnMore a{display:block;padding:0 65px 0 27px;height:54px;font-size:15px;line-height:54px;font-weight:300;background:rgba(255,255,255,0.5) url('/_public/images/common/ic_arrow4.png') no-repeat right 25px center;border:1px solid #909090}
.mBtnMore a:hover{color:#222;background-position:right 20px center;border:1px solid #222}

.controll-box{position:absolute;z-index:100;}
.topSlide .controll-box{bottom: 140px;left: 192px;border-bottom: 1px solid rgba(255,255,255,0.7);height: 56px;padding-right: 28px;}
.seconSlide .controll-box{bottom:10px;right:600px;}
.thirdSlide .controll-box{bottom: 109px;left: 50%;margin-left: 145px;}
.mNoticeCon .right .controll-box{top: -9px;left: 60px;}
.controll-box button{display:inline-block;width:40px;height:40px;overflow: hidden;font-size:0;}
.controll-box .swiper-button-play,
.controll-box .swiper-button-pause
{display:none;}
.controll-box .swiper-button-play.active,
.controll-box .swiper-button-pause.active
{display:inline-block;}


/* 기획전시 */
.seconSlide{position:relative;height:auto;}
.seconSlide li{padding:0 90px;}
.seconSlide li .con{position:relative;margin:0 auto;max-width:1300px}
.seconSlide li .con::after{display:block;clear:both;content:''}
.seconSlide li .con .infor{position:absolute;top:15%;left:0;z-index: 10;}
.seconSlide li .con .stit{display:inline-block;margin-bottom:25px;padding-bottom:10px;font-size:20px;border-bottom:1px solid #222;letter-spacing: -1px;}
.seconSlide li .con .tit{display:block;margin-bottom:25px;font-size:54px;font-weight:400;line-height:1.2;    letter-spacing: -1px;}
.seconSlide li .con .txt{display:block;margin-bottom:70px;font-size:23px;font-weight:400;letter-spacing:0;opacity:0.7;line-height:1.2}
.seconSlide li .con .photo{float:right}
.seconSlide li .num_txt{position:absolute;left:50%;bottom:-130px;margin-left:450px;font-size:15px;color:#222;font-weight:200}
.seconSlide .mPage{margin:55px auto 0;max-width:1300px;text-align:right;}
.seconSlide .mPage button{display:inline-block;padding:0 50px 20px 0;font-family: 'Roboto';font-size:16px;color:#222;cursor:pointer;line-height:1;border-bottom:1px solid rgba(34,34,34,0.4);transition:all 0.2s ease}
.seconSlide .mPage button.swiper-pagination-bullet-active{padding:0 50px 20px 0;font-weight:bold;opacity:1;border-bottom:1px solid rgba(34,34,34,1);}

/* 애니효과 */
.seconSlide li .con .infor{display:none;transform:translateX(200px);-webkit-transform:translateX(200px);transition:all 1.5s ease;-webkit-transition:all 1.5s ease;}
.seconSlide li.swiper-slide-active .con .infor{display:block;transform:translateX(0);-webkit-transform:translateX(0);}


/* 교육행사 */
.thirdSlide{position:relative;height:auto;}
.thirdSlide li{padding:0;overflow:hidden}
.thirdSlide li .con{position:relative;margin:0 auto;max-width:1300px}
.thirdSlide li .con::after{display:block;clear:both;content:''}
.thirdSlide li .con .infor{position:absolute;top:20%;right:0;width:500px}
.thirdSlide li .con .stit{display:inline-block;margin-bottom:25px;padding-bottom:10px;font-size:20px;border-bottom:1px solid #222}
.thirdSlide li .con .tit{display:block;margin-bottom:25px;font-size:54px;font-weight:400;line-height:1.2}
.thirdSlide li .con .txt{display:block;margin-bottom:60px;font-size:23px;font-weight:200;letter-spacing:0;line-height:1.2}
.thirdSlide li .con .photo{margin-left:-310px}
.thirdSlide .mPage{position:absolute;left:50%;bottom:100px;margin-left:294px;width:1300px;z-index:10}
.thirdSlide .mPage button{display:inline-block;padding:0 50px 20px 0;font-family: 'Roboto';font-size:16px;color:#222;cursor:pointer;line-height:1;border-bottom:1px solid rgba(34,34,34,0.4);transition:all 0.2s ease}
.thirdSlide .mPage button.swiper-pagination-bullet-active{padding:0 50px 20px 0;font-weight:bold;opacity:1;border-bottom:1px solid rgba(34,34,34,1);}

/* 애니효과 */
.thirdSlide li .con .infor{display:none;transform:translateX(200px);-webkit-transform:translateX(200px);transition:all 1s ease;-webkit-transition:all 1s ease;}
.thirdSlide li.swiper-slide-active .con .infor{display:block;transform:translateX(0);-webkit-transform:translateX(0);}


/* 주요 소장품 */
.mCollectCon{margin:0 auto;max-width:1300px}
.mCollectCon::after{display:block;clear:both;content:''}
.mCollectCon h2{margin-bottom:30px;font-size:20px;font-weight:200;text-align:center}
.mCollectCon h2 span{display:inline-block;padding-bottom:12px;border-bottom:1px solid #222;font-size:20px;}
.mCollectCon .left{float:left;margin:0 30px;width:302px}
.mCollectCon .right{float:right;margin:0 30px;width:302px}
.mCollectCon .box{margin:0 0 40px;}
.mCollectCon .box a{display:block}
.mCollectCon .box .photo{display:block;margin-bottom:15px;overflow:hidden}
.mCollectCon .box .photo img{transition:all 0.3s ease;-webkit-transition:all 0.3s ease}
.mCollectCon .box a:hover .photo img{transform:scale(1.05);-webkit-transform:scale(1.05)}
.mCollectCon .box .tit{display:block;font-weight:500}
.mCollectCon .box .txt{display:block;font-size:14px}
.mCollectCon .box.center{float:left;margin:0 32px;width:509px}
.mCollectCon .btn{clear:both;text-align:center}

/* 알림 */
.mNoticeCon {margin:0 auto;max-width:1200px}
.mNoticeCon::after{display:block;clear:both;content:''}
.mNoticeCon h2{margin-bottom:40px;font-size:20px;font-weight:200;text-align:center}
.mNoticeCon h2 span{display:inline-block;padding-bottom:12px;border-bottom:1px solid #222;font-size:20px;}
.mNoticeCon .left,
.mNoticeCon .right {width:560px;position:relative}
.mNoticeCon .tabMenu2 {margin-bottom:0}
.mNoticeCon .kn_tabCon {border:0}
.mNoticeCon .mnotice {width:100%;margin-top:20px}
.mNoticeCon .mnotice li {width:100%;display:inline-block;padding:12px 0 14px 0;border-bottom:1px solid #e2e2e2}
.mNoticeCon .mnotice li.mnotice_point a p { font-weight:500; }
.mNoticeCon .mnotice li.mnotice_point a p:before { content:'공지'; display:inline-block; padding:1px 5px; border:1px solid #222; margin-right:7px; font-size:14px; }
.mNoticeCon .mnotice * {font-size:15px;}
.mNoticeCon .mnotice p {width:440px;float:left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-wrap:normal;font-weight:400;}
.mNoticeCon .mnotice a:hover p {opacity:0.8}
.mNoticeCon .mnotice span {width:74px;display:block;float:right}
.mNoticeCon .left .btnBc {position:absolute;right:0;top: 5px;}
.mNoticeCon .left .btnBc a{padding:11px 11px;background-position: center 6px;background-image:url(/_public/images/common/ic_bt_plus_white.png);margin-right:0;background-color:#222;border-radius:100%}
.mNoticeCon .left .btnBc a:hover {animation-name: jump;animation-duration:0.5s;-webkit-animation-duration:0.5s}

/* 2020.07.21 웹접근성 선형 구조 게시판 */
.main-board{position:relative;}
.main-board .board-title{position:absolute;top:0;width:100px;font-weight: 300;}
.main-board .board-title a{display: block;text-align: center;border: 1px solid #222;border-bottom:0;padding: 0;min-width: 90px;font-size: 15px;color: #222;line-height: 50px;}
.main-board .board-title.title01{left:0;}
.main-board .board-title.title02{left:99px;}
.main-board .board-title.title03{left:198px;}
.main-board .board-title.title04{left:297px;}
.main-board .board-title.title05{left:396px;}
.main-board .board-title.active a,
.main-board .board-title:hover a{background:#222;color:#fff;font-weight:400;}
.main-board .list{display:none;padding-top:50px;}
.main-board .list.active{display:block}
.main-board .list ul{padding-top:20px;border-top:1px solid #222;}
.main-board .list ul li{width: 100%;padding: 12px 0 14px 0;border-bottom: 1px solid #e2e2e2;}
.main-board .list ul li a{display:block;font-size:0;}
.main-board .list ul li a em{display: inline-block;vertical-align:bottom;font-size:14px;padding: 1px 5px;border: 1px solid #222;margin-right: 7px;font-size: 14px;}
.main-board .list ul li a span{display:inline-block;vertical-align: middle;font-size:15px;}
.main-board .list ul li a .tit{width: 440px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-wrap: normal;font-weight: 400;}
.main-board .list ul li a .date{width:75px;float:right;}
.main-board .list ul li.notice a .tit{font-weight:500;}
.main-board .list ul li:hover a .tit{text-decoration: underline;}
.main-board .list ul li:hover a .tit em{text-decoration: none;}
.main-board .more-btn{display:inline-block;width:24px;line-height: 24px;position: absolute;right: 0;top: 14px;background: #222 url("/_public/images/common/ic_bt_plus_white.png") 50% 50% no-repeat;background-size: 11px 11px;border-radius: 100%;font-size:0;overflow: hidden;}

@keyframes jump {
    0% {
       -webkit-transform: translateX(0);transform: translateX(0);
    }
    50% {
       -webkit-transform: translateX(8px);transform: translateX(8px);
    }
    100% {
       -webkit-transform: translateX(0);transform: translateX(0);
    }
}
.mNoticeCon .right h3 {font-size:20px;line-height: 22px; font-weight: 500;margin-bottom:20px}
.mNoticeCon .right .swiper-slide img {width:560px;height:337px}
.mNoticeCon .mnews {clear:both;width:100%;display:inline-block;margin-top:40px}
.mNoticeCon .mnews h3 {font-size:18px;font-weight: 500;margin-bottom:15px}
.mNoticeCon .mnews .mphoto h3 {margin-left:40px}
.mNoticeCon .mnews .box {width:600px;float:left}
.mNoticeCon .mnews .box ul {width:560px;display:inline-block;}
.mNoticeCon .mnews .mvodnews {border-right:1px solid #e0e0e0}
.mNoticeCon .mnews li {width:140px;float:left;margin-right:70px;}
.mNoticeCon .mnews li a{display:block;}
.mNoticeCon .mnews li:last-child {margin-right:0}
.mNoticeCon .mnews li .photo {display:block;width:140px;height:140px;overflow:hidden;margin:0 auto}
.mNoticeCon .mnews li a img {height:100%;transition:all 0.3s ease;-webkit-transition:all 0.3s ease}
.mNoticeCon .mnews li a:hover img {transform:scale(1.05);-webkit-transform:scale(1.05)}
.mNoticeCon .mnews li .tit {font-weight:500;font-size:14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-wrap:normal;margin:10px 0 0 0}
.mNoticeCon .mnews li .data {display:block;font-size:14px}

/* Bullets */
.mNoticeCon .tabMenu2 ul li a {font-size:15px;padding:0;width:100px}
.mNoticeCon .mbullet {position:absolute;right:0;top:0;z-index:20;overflow:visible}
.mNoticeCon .mbullet button{width:12px;height:12px;display: inline-block;border-radius: 100%;
  border:1px solid #222;
  margin-left:3px;
  box-shadow: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
  appearance: none;
    cursor: pointer;
	    text-indent: -9999px;
transition:all .5s ease;-webkit-transition:all .5s ease;
}
.mNoticeCon .mbullet button:hover,
.mNoticeCon .mbullet button.swiper-pagination-bullet-active {background-color:#222;}

/* 관람안내 */
.mWatchGuide{margin:0 auto;max-width:1095px}
.mWatchGuide h2{margin-bottom:75px;font-size:20px;color:#fff;font-weight:200;text-align:center}
.mWatchGuide h2 span{display:inline-block;padding-bottom:12px;border-bottom:1px solid #fff;font-size:20px;}
.mWatchGuide dl{float:left;width:515px;color:#fff}
.mWatchGuide dl dt{margin-bottom:25px;padding:0 0 15px 38px;font-size:17px;line-height:22px;font-weight:500;background-repeat:no-repeat;background-position:left 3px;border-bottom:1px solid rgba(255,255,255,0.2)}
.mWatchGuide dl.ic1 dt{background-image:url('/_public/images/main/ic_g1.png')}
.mWatchGuide dl.ic2 dt{background-image:url('/_public/images/main/ic_g2.png')}
.mWatchGuide dl.ic3 dt{background-image:url('/_public/images/main/ic_g3.png')}
.mWatchGuide dl.ic4 dt{background-image:url('/_public/images/main/ic_g4.png')}
.mWatchGuide dl dd ul{position:relative;margin-bottom:20px;padding:0 30px}
.mWatchGuide dl dd ul::after{position:absolute;top:0;left:206px;width:1px;height:100%;content:'';background:rgba(255,255,255,0.2)}
.mWatchGuide dl dd ul li{position:relative;padding-left:218px;font-size:15px}
.mWatchGuide dl dd ul li .name{position:absolute;top:0;left:0}
.mWatchGuide dl dd p{position:relative;padding-left:10px;opacity:0.8}
.mWatchGuide dl dd p::before{position:absolute;top:10px;left:0;width:2px;height:2px;content:'';background:#fff}
.mWatchGuide dl.ic1,
.mWatchGuide dl.ic2{height:300px}
.mWatchGuide dl.ic2,
.mWatchGuide dl.ic4{float:right}
.mWatchGuide dl.ic3,
.mWatchGuide dl.ic4{height:210px}
.mWatchGuide .btn{clear:both;text-align:center}
.mWatchGuide .btn ul li{display:inline-block;background-repeat:no-repeat;background-position:20px center}
.mWatchGuide .btn ul li a{display:block;margin:0 5px;padding:0 100px 0 55px;color:#fff;line-height:64px;font-weight:300;background:url('/_public/images/common/ic_arrow3.png') no-repeat right 20px center;border:1px solid rgba(255,255,255,0.3)}
.mWatchGuide .btn ul li.ic1{background-image:url('/_public/images/main/ic_q1.png')}
.mWatchGuide .btn ul li.ic2{background-image:url('/_public/images/main/ic_q2.png')}
.mWatchGuide .btn ul li.ic3{background-image:url('/_public/images/main/ic_q3.png')}
.mWatchGuide dl.ic4 a {color:#fff;}
#conFullPage .section{}
#conFullPage .section2{}
#conFullPage .section3{}
#conFullPage .section4{}
#conFullPage .section5{background:#515151}


.mBottomCon{height:240px;background:#fff}
.mBottomCon a{display:block;text-align:center;color:#fff}

#fp-nav ul li:nth-child(6){display:none}

#conFullPage .section .fadeCon1{transform:translateY(50px);opacity:0;transition-property: all;transition-duration: 1s;transition-delay:0.5s;}
#conFullPage .section .fadeCon2{transform:translateY(50px);opacity:0;transition-property: all;transition-duration: 1s;transition-delay:1s;}
#conFullPage .section.active .fadeCon1{transform:translateY(0);opacity:1}
#conFullPage .section.active .fadeCon2{transform:translateY(0);opacity:1}
#conFullPage .section5 .introTxt2.fadeCon1.active5,
#conFullPage .section5 .mSctCon5.fadeCon2.active5{transform:translateY(0);opacity:1}

#conFullPage .section .control{display:none}


/* 메인용 레이아웃 - 기존레이아웃 변경 */
.main #container + #footer{position:fixed;left:0;width:100%;bottom:-600px;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;}
.main #container + #footer.on{bottom:0}

.main .etcMenu{height:100vh}
.main .etcMenu .btnGo{bottom:0}
.main .etcMenu .btnFoll{bottom:290px}
.main .follPop{bottom:290px}
.main .follPop.on{bottom:290px}
.fp-viewing-footPage .main .follPop.on{bottom: 510px;}

/* 스크롤시 상단/왼쪽 색상변경 */
.fp-viewing-footPage #header {background:#222}
.fp-viewing-secondPage #header .logo,
.fp-viewing-3rdPage #header .logo,
.fp-viewing-4thPage #header .logo,
.fp-viewing-5thPage #header .logo {background-position:left bottom}
.fp-viewing-secondPage #header .head_box #gnb ul li a,
.fp-viewing-3rdPage #header .head_box #gnb ul li a,
.fp-viewing-4thPage #header .head_box #gnb ul li a,
.fp-viewing-5thPage #header .head_box #gnb ul li a{color:#222}
.fp-viewing-secondPage #header .head_box #gnb ul li a span:before,
.fp-viewing-3rdPage #header .head_box #gnb ul li a span:before,
.fp-viewing-4thPage #header .head_box #gnb ul li a span:before,
.fp-viewing-5thPage #header .head_box #gnb ul li a span:before{background-color: #222;}
.fp-viewing-secondPage #header .head_box .memberMenu li a,
.fp-viewing-3rdPage #header .head_box .memberMenu li a,
.fp-viewing-4thPage #header .head_box .memberMenu li a,
.fp-viewing-5thPage #header .head_box .memberMenu li a {color:#222}
.fp-viewing-secondPage #header .head_box .globMenu > li > a,
.fp-viewing-3rdPage #header .head_box .globMenu > li > a,
.fp-viewing-4thPage #header .head_box .globMenu > li > a,
.fp-viewing-5thPage #header .head_box .globMenu > li > a{color:#222;border:1px solid #222;}
.fp-viewing-secondPage #header .head_box .globMenu > .btnLang > button,
.fp-viewing-3rdPage #header .head_box .globMenu > .btnLang > button,
.fp-viewing-4thPage #header .head_box .globMenu > .btnLang > button,
.fp-viewing-5thPage #header .head_box .globMenu > .btnLang > button{color:#222;border:1px solid #222;}
.fp-viewing-secondPage #header .head_box .globMenu > li.first a,
.fp-viewing-3rdPage #header .head_box .globMenu > li.first a,
.fp-viewing-4thPage #header .head_box .globMenu > li.first a,
.fp-viewing-5thPage #header .head_box .globMenu > li.first a{border:1px solid #222;}
.fp-viewing-secondPage #header .head_box .globMenu > li > a:hover,
.fp-viewing-secondPage #header .head_box .globMenu .btnLang > button.on,
.fp-viewing-3rdPage #header .head_box .globMenu > li > a:hover,
.fp-viewing-3rdPage #header .head_box .globMenu .btnLang > button.on,
.fp-viewing-4thPage #header .head_box .globMenu > li > a:hover,
.fp-viewing-4thPage #header .head_box .globMenu .btnLang > button.on,
.fp-viewing-5thPage #header .head_box .globMenu > li > button:hover,
.fp-viewing-5thPage #header .head_box .globMenu .btnLang > button.on{border:1px solid rgba(0,0,0,1);}
.fp-viewing-secondPage #header .head_box .globMenu .btnLang > button::after,
.fp-viewing-3rdPage #header .head_box .globMenu .btnLang > button::after,
.fp-viewing-4thPage #header .head_box .globMenu .btnLang > button::after,
.fp-viewing-5thPage #header .head_box .globMenu .btnLang > button::after{background:url('/_public/images/common/ic_arrow_on.png') no-repeat}
.fp-viewing-secondPage #header .head_box .globMenu .btnLang ul,
.fp-viewing-3rdPage #header .head_box .globMenu .btnLang ul,
.fp-viewing-4thPage #header .head_box .globMenu .btnLang ul,
.fp-viewing-5thPage #header .head_box .globMenu .btnLang ul{border:1px solid rgba(0,0,0,1);border-width:0 1px 1px}
.fp-viewing-secondPage #header .head_box .globMenu .btnLang ul li,
.fp-viewing-3rdPage #header .head_box .globMenu .btnLang ul li,
.fp-viewing-4thPage #header .head_box .globMenu .btnLang ul li,
.fp-viewing-5thPage #header .head_box .globMenu .btnLang ul li{border-bottom:1px solid rgba(0,0,0,0.4)}
.fp-viewing-secondPage #header .head_box .globMenu .btnLang ul li:last-child,
.fp-viewing-3rdPage #header .head_box .globMenu .btnLang ul li:last-child,
.fp-viewing-4thPage #header .head_box .globMenu .btnLang ul li:last-child,
.fp-viewing-5thPage #header .head_box .globMenu .btnLang ul li:last-child{border-bottom:0}
.fp-viewing-secondPage #header .head_box .globMenu .btnLang ul li a,
.fp-viewing-3rdPage #header .head_box .globMenu .btnLang ul li a,
.fp-viewing-4thPage #header .head_box .globMenu .btnLang ul li a,
.fp-viewing-5thPage #header .head_box .globMenu .btnLang ul li a{color:#222}
.fp-viewing-secondPage #header .head_box .globMenu .btnLang ul li a:hover,
.fp-viewing-3rdPage #header .head_box .globMenu .btnLang ul li a:hover,
.fp-viewing-4thPage #header .head_box .globMenu .btnLang ul li a:hover,
.fp-viewing-5thPage #header .head_box .globMenu .btnLang ul li a:hover{background:#000;color:#fff}
.fp-viewing-secondPage #header .head_box .btnSearch,
.fp-viewing-3rdPage #header .head_box .btnSearch,
.fp-viewing-4thPage #header .head_box .btnSearch,
.fp-viewing-5thPage #header .head_box .btnSearch{background:rgba(34,34,34,0.05) url('/_public/images/common/ic_search2.png') no-repeat center center;}
.fp-viewing-secondPage #header .head_box .viewSearh,
.fp-viewing-3rdPage #header .head_box .viewSearh,
.fp-viewing-4thPage #header .head_box .viewSearh,
.fp-viewing-5thPage #header .head_box .viewSearh{border:1px solid #222;}
.fp-viewing-secondPage #header .head_box .viewSearh .searchViewClose,
.fp-viewing-3rdPage #header .head_box .viewSearh .searchViewClose,
.fp-viewing-4thPage #header .head_box .viewSearh .searchViewClose,
.fp-viewing-5thPage #header .head_box .viewSearh .searchViewClose{background:url('/_public/images/common/ic_bt_close.png') no-repeat center center;background-size:10px}

.fp-viewing-secondPage .etcMenu,
.fp-viewing-3rdPage .etcMenu,
.fp-viewing-4thPage .etcMenu,
.fp-viewing-5thPage .etcMenu{border-right:1px solid rgba(34,34,34,0.2);}
.fp-viewing-secondPage .etcMenu .btnTotal span,
.fp-viewing-secondPage .etcMenu .btnTotal span::before,
.fp-viewing-secondPage .etcMenu .btnTotal span::after,
.fp-viewing-3rdPage .etcMenu .btnTotal span,
.fp-viewing-3rdPage .etcMenu .btnTotal span::before,
.fp-viewing-3rdPage .etcMenu .btnTotal span::after,
.fp-viewing-4thPage .etcMenu .btnTotal span,
.fp-viewing-4thPage .etcMenu .btnTotal span::before,
.fp-viewing-4thPage .etcMenu .btnTotal span::after,
.fp-viewing-5thPage .etcMenu .btnTotal span,
.fp-viewing-5thPage .etcMenu .btnTotal span::before,
.fp-viewing-5thPage .etcMenu .btnTotal span::after{background:#646464;}
.fp-viewing-secondPage .etcMenu .btnTotal:hover span,
.fp-viewing-3rdPage .etcMenu .btnTotal:hover span,
.fp-viewing-4thPage .etcMenu .btnTotal:hover span,
.fp-viewing-5thPage .etcMenu .btnTotal:hover span{background:#222}
.fp-viewing-secondPage .etcMenu .btnTotal:hover span::before,
.fp-viewing-secondPage .etcMenu .btnTotal:hover span::after,
.fp-viewing-3rdPage .etcMenu .btnTotal:hover span::before,
.fp-viewing-3rdPage .etcMenu .btnTotal:hover span::after,
.fp-viewing-4thPage .etcMenu .btnTotal:hover span::before,
.fp-viewing-4thPage .etcMenu .btnTotal:hover span::after,
.fp-viewing-5thPage .etcMenu .btnTotal:hover span::before,
.fp-viewing-5thPage .etcMenu .btnTotal:hover span::after{left:0;background:#222;}
.fp-viewing-secondPage .etcMenu .btnFoll,
.fp-viewing-3rdPage .etcMenu .btnFoll,
.fp-viewing-4thPage .etcMenu .btnFoll,
.fp-viewing-5thPage .etcMenu .btnFoll{color:#222}
.fp-viewing-secondPage .etcMenu .btnFoll,
.fp-viewing-3rdPage .etcMenu .btnFoll,
.fp-viewing-4thPage .etcMenu .btnFoll,
.fp-viewing-5thPage .etcMenu .btnFoll{border-top: 1px solid rgba(34,34,34,0.2);border-bottom: 1px solid rgba(34,34,34,0.2)}

.fp-viewing-secondPage .etcMenu .btnFoll .icon,
.fp-viewing-3rdPage .etcMenu .btnFoll .icon,
.fp-viewing-4thPage .etcMenu .btnFoll .icon,
.fp-viewing-5thPage .etcMenu .btnFoll .icon{background:url('/_public/images/common/cplus_on.svg') center center / cover no-repeat;}
.fp-viewing-secondPage .etcMenu .btnFoll.on .icon,
.fp-viewing-3rdPage .etcMenu .btnFoll.on .icon,
.fp-viewing-4thPage .etcMenu .btnFoll.on .icon,
.fp-viewing-5thPage .etcMenu .btnFoll.on .icon {background:url('/_public/images/common/cplus.svg') center center / cover no-repeat;}
.fp-viewing-secondPage .etcMenu .btnFoll.on,
.fp-viewing-3rdPage .etcMenu .btnFoll.on,
.fp-viewing-4thPage .etcMenu .btnFoll.on,
.fp-viewing-5thPage .etcMenu .btnFoll.on {color:#fff;}
.fp-viewing-secondPage .etcMenu .btnFoll.on i,
.fp-viewing-3rdPage .etcMenu .btnFoll.on i,
.fp-viewing-4thPage .etcMenu .btnFoll.on i,
.fp-viewing-5thPage .etcMenu .btnFoll.on i {background:transparent;}
.fp-viewing-secondPage .etcMenu .btnFoll.on i::before,
.fp-viewing-secondPage .etcMenu .btnFoll.on i::after,
.fp-viewing-3rdPage .etcMenu .btnFoll.on i::before,
.fp-viewing-3rdPage .etcMenu .btnFoll.on i::after,
.fp-viewing-4thPage .etcMenu .btnFoll.on i::before,
.fp-viewing-4thPage .etcMenu .btnFoll.on i::after,
.fp-viewing-5thPage .etcMenu .btnFoll.on i::after {background:#ccc}
.fp-viewing-secondPage .etcMenu .btnGo,
.fp-viewing-3rdPage .etcMenu .btnGo,
.fp-viewing-4thPage .etcMenu .btnGo,
.fp-viewing-5thPage .etcMenu .btnGo {color:#222;}
.fp-viewing-secondPage .etcMenu .btnGo a,
.fp-viewing-3rdPage .etcMenu .btnGo a,
.fp-viewing-4thPage .etcMenu .btnGo a,
.fp-viewing-5thPage .etcMenu .btnGo a{color:#222;border-right:0px solid rgba(34,34,34,0.2)}

.fp-viewing-footPage .main .etcMenu .btnGo{bottom:260px}
.fp-viewing-footPage .main .etcMenu .btnFoll{bottom:510px}
