/* set */
.clear:after {content:"";display:block; overflow: hidden; clear: both;}
.yp_bg{background: rgba(47,189,184,0.8)}
.mr_bg{background: rgba(55,85,135,0.8)}
.ds_bg{background: rgba(134,69,162,0.8)}
.yed_bg{background: rgba(208,51,112,0.8)}

.pb_30{padding-bottom: 30px;}

.modal_bg_yp{background: #2fbdb8;}
.modal_bg_mr{background: #375587;}
.modal_bg_ds{background: #8645a2;}
.modal_bg_yed{background: #d03370;}

.color_r{color:#ca4534;}

/* header */
.logo-area a:first-child {
    background: url(/images/story/05/header/logo_bar.png)100% 12px no-repeat;
    margin-right: 10px;
    padding-right: 20px;
}
.top_menu {position:fixed;top:0;background-color:rgba(0,0,0,0.5);width:100%;}
.top_menu_container {width:960px;margin:0 auto;padding:10px 0;overflow:hidden;}
.sns-area {font-size:30px;float:right;padding-top:10px}
.sns-area li {float:left;padding:0 10px}
.sns-area li a i {color:#fff}

/* main */
html {width: 100%;}
body {background: url(/images/story/2018/12/art_main_bg.png);width: 100%; height: 100%;  position: relative; background-size:cover; background-repeat: no-repeat;}

.art_title {text-align: center; margin-top: 125px;}
.art_title > p {margin-top: 15px;}

.art_main_tab {width: 960px; margin:0 auto;margin-top: 37px;}
.art_main_tab ul li{width: 240px; height: 80px; float: left; text-align: center; font-size:25px; color:#fff; line-height: 80px; cursor: pointer; position: relative;}
.art_main_tab ul li:hover {text-decoration: underline;}
.art_main_tab ul li:NTH-CHILD(1) {background:#2fbdb8 ;}
.art_main_tab ul li:NTH-CHILD(2) {background:#375587 ;}
.art_main_tab ul li:NTH-CHILD(3) {background:#8645a2 ;}
.art_main_tab ul li:NTH-CHILD(4) {background:#d03370 ;}

.art_map_visual {width: 960px; height: 570px; margin:0 auto; position: relative;}
.art_map_visual > ul {width: 100%; height: 100%;}

.art_map_visual > ul > li {opacity:0}
.art_map_visual > ul > li {position: absolute;left: -50px; width: 100%; height: 100%;}
.art_map_visual > ul > li .map01 {position:absolute;left: 0px; top: 75px; }
.art_map_visual > ul > .map_list01 .map02 {position:absolute;left: 3px; top: 75px; opacity:0}
.art_map_visual > ul > .map_list01 .map03 {position:absolute;left: 37px; top: 136px; opacity:0; animation:move1 0.6s 0s ease-in-out infinite alternate}
.art_map_visual > ul > .map_list02 .map02 {position:absolute;left: 0px; top: 233px; opacity:0}
.art_map_visual > ul > .map_list02 .map03 {position:absolute;left: 52px; top: 209px; opacity:0; animation:move2 0.6s 0s ease-in-out infinite alternate}
.art_map_visual > ul > .map_list03 .map02 {position:absolute;left: 70px; top: 77px; opacity:0}
.art_map_visual > ul > .map_list03 .map03 {position:absolute;left: 132px; top: 66px; opacity:0; animation:move3 0.6s 0s ease-in-out infinite alternate}
.art_map_visual > ul > .map_list04 .map02 {position:absolute;left: 187px; top: 153px; opacity:0}
.art_map_visual > ul > .map_list04 .map03 {position:absolute;left: 249px; top: 158px; opacity:0; animation:move4 0.6s 0s ease-in-out infinite alternate}

.notice {position: absolute; right: 0; bottom: 20px; color:#eee; background: rgba(0,0,0,0.6); padding:4px 10px; border-radius: 10px 10px; font-size:13px;}

.on {color:#fff717 !important;}
.on:before{content:""; display:block; background-image: url(/images/story/2018/12/menu_on.png) !important; background-repeat: no-repeat !important; width: 50px; height: 49px; position: absolute; left: 97px; top: -30px; 
	animation-duration: 0.4s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
    
/* bx */
.bx_list > div{visibility: hidden;}
.bx-wrapper {position: absolute; right:0; top: 60px; width: 610px;}
.bx_menu ul li {float: left; margin-left: 30px; margin-bottom: 30px; cursor: pointer; position: relative; width:173px; height: 200px;}
.bx_menu ul li a > div {position: absolute;left: 0; top: 0; width: 100%; height: 100%;}
.bx_menu ul li .list_img {width: 100%; height: 100%; overflow: hidden;} 
.bx_menu ul li .list_img img {width: 100%; height: 100%; transition:.3s} 
.bx_menu ul li .list_txt{text-align: center; color:#fff; font-size:17px; opacity:0; transition:.4s}
.bx_menu ul li .list_txt .txt_art {padding:60px 15px 0 15px;}
.bx_menu ul li .list_txt .more {padding-top: 15px; }
.bx_menu ul li .list_txt .more>img{transition:.5s}

.bx_menu ul li:hover .list_txt{opacity: 1;}
.bx_menu ul li:hover .more>img{transform:rotate(180deg)}
.bx_menu ul li:hover .list_img img {transform:scale(1.07)}

.bx-controls-direction {position: absolute; right: 0; top: 39%;}
.bx-controls-direction a {display: inline-block;}
.bx-controls-direction .bx-prev{text-indent: -9999px;width: 39px; height: 86px; position: absolute; left: -1045px;background: rgba(0,0,0,0.4);
background: url(/images/story/2018/12/slider_prev.png); background-repeat: no-repeat; opacity: .5;}
.bx-controls-direction .bx-next{text-indent: -9999px;width: 39px; height: 86px;margin-left: 20px; position: absolute; right: -85px; 
background: url(/images/story/2018/12/slider_next.png); background-repeat: no-repeat; opacity: .5;}
.bx-controls-direction .bx-prev:hover {opacity: .8;}
.bx-controls-direction .bx-next:hover {opacity: .8;}
/* .slider01 .bx-controls-direction .bx-prev {background: url(/images/story/2018/12/slider01_prev.png);}
.slider01 .bx-controls-direction .bx-next {background: url(/images/story/2018/12/slider01_next.png);}
.slider02 .bx-controls-direction .bx-prev {background: url(/images/story/2018/12/slider02_prev.png);}
.slider02 .bx-controls-direction .bx-next {background: url(/images/story/2018/12/slider02_next.png);}
.slider03 .bx-controls-direction .bx-prev {background: url(/images/story/2018/12/slider03_prev.png);}
.slider03 .bx-controls-direction .bx-next {background: url(/images/story/2018/12/slider03_next.png);}
.slider04 .bx-controls-direction .bx-prev {background: url(/images/story/2018/12/slider04_prev.png);}
.slider04 .bx-controls-direction .bx-next {background: url(/images/story/2018/12/slider04_next.png);} */

.bx-wrapper .bx-pager {text-align: center;font-size: .85em;font-family: Arial;font-weight: bold;color: #666;z-index: 1; position: relative; top: -20px;}
.bx-wrapper .bx-pager-item {font-size: 0; line-height: 0;}
.bx-wrapper .bx-pager.bx-default-pager a {text-indent: -9999px;display: block;width: 10px;height: 10px;margin: 0 5px;outline: 0;border-radius: 5px;background: #666;}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {background: #1378cb; width: 22px;}
.bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;vertical-align: bottom;}

/* modal */
.modal {max-width: 960px; width: 960px; padding:0px; background: url(/images/story/2018/12/modal_bg.png); background-color: #fff; background-repeat: no-repeat; background-position: 0 120px;}
.modal .title_area {height: 55px; color:#fff; font-size:19px; margin-bottom: 30px; line-height: 55px; padding:0 30px;}
.modal .title_area > h2{display: inline-block; float: left; font-size: 22px;font-family:'NanumSquare';font-weight: 700}
.modal .title_area > p{display: inline-block; float: right;font-family:'NanumSquare';}
.modal .img_area {width: 600px; height: auto; margin: 0 auto;}
.modal .txt_area {text-align:center;  margin: 0 auto; padding:0 0 30px 0; }
.modal .txt_area>h3 {position:relative; bottom:-35px; display: inline-block;}
.modal .txt_area>h3:before {content:""; display: block; background: url(/images/story/2018/12/modal_icon.png); width: 30px; height: 30px; position: relative; left: 23px; top: -6px;
	animation-duration: 0.4s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.modal .txt_area p{padding:50px 100px 30px 100px; background:#f5f5f5; line-height: 22px; }
.modal .map_area {width: 900px; margin: 0 auto; padding-bottom:30px;}
.modal .map_area h3 {padding-left: 8px;}
.modal .map_area h3>span {font-size:14px; font-weight: normal;color: #777}
.modal .map_area h3:before {content:""; display:inline-block; background:url(/images/story/2018/12/map_icon.png); width: 17px; height: 24px; position: relative; right: 8px; top: 3px;}
.modal .map_area .map_img{margin-top: 15px;}

.modal a.close-modal {background: url(/images/story/2018/12/modal_close.png); width: 54px;height: 54px; top: 0; right: -56px; border:1px solid #575757}


@keyframes move1{
	from{
		top:136px
	}
	50% {
		top:138px
	}
	70%{
		top:140px
	}
	to{
		top:142px
	}
}

@keyframes move2{
	from{
		top:209px
	}
	50% {
		top:211px
	}
	70%{
		top:213px
	}
	to{
		top:215px
	}
}

@keyframes move3{
	from{
		top:66px
	}
	50% {
		top:68px
	}
	70%{
		top:70px
	}
	to{
		top:72px
	}
}

@keyframes move4{
	from{
		top:158px
	}
	50% {
		top:160px
	}
	70%{
		top:162px
	}
	to{
		top:164px
	}
}

@keyframes slidein {
  from {
    transform:rotate(2.5deg)
  }

  to {
    transform:rotate(-2.5deg)
  }
}