@charset "utf-8";


/* ===================================
	layout
 =================================== */

/* 공통 */
html, body {height:100%;}
#video{position: absolute; z-index: -99999999; opacity: 0;}

.wrap{position: relative; height:100%; overflow:hidden; min-width: 320px;}
	

.site_map .content .menu_ sup {font-size:1em; vertical-align:baseline;}






/* header */
header {position: fixed; left:50%; top:0; transform: translate(-50%,0); width:100%; height:60px; padding:0 70px; z-index: 50000; transition: all .3s ease;}
header .h_container{position: relative; width:100%; height:100%; display: flex; display: -ms-flex; display: -webkit-flex; justify-content: space-between; transition: all .3s ease;}
header .h_container .logo{display: flex; display: -ms-flex; display: -webkit-flex; align-items: center; position: relative;}
header .h_container .logo span{width:100%; margin-right:10px;}
header .h_container .logo img:last-child{margin:0;}

header .h_container .menu ul{display: flex; align-items: center; height:100%;}
header .h_container .menu ul li {margin-right:7px;}
header .h_container .menu ul li:last-child{margin:0;}
header .h_container .menu ul li a{width:48px; height:48px; border-radius: 10px;  display: block; overflow: hidden; transition: all .3s ease-in-out; background-color:#000; font-size:0; text-indent:-88888px; background-position:center center; background-repeat: no-repeat; background-size:28px auto;}
header .h_container .menu ul li.home a {background-image:url('../images/common/ico_home01.png');}
header .h_container .menu ul li.print a {background-image:url('../images/common/ico_print.png');}
header .h_container .menu ul li.download a {background-image:url('../images/common/ico_down.png');}

header .h_container .menu ul li.sound a {background-image:url('../images/common/ico_sound_on.png');}
header .h_container .menu ul li.sound.on a {background-image:url('../images/common/ico_sound_off.png');}
header .h_container .menu ul li.site_map_btn a {background-image:url('../images/common/ico_menu.png');}

header .h_container .menu ul li a:hover {background-color:#1e1f8a; }



/* site_map */
.site_map .content .menu_ ul {padding-bottom: 20px; height: 780px; overflow-y: scroll;}
.site_map .content .menu_ ul::-webkit-scrollbar {display: none;}  
.site_map {position: fixed; right:0; top:0; width:100vw; height:100vh; background: rgba(0, 0, 0, .7); display: none;}
.site_map .site_map_inner{width:100%; height:100%; position: relative;}
.site_map .site_map_inner > .close{position: absolute; left:0; top:0; width:100%; height:100%; background:transparent;}
.site_map .content{position: fixed; right:0; top:0; padding:0 20px; background:#000; height:100vh; transform: translateX(100%); transition: all .5s ease; overflow-y:hidden; width: 320px; }
.site_map .content::-webkit-scrollbar{width:0;}
.site_map .content .top{padding:20px; display: flex; display: -ms-flex; display: -webkit-flex; justify-content: flex-end; position: absolute; right:0; top:0;}
.site_map .content .top span{margin-right:10px; cursor: pointer; display: inline-block; width:32px; height:32px; overflow: hidden; transition: all .3s ease-in-out; font-size:0; text-indent:-88888px; background-position:center center; background-repeat: no-repeat; background-size:26px auto;}
.site_map .content .top span:last-child{margin:0;}

.site_map .content .top span.home {background-image:url('../images/common/ico_home01.png');}
.site_map .content .top span.print {background-image:url('../images/common/ico_print.png');}
.site_map .content .top span.download {background-image:url('../images/common/ico_down.png');}

.site_map .content .top span.sound {background-image:url('../images/common/ico_sound_on.png'); margin-right:20px;}
.site_map .content .top span.sound.on {background-image:url('../images/common/ico_sound_off.png');}

.site_map .content .top span.close {background-image:url('../images/common/ico_close.png'); background-size: 20px auto;}


.site_map .content .top .print, .site_map .content .top .sound{display: none;}
.site_map .content .menu_{margin-top:100px; overflow-y: hidden;}
.site_map .content .menu_::-webkit-scrollbar{width:0;}
.site_map .content .menu_ > ul > li{ margin-bottom:20px;}
.site_map .content .menu_ > ul > li > a{font-size:24px; color:#fff; transition: all .3s ease;}
.site_map .content .menu_ > ul > li > ul {margin-top:20px; display: none;}
.site_map .content .menu_ > ul > li > ul > li{padding:10px 0; position: relative; z-index: 1;}
.site_map .content .menu_ > ul > li > ul > li::before{position: absolute; left:-10px; top:50%; transform: translate(0,-50%); content:''; background: #1e1f8a; width:0; height:100%; transition: all .5s ease; z-index: -1;}
.site_map .content .menu_ > ul > li > ul > li:hover::before{width:calc(100% + 10px);}
.site_map .content .menu_ > ul > li > ul > li > a{font-size:14px; color:#fff; transition: all .3s ease; vertical-align: baseline; display: flex; display: -ms-flex; display: -webkit-flex; align-items: center;}
.site_map .content .menu_ > ul > li.on > a{color:#1e1f8a;}
.site_map .content .menu_ > ul > li.on > ul > li > a{color:#1e1f8a;}
.site_map .content .menu_ > ul > li.on > ul > li:hover > a{color:#fff;}
.site_map.on .content{transform: translateX(0);}





/* inner */
.wrap_inner{width:100%; height:100%; padding:60px 70px 50px; position: relative; z-index: 1; transition: all .3s ease;}
.wrap_inner .container{width:100%; height:100%; position: relative; }
.wrap_inner .container .thumbnail_btn{position: absolute; left:100%; transform: translateX(0); bottom:0; width:60px; height:150px; background:#000; border-radius: 0 20px 20px 0; display: flex; display: -ms-flex; display: -webkit-flex; flex-direction: column; justify-content: center; align-items: center; color:#fff; cursor: pointer; line-height: 1.4; z-index: 9999999; transition: all .3s ease; z-index:-1;}
.wrap_inner .container .thumbnail_btn i{margin-bottom:10px; background:url('../images/common/ico_thumb.png') 50% 0 no-repeat; width:100%; height:26px;}

.wrap_inner .container .thumbnail_btn::before {content:''; display:inline-block; height:100%; width:100%; position:absolute; left:-100%; top:0; background-color:#000; z-index: -1;}
.wrap_inner .container .thumbnail_btn.on {z-index:100000;}

.wrap_inner .container_inner{width:100%; height:100%; border-radius: 20px 20px 20px 20px; overflow: hidden; position: relative; transition:all 0.3s ease-in-out;}
.wrap_inner .container_inner.on{ border-bottom-right-radius: 0;}
.wrap_inner .container_inner .swiper{ height:100%;}

.wrap_inner .container_inner .content_view{height:100%; width:100%; transition: all .5s ease;}
.wrap_inner .container_inner .content_view .swiper-wrapper {height:100%; }


.wrap_inner .container_inner .content_view .content{transition: all .3s ease;}
.wrap_inner .container_inner .content_view .item_group{width:100%; height:100%; position: relative; border:1px solid red;}



/* 공통 */
.swiper-button-prev, 
.swiper-button-next {position: absolute; top:50%; transform: translate(0,-50%); content:''; width:64px; height:64px; z-index: 20000; transition: all .3s ease; background-image:none; overflow: hidden; margin:0;}

.control_btn .swiper-button-prev,
.control_btn .swiper-button-next {border-radius: 50px; background-color:#fff; box-shadow: 5px 5px 10px rgba(0, 0, 0, .2);}
.control_btn .swiper-button-prev{left:0px; transform: translate(-50%,-50%);} 
.control_btn .swiper-button-next{right:0px;transform: translate(50%,-50%); }

.control_btn .swiper-button-prev > span, 
.control_btn .swiper-button-next > span{display: block; width:100%; height:100%; background:url('../images/common/ico_arrow01.png') 50% 50% no-repeat;}
.control_btn .swiper-button-next > span {transform: rotate(180deg);}


.control_btn .swiper-button-prev:hover{left:-5px; transform: translate(-50%,-50%);} 
.control_btn .swiper-button-next:hover{right:-5px;transform: translate(50%,-50%); }



.swiper-pagination{padding:10px; position:absolute; width:auto; left:50%; bottom:0; transform:translate(-50%, 0); font-size:14px;color:#fff; z-index: 1;  background:#000; min-width:150px; border-radius: 8px 8px 0 0; font-weight:300; transition:all 0.3s ease-in-out;}
.swiper-pagination::before{position: absolute; left:50%; bottom:0%; transform: translate(-50%, 5px) rotate(45deg); content:''; width:10px; height:10px; background:#000; z-index: -1; transition:all 0.3s ease-in-out;}

.swiper-pagination-current {color:#5a5cc4; font-weight:700;}





/* 썸네일 */
.wrap_inner .container_inner .thumbnail{height:150px; width:100%; box-sizing: border-box;  padding:30px 0; background:#000; transition: all .5s ease; border-radius: 0 0 0 0; position: absolute; left:100%; bottom:0; transform: translate(-0%,0); content:'';  opacity: 1;}
.wrap_inner .container_inner .thumbnail .swiper{max-width:1200px; margin:0 auto; transition: all .3s ease; overflow: hidden;}
.wrap_inner .container_inner .thumbnail .swiper-slide{display: flex; display: -ms-flex; display: -webkit-flex; justify-content: center; align-items: center; cursor: pointer; transition: all .3s ease; background:#dcc3b4; border-radius: 10px; position: relative; overflow: hidden;}
.wrap_inner .container_inner .thumbnail .swiper-slide span{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:100%; height:100%;}
.wrap_inner .container_inner .thumbnail .swiper-slide span img{width:100%;}


.wrap_inner .container_inner.on .thumbnail{ animation: fade_ 500ms linear forwards; z-index: 20000; animation-timing-function:ease;}
@keyframes fade_ { 
	from{opacity: 0; left:100%;} 
	to{opacity: 1; left:0%;}
}

.thumbnail .thumbnail_close{position: absolute; right:10px; top:50%; transform: translate(0,-50%); content:''; width:40px; height:40px; z-index: 20000; background:#fff; border-radius: 50%; transition: all .3s ease;}
.thumbnail .thumbnail_close > div{position: relative; width:100%; height:100%; cursor: pointer;}
.thumbnail .thumbnail_close > div span{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:50%; height:1px; background:#000; border-radius: 100px;}
.thumbnail .thumbnail_close > div span:nth-child(1){transform: translate(-50%,-50%) rotate(-45deg);}
.thumbnail .thumbnail_close > div span:nth-child(2){transform: translate(-50%,-50%) rotate(45deg);}



.thumbnail .swiper-button-prev,
.thumbnail .swiper-button-next {width:32px; height:32px; top:50%; transform: translate(0, -50%);  overflow: visible;}
.thumbnail .swiper-button-prev::before,
.thumbnail .swiper-button-next::before {content:''; position: absolute; top:50%; border:4px solid #fff; width:28px; height:28px;  border-left:transparent; border-bottom:transparent;}

.thumbnail .swiper-button-prev{left:calc(50% - 660px)}
.thumbnail .swiper-button-next{right:calc(50% - 660px)}

.thumbnail .swiper-button-prev::before {transform: translate(-50%, -50%) rotate(-135deg);}
.thumbnail .swiper-button-next::before {transform: translate(-50%, -50%) rotate(45deg);}





/* footer */
footer{position: absolute; left:50%; bottom:0; transform: translate(-50%,0); content:''; height:50px; width:100%; padding:0 20px; display: flex; display: -ms-flex; display: -webkit-flex; justify-content: center; align-items: center; font-size:14px; transition: all .3s ease; text-align: center;}





/****** content *****/
.content_view .swiper-slide {background-color:#f5f5f5; text-align:center; padding:0px 0;}
.content_view .swiper-slide .swiper-slide-box{height:100%;}
.content_view .swiper-slide .slide_inner { display:inline-block; position: relative; max-height:100%; top:50%; transform: translate(0, -50%); overflow:hidden;}


/*이미지타입일때*/
.content_view .swiper-slide.type1 .slide_inner {background-color:#fff; box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);}


.content_view .content_img {position: absolute; height:100%; max-height:100%; top:0; left:0;}
.content_view .content_img:nth-of-type(1) {position: relative;}
.content_view .content_img span{ margin:0 auto; text-align: center; display:inline-block; height:100%;}




/*Html타입일때*/
.content_view .swiper-slide.type2 .slide_inner{background-color:#fff; box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);padding:20px;}








@media only screen and (max-width: 1600px){
	/* header */
	header {height:50px; padding:0 45px;}

	header .h_container .menu ul li {margin-right:5px;}
	header .h_container .menu ul li a{width:40px; height:40px; border-radius: 8px; background-size:24px auto;}


	/* inner */
	.wrap_inner{padding:60px 45px 40px;}
	
	.wrap_inner .container_inner{ border-radius: 15px 15px 15px 15px;}

	.wrap_inner .container .thumbnail_btn{width:42px; height:140px; border-radius: 0 15px 15px 0;}
	.wrap_inner .container .thumbnail_btn i{margin-bottom:5px; height:22px; background-size:contain;}


	/* 공통 */
	.swiper-button-prev, 
	.swiper-button-next {width:50px; height:50px;}
	.control_btn .swiper-button-prev > span, 
	.control_btn .swiper-button-next > span{background-size:28px auto;}
	



	/* 썸네일 */
	.wrap_inner .container_inner .thumbnail{padding:20px 0; height:140px;}
	.wrap_inner .container_inner .thumbnail .swiper{max-width:1140px;}
	
	.thumbnail .swiper-button-prev,
	.thumbnail .swiper-button-next {width:32px; height:32px;}
	.thumbnail .swiper-button-prev::before,
	.thumbnail .swiper-button-next::before {border-width:3px; width:24px; height:24px;}
	
	
	.thumbnail .swiper-button-next{right:50px;}
	.thumbnail .swiper-button-prev{left:50px;}
	.thumbnail .thumbnail_close{right:10px;}


	/* footer */
	footer{height:40px; font-size:13px;}
}



@media only screen and (max-width: 1440px){
	/* header */
	header {height:50px; padding:0 40px;}

	/* inner */
	.wrap_inner{padding:50px 40px 40px;}
	
	.wrap_inner .container_inner{ border-radius: 15px 15px 15px 15px;}

	.wrap_inner .container .thumbnail_btn{width:38px; height:140px; border-radius: 0 15px 15px 0; font-size:13px;}
	.wrap_inner .container .thumbnail_btn i{ height:20px;}


	/* 공통 */
	.swiper-button-prev, 
	.swiper-button-next {width:40px; height:40px;}
	.control_btn .swiper-button-prev > span, 
	.control_btn .swiper-button-next > span{background-size:20px auto;}
	



	/* 썸네일 */
	.wrap_inner .container_inner .thumbnail{padding:20px 0; height:140px;}
	.wrap_inner .container_inner .thumbnail .swiper{max-width:1000px;}
	
	.thumbnail .swiper-button-prev,
	.thumbnail .swiper-button-next {width:32px; height:32px;}
	.thumbnail .swiper-button-prev::before,
	.thumbnail .swiper-button-next::before {border-width:2px; width:20px; height:20px;}
	
	
	.thumbnail .swiper-button-next{right:45px;}
	.thumbnail .swiper-button-prev{left:45px;}
	.thumbnail .thumbnail_close{right:10px;}


	/* footer */
	footer{height:40px; font-size:12px;}
}


@media only screen and (max-width: 1240px){
	.wrap_inner .container .thumbnail_btn{height:120px;}
	.wrap_inner .container_inner .thumbnail{ height:120px;}
	.wrap_inner .container_inner .thumbnail .swiper{max-width:760px;}
}


@media only screen and (max-width: 1024px){
	/* header */
	header {height:50px; padding:0 25px;}

	/* inner */
	.wrap_inner{padding:50px 25px 40px;}
	
	.wrap_inner .container_inner{ border-radius: 10px 10px 10px 10px;}

	.wrap_inner .container .thumbnail_btn{width:22px; height:116px; border-radius: 0 10px 10px 0; font-size:12px;}
	.wrap_inner .container .thumbnail_btn i{ height:18px;}
	.wrap_inner .container .thumbnail_btn span{display:none;}


	/* 공통 */
	.swiper-button-prev, 
	.swiper-button-next {width:40px; height:40px;}
	.control_btn .swiper-button-prev > span, 
	.control_btn .swiper-button-next > span{background-size:20px auto;}

	.swiper-pagination{padding:5px; font-size:12px; min-width:80px; border-radius: 6px 6px 0 0;}
	.swiper-pagination::before{ transform: translate(-50%, 3px) rotate(45deg);width:6px; height:6px;}




	/* 썸네일 */
	.wrap_inner .container_inner .thumbnail{padding:20px 0; height:116px;}
	.wrap_inner .container_inner .thumbnail .swiper{max-width:580px;}
	
	.thumbnail .swiper-button-prev,
	.thumbnail .swiper-button-next {width:28px; height:28px;}
	.thumbnail .swiper-button-prev::before,
	.thumbnail .swiper-button-next::before {border-width:2px; width:18px; height:18px;}
	
	
	.thumbnail .swiper-button-next{right:40px;}
	.thumbnail .swiper-button-prev{left:40px;}
	.thumbnail .thumbnail_close{right:8px;}
}



@media only screen and (max-width: 768px){
	header {height:50px; padding:0 20px;}

	
	header .h_container .menu ul li.home, 
	header .h_container .menu ul li.print, 
	header .h_container .menu ul li.sound{display: none;}

	header .h_container .menu ul li a{width:32px; height:32px; border-radius: 5px; background-size:18px auto;}

	.site_map .content .top .print, .site_map .content .top .sound{display: block;}


	.wrap_inner{padding:50px 20px 40px;}




	/* 공통 */
	.swiper-button-prev, 
	.swiper-button-next {width:32px; height:32px;}
	.control_btn .swiper-button-prev > span, 
	.control_btn .swiper-button-next > span{background-size:20px auto;}

	.wrap_inner .container .thumbnail_btn{ border-radius: 0 5px 5px 0; font-size:0px;}

	/* 썸네일 */
	.wrap_inner .container_inner .thumbnail{padding:15px 0;}
	.wrap_inner .container_inner .thumbnail .swiper{max-width:425px;}
	
	.thumbnail .swiper-button-prev,
	.thumbnail .swiper-button-next {width:28px; height:28px;}
	.thumbnail .swiper-button-prev::before,
	.thumbnail .swiper-button-next::before {border-width:2px; width:18px; height:18px;}
	
	
	.thumbnail .swiper-button-next{right:40px;}
	.thumbnail .swiper-button-prev{left:40px;}
	.thumbnail .thumbnail_close{right:8px;}
}


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

	.wrap_inner .container .thumbnail_btn{width:20px; height:100px;}
	.wrap_inner .container_inner .thumbnail{padding:10px 0; height:100px;}


	.wrap_inner .container_inner .thumbnail .swiper{max-width:280px;}
	
	
	.thumbnail .swiper-button-prev,
	.thumbnail .swiper-button-next {width:28px; height:28px;}
	.thumbnail .swiper-button-prev::before,
	.thumbnail .swiper-button-next::before {border-width:2px; width:18px; height:18px;}
	
	
	.thumbnail .swiper-button-next{right:20px;}
	.thumbnail .swiper-button-prev{left:20px;}
	.thumbnail .thumbnail_close{display:none;}

	footer{height:40px; font-size:11px;}
}


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

	.thumbnail .swiper-button-next{right:0px;}
	.thumbnail .swiper-button-prev{left:25px;}
	
}
@media only screen and (max-width: 370px){

	.wrap_inner .container_inner .thumbnail .swiper{max-width:135px;}
	
}