@charset "utf-8";
/* swipe slides */
.swiper-container { margin: 0 auto; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; }
.swiper-wrapper { position: relative; width: 100%; -webkit-transition-property: -webkit-transform,left,top; -webkit-transition-duration: 0s; -webkit-transform: translate3d(0px,0,0); -webkit-transition-timing-function: ease; transition-property: transform,left,top; transition-duration: 0s; transform: translate3d(0px,0,0); transition-timing-function: ease; }
.swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; }
.swiper-slide { float: left; }
.swiper-wp8-horizontal { -ms-touch-action: pan-y; }
.swiper-wp8-vertical { -ms-touch-action: pan-x; }
.swiper-container { } .swiper-slide { } .swiper-slide-active { } .swiper-slide-visible { } .swiper-pagination-switch { } .swiper-active-switch { } .swiper-visible-switch { }
.visualbox { margin: 0 0 0 0; }

/* main 슬라이드 영역 */
.swiper-container{ width: 100%; color: #fff; text-align: center; /*height: 360px;*/ min-height: 387px; position: relative; }

.pages{ width:100%; height:30px; text-align:center; font-size:14px; color:#434343; margin-top:10px;  float:left;}
.pages li{ text-align:center; font-size:14px; color:#666; margin:0 2px; display:inline;}
.pages li a{ font-size:14px; color:#434343; }

.wide { display: block; width: 100%; position: relative; height: 387px;}
.photo13 .title { background: url(../mimages/meta_notice_04.jpg) center 0 no-repeat; background-size: 360px 387px; }
.photo13 { background: #f5ded9 }
.photo_ev1 .title { background: url(../mimages/db_jaw_event.jpg) center 0 no-repeat; background-size: 360px 387px; }
.photo_ev1 { background: #8e9ca3 }


.photo_n01,.photo_n02,.photo_coke,.photo_cool,.photo_noti { background: #f5ded9; }
.photo_n01 .title {background: url(../mimages/n01.png) center 0 no-repeat; background-size: 360px 387px; }
.photo_n02 .title {background: url(../mimages/n02.png) center 0 no-repeat; background-size: 360px 387px; }
.photo_coke .title {background: url(../mimages/n_coke.png) center 0 no-repeat; background-size: 360px 387px; }
.photo_cool .title {background: url(../mimages/n_cool.png) center 0 no-repeat; background-size: 360px 387px; }
.photo_noti .title {background: url(../mimages/n_noti.png) center 0 no-repeat; background-size: 360px 387px; }

.swiper-slide .title .sotitle { position: absolute; width: 55%; top: 167px; left: 28px; text-align: left; font-size: 11px; line-height: 130%; color: #3e2625; }
.swiper-slide .title .sotitle i { font-style: italic; color: #fff; font-size: 11px; }
.photo03 .title .sotitle,.photo04 .title .sotitle,.photo05 .title .sotitle,.photo06 .title .sotitle,.photo07 .title .sotitle,.photo08 .title .sotitle,.photo09 .title .sotitle,.photo10 .title .sotitle, .photo11 .title .sotitle, .photo12 .title .sotitle, .photo13 .title .sotitle
{ color: #fff; top: 181px;}
.pagination { position: absolute; width: 100%; z-index: 20; left: 0px; bottom: 20px; bottom: 100px; display: none; }
.swiper-pagination-switch { display: inline-block; width: 8px; height: 8px; border-radius: 8px; background: #fff; margin-right: 5px; opacity: 0.4; border: 1px solid #fff; cursor: pointer; }
.swiper-visible-switch { background: #aaa; }
.swiper-active-switch { background: #fff; opacity: 1; }

.ad { width:100%; position: absolute; bottom: 0; left: 0; z-index: 21; overflow:hidden; }
ul.m_ico { clear:left; overflow:hidden; width: 100%; }
ul.m_ico li { float: left; border-left:1px solid #a19a99; width:16.66666666666666666666666666666666666666666666%; width: 20%; box-sizing: border-box; background: url(../mimages/bg_topslide.png) 0 0 repeat }
ul.m_ico li:first-child { border-left:none; }
ul.m_ico li a { display: block; height: 46px; padding: 7px 0; margin: 0 auto; box-sizing: border-box; text-decoration: none; color: #fff; font-size: 11px; }
ul.m_ico li:nth-child(1), ul.m_ico li:nth-child(2), ul.m_ico li:nth-child(3), ul.m_ico li:nth-child(4), ul.m_ico li:nth-child(5) { border-bottom:1px solid #a19a99; }
ul.m_ico li:nth-child(6) { border-left: none }
ul.m_ico li a p {text-align:center; height: 27px;}
ul.m_ico li:nth-child(1) a p { background: url('../mimages/slide_ico01.png') center 0 no-repeat; background-size: 28px 22px; }
ul.m_ico li:nth-child(2) a p { background: url('../mimages/slide_ico02.png') center 0 no-repeat; background-size: 28px 22px; }
ul.m_ico li:nth-child(3) a p { background: url('../mimages/slide_ico03.png') center 0 no-repeat; background-size: 28px 22px; }
ul.m_ico li:nth-child(4) a p { background: url('../mimages/slide_ico04.png') center 0 no-repeat; background-size: 28px 22px; }
ul.m_ico li:nth-child(5) a p { background: url('../mimages/slide_ico05.png') center 0 no-repeat; background-size: 28px 22px; }
ul.m_ico li:nth-child(6) a p { background: url('../mimages/slide_ico06.png') center 0 no-repeat; background-size: 28px 22px; }
ul.m_ico li:nth-child(7) a p { background: url('../mimages/slide_ico07.png') center 0 no-repeat; background-size: 28px 22px; }
ul.m_ico li:nth-child(8) a p { background: url('../mimages/slide_ico08.png') center 0 no-repeat; background-size: 28px 22px; }
ul.m_ico li:nth-child(9) a p { background: url('../mimages/slide_ico09.png') center 0 no-repeat; background-size: 28px 22px; }
ul.m_ico li:nth-child(10) a p { background: url('../mimages/slide_ico10.png') center 0 no-repeat; background-size: 28px 22px; }
ul.m_ico li a p.ad_text { display: none; width: 90%; max-width: 100px; overflow: hidden; margin: 0 auto; padding: 5.5px 0 0 0; text-align: center }
ul.m_ico li a p span { display: inline; vertical-align: middle; color: #fff; font-size: 8px; }
ul.m_ico li a p img { width: 11px; height: 11px; display: inline; vertical-align: middle; margin: -1px 0 0 3px; }

.btn_txt span {line-height: 5;}



ul.m_ico li.on { background: url('../mimages/bg_on.png') 0 0 repeat; }
ul.m_ico li.on a p { background: none; display: none; }
ul.m_ico li.on a p.ad_text { display: block; }

div.item span.str_short_banner{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
-webkit-line-clamp: 2; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word; line-height: 1.2em; height: 2.4em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
}

div ul li a span.str_short_bbs{ width:86%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;display:block;margin:0;padding-top:2px; }

/* layout */
#wrap { width: 100%; position: relative; /* animate용 */overflow: hidden; min-height: 100%; }
#wrap a:hover { text-decoration: none; }
.wrap_640 { width: 100%; /*max-width: 640px;*/ margin: 0 auto; box-sizing: border-box; padding: 0 0px; height: 100%; box-sizing: border-box;  }

#wrap .swiper-container img { width: 100%; height:387px; }
header { width: 100%; position: relative;   zoom: 1; z-index: 11; }
header:after { content: ""; display: block; clear: both; }
header h1 img { width: 100%;   z-index: -11; }
header .top_menu { float: right;position:relative; margin-bottom:-50px; padding-top:15px;}
header .top_menu li { float: left; }
header .top_menu li a { display: block; }
header .top_menu li a img { width: 36px; height: 26px; vertical-align: top; }
.main header { }
.real #logbox { padding-top: 0; padding-bottom: 0 }


/* before after */
.bfbox { position: relative; width: 100%; height: auto; }
.bfbox img { max-width: 100%; vertical-align: top; }
#m_slide { width: 100%; height: 147px; }
#in_slide { width: 100%; max-width: 100%; margin: 0 auto; position: relative; height: 147px; overflow: hidden; }
#in_slide .swiper-container { min-height: 141px; }
#in_slide .swiper-container,#in_slide .swiper-slide,#in_slide .swiper-slide .title { height: 147px }
	/* 도트 color */
#in_slide .swiper-pagination-switch { background: none; border: 1px solid #999; }
#in_slide .swiper-visible-switch { background: #444; border: 1px solid #444; }

.bfbox .pagination { bottom: 8px; display: block; }
.bfbox .operation { position: absolute; top: 0; left: 0; z-index: 100; }
.bfbox .operation .m_img { width: 107px; height: 54px; }
.operation .o_text { color: #fff; position: absolute; top: 0; left: 0; width: 100%; padding: 10px 0 0 12px; font-size: 14px; line-height: 120%; box-sizing: border-box; }
.swiper-container .swiper-wrapper .swiper-slide { position: relative; }
.swiper-container .swiper-wrapper .swiper-slide .o_ment { position: absolute; top: 65px; left: 12px; font-size: 9px; line-height: 140%; text-align: left; color: #3e2625; }

.bf_slider { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; margin-bottom: 10px; }
.bf_slider .operation { position: absolute; top: 0; left: 0; z-index: 100; }
.bf_slider .operation .m_img { width: 107px; height: 54px; }
.bf_slider .o_text { color: #fff; position: absolute; top: 0; left: 0; width: 100%; padding: 10px 0 0 12px; font-size: 14px; line-height: 120%; box-sizing: border-box; }
#touchSlider ul li a .o_ment { position: absolute; top: 65px; left: 12px; font-size: 8px; line-height: 140%; text-align: left; color: #3e2625; }

	/* slide 추가 */
html,body { height: 100%; }
button { border: 0; padding: 0; margin: 0; }
button:focus { outline: none; }
a {text-decoration: none;color: #333;padding:0;margin:0;}
.main_top_slider { position: relative; }
#touchSlider { overflow: hidden; width: 100%; height: 100%; margin: 0 auto; }
#touchSlider ul { overflow: hidden; position: relative; }
#touchSlider ul li { float: left; }
#touchSlider ul li a { display: block; position: relative; }
#touchSlider ul li a img { width: 100%; vertical-align: top; }

.btn_area { position: absolute; bottom: 8px; width: 100%; z-index: 100; }
.btn_area .btn_page { display: inline-block; width: 8px; height: 8px; margin: 3px; font-size: 0px; line-height: 0; text-indent: -9999px; background: none; border: 1px solid #999; border-radius: 24px; overflow: hidden; }
.btn_area .btn_page.on { background: #444; border: 1px solid #444; }


/* 대메뉴 */
nav#menu { width: 200px; zoom: 1; position: fixed; height: auto;  background: #dd292a; z-index: 999; top: 0; right: 0; z-index: 200; -webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar;}
nav#menu:after { content: ""; display: block; clear: both; }
nav#menu ul { width: 200px; float: right; background: #dd292a; height: auto;  overflow: auto;}
nav#menu ul.menu_btn_box {margin-bottom: 10%;}
nav#menu ul li { border-bottom: 1px solid #fff; float: left; width: 100%; }
nav#menu ul a { color: #fcffff;background: #246BE1; font-size: 16px; line-height: 100%; padding: 8px 0 8px 10%; display: block; background: url(../mimages/btn_m_down.png) 90% center no-repeat; background-size: 14px 11px;text-decoration:none }
nav#menu ul .on > a { background: url(../mimages/btn_m_up.png) 90% center no-repeat;background-size: 14px 11px; }
nav#menu ul .submenu { padding: 0 10%; box-sizing: border-box;background: #bb2526; }
nav#menu ul .submenu li { border-bottom: 1px solid #fff; }
nav#menu ul .submenu li:last-child { border-bottom: none }
nav#menu ul .submenu li a { color: #fbeee6; padding: 8px 0; font-size: 14px; background: none; text-decoration:none }
nav#menu ul .submenu li a:hover, nav#menu ul .submenu li a.on { color: #fdff92; text-decoration:none }
nav#menu ul .submenu .ls2 { letter-spacing: -1px; }
nav#menu ul .submenu .ls3 { letter-spacing: -1px;}
nav#menu .menus { width: 100%; position: relative; }
/* nav#menu .menus { width: 100%; height:100%; position: relative; overflow: auto}
nav#menu .menus:after{content:''; display:block; clear:both;} */
.m_close { position: absolute; top: 0; left: -51px; }
.m_close img { width: 51px; height: 51px; }
nav#menu ul .submenu li .new { margin: 0 0 0 3px }
nav#menu ul .submenu li .new img { width: 15px; height: 15px; }
.q_site { margin-top: 20px; width: 100%; padding: 0 13px; box-sizing: border-box; float: left }
.q_site a { display: block; vertical-align: middle; float: left; width: 100%; padding: 13px 10px; margin: 0 0 1px 0; box-sizing: border-box; background: #c55e00 }
.q_site a span.text { float: left; color: #fff; margin-top: 1px; }
.q_site a span.icon { float: right; }
.q_site a span.icon img { width: 15px; height: 15px; }

.shadow_nav { position: absolute; top: 0; left: 0; z-index: 199; width: 100%; height: 100%; background: url(../mimages/bg_black.png) 0 0 repeat; display: none; }
.shadow_nav2 { position: absolute; top: 0; left: 0; z-index: 199; width: 100%; height: 100%; background: url(../mimages/bg_black.png) 0 0 repeat; display: none; }

/* 탑메뉴 */
.head_menu { width: 100%; position: absolute; top: 0; left: 0; height: 131px; background: #ff5f5f; z-index: 200; }
.head_menu .hm_title { width: 100%; height: 51px; position: relative; padding-top: 18px; box-sizing: border-box; }
.head_menu .hm_title p { font-size: 16px; color: #fff; text-align: center; text-decoration: underline; }
.head_menu .hm_close { position: absolute; top: 8px; right: 8px; padding: 8px; }
.head_menu .hm_close img { width: 19px; height: 20px; }
.head_menu .hm_menu { width: 100%; height: 80px; box-sizing: border-box; zoom: 1; background: #ff1b1b; }
.hm_menu:after { content: ""; display: block; clear: both; }
.hm_menu li { float: left; width: 25%; border-right: 1px solid #ffa95b; box-sizing: border-box; }
.hm_menu li:last-child { border-right: none; }
.hm_menu li a { height: 80px; box-sizing: border-box; padding-top: 18px; }
.hm_menu li a, .hm_menu li span { display: block; color: #fff; font-size: 13px; text-align: center; }
.hm_menu li:nth-child(1) a span img { width: 40px; height: 30px }
.hm_menu li:nth-child(2) a span img { width: 40px; height: 30px }
.hm_menu li:nth-child(3) a span img { width: 28px; height: 30px }
.hm_menu li:nth-child(4) a span img { width: 30px; height: 30px }