@charset "utf-8";
@import "style.css";
@import "swiper.min.css";




/* COMMON */
body, html{height:100%; position:relative;}
.cf:after{content:''; display:block; clear:both;}
button{cursor:pointer;}
.viHidden{visibility: hidden;}
.cuAuto{cursor: auto;}
.web_res{display: block;}
.mo_res{display: none;}
.diNone{display: none;}
/* html {overflow-y: auto !important;height:auto !important;} */

h3.tit_pen01{font-family:'NanumPen'; font-size:70px !important; padding-left:145px; background: url(../images/kocis_logo.png) no-repeat left top; }
h3.tit_pen01 span{color:#e31d1a; background: url(../images/tit_line01.png) no-repeat center 52px; padding:0 5px; font-size:75px; margin-right:8px;}
h3.tit_pen02{font-family:'NanumPen'; font-size:36px !important;}
h3.tit_pen02 em{font-size:70px !important;}
h3.tit_pen03{font-family:'NanumPen'; font-size:70px !important;}
h3.tit_pen03 span{color:#e31d1a; background: url(../images/tit_line02.png) no-repeat center 52px; padding:0 5px; font-size:70px;}
h3.tit_pen03.webTxt{display:block;}
h3.tit_pen03.mobTxt{display:none;}
h3.tit_pen04{font-family:'NanumPen'; font-size:70px !important; padding-left:125px; background: url(../images/kocis_logo.png) no-repeat left top; }

.wrapper {min-height: 100%;height: 100%;} 
.wrapper .top {height: 100%;}



/* HEADER */
#new_header{position:absolute; top:0; left:0; width:100%; height:30px; z-index:100;}
#new_header .top{width:100%; max-width:1560px; padding:0 30px; margin:0 auto;}
#new_header .top .logo{float:left; line-height:0; padding:30px 0;}
#new_header .top .top_right{float:right; padding:38px 0;}
#new_header .top .top_right li{float:left; margin-left:15px;}
#new_header .top .top_right li.gnbOn_pc{margin-left:30px;}
#new_header .top .top_right li.gnbOn_m{margin-left:30px; display:none;}
#new_header .top .top_right li.btnEvent{padding:6.5px 10px; border:solid 1px #fff; border-radius:8px; color:#4ca2ff; font-size:16px; font-weight:200; cursor: pointer;}
#new_header.fixHeader{position:fixed; top:0; left:0; height:auto; background:#fff; box-shadow:0 10px 10px rgba(0,0,0,0.1);}
#new_header.fixHeader .top .logo{padding:25px 0;}
#new_header.fixHeader .top .top_right{padding:33px 0;}



/* VISUAL */
.new_visual{position:relative; overflow:hidden; height:100%;}
.new_visual::after{content: ''; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.3);display: block;z-index: 4;position: relative;}
.new_visual video{
	position:absolute; left: 0;top: 0; width:auto; height:auto;z-index:3;overflow: hidden;-o-object-fit: fill;
    object-fit: fill;min-width: 100%;min-height: 100%;
}
video::-webkit-media-controls {display: none;}

.new_visual .new_visaul_txt{position:absolute; top:47%; left:0; text-align:center; width:100%; transform:translateY(-50%); z-index:5;}
.new_visual .new_visaul_txt h1{font-family: 'NotoK'; color:#fff; font-size:0; line-height:1.2; font-weight:500;}
.new_visual .new_visaul_txt h1 span {display: inline-block; font-family: 'NotoK'; color:#fff; font-size:60px; line-height:1.2; font-weight:500;}
.new_visual .new_visaul_txt h1 span.space {display: inline-block; padding-left: 15px;}
.new_visual .new_visaul_txt p{font-size:1.538em; color:#e4e4e4; margin-top:20px; font-weight:200;}
.new_visual .new_visaul_txt a.btnVod {
	display:block; position:relative; width:130px; margin:45px auto 0px auto; padding:5px 0 5px 10px;text-align: left;
	transform: rotate(135deg);border-bottom: 1px solid #fff;color:#fff;font-size: 16px;line-height: 1.4;
}
.new_visual .new_visaul_txt a.btnVod::after {
	content: "";display: block;width: 1px;height: 20px;background-color: #fff;transform: rotate(-45deg) translate(-15px, 6px);position: absolute;right: 0;top: 0;
}
.new_visual .new_visaul_txt a.btnVod span {
	content: "";display: block;width: 60px;height: 60px;position: absolute;right: -30px;top: 0;border: 1px solid #fff;border-radius: 50%;transition: all .3s ease-in-out;
	overflow: hidden;
}
.new_visual .new_visaul_txt a.btnVod:hover span {border: 1px dashed #fff;}  
.new_visual .new_visaul_txt a.btnVod:hover span {-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;animation: spinAround 9s linear infinite;} 

/* .new_visual .new_visaul_txt a.btnVod span::after {
    content: "";position: absolute;transition: all 0.3s;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;
    transform: translate(-50%, -50%);transition: transform 0.15s, 0.15s border-radius 0.15s;opacity: 0;background: rgba(255, 255, 255, 0.1);
	transform: scale(0.1, 0.1);border-radius: 50%;
}
.new_visual .new_visaul_txt a.btnVod:hover span::after {
	transform: translate(-50%, -50%);background-color: #fff;opacity: .6;transform: scale(1, 1);border-radius: 0;box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	color: #fff;
} */


.mouse-block {position: absolute; bottom: 80px;width: 100%;z-index: 99;}
.mouse-text-block {font-size: 14px;font-weight: 200;color: #fff;height: 20px;text-align: center;}
.moving-mouse-holder {margin: 10px auto 0;}
.moving-mouse-holder .mouse {width: 20px;height: 20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.moving-mouse-holder .mouse .mouse-button {
	width: 20px;height: 20px;margin: 0 0 0 -2px;border: solid #000;
    border-width: 0 4px 4px 0;display: inline-block;transform: rotate(45deg);
    -webkit-animation: ani-mouse 2s infinite;-moz-animation: ani-mouse 2s infinite;animation: ani-mouse 2s infinite;
}
.moving-mouse-holder .mouse .mouse-button:nth-child(2) {animation-delay: -0.2s;-webkit-animation-delay: -0.2s;}

.moving-mouse-holder .mouse .mouse-button:nth-child(3) {animation-delay: -0.4s;-webkit-animation-delay: -0.4s;}



@-webkit-keyframes ani-mouse {
	0%{transform: rotate(45deg) translate(-20px,-20px);}
    50%{}
    100%{opacity: 0;transform: rotate(45deg) translate(20px,20px);}
}
@-moz-keyframes ani-mouse {
	0%{transform: rotate(45deg) translate(-20px,-20px);}
    50%{}
    100%{opacity: 0;transform: rotate(45deg) translate(20px,20px);}
}
@keyframes ani-mouse {
	0%{transform: rotate(45deg) translate(-20px,-20px);}
    50%{}
    100%{opacity: 0;transform: rotate(45deg) translate(20px,20px);}
}

.new_visual .new_visaul_txt h1 span {  
	-webkit-animation-name: slideInUp;animation-name: slideInUp;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-delay: 2s;
	animation-delay: 2s;-webkit-animation-fill-mode: backwards;animation-fill-mode: backwards; 
}
.new_visual .new_visaul_txt h1 span:nth-child(1) {-webkit-animation-delay: 0s;animation-delay: 0s;}
.new_visual .new_visaul_txt h1 span:nth-child(2) {-webkit-animation-delay: .1s;animation-delay: .1s;}
.new_visual .new_visaul_txt h1 span:nth-child(3) {-webkit-animation-delay: .2s;animation-delay: .2s;}
.new_visual .new_visaul_txt h1 span:nth-child(4) {-webkit-animation-delay: .3s;animation-delay: .3s;}
.new_visual .new_visaul_txt h1 span:nth-child(5) {-webkit-animation-delay: .4s;animation-delay: .4s;}
.new_visual .new_visaul_txt h1 span:nth-child(6) {-webkit-animation-delay: .5s;animation-delay: .5s;}
.new_visual .new_visaul_txt h1 span:nth-child(7) {-webkit-animation-delay: .6s;animation-delay: .6s;}
.new_visual .new_visaul_txt h1 span:nth-child(8) {-webkit-animation-delay: .7s;animation-delay: .7s;}
.new_visual .new_visaul_txt h1 span:nth-child(9) {-webkit-animation-delay: .8s;animation-delay: .8s;}
.new_visual .new_visaul_txt h1 span:nth-child(10) {-webkit-animation-delay: .9s;animation-delay: .9s;}
.new_visual .new_visaul_txt h1 span:nth-child(11) {-webkit-animation-delay: 1s;animation-delay: 1s;}
.new_visual .new_visaul_txt h1 span:nth-child(12) {-webkit-animation-delay: 1.1s;animation-delay: 1.1s;}
.new_visual .new_visaul_txt h1 span:nth-child(13) {-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}
.new_visual .new_visaul_txt h1 span:nth-child(14) {-webkit-animation-delay: 1.3s;animation-delay: 1.3s;}
.new_visual .new_visaul_txt h1 span:nth-child(15) {-webkit-animation-delay: 1.4s;animation-delay: 1.4s;}
.new_visual .new_visaul_txt h1 span:nth-child(16) {-webkit-animation-delay: 1.5s;animation-delay: 1.5s;}
.new_visual .new_visaul_txt h1 span:nth-child(17) {-webkit-animation-delay: 1.6s;animation-delay: 1.6s;}
.new_visual .new_visaul_txt h1 span:nth-child(18) {-webkit-animation-delay: 1.7s;animation-delay: 1.7s;}
.new_visual .new_visaul_txt h1 span:nth-child(19) {-webkit-animation-delay: 1.8s;animation-delay: 1.8s;}
.new_visaul_txt p {
	-webkit-animation-name: slideInUp;animation-name: slideInUp;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-delay: 2s;
	animation-delay: 2s;-webkit-animation-fill-mode: backwards;animation-fill-mode: backwards; 
}

@-webkit-keyframes slideInUp {
	0% {opacity: 0;-webkit-transform: translateY(100%);transform: translateY(100%);}
	100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
  }
  
  @keyframes slideInUp {
	0% {opacity: 0;-webkit-transform: translateY(100%);transform: translateY(100%);}
	100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
  }

.new_visual .new_visaul_txt a.btnVod {
	-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-delay: 2.4s;
	animation-delay: 2.4s;
	-webkit-animation-name: slideOutDown;
	animation-name: slideOutDown;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}


@-webkit-keyframes slideOutDown  {
	0% {opacity: 0;-webkit-transform: translateY(-100%);transform: translateY(-100%);}
	90% {-webkit-transform: translateY(5%);transform: translateY(5%);}
	100% {opacity: 1; -webkit-transform: translateY(0);transform: translateY(0);}
  }
  
  @keyframes slideOutDown {
	0% {opacity: 0;-webkit-transform: translateY(-100%);transform: translateY(-100%);}
	90% {-webkit-transform: translateY(5%);transform: translateY(5%);}
	100% {opacity: 1; -webkit-transform: translateY(0);transform: translateY(0);}
  }


  
 


.visual-swiper {height: 100%; display: block;}
.visual-swiper .swiper-container.big {height: 100%;}
.visual-swiper .swiper-container.thumbnail {position: absolute;left: 0;right: 0;bottom: 40px;z-index: 999;}
.visual-swiper .swiper-container.thumbnail .swiper-wrapper {text-align: center;display: inline-block;font-size: 0;line-height: 1;}
.visual-swiper .swiper-container.thumbnail .swiper-wrapper .swiper-slide {display: inline-block;border: 2px solid transparent;border-radius: 5px;overflow: hidden;opacity: .5;cursor: pointer;}
.visual-swiper .swiper-container.thumbnail .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {border: 2px solid #f37635;opacity: 1;}
.visual-swiper .swiper-container.thumbnail .swiper-slide {width: 104px !important;}
.visual-swiper .swiper-container.thumbnail .swiper-slide + .swiper-slide {margin-left: 18px;}
.visual-swiper .swiper-container.thumbnail .swiper-slide img {max-width: 100px;}


/* Mobile main_slider */
.main_slider{position:relative; width:100%; height:100%; display: none;}
.main_slider ul{clear:both;display:block}
.main_slider > p{position:absolute;left:50%;top:0;width:50%;height:100%;background:rgba(0,110,205,0.7)}
.bx-wrapper{margin:auto;position:relative;width:100%}
.visual{margin:auto;position:relative;width:100% !important;box-sizing:border-box}
.visual > div{margin:0 auto; width: 100%;}
.visual > div > span{display:inline-block; width: 100%; border:1px solid rgba(255,255,255,0.5); box-sizing:border-box; vertical-align:baseline; transition:0.3s}
.visual > div > span img{width: 100%;}
.visual .visualText{position:absolute;left:50%;top:0;width:700px;height:100%;padding:80px 40px;box-sizing:border-box;transition:0.3s}
.visual .title{display:-webkit-box;width:100%;height:3.9em;font-family:"Noto Sans KR B";font-size:2.313rem/*37px*/;color:#fff;word-break:keep-all;word-wrap:break-word;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;text-align:left;line-height:1.3;-webkit-line-clamp:3;-webkit-box-orient:vertical;letter-spacing:-0.03em;transition:0.3s}

.pagerCustom{margin:0 auto;position:relative;width:1400px}
.pagerCustom p{z-index:1;position:absolute;right:0;bottom:40px}
.pagerCustom p span{float:left;position:relative;margin-left:20px;transition:0.3s}
.pagerCustom p span a{display:block}
.pagerCustom p span a:before{content:"";position:absolute;left:0;top:0;width:100px;height:64px;background:rgba(0,0,0,0.2)}
.pagerCustom p span a.active:before{background:rgba(0,0,0,0.0)}
.pagerCustom p span a img{width:100px;height:64px;border:1px solid #328de1;box-shadow:4px 4px rgba(0,0,0,0.3);box-sizing:border-box}
.progress{margin:0 auto;position:relative;right:0;width:1400px;}
.progress p{position:absolute;overflow:hidden;right:65px;top:-12px;width:123px;height:1px;background:#999189}
.progress p span{display:block;max-width:0;min-width:30px;height:1px;background:#fff;transition:0.75s}

.main_slider .bx-controls{z-index:100;margin:0 auto;position:relative;width:100%;text-indent:-99999px}
.main_slider .bx-controls-direction{position:absolute;right:0;bottom:0;width:100%;height:40px;transition:0.3s}
.main_slider .bx-controls-direction a img{display: block;}
.main_slider .bx-controls-direction .bx-prev{display:inline-block;position:absolute;left:15px;width:21px;height:40px}
.main_slider .bx-controls-direction .bx-next{display:inline-block;position:absolute;right:15px;width:21px;height:40px}
.main_slider .bx-controls-direction .bx-prev:hover, .main_slider .bx-controls-direction .bx-prev:focus, .main_slider .bx-controls-direction .bx-next:hover, .main_slider .bx-controls-direction .bx-next:focus{opacity:0.85;-fileter:alpha(opacity=85)}
.main_slider .bx-controls-auto{position:absolute;right:0;bottom:0;transition:0.3s}

.main_slider .bx-controls-direction .bx-prev:focus img, .main_slider .bx-controls-direction .bx-next:focus img, .main_slider .bx-controls-auto a.bx-start:focus img, .main_slider .bx-controls-auto a.bx-stop:focus img{box-sizing:border-box;outline:1px dotted #ccc}
.main_slider .bx-controls-auto a.bx-start:hover, .main_slider .bx-controls-auto a.bx-start:focus, .main_slider .bx-controls-auto a.bx-stop:hover, .main_slider .bx-controls-auto a.bx-stop:focus{opacity:0.85;-fileter:alpha(opacity=85)}
.main_slider .bx-controls-auto a.active{display:none} 
/* Mobile main_slider */


.content {transition: all .3s;}

/* 해문홍 50년 발자취 */
.history-wrap {position: relative; max-width: 1400px;margin: auto;padding: 50px 0;}
.history-wrap h3 {padding-bottom: 50px; color: #111;font-size: 50px;line-height: 1;font-weight: 100;}
.history-wrap .history {position: relative;}
.history-wrap .history ul {min-width: 1400px; overflow-x: auto;}

.history-wrap .history-box {overflow: hidden;padding-top: 3px;}
.history-wrap .history-box ul {
	position: relative;-webkit-box-orient: horizontal;-moz-box-orient: horizontal;display: flex;justify-content: space-between;
}

.history-wrap .history-box ul li {
	position: relative; display: inline-block;text-align: center;display: block;width: 100%;height: 100%;
	-webkit-box-flex: 1;-moz-box-flex: 1;box-flex: 1;text-align: center;vertical-align: top;
}

.history-wrap .history-box ul li .img {position: relative; width: 98px;height: 98px;z-index: 2;}
.history-wrap .history-box ul li .img img {max-width: 100%;}
.history-wrap .history-box ul li .img img{transform:scale(1.0); transition: 0.5s;}
.history-wrap .history-box ul li .img:hover img{transform:scale(1.05); transition: 0.5s;}
.history-wrap .history-box ul li .date {
	position: relative; padding: 18px 0 25px 20px; color: #d9d9d9;font-size: 45px;line-height: 1;font-weight: normal;text-align: left;font-family: 'RobotoB';
}


.history-wrap .history-box ul li .txt {
	padding: 18px 0 0 29px;min-height: 72px; color: #686868;font-size: 14px;line-height: 1.3;font-weight: 200;text-align: left;
	display: flex;justify-content: flex-start;align-items: baseline;letter-spacing: -1px;
}

.history-wrap .history-box ul li .box-history::before {content: '';display: inline-block; position: absolute;left: 12px;top: 68px;border-left: 1px solid #f4f4f4;height: 185px;}

.history-wrap .btn-rgt-more {
	width: 50px;height: 50px;border-radius: 50%; background: url(../images/ico_plus.png) no-repeat center center; background-size:26px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);position: absolute;right: 0;top: 60px;border: 0;
}


@-webkit-keyframes slideInLeft {
	0% {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		visibility: visible;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes slideInLeft {
	0% {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		visibility: visible;
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
} 
.history-wrap.in-view .history-box ul li {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}
.history-wrap.in-view .history-box ul li:nth-child(1) {animation-delay: .2s;}
.history-wrap.in-view .history-box ul li:nth-child(2) {animation-delay: .4s;}
.history-wrap.in-view .history-box ul li:nth-child(3) {animation-delay: .6s;}
.history-wrap.in-view .history-box ul li:nth-child(4) {animation-delay: .8s;}
.history-wrap.in-view .history-box ul li:nth-child(5) {animation-delay: 1s;}
.history-wrap.in-view .history-box ul li:nth-child(6) {animation-delay: 1.2s;}
.history-wrap.in-view .history-box ul li:nth-child(7) {animation-delay: 1.4s;}
.history-wrap.in-view .history-box ul li:nth-child(8) {animation-delay: 1.6s;}
.history-wrap.in-view .history-box ul li:nth-child(9) {animation-delay: 1.8s;}
.history-wrap.in-view .history-box ul li:nth-child(10) {animation-delay: .10s;}


/* KOCIS를 빛낸 50가지 이야기 */
.photo-wrap {position: relative;margin: auto;}
.photo-wrap::before {
	content: '';display: block;position: absolute;left: 0;right: 0;bottom: 0;height: 120px;background: #234667;
}
.photo-wrap .inline-box {position: relative;max-width: 1400px;}
.photo-wrap .inline-box::before {
	content: '';display: block;position: absolute;left: 0;right: 0;bottom: -230px;height: 120px; 
	background: url(../images/th50_bg.png) no-repeat 200px bottom;
}
.photo-wrap .inline-box::after {content: '';display: block;clear: both;}
.photo-wrap h3 {float: left; font-family: 'NanumPen'; padding-top: 35px; font-size: 70px;color: #111;line-height: 1;text-align: left;font-weight: normal; margin: -20px 0 20px 0;}
.photo-wrap h3 span {font-family: 'NanumPen';font-size: 50px;color: #111;line-height: 1;text-align: left;font-weight: normal;}


.photo-wrap .btn-box {text-align: left;position:absolute;left: 0;top: 120px;}
.photo-wrap a.btnlive {
	display:inline-block; position:relative; width:130px;padding:5px 0 5px 10px;text-align: left;font-size: 16px;line-height: 1.4; color: #234667;
}
.photo-wrap a.btnlive::before {content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #234667;z-index: 2;}
.photo-wrap a.btnlive::after {
	content: "";display: block;width: 1px;height: 20px;background-color: #234667;transform: rotate(-45deg) translate(-15px, 6px);position: absolute;right: 0;top: 0;z-index: 2;
}
.photo-wrap a.btnlive span {
	content: "";display: block;width: 60px;height: 60px;position: absolute;right: -30px;top: 0;border: 1px solid #234667;border-radius: 50%;transition: all .3s ease-in-out;
	overflow: hidden;
}
.photo-wrap a.btnlive:hover span {border: 1px dashed #234667;}  
.photo-wrap a.btnlive:hover span {-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;animation: spinAround 9s linear infinite;}  



.photo-wrap .photo-box {padding-left:490px;}
.photo-wrap .swiper-container.gallery {position: relative;margin: -30px auto 0;padding-bottom: 25px;}
.photo-wrap .swiper-container.gallery .swiper-wrapper {font-size: 0;}
.photo-wrap .swiper-container.gallery .swiper-wrapper .swiper-slide {display: inline-block;cursor: pointer;width: auto !important;}
.photo-wrap .swiper-container.gallery .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {}
.photo-wrap .swiper-container.gallery .swiper-slide {white-space: nowrap;}
.photo-wrap .swiper-container.gallery .swiper-slide a {white-space: nowrap;display: inline-block;position: relative;}
.photo-wrap .swiper-container.gallery .swiper-slide a + a {margin-left: 35px;}
.photo-wrap .swiper-container.gallery .swiper-slide + .swiper-slide {margin-left: 1px;}
.photo-wrap .swiper-container.gallery .swiper-slide img {max-width:365px;}
.swiper-container.big-gallery {position: relative;}
.swiper-container.big-gallery .swiper-wrapper {font-size: 0;}
.swiper-container.big-gallery .swiper-wrapper .swiper-slide {display: block;}
.swiper-container.big-gallery .swiper-wrapper .swiper-slide img {max-width: 800px;}

.photo-wrap .swiper-container.gallery .swiper-slide a::before {
	content: '';background: rgba(0,0,0,0.7);position: absolute;width: 100%;left: 0;top: 0;bottom: 0;right: 0;
	opacity: 0;-webkit-transition: all 0.4s ease-in-out 0s;-moz-transition: all 0.4s ease-in-out 0s;transition: all 0.4s ease-in-out 0s;
}  
.photo-wrap .swiper-container.gallery .swiper-slide a:hover::before {opacity: 1;}
.swiper-container.big-gallery .swiper-wrapper .swiper-slide .title {
	padding: 20px 0; font-size: 20px;line-height: 1.4;color: #fff;position: absolute; width: 100%;bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}
.photo-wrap .content-details {
	position: absolute;text-align: center;padding: 0 20px;top: 50%;left: 50%;opacity: 0;width: 100%;box-sizing: border-box;white-space: normal;
	-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
	-webkit-transition: all 0.3s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;
}
.gallery .swiper-slide a:hover .content-details {top: 50%;left: 50%;opacity: 1; /* 20211119 수정 */}
  
.gallery .swiper-slide:hover .content-details .title {color: #fff;font-size: 18px;font-weight: 300;line-height: 1;text-align: center;}
.photo-wrap .content-details p {padding: 20px 0 30px; color: #c4c3c3;font-size: 15px;line-height: 1.2;font-weight: 200;text-align: center; /* 20211119 추가 */ display: -webkit-box; height: 3.7em; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; color: #c9c9c9; text-align: left; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.gallery .swiper-slide a .fadeIn-bottom{top: 80%;}


.gallery .swiper-slide a .more {
	display:inline-block; position:relative; width:105px;padding:7px 0 5px 10px;text-align: left;color:#588ebf;font-size: 15px;line-height: 1.4;
	margin-top:15px; /* 20211119 수정 */}
.gallery .swiper-slide a .more::before {
	content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #588ebf;z-index: 2;
}
.gallery .swiper-slide a .more::after {
	content: "";display: block;width: 1px;height: 20px;background-color: #588ebf;transform: rotate(-45deg) translate(-15px, 6px);
	position: absolute;right: 0;top: 0;z-index: 2;
}




.photo-wrap .swiper-btn-photo {position: absolute;left: 0;bottom: -200px;}
.photo-wrap .swiper-btn-photo .swiper-gallery-prev {
	display: inline-block; position:absolute; left: 0; bottom:0; width: 50px;height: 50px;background: url(../images/arrow-left_white.png) no-repeat center center;cursor: pointer;
}
.photo-wrap .swiper-btn-photo .swiper-gallery-next {
	display: inline-block; position:absolute; left: 70px; bottom:0;right: auto;width: 50px;height: 50px;background: url(../images/arrow-right_white.png) no-repeat center center;cursor: pointer;
}

.year-swiper .swiper-container {text-align: right;}
.year-swiper .swiper-wrapper {display: inline-block;padding-top: 13px; font-size: 0;text-align: right;justify-content: end;border-top: 1px solid #d2d2d2;}
.year-swiper .swiper-wrapper .swiper-slide {
	display: inline-block;width: auto !important;font-family: 'RobotoB';color: #b5c8da;font-size: 25px;line-height: 1;
	background-color: transparent;border: 0;position: relative;cursor: pointer;
}
.year-swiper .swiper-wrapper .swiper-slide:hover{color: #28639b;}
.year-swiper .swiper-wrapper .swiper-slide + .swiper-slide {margin-left: 30px;}
.year-swiper .swiper-container.year {position: absolute;left: 0;right: 0;top: 0;z-index: 999;padding-top: 5px;margin-top: 0;}
.year-swiper .swiper-container.year .swiper-wrapper {width: auto;text-align: right;display: inline-block;font-size: 0;line-height: 1;}
.year-swiper .swiper-container.year .swiper-wrapper .swiper-slide.active {color: #28639b;}
.year-swiper .swiper-container.year .swiper-wrapper .swiper-slide.active::before {
	content: '';display: inline-block;position: absolute;left: 0;right: 0;top: -24px;border-bottom: 5px solid #28639b;height: 5px;
}




.popup-layer {display: none}
.popup-layer .pop-table{width: 100%;height: 100%;display: table;text-align: center;margin: auto;}
.popup-layer .pop-center{display: table-cell;vertical-align: middle;}
.popup-layer .pop-bottom{display: table-cell;vertical-align: bottom;}
.popup-layer .bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%; filter: alpha(opacity=0);background: #000;opacity: .6;}
.popup-layer {display: none;position: fixed;_position: absolute;top: 0; left: 0;z-index: 999; width: 100%; height: 100%;}

.popup-layer .pop-layer {
	z-index: 10;position: relative;width: 80%;max-width: 590px; height: auto;margin: auto;
	background:#e2e6e9 url(../images/popup_top_bg.png) no-repeat center top;
}
.popup-layer .pop-layer .m_box::before {content: '';display: block;height: 300px; background: url(../images/popup_character.png) no-repeat center 90px;}

.popup-layer .pop-bottom .pop-layer {
	z-index: 10;position: relative;overflow: hidden; width: 90%;max-height: 100%;height: auto;margin: auto;background: #fff;border-radius: 0;
}
.popup-layer .pop-center .pop-layer .txt {padding: 50px 30px 50px;}
.popup-layer .pop-center .pop-layer .txt dl {display: table;}
.popup-layer .pop-center .pop-layer .txt dl + dl {padding-top: 10px;}
.popup-layer .pop-center .pop-layer .txt dl dt {
	position: relative; display: table-cell;min-width: 70px; width: 70px;padding-left: 10px;
	color: #ee6000;font-size: 16px;line-height: 1.4;vertical-align: top;text-align: left;
}
.popup-layer .pop-center .pop-layer .txt dl dt::before {
	content: '';display: inline-block;width: 4px;height: 4px;position: absolute;left: 0;top: 12px;transform: translateY(-50%); background-color: #ee6000;
}
.popup-layer .pop-center .pop-layer .txt dl dd {
	display: table-cell;width: 100%;overflow: hidden; color: #3e3e3e; font-size: 14px;line-height: 1.4;text-align: left;
}
.popup-layer .pop-bottom .content {max-height: 800px;}
.popup-layer .close {
	position: absolute;right: -60px;top: 0px;padding: 30px; background:#ff6f0d url(../images/btn-title-close2.png) no-repeat center center; 
	background-size:25px;z-index: 999;font-size: 0;text-indent: -9999px;border: 0;
}
.flow_hidden {height: 100%;overflow: hidden;}





/* 2030 글로벌 소통 ∙ 문화 네트워크 포럼 */
.global-wrap {}
.global-wrap02{position: relative; max-width: 1400px; margin: auto; background: url(../images/global_bg02.png) no-repeat center right;}
.global-wrap h3 {padding: 30px 0 20px; font-family: 'NanumPen';font-size: 76px;color: #4c8e8c;line-height: 1;text-align: left;font-weight: normal;}
.global-wrap .txt {padding: 0 0 18px;font-size: 18px;color: #479194;line-height: 1;text-align: left;font-weight: 300;}
.global-wrap .date {text-align: left;}
.global-wrap .date span {position: relative;}
.global-wrap .date span em {position: relative;padding-left: 8px; font-size: 20px;color: #454545;line-height: 1;text-align: center;font-weight: 100;font-style: normal;}
.global-wrap .date span::before {
	content: '';display: inline-block;background-color: #47afc8;border-radius: 50%;width: 30px;height: 30px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);
	z-index: 0;
}
.global-wrap .date span + span {margin-left: 20px;}
.global-wrap .btn-box {padding: 30px 0 40px;text-align: left;}
.global-wrap a.btnlive {
	display:inline-block; position:relative; width:130px;padding:5px 0 5px 10px;text-align: left;color:#f48e99;font-size: 16px;line-height: 1.4;
}
.global-wrap a.btnlive::before {
	content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #f48e99;z-index: 2;
}
.global-wrap a.btnlive::after {
	content: "";display: block;width: 1px;height: 20px;background-color: #f48e99;transform: rotate(-45deg) translate(-15px, 6px);position: absolute;right: 0;top: 0;z-index: 2;
}
.global-wrap a.btnlive span {
	content: "";display: block;width: 60px;height: 60px;position: absolute;right: -30px;top: 0;border: 1px solid #f48e99;border-radius: 50%;transition: all .3s ease-in-out;
	overflow: hidden;
}
.global-wrap a.btnlive:hover span {border: 1px dashed #f48e99;}  
.global-wrap a.btnlive:hover span {-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;animation: spinAround 9s linear infinite;} 

/* .global-wrap a.btnlive span::after {
    content: "";position: absolute;transition: all 0.3s;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;
    transform: translate(-50%, -50%);transition: transform 0.15s, 0.15s border-radius 0.15s;opacity: 0;background: rgba(255, 255, 255, 0.1);
	transform: scale(0.1, 0.1);border-radius: 50%;
}
.global-wrap a.btnlive:hover span::after {transform: translate(-50%, -50%);background-color: #fff;opacity: .6;transform: scale(1, 1);border-radius: 0;} */

.global-content {
	width: 100%;height: 100%;display: -webkit-box;-webkit-box-orient: horizontal;display: -moz-box;-moz-box-orient: horizontal;display: box;box-orient: horizontal;
	padding:0 30px 20px 0; box-sizing: border-box;display: -ms-flexbox;-ms-flex-direction: row;
}
.global-content button {display: block; /* -webkit-box-flex: 1;-moz-box-flex: 1;box-flex: 1; -ms-flex: 1; */ text-align: center;border: 0;background-color: transparent; padding:0 20px; margin-right: 110px;}
.global-content button span {display: inline-block; max-width: 160px;padding-top: 70px; color:#479194;font-size: 18px;line-height: 1.3;}
.global-content button:nth-child(1) {background: url(../images/ico_global01.png) no-repeat center top; background-size:57px;}
.global-content button:nth-child(2) {background: url(../images/ico_global02.png) no-repeat center top; background-size:57px;}
.global-content button:nth-child(3) {background: url(../images/ico_global03.png) no-repeat center top; background-size:57px;}

/* 기념행사 */
.celebrate_wrap{position: relative; display: block; margin: 0 auto; width: 100%; background: url(../images/celebrate_bg.png) no-repeat center center; background-size: cover; min-height: 350px;}
.celebrate_wrap h3 {padding: 45px 0 20px; font-family: 'NanumPen';font-size: 76px;color: #fde2b7;line-height: 1;text-align: center;font-weight: normal;}
.celebrate_wrap .celebrateTextarea01{line-height: 1;text-align: center; padding-top: 30px;}
.celebrate_wrap .celebrateTextarea02{line-height: 1;text-align: center; padding-top: 40px;}
.celebrate_wrap .txt01{font-size: 35px; color: #fde2b7; font-weight: 700; }
.celebrate_wrap .txt01sub{font-size: 20px; color: #fde2b7; font-weight: 100; margin-bottom: 20px; line-height: normal;}
.celebrate_wrap .txt01sub span{color: #ff0027; font-weight: 500;}
.celebrate_wrap .txt02{font-size: 30px; color: #bbbab7; letter-spacing: -0.02em; font-weight: 700;}
.celebrate_wrap .txt02sub{font-size: 17px; color: #bbbab7; letter-spacing: -0.02em; font-weight: 100;  margin-bottom: 20px;}
.celebrate_wrap .txt02 span{font-family: 'RobotoB';}
.celebrate_wrap .date {text-align: center; margin-top: 50px; padding-bottom: 50px;}
.celebrate_wrap .date span {position: relative;}
.celebrate_wrap .date span em {position: relative;padding-left: 8px; font-size: 20px;color: #fff;line-height: 1;text-align: center;font-weight: 100;font-style: normal;}
.celebrate_wrap .date span::before {
	content: '';display: inline-block;background-color: #8d7867;border-radius: 50%;width: 30px;height: 30px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);
	z-index: 0;
}
.celebrate_wrap .date span + span {margin-left: 20px;}

.celebrate_wrap .btn-box {padding:30px 0 20px;text-align: center;}
.celebrate_wrap a.btnlive {
	display:inline-block; position:relative; width:220px;padding:5px 0 5px 10px;text-align: left;font-size: 16px;line-height: 1.4; color: #fde2b7;
}
.celebrate_wrap a.btnlive::before {content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #fde2b7;z-index: 2;}
.celebrate_wrap a.btnlive::after {
	content: "";display: block;width: 1px;height: 20px;background-color: #fde2b7;transform: rotate(-45deg) translate(-15px, 6px);position: absolute;right: 0;top: 0;z-index: 2;
}
.celebrate_wrap a.btnlive span {
	content: "";display: block;width: 60px;height: 60px;position: absolute;right: -30px;top: 0;border: 1px solid #fde2b7;border-radius: 50%;transition: all .3s ease-in-out;
	overflow: hidden;
}
.celebrate_wrap a.btnlive:hover span {border: 1px dashed #fde2b7;}  
.celebrate_wrap a.btnlive:hover span {-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;animation: spinAround 9s linear infinite;} 


/* 해콕눈이와 함께 해문홍 50주년을 즐겨라! */
.th50-wrap {padding-top:0px; background-color: #f4f5f6;}
.th50-wrap .th50-content::after {content: '';display: block;clear: both;}
.th50-wrap .th50-content h3 {position: relative; float: left;width: 420px; padding:40px 0 180px; color: #111;font-size: 36px;line-height: 1.2;font-weight: 100;}
.th50-wrap .th50-content h3 em {display: block;color: #111;font-size: 50px;line-height: 1.2;font-weight: 500;font-style: normal;}
.th50-wrap .th50-content h3::after {
	content: '';display: inline-block;width: 230px;height: 170px;position: absolute;bottom: -15px;left: 0px;
	background: url(../images/ico_character.png) no-repeat center bottom; 
} /* 20211101 수정 */

.btn-event2 {
	color: #fff;font-size: 16px;line-height: 1;font-weight: 300;font-family: 'NotoK';width: 100px;height: 100px;text-align: left;padding: 40px 0 0 10px;
	position: absolute;left: 140px;bottom: 60px;background: url(../images/ico_event.png) no-repeat center bottom;z-index: 2;
}
.btn-event2::before {
	content: '...';display: inline-block;color: #fff;font-size: 40px;line-height: 1;font-weight: 500;font-family: 'NotoK';
	position: absolute;left: 28px;bottom: 66px;
}


.th50-wrap .th50-box {padding: 40px 0 0 60px; overflow: hidden;background-color: #e7e9eb;}

.th50-wrap .swiper-container .swiper-wrapper .swiper-slide {width: 740px; opacity:1;} /* 20211117 수정 */
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.passEvent{opacity: .5;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active {opacity: 1;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active.passEvent {opacity: 0.5;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .img {border: 3px solid transparent;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .img a {display: block;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .img {position:relative; width:324px; border: 3px solid #db1231;box-shadow: 20px 10px 20px rgba(0, 0, 0, 0.5); overflow: hidden;}
/* .th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .img::after {content: ''; display:block; position:absolute; background: url(../images/icon_new.png) no-repeat top right; width:26px; height:26px; top:0; right:0; } */
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active.passEvent .img::after{background-image: none;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .img {width: 324px;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .img img {width: 100%;}



.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .img {float: left;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .title {padding: 20px 50px 0 30px; overflow: hidden;color: #111;font-size: 28px;line-height: 1.4;font-weight: 500;word-break: keep-all;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom {position: relative; display: block;padding: 20px 0 20px; clear: both;overflow: hidden; width:420px;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .event-title {padding-bottom: 5px; color: #111;font-size: 18px;line-height: 1.4;font-weight: 300;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-box {position: relative; display: block;clear: both;overflow: hidden;padding: 10px 0 22px;}



.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event {
	display:inline-block; position:relative; width:130px;padding:5px 0 5px 10px;text-align: left;color:#db1231;font-size: 16px;line-height: 1.4;
}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event::before {
	content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #db1231;z-index: 2;
}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event::after {
	content: "";display: block;width: 1px;height: 20px;background-color: #db1231;transform: rotate(-45deg) translate(-15px, 6px);position: absolute;right: 0;top: 0;
	z-index: 2;
}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event span {
	content: "";display: block;width: 50px;height: 50px;position: absolute;right: -20px;top: 4px;border: 1px solid #db1231;
	border-radius: 50%;transition: all .3s ease-in-out;	overflow: hidden;
}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event:hover span {border: 1px dashed #db1231;}  
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event:hover span {-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;animation: spinAround 9s linear infinite;} 



.th50-wrap .swiper-btn-box {position: absolute;right: 20px;bottom: -20px; width: 110px;height: 30px;z-index: 9;}
.th50-wrap .swiper-btn-box .swiper-button-prev::after, 
.th50-wrap .swiper-btn-box .swiper-button-next::after {content: none;}
.th50-wrap .swiper-btn-box .swiper-button-prev {
	left: 15px;width: 20px;height: 28px; border:2px solid rgba(255, 255, 255, .5); overflow: hidden;border-radius: 50%; 
	background: url(../images/arrow-left.png) no-repeat center center;background-size: 15px;
}
.th50-wrap .swiper-btn-box .swiper-button-next {
	right: 15px;width: 20px;height: 28px; border:2px solid rgba(255, 255, 255, .5); overflow: hidden;border-radius: 50%; 
	background: url(../images/arrow-right.png) no-repeat center center;background-size: 15px;
}
.th50-wrap .swiper-btn-box .swiper-pagination-total {display: none;}
.th50-wrap .swiper-btn-box .swiper-pagination-fraction {font-size: 0;}
.th50-wrap .swiper-btn-box .swiper-pagination-current {
	display: inline-block; font-size: 14px;color: #fff; width: 52px;height: 52px;border: 2px solid #fff;overflow: hidden;border-radius: 50%;line-height: 48px;
}
.th50-wrap .swiper-btn-box .swiper-pagination-fraction {width: 52px;left: 50%;transform: translateX(-50%); bottom: 7px;}
.th50-wrap .swiper-button-next.swiper-button-disabled, .th50-wrap .swiper-button-prev.swiper-button-disabled {opacity: 1;cursor: auto;pointer-events:auto;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .img a.imgZoom{cursor: default;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .img a.imgZoom img{transform:scale(1.0); transition: 0.5s;}
.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .img a.imgZoom:hover img{transform:scale(1.05); transition: 0.5s;}

.th50-content .btn-lgt-more {
	width: 50px;height: 50px;border-radius: 50%; background: url(../images/ico_plus.png) no-repeat center center; background-size:26px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);position: absolute;left: 330px;top: 50px;border: 0;
}


/* 2021 한류 큰잔치 K-healing Online Festival */
.festival-wrap {padding-bottom: 40px; background: url(../images/festival_bg.png) no-repeat center center; background-size:cover;}
.festival-wrap h3 {padding: 50px 0 10px; font-family: 'NanumPen';font-size: 76px;color: #fff;line-height: 1;text-align: center;font-weight: normal;}

.festival-wrap .date {text-align: center;}
.festival-wrap .date span {position: relative;}
.festival-wrap .date span em {position: relative;padding-left: 8px; font-size: 20px;color: #fff;line-height: 1;text-align: center;font-weight: 100;font-style: normal;}
.festival-wrap .date span em i{font-style: normal; font-size: 17px;}
.festival-wrap .date span::before {
	content: '';display: inline-block;background-color: #10a4a4;border-radius: 50%;width: 30px;height: 30px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);
	z-index: 0;
}
.festival-wrap .btn-box {padding: 10px 0 90px;text-align: center;}
.festival-wrap a.btnlive {
	display:inline-block; position:relative; width:200px;padding:5px 0 5px 10px;text-align: left;color:#fff;font-size: 16px;line-height: 1.4;
}
.festival-wrap a.btnlive::before {content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #fff;z-index: 2;}
.festival-wrap a.btnlive::after {
	content: "";display: block;width: 1px;height: 20px;background-color: #fff;transform: rotate(-45deg) translate(-15px, 6px);position: absolute;right: 0;top: 0;z-index: 2;
}
.festival-wrap a.btnlive span {
	content: "";display: block;width: 60px;height: 60px;position: absolute;right: -30px;top: 0;border: 1px solid #fff;border-radius: 50%;transition: all .3s ease-in-out;
	overflow: hidden;
}
.festival-wrap a.btnlive:hover span {border: 1px dashed #fff;}  
.festival-wrap a.btnlive:hover span {-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;animation: spinAround 9s linear infinite;} 



/* 메타버스 온라인 전시회 */
.metaverse-wrap  { background: url(../images/metaverse_bg.png) no-repeat center center; background-size:cover;}
.metaverse-wrap  .metaverse-content {position: relative; max-width: 1400px;margin: auto;}
.metaverse-wrap  .metaverse-content::after {content: '';display: block;clear: both;}
.metaverse-wrap  .metaverse-content .left {float: left;}
.metaverse-wrap  .metaverse-content .right {float: right;padding: 44px 0 40px;position: relative;}
.metaverse-wrap  .metaverse-content .right .circle {
	position: absolute;left: -30px;bottom: 76px;width: 92px;height: 96px;
	background: url(../images/circle.png) no-repeat center center; background-size:92px;
} 
.metaverse-wrap h3 {
	padding: 90px 0 20px; font-family: 'NanumPen';font-size: 76px;color: #fff;line-height: 1;text-align: center;font-weight: normal;
	background: linear-gradient(to right, #ff7195, #7f6bee);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
	background-image: -ms-linear-gradient(top, #ff7195 0%, #7f6bee 100%);
}
.metaverse-wrap .txt {padding: 0 0 18px;font-size: 18px;color: #2d2d2d;line-height: 1;text-align: left;font-weight: 200;}
.metaverse-wrap .coSoon {text-align: left;font-weight: 200; margin-top: 30px; color: #006f9c; font-size: 20px;}

.metaverse-wrap .btn-box {padding:50px 0 20px;text-align: left;}
.metaverse-wrap a.btnlive {
	display:inline-block; position:relative; width:220px;padding:5px 0 5px 10px;text-align: left;font-size: 16px;line-height: 1.4;
}
.metaverse-wrap a.btnlive::before {content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #866be9;z-index: 2;}
.metaverse-wrap a.btnlive::after {
	content: "";display: block;width: 1px;height: 20px;background-color: #866be9;transform: rotate(-45deg) translate(-15px, 6px);position: absolute;right: 0;top: 0;z-index: 2;
}
.metaverse-wrap a.btnlive span {
	content: "";display: block;width: 60px;height: 60px;position: absolute;right: -30px;top: 0;border: 1px solid #866be9;border-radius: 50%;transition: all .3s ease-in-out;
	overflow: hidden;
}
.metaverse-wrap a.btnlive:hover span {border: 1px dashed #866be9;}  
.metaverse-wrap a.btnlive:hover span {-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;animation: spinAround 9s linear infinite;} 




/* 해문홍 50주년 기념 인터뷰를 만나보세요 */
.interview-wrap {position: relative; max-width: 1400px;margin: auto;padding: 60px 0 0 0;}
.interview-wrap .interview-box {position: relative;}
.interview-wrap h3 {position: relative; padding: 0px 0 50px; color: #111;font-size: 50px;line-height: 1;font-weight: 100;text-align: right;}
.interview-wrap h3 .txt {display:none; position: absolute;right: 0;top: 0;color: #fff;font-size: 50px;line-height: 1;font-weight: 500;text-shadow: 0 0 1px rgba(0, 0, 0, 1);}
.interview-wrap .swiper-container .swiper-wrapper .swiper-slide {max-width: 160px;cursor: pointer;}
.interview-wrap .swiper-container .swiper-wrapper .swiper-slide:nth-child(2n-1) {padding-top: 48px;}
.interview-wrap .bor_sh{}
.interview-wrap .swiper-container .swiper-wrapper .swiper-slide .img img {max-width: 100%;}
.interview-wrap .swiper-container .swiper-wrapper .swiper-slide .rank {padding: 20px 0 7px; color: #6c6c6c;font-size: 15px;line-height: 1;font-weight: 300;text-align: center;}
.interview-wrap .swiper-container .swiper-wrapper .swiper-slide .name {color: #111;font-size: 20px;line-height: 1;font-weight: 300;text-align: center;}
.interview-wrap .bor_sh{box-shadow:9px 9px 0px rgba(0, 0, 0, 0.15);}

.interview-wrap .swiper-column-box {position: absolute;left: 0;top: -92px; width: 200px;}
.interview-wrap .swiper-column-box > div {position: absolute;}
.interview-wrap .swiper-column-box .swiper-character-prev {
	display: inline-block;left: 0;width: 22px;height: 30px;background: url(../images/ico_prev.png) no-repeat center center;background-size: 22px;
	cursor: pointer;
}
.interview-wrap .swiper-column-box .swiper-character-next {
	display: inline-block;left: 60px;right: auto;width: 22px;height: 30px;background: url(../images/ico_next.png) no-repeat center center;background-size: 22px;
	cursor: pointer;
}


@-webkit-keyframes moveInTop {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-80px);
              transform: translateY(-80px);
    }
    60% {
        opacity: .8;
      -webkit-transform: translateY(5px);
              transform: translateY(5px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
}
@keyframes moveInTop {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-80px);
              transform: translateY(-80px);
    }
    60% {
        opacity: .8;
      -webkit-transform: translateY(5px);
              transform: translateY(5px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
}

  .swiper-column.in-view .swiper-wrapper .swiper-slide {
    -webkit-animation-name: moveInTop;
            animation-name: moveInTop;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
	-webkit-animation-delay: .2s;
			animation-delay: .2s;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
  }
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(7) {-webkit-animation-name: none;	animation-name: none;}
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(1) {animation-delay: .2s;-webkit-animation-delay: .2s;}
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(2) {animation-delay: .4s;-webkit-animation-delay: .4s;}
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(3) {animation-delay: .6s;-webkit-animation-delay: .6s;}
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(4) {animation-delay: .8s;-webkit-animation-delay: .8s;}
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(5) {animation-delay: 1s;-webkit-animation-delay: 1s;}
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(6) {animation-delay: 1.2s;-webkit-animation-delay: 1.2s;}
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(7) {animation-delay: 1.4s;-webkit-animation-delay: 1.4s;}
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(8) {animation-delay: 1.6s;-webkit-animation-delay: 1.6s;}
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(9) {animation-delay: 1.8s;-webkit-animation-delay: 1.8s;}
  .swiper-column.in-view .swiper-wrapper .swiper-slide:nth-child(10) {animation-delay: 2s;-webkit-animation-delay: 2s;}




/* KOCIS, 브랜드가 되다 */
.kocis-wrap {max-width: 1400px;margin: auto;padding: 40px 0 30px;}
.kocis-wrap .kocis-content {-webkit-box-orient: horizontal;-moz-box-orient: horizontal;display: flex;align-items: center;justify-content: space-between;}
.kocis-wrap .kocis-content a {display: block;width: 100%;height: 100%;padding-top: 120px; -webkit-box-flex: 1;-moz-box-flex: 1;box-flex: 1;text-align: left;}
.kocis-wrap .kocis-content a {position: relative; padding: 39px 30px 39px 110px;border: solid 1px #000;color: #1e1e1e;font-size: 20px;line-height: 1;font-weight: 300;}
.kocis-wrap .kocis-content a::after {
	content: '';display: inline-block;width: 61px;height: 20px;position: absolute;right: 30px;top: 50%;transform: translateY(-50%);
	background:url(../images/icon-link-copy.png) no-repeat center top; background-size:61px;
}
.kocis-wrap .kocis-content a:before {content: '';display: inline-block;width: 60px;height: 60px;position: absolute;left: 30px;top: 50%;transform: translateY(-50%);border-radius: 5px;}
.kocis-wrap .kocis-content a:nth-child(1):before {background:#234667 url(../images/icon-brand2.png) no-repeat center center; background-size:45px;}
.kocis-wrap .kocis-content a:nth-child(2):before {background:#234667 url(../images/icon-book2.png) no-repeat center center; background-size:45px;}
.kocis-wrap .kocis-content a + a {margin-left: 40px;}

.footer {padding: 28px 0 18px; color:#888;font-size: 13px;font-weight: 100;line-height: 1; text-align: center; background-color: #313131;}

.visual-swiper .mobile {display: none;}


/* 공통 btn css animation */
@-webkit-keyframes spinAround {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spinAround {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
}
@keyframes spinAround {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}


/* 명예기자단 */
.calliWrap{position: relative; display: block; width: 100%; height: 380px; margin: 40px 0 0 0; background: linear-gradient(90deg, #f2ebe3 50%, #ffffff 50%);} 
.CalliEng{position: absolute; left: 50%; transform: translateX(-50%); font-size: 110px; color: rgba(255, 255, 255, 0.5);margin-left: -280px;bottom: 50px;font-family: 'RobotoB';}
.calliTxt{ display: block; overflow: hidden;height: 100%;position: relative; float: left;}
.calliTxt h3 {position: relative; float: left; padding:40px 0 0 0; color: #111;font-size: 50px !important;line-height: 1;font-weight: 100; background: url(../images/calli_bg.png) no-repeat -55px top;}
.calliTxt h3 em {display: block;color: #111;font-size: 70px !important;line-height: 1;font-weight: 500;font-style: normal;}
.calliTxt h3 p {display: block; color: #515151; font-size: 17px !important; font-family: NotoK; font-weight: 300; margin-top: 30px; line-height: 1.5;}
.calliWrap .calliArea-box {padding-left: 507px;}
.calliWrap .swiper-calli-photo {position: absolute;left: 0;bottom: 17%; width: 200px; z-index: 10;}
.calliWrap .swiper-calli-photo > div {position: absolute;}
.calliWrap .swiper-calli-photo .swiper-calli-prev {display: inline-block;left: 0;width: 15px;height: 28px;background: url(../images/arrow-left.png) no-repeat center center;cursor: pointer;}
.calliWrap .swiper-calli-photo .swiper-calli-next {display: inline-block;left: 60px;right: auto;width: 15px;height: 28px;background: url(../images/arrow-right.png) no-repeat center center;cursor: pointer;}

.calliArea{position: relative; padding: 50px 0 0 0;}
.calliContents{}
.calliContents div:last-child{margin-right: 0;}
.calliContents .swiper-wrapper {font-size: 0;}
.calliContents .calliList{display: inline-block; border: solid 1px #a6a6a6; box-sizing: border-box;background-color: #fff; cursor: pointer; width: 280px; height: 280px;}
.calliContents .calliList img{width: 100%;}
.calliContents .calliList p{padding: 20px 0; text-align: center; font-size: 17px; color: #3c3c3c; border-top: solid 1px #a6a6a6;}
.brWeb{display: block;}
.brMo{display: none;}

.calliVod{text-align: center;}
.calliVod > iframe{width: 800px; height: 450px;}
.popup-layer.calli_area .pop-layer {max-width:800px;width: auto; background:none}
.popup-layer.calli_area .pop-layer .m_box::before {content: none;}
.popup-layer.calli_area .swiper-container.big-gallery {position: relative;}
.popup-layer.calli_area .swiper-container.big-gallery .swiper-wrapper .swiper-slide span {display: block;padding: 10px; text-align: center;z-index: 999;color: #fff;font-size: 16px;}
.popup-layer.calli_area .close {position: fixed; right: 0; top: 0;}
.swiper-gallery-box {z-index: 99;}
.swiper-gallery-box .swiper-big-gallery-prev {
	position: fixed;left: 0;top:50%;transform: translateY(-50%); display: inline-block;padding: 30px; 
	background:url(../images/calli_prev.png) no-repeat center center;cursor: pointer;z-index: 99;background-size: 20px;
}
.swiper-gallery-box .swiper-big-gallery-next {
	position: fixed;right: 0;top:50%;transform: translateY(-50%); display: inline-block;padding: 30px; 
	background:url(../images/calli_next.png) no-repeat center center;cursor: pointer;z-index: 99;background-size: 20px;
}





@media only screen and (min-width: 1071px) and (max-width: 1399px) {
	.history-wrap .btn-rgt {position: absolute;right: 90px;top: 60px; display: inline-block;}
	.history-wrap .btn-rgt  button {border: 0;width: 20px;height: 50px;}
	.history-wrap .btn-rgt .left {background: url(../images/arrow-left.png) no-repeat center center; background-size:15px;}
	.history-wrap .btn-rgt .right {margin-left: 50px; background: url(../images/arrow-right.png) no-repeat center center; background-size:15px;}

	.global-wrap02 {background: url(../images/global_bg02.png) no-repeat bottom right; background-size: auto; background-size: 1100px;}
	.global-content button {margin-right:70px;}
}


@media only screen and (min-width: 768px) and (max-width: 1070px) {
	h3.tit_pen01{font-size:60px !important; padding-left:135px !important; background-size:120px; background-position:10px 0;}
	h3.tit_pen01 span{background: url(../images/tit_line01.png) no-repeat center 45px; font-size:65px;}
	h3.tit_pen02{font-family:'NanumPen'; font-size:34px !important; line-height: 1.0;}
	h3.tit_pen02 em{font-size:64px !important;}
	h3.tit_pen03{font-family:'NanumPen'; font-size:60px !important;}
	h3.tit_pen03 span{background: url(../images/tit_line02.png) no-repeat center 45px; font-size:65px;}
	h3.tit_pen04{font-size:60px !important; padding-left:125px; background-size:120px; background-position:10px 0;}
	
	.new_visual .new_visaul_txt h1 span {font-size:40px;}
	.new_visual .new_visaul_txt h1 span.space {padding-left: 10px;}

	.new_visual .new_visaul_txt a.btnVod {width:110px; margin:45px auto 0px auto; padding:5px 0 5px 10px;font-size: 14px;}
	.new_visual .new_visaul_txt a.btnVod::after {height: 15px;transform: rotate(-45deg) translate(-15px, 9px);}
	.new_visual .new_visaul_txt a.btnVod span {width: 50px;height: 50px;right: -25px;}


	/* 해문홍 50년 발자취 */
	.history-wrap {padding: 50px 10px 20px;}
	.history-wrap h3 {padding-bottom: 30px;font-size: 40px;}
	.history-wrap .history ul {min-width: 1200px; overflow-x: auto;}
	.history-wrap .history-box ul li .img {width: 78px;height: 78px;}
	.history-wrap .history-box ul li .date {padding:  0 25px 20px;font-size: 36px;}
	.history-wrap .history-box ul li .txt {padding: 10px 0 0 20px;min-height: 72px;font-size: 12px;}

	.history-wrap .history-box ul li .box-history::before {left: 12px;top: 68px;height: 130px;}

	.history-wrap .btn-rgt {position: absolute;right: 90px;top: 60px; display: inline-block;}
	.history-wrap .btn-rgt  button {border: 0;width: 20px;height: 50px;}
	.history-wrap .btn-rgt .left {background: url(../images/arrow-left.png) no-repeat center center; background-size:15px;}
	.history-wrap .btn-rgt .right {margin-left: 50px; background: url(../images/arrow-right.png) no-repeat center center; background-size:15px;}



	/* KOCIS를 빛낸 50가지 이야기 */
	.photo-wrap {padding-top: 20px;}
	.photo-wrap::before {height: 90px;}
	.photo-wrap .inline-box {padding-left: 10px;}
	.photo-wrap .inline-box::before {bottom: -230px;height: 120px; background-size: 230px;}
	.photo-wrap h3 {font-size: 55px;}
	.photo-wrap h3 span {font-size: 38px;}

	.photo-wrap .btn-box {top: 100px;left: 10px;}
	.photo-wrap a.btnlive {width:110px;padding:5px 0 5px 10px;font-size: 14px;}
	.photo-wrap a.btnlive::after {height: 15px;background-color: #234667;transform: rotate(-45deg) translate(-15px, 7px);}
	.photo-wrap a.btnlive span {width: 40px;height: 40px;right: -20px;top: 6px;}  

	.photo-wrap .photo-box {padding-left:350px;}
	.photo-wrap .swiper-container.gallery {position: relative;margin: -30px auto 0;padding-bottom: 25px;}
	.photo-wrap .swiper-container.gallery .swiper-slide a + a {margin-left: 20px;}
	.photo-wrap .swiper-container.gallery .swiper-slide img {max-width:300px;}
	.swiper-container.big-gallery {position: relative;}
	.swiper-container.big-gallery .swiper-wrapper {font-size: 0;}
	.swiper-container.big-gallery .swiper-wrapper .swiper-slide {display: block;}
	.swiper-container.big-gallery .swiper-wrapper .swiper-slide img {max-width: 800px;}

	.swiper-container.big-gallery .swiper-wrapper .swiper-slide .title {padding: 20px 0; font-size: 16px;}
	.photo-wrap .content-details {
		position: absolute;text-align: center;padding: 0 20px;top: 50%;left: 50%;opacity: 0;width: 100%;box-sizing: border-box;white-space: normal;
		-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
		-webkit-transition: all 0.3s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;
	}
	.gallery .swiper-slide a:hover .content-details {top: 60%;left: 50%;opacity: 1;}	
	.gallery .swiper-slide:hover .content-details .title {font-size: 16px;}
	.photo-wrap .content-details p {padding: 10px 0 20px; font-size: 13px; height: 3.3em; /* 20211119 수정 */}
	.gallery .swiper-slide a .more {font-size: 14px;}	
	.gallery .swiper-slide a .more::after {height: 15px;background-color: #588ebf;transform: rotate(-45deg) translate(-15px, 6px);}
	.photo-wrap .swiper-btn-photo {position: absolute;left: 0;bottom: -163px;}
	.year-swiper .swiper-wrapper {padding-top: 13px;}
	.year-swiper .swiper-wrapper .swiper-slide {font-size: 20px;}
	.year-swiper .swiper-wrapper .swiper-slide + .swiper-slide {margin-left: 20px;}
	.year-swiper .swiper-container.year .swiper-wrapper .swiper-slide.active::before {top: -22px;border-bottom: 4px solid #28639b;height: 4px;}


	/* 2030 글로벌 소통 ∙ 문화 네트워크 포럼 */
	.global-wrap {padding: 0px 10px 0px;}
	.global-wrap02 {background:url(../images/global_bg02.png) no-repeat bottom right; background-size: 900px;}
	.global-wrap h3 {font-size: 55px;}
	.global-wrap .txt {font-size: 16px;}
	.global-wrap .date span em {padding-left: 8px; font-size: 16px;}
	.global-wrap .date span::before {width: 23px;height: 23px;}
	.global-wrap .date span + span {margin-left: 20px;}
	.global-wrap .btn-box {padding: 30px 0 40px;}
	.global-wrap a.btnlive {width:130px;font-size: 16px;}
	.global-wrap a.btnlive::after {height: 15px;transform: rotate(-45deg) translate(-17px, 9px);}
	.global-wrap a.btnlive span {width: 50px;height: 50px;right: -25px;top: 0;}
	.global-content {padding-right: 30px;}
	.global-content button{margin-right:30px;}
	.global-content button span { max-width: 160px;padding-top: 70px;font-size: 16px;}
	.global-content button:nth-child(1) {background-size:57px;}
	.global-content button:nth-child(2) {background-size:57px;}
	.global-content button:nth-child(3) {background-size:57px;}	


	/* 기념행사 */
	.celebrate_wrap h3 {font-size: 55px; padding: 35px 0 20px;}
	.celebrate_wrap .txt01 {font-size: 27px;}
	.celebrate_wrap .txt02{font-size: 27px;}
	.celebrate_wrap .date{padding-bottom: 35px; margin-top: 30px;}
	.celebrate_wrap .date span em {padding-left: 8px; font-size: 16px;}
	.celebrate_wrap .date span::before {width: 23px;height: 23px;}
	.celebrate_wrap .date span + span {margin-left: 20px;}

	.celebrate_wrap .btn-box {padding:40px 20px 20px;}
	.celebrate_wrap a.btnlive {
		display:inline-block; position:relative; width:220px;padding:5px 0 5px 10px;text-align: left;font-size: 16px;line-height: 1.4;
	}
	.celebrate_wrap a.btnlive::before {content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #fde2b7;z-index: 2;}
	.celebrate_wrap a.btnlive::after {height: 15px;transform: rotate(-45deg) translate(-17px, 9px);}
	.celebrate_wrap a.btnlive span {width: 50px;height: 50px;right: -25px;top: 0;}


	/* 해콕눈이와 함께 해문홍 50주년을 즐겨라! */
	.th50-wrap .th50-box {padding: 30px 0 0 45px;}
	.th50-wrap .th50-content {padding-top: 40px;}
	.th50-wrap .th50-content h3 {width: 320px; padding: 0 0 240px 20px;font-size: 26px;}
	.th50-wrap .th50-content h3 em {padding-top: 10px; font-size: 40px;}
	.th50-wrap .th50-content h3::after {
		content: '';display: inline-block;width: 213px;height: 180px;position: absolute;bottom: -55px;left: 0px;
		background: url(../images/ico_character.png) no-repeat center bottom; background-size:160px;
	}

	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide {width: 400px;min-height: 425px;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .img {width: 300px;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .img {width: 300px;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .img img {width: 100%;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .title {display: block;clear: both; font-size: 30px;padding: 20px 30px 0  0;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom {padding: 10px 0 10px; width: 300px;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .event-title {font-size: 16px;padding-bottom: 0;}

	.th50-wrap .swiper-btn-box {bottom: -57px;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event {width:110px;padding:5px 0 5px 10px;font-size: 14px;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event::after {height: 15px;transform: rotate(-45deg) translate(-15px, 6px);}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event span {width: 40px;height: 40px;right: -20px;top: 4px;}

	.th50-content .btn-lgt-more {left: 240px; top: 10px;}
	


	
	/* 2021 한류 큰잔치 K-healing Online Festival */
	.festival-wrap h3 {padding: 40px 0 20px;font-size: 60px;}
	.festival-wrap .date span em {padding-left: 8px; font-size: 16px;}
	.festival-wrap .date span em i{font-style: normal; font-size: 14px;}
	.festival-wrap .date span::before {width: 23px;height: 23px;}
	.festival-wrap .btn-box {padding: 10px 0 60px;}
	.festival-wrap a.btnlive {width:170px;font-size: 14px;}
	.festival-wrap a.btnlive::after {height: 15px;transform: rotate(-45deg) translate(-15px, 6px);}
	.festival-wrap a.btnlive span {width: 50px;height: 50px;right: -25px;} 



	/* 메타버스 온라인 전시회 */
	.metaverse-wrap  .metaverse-content .left {float: left;}
	.metaverse-wrap  .metaverse-content .right {float: right;padding: 44px 20px 40px;}
	.metaverse-wrap  .metaverse-content .right img {max-width: 400px;}
	.metaverse-wrap  .metaverse-content .right .circle {left: -10px;bottom: 76px;width: 60px;height: 60px;background-size:60px;} 
	.metaverse-wrap h3 {font-size: 60px;}
	.metaverse-wrap .txt {font-size: 16px;padding-left: 20px;}

	.metaverse-wrap .btn-box {padding:40px 20px 20px;}
	.metaverse-wrap a.btnlive {
		display:inline-block; position:relative; width:220px;padding:5px 0 5px 10px;text-align: left;font-size: 16px;line-height: 1.4;
	}
	.metaverse-wrap a.btnlive::before {content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #866be9;z-index: 2;}
	.metaverse-wrap a.btnlive::after {height: 15px;transform: rotate(-45deg) translate(-17px, 9px);}
	.metaverse-wrap a.btnlive span {width: 50px;height: 50px;right: -25px;top: 0;}
	
	

	/* 해문홍 50주년 기념 인터뷰를 만나보세요 */
	.interview-wrap {padding-top: 40px;}
	.interview-wrap h3 {padding:0px 10px 40px 0; font-size:40px;}
	.interview-wrap h3 .txt {font-size: 40px;}
	.interview-wrap .swiper-column-box{left:10px;}
	.interview-wrap .swiper-container .swiper-wrapper .swiper-slide {max-width: 160px;}
	.interview-wrap .swiper-container .swiper-wrapper .swiper-slide:nth-child(2n-1) {padding-top: 32px;}
	.interview-wrap .swiper-container .swiper-wrapper .swiper-slide .rank {padding: 20px 0 7px;font-size: 14px;}
	.interview-wrap .swiper-container .swiper-wrapper .swiper-slide .name {font-size: 16px;}


	/* KOCIS, 브랜드가 되다 */
	.kocis-wrap {padding: 40px 20px 30px;}
	.kocis-wrap .kocis-content a {padding-top: 120px;}
	.kocis-wrap .kocis-content a { padding: 30px 30px 30px 80px;font-size: 16px;}
	.kocis-wrap .kocis-content a::after {
		content: '';display: inline-block;width: 61px;height: 20px;position: absolute;right: 20px; background-size:50px;
	}
	.kocis-wrap .kocis-content a:before {width: 45px;height: 45px;left: 20px;}
	.kocis-wrap .kocis-content a:nth-child(1):before { background-size:30px;}
	.kocis-wrap .kocis-content a:nth-child(2):before {background-size:30px;}
	.kocis-wrap .kocis-content a + a {margin-left: 30px;}

	.visual-swiper .mobile {display: none;}


	/* 명예기자단 */
	.calliWrap {height: 340px;}
	.calliTxt {margin-right: 3.5%;}
	.calliTxt h3 p {font-size: 15px !important;}
	.CalliEng {font-size: 80px; margin-left: -200px; bottom: 35px; text-align: right;}
	.calliContents .calliList {width: 240px; height: 240px;}
	.calliWrap .calliArea-box {padding-left: 40%;}

}


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

	.global-wrap02 {background-size: 800px;}
	.global-content button {margin-right: 10px;}
	
	/* 명예기자단 */
	.brWeb{display: none;}
	.brMo{display: block;}

	.popup-layer.calli_area .pop-layer {max-width: 500px;}
	.calliVod > iframe{width: 500px; height: 280px;}
	.swiper-container.big-gallery .swiper-wrapper .swiper-slide img {max-width: 500px;}
	
}


@media screen and (max-width: 767px) {
	h3.tit_pen01{font-size:30px !important; padding-left:95px !important; background-size:80px; background-position:10px 0;}
	h3.tit_pen01 span{background: url(../images/tit_line01.png) no-repeat center 25px; font-size:35px;background-size: 45px; margin-right:2px;}
	h3.tit_pen02{font-family:'NanumPen'; font-size:26px !important; line-height: 0.7 !important;}
	h3.tit_pen02 em{font-size:47px !important;}
	h3.tit_pen03{font-family:'NanumPen'; font-size:45px !important;}
	h3.tit_pen03 span{background: url(../images/tit_line02.png) no-repeat center 29px; font-size:45px;}
	h3.tit_pen04{font-size:40px !important; padding-left:90px !important; background-size:80px; background-position:10px 0;}
	
	#new_header .top .logo {padding: 20px 0;}
	#new_header .top .logo img {max-width: 100px;}
	#new_header .top .top_right {padding: 28px 0;}
	#new_header .top .top_right li:first-of-type {margin-left: 0;}
	#new_header .top .top_right li {margin-left: 10px;}
	#new_header .top .top_right li img {max-width: 25px;}
	#new_header .top .top_right li.btnEvent {padding: 2px 10px;font-size: 12px;}
	.new_visual .new_visaul_txt {}
	.new_visual .new_visaul_txt h1 {font-size: 18px; padding: 0 15px;}
	.new_visual .new_visaul_txt h1 span {font-size: 18px;}
	.new_visual .new_visaul_txt h1 span.space {padding-left: 0px;margin-left: -2px;display: inline-block;}
	.new_visual .new_visaul_txt p {font-size: 14px;}

	.new_visual .new_visaul_txt a.btnVod { width:100px; margin:45px auto 0px auto; padding:5px 0 5px 10px;font-size: 13px;}
	.new_visual .new_visaul_txt a.btnVod::after {height: 15px;transform: rotate(-45deg) translate(-15px, 6px);}
	.new_visual .new_visaul_txt a.btnVod span {width: 40px;height: 40px; right: -15px;top: 5px;}

	.new_visual .new_visaul_txt a.btnVod:hover span {border: 1px dashed #fff;}  
	.new_visual .new_visaul_txt a.btnVod:hover span {-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;animation: spinAround 9s linear infinite;} 

	.new_visual .new_visaul_txt a.btnVod:hover span {border: 1px dashed #fff;}  
	.new_visual .new_visaul_txt a.btnVod:hover span {-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;animation: spinAround 9s linear infinite;} 

	
	.moving-mouse-holder .mouse .mouse-button {width: 15px;height: 15px;margin: 0 0 0 -4px;border-width: 0 2px 2px 0;}


	.visual-swiper .swiper-container.thumbnail .swiper-slide {width: 60px !important;}
	.visual-swiper .swiper-container.thumbnail .swiper-slide img {max-width: 56px;}
	.visual-swiper .swiper-container.thumbnail .swiper-slide + .swiper-slide {margin-left: 5px;}
	.visual-swiper .swiper-container.thumbnail {bottom: 20px;}
	.new_visual video{
		position:relative; left: auto;top: auto; width:100%; height:100%;z-index:3;overflow: hidden;-o-object-fit: cover;
		object-fit: cover;min-width: 100%;min-height: 100%;
	}

	/* 해문홍 50년 발자취 */
	.history-wrap {padding: 30px 10px 10px;}
	.history-wrap h3 {padding-bottom: 30px;font-size: 40px;}
	.history-wrap .history ul {min-width: 640px; overflow-x: auto;}
	.history-wrap .history-box ul li {min-width: 130px;}
	.history-wrap .history-box ul li .img {width: 60px;height: 60px;}
	.history-wrap .history-box ul li .date {padding:  0 25px 20px;font-size: 24px;}
	.history-wrap .history-box ul li .txt {padding: 10px 0 0 20px;min-height: 60px;font-size: 11px;}

	.history-wrap .history-box ul li .box-history::before {left: 12px;top: 68px;height: 90px;}

	.history-wrap .btn-rgt {position: absolute;right: 90px;top: 60px; display: inline-block;}



	.history-wrap .btn-rgt-more {width: 30px;height: 30px;right:10px;top: 38px;background: url(../images/ico_plus.png) no-repeat center center;background-size: 16px;}
	.history-wrap .btn-rgt {position: absolute;right: 50px;top: 38px; display: inline-block;}
	.history-wrap .btn-rgt  button {border: 0;width: 20px;height: 30px;}
	.history-wrap .btn-rgt .left {background: url(../images/arrow-left.png) no-repeat center center; background-size:8px;}
	.history-wrap .btn-rgt .right {margin-left: 15px; background: url(../images/arrow-right.png) no-repeat center center; background-size:8px;}





	/* KOCIS를 빛낸 50가지 이야기 */
	.photo-wrap {padding-top: 20px;}
	.photo-wrap::before {height: 90px;}
	.photo-wrap .inline-box {padding: 0 10px 50px 0;}
	.photo-wrap .inline-box::before {content: none;}
	.photo-wrap h3 {font-size: 40px;float: none; padding-top: 25px;}
	.photo-wrap h3 span {font-size: 30px;}

	.photo-wrap .btn-box {top: 20px;left: auto;right: 30px;}
	.photo-wrap a.btnlive {width:90px;padding:5px 0 5px 10px;font-size: 14px;}
	.photo-wrap a.btnlive::after {height: 15px;background-color: #234667;transform: rotate(-45deg) translate(-15px, 7px);}
	.photo-wrap a.btnlive span {width: 40px;height: 40px;right: -20px;top: 6px;}  

	.photo-wrap .photo-box {padding: 20px 0 0 0;}
	.photo-wrap .swiper-container.gallery {position: relative;margin: 0 auto 0;padding-bottom: 25px;}
	.photo-wrap .swiper-container.gallery .swiper-slide a + a {margin-left: 20px;}
	.photo-wrap .swiper-container.gallery .swiper-slide img {max-width:160px;}
	.swiper-container.big-gallery {position: relative;}
	.swiper-container.big-gallery .swiper-wrapper {font-size: 0;}
	.swiper-container.big-gallery .swiper-wrapper .swiper-slide {display: block;}
	.swiper-container.big-gallery .swiper-wrapper .swiper-slide img {max-width: 800px;}

	.swiper-container.big-gallery .swiper-wrapper .swiper-slide .title {padding: 20px 0; font-size: 12px;}
	.photo-wrap .content-details {
		position: absolute;text-align: center;padding: 0 20px;top: 50%;left: 50%;opacity: 0;width: 100%;box-sizing: border-box;white-space: normal;
		-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
		-webkit-transition: all 0.3s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;
	}
	.gallery .swiper-slide a:hover .content-details {top: 60%;left: 50%;opacity: 1;}	
	.gallery .swiper-slide:hover .content-details .title {font-size: 13px;}
	.photo-wrap .content-details p {padding: 5px 0 10px; font-size: 11px; height: 3em; /* 20211119 수정 */}
	.gallery .swiper-slide a .more {font-size: 14px;display: none;}	
	.gallery .swiper-slide a .more::after {height: 15px;background-color: #588ebf;transform: rotate(-45deg) translate(-15px, 6px);}
	.photo-wrap .swiper-btn-photo {position: absolute;left: 0;bottom: -163px;display: none;}
	.year-swiper .swiper-wrapper {padding-top: 13px;}
	.year-swiper .swiper-wrapper .swiper-slide {font-size: 15px;}
	.year-swiper .swiper-container.year .swiper-wrapper .swiper-slide.swiper-slide-thumb-active::before {height: 3px;top: -20px;border-bottom: 3px solid #000;}
	.year-swiper .swiper-container.year {top: 80px;}

	.year-swiper .swiper-wrapper .swiper-slide + .swiper-slide {margin-left: 10px;}
	.year-swiper .swiper-container.year .swiper-wrapper .swiper-slide.active::before {top: -20px;border-bottom: 3px solid #28639b;height: 3px;}
	.gallery .swiper-slide a .fadeIn-bottom {padding: 0 10px;}


	/* 2030 글로벌 소통 ∙ 문화 네트워크 포럼 */
	.global-wrap {padding: 0px 10px 0px;}
	.global-wrap02 {background: url(../images/global_bg03.png) no-repeat bottom right; background-size: 150px;}
	.global-wrap h3 {font-size: 40px;}
	.global-wrap .txt {font-size: 12px; line-height: 1.3;}
	.global-wrap .date span em {padding-left: 8px; font-size: 13px;}
	.global-wrap .date span::before {width: 23px;height: 23px;}
	.global-wrap .date span + span {margin-left: 20px;}
	.global-wrap .btn-box {padding: 10px 0 20px;}
	.global-wrap a.btnlive {width:110px;font-size: 14px;}
	.global-wrap a.btnlive::after {height: 15px;transform: rotate(-45deg) translate(-15px, 8px);}
	.global-wrap a.btnlive span {width: 40px;height: 40px;right: -15px;top: 5px;}
	.global-content {padding-right: 0;}
	.global-content button{margin-right:0px; padding:0 10px;}
	.global-content button span {max-width: 160px;padding-top: 40px;font-size: 12px;vertical-align: top;}
	.global-content button:nth-child(1) {background-size:30px;}
	.global-content button:nth-child(2) {background-size:30px;}
	.global-content button:nth-child(3) {background-size:30px;}	


	/* 기념행사 */
	.celebrate_wrap {min-height: 300px;}
	.celebrate_wrap .celebrateTextarea01 {padding: 30px 20px 0 20px;}
	.celebrate_wrap .celebrateTextarea02 {padding: 30px 20px 0 20px;}
	.celebrate_wrap h3 {font-size: 40px; padding: 20px 0 20px;}
	.celebrate_wrap .txt01 {font-size: 23px;}
	.celebrate_wrap .txt01sub {font-size: 17px; margin-bottom: 15px;}
	.celebrate_wrap .txt02{font-size: 22px; letter-spacing: -0.03em; line-height: 1.1em;}
	.celebrate_wrap .txt02sub {font-size: 16px; margin-bottom: 15px;}
	.celebrate_wrap .date{padding-bottom: 20px; margin-top: 15px;}
	.celebrate_wrap .date span em {padding-left: 8px; font-size: 16px;}
	.celebrate_wrap .date span::before {width: 23px;height: 23px;}
	.celebrate_wrap .date span + span {margin-left: 20px;}
	.brCalli{display: none;}

	.celebrate_wrap .btn-box {padding:15px 20px 25px;text-align: center;}
	.celebrate_wrap .coSoon {font-size: 15px;}
	.celebrate_wrap a.btnlive {
		display:inline-block; position:relative; width:180px;padding:5px 0 5px 10px;text-align: left;font-size: 13px;line-height: 1.4;
	}
	.celebrate_wrap a.btnlive::before {content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #fde2b7;z-index: 2;}
	.celebrate_wrap a.btnlive::after {height: 15px;transform: rotate(-45deg) translate(-13px, 8px);}
	.celebrate_wrap a.btnlive span {width: 40px;height: 40px;right: -20px;top: 5px;}


	/* 해콕눈이와 함께 해문홍 50주년을 즐겨라! */
	.th50-wrap {padding-top: 20px;}
	.th50-wrap .th50-content {padding-left: 0 !important;}
	.th50-wrap .th50-content h3 {position: relative; float: none;width: 100%; padding: 20px 10px 0 100px;font-size: 16px;background-color: #e7e9eb;text-align: right;}
	.th50-wrap .th50-content h3 em {padding-top: 5px; font-size: 24px;}
	.th50-wrap .th50-content h3::after {width: 100px;height: 90px;position: absolute;bottom: auto;top:10px;left: 10px;right: auto;background-size:80px;}
	.th50-wrap .th50-box {padding: 20px 0 0 10px;}
	.btn-event2 {font-size: 12px;width: 70px;height: 70px;padding: 30px 0 0 4px;left: 70px;bottom: 40px;background-size: 100%;}
	.btn-event2::before {font-size: 30px;left: 16px;bottom: 44px;}

	.th50-swiper .swiper-container {padding: 0 20px;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide {width: 100%;min-height: 200px;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active {opacity: 1;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .img {border: 2px solid transparent;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .img {width: auto; border: 2px solid #db1231;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .img {float: none;width: auto;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .img img {width: 100%;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .title {padding: 20px 0 0 10px;font-size: 21px;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom {position: relative; display: block;padding: 10px 10px 10px; width: 100%;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .event-title {padding-bottom: 0;font-size: 13px;}

	.th50-wrap .swiper-btn-box {position: relative;margin: -50px 10px 0 auto; width: 160px;height: 50px;}
	.th50-wrap .swiper-btn-box .swiper-button-prev {left: 15px;margin-top: -15px;width: 30px;height: 30px;background-size: 10px;border: 0;}
	.th50-wrap .swiper-btn-box .swiper-button-next {right: 15px;margin-top: -15px;width: 30px;height: 30px;background-size: 10px;border: 0;}
	.th50-wrap .swiper-btn-box .swiper-pagination-current {font-size: 12px; width: 30px;height: 30px;border: 2px solid #fff;line-height: 28px;}
	.th50-wrap .swiper-btn-box .swiper-pagination-fraction {bottom: 0px;}


	.th50-wrap .swiper-btn-box {bottom: 47px; width: 90px;right: 114px; display: none;} /* display: none; 추가 20211116 */
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event {width:90px;padding:5px 0 5px 10px;font-size: 14px;}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event::after {height: 15px;transform: rotate(-45deg) translate(-15px, 6px);}
	.th50-wrap .swiper-container .swiper-wrapper .swiper-slide .bottom .btn-event span {width: 40px;height: 40px;right: -20px;top: 4px;}

	.th50-content .btn-lgt-more {width: 30px;height: 30px; right:160px; left: auto; top: 15px;background: url(../images/ico_plus.png) no-repeat center center;background-size: 16px;}
	

	.popup-layer .pop-layer {width: 90%;max-width: 360px;background-size: 320px;}
	.popup-layer .pop-layer .m_box::before {content: '';display: block;height: 170px; background: url(../images/popup_character.png) no-repeat center 50px;background-size: 180px;}

	.popup-layer .pop-center .pop-layer .txt {padding: 20px 15px 30px;}
	.popup-layer .pop-center .pop-layer .txt dl + dl {padding-top: 5px;}
	.popup-layer .pop-center .pop-layer .txt dl dt {
		position: relative; display: table-cell;min-width: 60px; width: 60px;padding-left: 10px;
		color: #ee6000;font-size: 13px;line-height: 1.4;vertical-align: top;text-align: left;
	}
	.popup-layer .pop-center .pop-layer .txt dl dt::before {
		content: '';display: inline-block;width: 3px;height: 3px;position: absolute;left: 0;top: 8px;transform: inherit; background-color: #ee6000;
	}
	.popup-layer .pop-center .pop-layer .txt dl dd {
		display: table-cell;width: 100%;overflow: hidden; color: #3e3e3e; font-size: 12px;line-height: 1.4;text-align: left;
	}
	.popup-layer .pop-bottom .content {max-height: 800px;}
	.popup-layer .close {
		position: absolute;right: 0;top: -30px;padding: 15px; background:#ff6f0d url(../images/btn-title-close2.png) no-repeat center center; 
		background-size:20px;z-index: 999;font-size: 0;text-indent: -9999px;border: 0;
	}



	/* 2021 한류 큰잔치 K-healing Online Festival */
	.festival-wrap h3.tit_pen03.webTxt {display: block;font-size: 38px !important;}
	.festival-wrap h3 {padding: 40px 0 20px;font-size: 60px;}
	.festival-wrap .date span em {padding-left: 8px; font-size: 16px;}
	.festival-wrap .date span em i {font-style: normal; font-size: 14px;}
	.festival-wrap .date span::before {width: 23px;height: 23px;}
	.festival-wrap .btn-box {padding: 0px 0 50px;}
	.festival-wrap a.btnlive {width:160px;font-size: 13px;}
	.festival-wrap a.btnlive::after {height: 15px;transform: rotate(-45deg) translate(-15px, 6px);}
	.festival-wrap a.btnlive span {width: 40px;height: 40px;right: -15px;top: 5px;} 



	/* 메타버스 온라인 전시회 */
	
	.metaverse-wrap  .metaverse-content .left {float: none;}
	.metaverse-wrap  .metaverse-content .right {float: none;padding: 20px 20px 40px;text-align: center;width: 320px;margin: auto;}
	.metaverse-wrap  .metaverse-content .right img {max-width: 300px;}
	.metaverse-wrap  .metaverse-content .right .circle {left: -10px;bottom: 40px;width: 60px;height: 60px;background-size:60px;} 
	.metaverse-wrap h3 {padding: 30px 0 10px;font-size: 50px;}
	.metaverse-wrap .txt {font-size: 13px;padding-left: 0;text-align: center;}

	.metaverse-wrap .btn-box {padding:10px 20px 20px;text-align: center;}
	.metaverse-wrap .coSoon {font-size: 15px;}
	.metaverse-wrap a.btnlive {
		display:inline-block; position:relative; width:180px;padding:5px 0 5px 10px;text-align: left;font-size: 13px;line-height: 1.4;
	}
	.metaverse-wrap a.btnlive::before {content: "";display: block;position: absolute;left: 0;right: 0;bottom: 0; border-bottom: 1px solid #866be9;z-index: 2;}
	.metaverse-wrap a.btnlive::after {height: 15px;transform: rotate(-45deg) translate(-13px, 8px);}
	.metaverse-wrap a.btnlive span {width: 40px;height: 40px;right: -20px;top: 5px;}


	/* 해문홍 50주년 기념 인터뷰를 만나보세요 */
	.interview-wrap {padding-top: 30px;}
	.interview-wrap h3 {padding:0px 10px 10px 0; font-size: 24px;}
	.interview-wrap h3.tit_pen03 {font-size: 35px !important;}
	.interview-wrap h3.tit_pen03 span {font-size: 35px !important;}
	.interview-wrap h3 .txt {font-size: 24px;font-weight: 600;right: 10px;top: -7px;}
	.interview-wrap .swiper-container .swiper-wrapper .swiper-slide {max-width: 100px;}
	.interview-wrap .swiper-container .swiper-wrapper .swiper-slide:nth-child(2n-1) {padding-top: 25px;}
	.interview-wrap .swiper-container .swiper-wrapper .swiper-slide .rank {padding: 20px 0 5px;font-size: 10px;}
	.interview-wrap .swiper-container .swiper-wrapper .swiper-slide .name {font-size: 13px;}
	.interview-wrap .swiper-column-box {left:10px; top:30px; width:100px;}
	.interview-wrap .swiper-column-box .swiper-character-prev {left: 0;width: 15px;height: 30px;background-size: 15px;}
	.interview-wrap .swiper-column-box .swiper-character-next {left: 30px;right: auto;width: 15px;height: 30px;background-size: 15px;}

	/* KOCIS, 브랜드가 되다 */
	.kocis-wrap {padding: 30px 20px 20px;}
	.kocis-wrap .kocis-content {display: block;}
	.kocis-wrap .kocis-content a {padding-top: 120px;display: block;}
	.kocis-wrap .kocis-content a { padding: 15px 15px 15px 50px;font-size: 13px;}
	.kocis-wrap .kocis-content a::after {
		content: '';display: inline-block;width: 61px;height: 20px;position: absolute;right: 10px;
		background: url(../images/icon-link-copy.png) no-repeat center center; background-size:40px;
	}
	.kocis-wrap .kocis-content a:before {width: 30px;height: 30px;left: 10px;}
	.kocis-wrap .kocis-content a:nth-child(1):before { background-size:20px;}
	.kocis-wrap .kocis-content a:nth-child(2):before {background-size:20px;}
	.kocis-wrap .kocis-content a + a {margin-left: 0;margin-top: 20px;}


	/* 명예기자단 */
	.calliWrap {background: url(../images/calli_bg.png) no-repeat -55px top, linear-gradient(90deg, #f2ebe3 50%, #f2ebe3 50%); height: 360px;}
	.calliWrap .swiper-calli-photo {left: auto;right: -110px;bottom: 60%;}
	.calliWrap .swiper-calli-photo .swiper-calli-prev {background-size: 10px; left: 15px;}
	.calliWrap .swiper-calli-photo .swiper-calli-next {background-size: 10px;}
	.calliTxt {float: none; height: auto; margin-right: 0%;}
	.calliTxt h3{background: none; padding: 25px 0 0 0;}
	.calliTxt h3 p {font-size: 13px !important; margin-top: 15px;}
	.CalliEng {left: auto;transform: none;font-size: 80px;margin-left: 0;bottom: 30px;right: 0;}
	.calliArea {padding: 20px 0 0 0;}
	.calliContents .calliList {width: 180px; height: 180px;}
	.calliContents .calliList p {padding: 12px 0;font-size: 13px;}
	.calliWrap .calliArea-box {padding-left: 0%;}

	.popup-layer.calli_area .pop-layer {max-width: 360px;}
	.calliVod > iframe{width: 360px; height: 200px;}
	.swiper-container.big-gallery .swiper-wrapper .swiper-slide img {max-width: 360px;}
	.swiper-gallery-box .swiper-big-gallery-prev {background-size: 15px; top: 40%;}
	.swiper-gallery-box .swiper-big-gallery-next {background-size: 15px; top: 40%;}
	
	.brWeb{display: none;}
	.brMo{display: none;}


	.footer {padding: 15px 15px 15px; color:#888;font-size: 11px;line-height: 1.3;}

	.visual-swiper .pc {display: none;}
	.visual-swiper .mobile {display: block;}

}


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

	#new_header .top{padding:0 15px;}
	.wrapper {min-height: auto; height: auto;}
	.mouse-block {display: none;}
	.visual-swiper {display: none;}
	.main_slider{display: block;}
	.main_slider .bx-controls {position: static;}
	.main_slider .bx-controls-direction {top: 50%; transform: translateY(-50%); z-index: 100;}
	.btnVodMo {display:block; position:absolute; width:100px; margin:45px auto 0px auto; padding:5px 0 5px 10px;text-align: left;transform: rotate(135deg);border-bottom: 1px solid #fff;color:#fff;font-size: 13px;line-height: 1.4; top: 50%; left: 50%; margin-left: -50px;}
	.btnVodMo::after {content: "";display: block;width: 1px;height: 15px;background-color: #fff;transform: rotate(-45deg) translate(-15px, 6px);position: absolute;right: 0;top: 0;}
	.btnVodMo span {content: "";display: block;width: 40px;height: 40px;position: absolute;right: -15px;top: 5px;border: 1px solid #fff;border-radius: 50%;transition: all .3s ease-in-out;overflow: hidden;}
	.btnVodMo:hover span {border: 1px dashed #fff;}  
	.btnVodMo:hover span {-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;animation: spinAround 9s linear infinite;} 
	.btnVodMo {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-name: slideOutDown;animation-name: slideOutDown;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}

	.new_visual .new_visaul_txt a.btnVod {display: none;}

	/* 기념행사 */
	.celebrate_wrap {min-height: 300px;}
	.celebrate_wrap .celebrateTextarea01 {}
	.celebrate_wrap .celebrateTextarea02 {padding-top: 30px;}

}


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

	.interview-wrap .interview-box{position:static;}
	h3.tit_pen03.webTxt{display:none;}
	h3.tit_pen03.mobTxt{display:block;}
	.web_res{display: none;}
	.mo_res{display: block;}
	.diNone{display: block;}

	/* 2030 글로벌 소통 ∙ 문화 네트워크 포럼 */
	.global-wrap h3 {padding: 20px 0 0px;}
	.global-wrap {padding: 0px 10px 0px;}
	.global-wrap02 {background: url(../images/global_bg03.png) no-repeat bottom right; background-size: 150px;}
	.global-content {padding: 25px 30px 20px 0;}
	.global-content button {padding: 0 5px;}
	.global-wrap .date span {display: block; margin: 20px 0 0 0;}
	.global-wrap .date span + span {margin-left: 0px;}
	.global-wrap .btn-box {padding:0; padding-top: 15px;}


	/* 기념행사 */
	/* .celebrate_wrap{background: url(../images/celebrate_bg02.png) no-repeat center center;} */
	.celebrate_wrap h3 {font-size: 40px; padding: 20px 0 20px;}
	.celebrate_wrap .txt01 {font-size: 16px; padding-right: 7%;}
	.celebrate_wrap .txt01sub {font-size: 14px; margin-bottom: 15px;}
	.celebrate_wrap .txt02{font-size: 16px;}
	.celebrate_wrap .txt02sub {font-size: 14px; margin-bottom: 15px;}
	.celebrate_wrap .date{padding-bottom: 20px; margin-top: 13px;}
	.celebrate_wrap .date span em {padding-left: 8px; font-size: 13px;}
	.celebrate_wrap .date span::before {width: 23px;height: 23px;}
	.celebrate_wrap .date span + span {margin-left: 20px;}


	/* 명예기자단 */
	.calliWrap {height: 330px;}
	.calliTxt h3 p {padding-right: 10px;}
	h3.tit_pen02 em {font-size: 38px !important;}
	.calliContents .calliList {width: 160px; height: 160px;}
	.calliContents .calliList p {padding: 10px 0;}
	.popup-layer.calli_area .pop-layer {max-width: 250px;}
	.calliVod > iframe{width: 250px; height: 140px;}
	.swiper-container.big-gallery .swiper-wrapper .swiper-slide img {max-width: 250px;}
	.swiper-gallery-box .swiper-big-gallery-prev {background-size: 15px; top: 45%;}
	.swiper-gallery-box .swiper-big-gallery-next {background-size: 15px; top: 45%;}
	
}


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

	/* 기념행사 */
	.celebrate_wrap .txt02{font-size: 16px; }

	.new_visual .new_visaul_txt p {margin-top: 10px;}
	#new_header .top .logo {padding: 15px 0;}
	#new_header .top .top_right {padding: 20px 0;}
	
}

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

	/* 기념행사 */
	.celebrate_wrap .txt02{font-size: 16px;}
	.celebrate_wrap .celebrateTextarea02 {padding-top: 20px;}
	.celebrate_wrap .txt01sub {margin-bottom: 10px;}
	.celebrate_wrap .txt02sub {margin-bottom: 10px;}

	.popup-layer.calli_area .pop-layer {max-width: 220px;}
	.calliVod > iframe{width: 220px; height: 125px;}
	.swiper-container.big-gallery .swiper-wrapper .swiper-slide img {max-width: 220px;}
	.swiper-gallery-box .swiper-big-gallery-prev {background-size: 15px; top: 47%;}
	.swiper-gallery-box .swiper-big-gallery-next {background-size: 15px; top: 47%;}
	
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    .metaverse-wrap h3 {color: #af00db;background: transparent;background-image: transparent;}

}