@charset "UTF-8";
/********************************************************


		메인 버전 1.  css 	:: BSJ


********************************************************/
#header {border-bottom:none;}
#header.nav-up {border-bottom:1px solid #f5f5f5;}
#header.nav-down {border-bottom:1px solid #f5f5f5;}
.lnb-menu > li > a {color:#fff;}

#header.nav-up .lnb-menu > li > a {color:#fff;}
#header.nav-down .lnb-menu > li > a {color:#111;}
#header.type2.open_menu .lnb-menu > li > a {color:#111;}
#header.nav-down.nav-top .lnb-menu > li > a {color:#fff;}
#header.type2.open_menu.nav-down.nav-top .lnb-menu > li > a {color:#111;}
#header.nav-down.nav-top {border-bottom:none;}
#header .logo1 {display:none;}
#header.nav-down .logo1 {display:block;}
#header.nav-down .logo2 {display:none;}
#header.nav-down.nav-top .logo1 {display:none;}
#header.nav-down.nav-top .logo2 {display:block;}
#header__mobile span {background-color:#fff;}
#header.nav-down.nav-top #header__mobile span {background-color:#fff;}
@media screen and (max-width: 1024px){
	#header.nav-up .logo1 {display:block;}
	#header.nav-up .logo2 {display:none;}
}




/*----------------------------------------------------------------------
	메인
----------------------------------------------------------------------*/
#main { overflow-x:clip; } 
#main > section {padding-top:6.25rem;padding-bottom:6.25rem;}
#main #main__bnr .bnr-list li {width:48.5%;}
.main__title {margin-bottom:0.938rem;font-weight:600;font-size:1.25rem;color:#333;text-align:center;}
.main__title span {display:block;font-size:0.875rem;color:#b3a586;letter-spacing:0}
.main__desc {margin-bottom:3.75rem;font-size:0.875rem;color:#221916;line-height:1.7;text-align:center;}
@media screen and (max-width: 1024px){
	#main > section {padding-top:5rem;padding-bottom:5rem;}
}
@media screen and (max-width: 768px){
}


/*----------------------------------------------------------------------
@ 캐릭터 
----------------------------------------------------------------------*/
.content_box { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; max-width:360px; width:100%; max-height:540px; height:100%;  display:none; } 
.content_box.active { display:flex !important; } 
.content_box .thumb { display:flex; align-items:center; justify-content:center; } 
.content_box .thumb a { display:flex; align-items:center; justify-content:center; } 
/*
.content_box a { cursor:default; } 
*/
@media screen and (max-width: 1024px){
	.content_box { margin:0 15px; } 
} 
@media screen and (max-width: 768px){
	.content_box .thumb img { max-width:80%; } 
} 
@media screen and (max-width: 640px){
	.content_box { max-width:revert; width:100%; max-height:revert;  } 
	.content_box .thumb img { max-width:60%; } 
}

/*----------------------------------------------------------------------
@ 공통박스 
----------------------------------------------------------------------*/

.comm_box { position:fixed; display:flex; flex-direction:column; max-width:970px; width:100%; max-height:690px; height:100%; border:1px solid #666;  border-radius:1.875rem 1.875rem 0 0; box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); overflow:hidden;z-index:999;  } 
.comm_box.active { display:flex !important; } 
.comm_box_top { display:flex; align-items:center; justify-content:space-between; background:#b6b6b5; min-height:3.438rem; padding:0 1.875rem; border-bottom:1px solid #666; }
.comm_box_title { font-size:1.688rem; color:#111; font-weight:500;letter-spacing:0em; cursor:default;  } 
.comm_box_navi { display:flex; flex-direction:row; } 
.comm_box_navi a { opacity:0.2; transition:all 0.3s ease; }   
.comm_box_navi a:first-of-type { margin-right:1.563rem; margin-top:5px; } 
.comm_box_navi a:hover { opacity:1; } 
.comm_box_navi a.on { opacity:1; } 

.comm_box_close { margin-top:3px; }
.comm_box_close a { display:flex; }
.comm_box_close a img { transition:all 0.3s ease; }
.comm_box_close a:hover img { } 

.comm_box_body { position:relative; overflow:hidden; width:100%; height:100%; max-height:40rem; background:#fff; padding:1.875rem 3.75rem; }
.comm_box_body_wrap { position:relative; overflow:;  display:block; height:100%; }
.comm_body_scroll { display:block; position:relative; /*height:calc(100% - 2.575rem);*/ overflow-y:auto;  } 

.comm_box { display:none; } 
/*
.comm_box a { cursor:default; }
*/

@media screen and (max-width: 1024px){
	/*.comm_box { position:revert; } */
	.comm_box_body { padding:1.875rem; } 
	.comm_box { max-width:calc(100% - 30px) ; } 
} 
@media screen and (max-width: 768px){
	.comm_box_body { max-height:revert; } 
	.comm_box_top { min-height:3.125rem; } 
} 
@media screen and (max-width: 640px){
	.comm_box { border-radius:1.25rem 1.25rem 0 0; }
	.comm_box_title { font-size:1.25rem; } 
	.comm_box_body { padding:1rem; } 
	.comm_box_close a img  { max-width:90%; } 
} 


/*----------------------------------------------------------------------
@ 이전/다음 슬라이드 
----------------------------------------------------------------------*/
.main_slider_nav { position:absolute;  top:-45px;   } 
.main_slider_nav .swiper_navigation_wrap { position:absolute; width:100%; top:0px; z-index:11; }


.main_slider_nav .swiper_navigation {  position:relative; right:0px; display:flex; justify-content:flex-start; align-items:center; margin:0 auto; width: 185px; max-width:revert;  z-index:11; } 
.main_slider_nav .swiper_navigation > button { position:relative; top:0px;  width:40px; height:40px; padding:0;background: none;border: none;line-height: 1;cursor: pointer;z-index: 2;opacity:1;transition:all 0.3s; overflow:visible;}
.main_slider_nav .swiper_navigation > button  span { color:#333; line-height: 1;opacity:1;display: block;position: absolute;top: 0; letter-spacing:0.05em; transition:all 0.3s;}

.main_slider_nav .swiper_navigation > button:hover > span {opacity:1; }
.main_slider_nav .swiper_navigation > button:hover:after {opacity:0;}

.main_slider_nav .swiper_navigation .swiper_totalpage { position:relative; top:2px; display: inline-block; font-size:14px; color:#000; margin-right:5px; display:none; } 
.main_slider_nav .swiper_navigation .swiper_totalpage .now { display:none; font-weight:300; } 
.main_slider_nav .swiper_navigation .swiper_totalpage .now2 { display:none;  } 

.main_slider_nav .swiper_navigation .swiper-button-prev { position:relative; display: inline-block; margin-right:12px; display:none; }
.main_slider_nav .swiper_navigation .swiper-button-next { position:relative; display: inline-block;  margin-left:12px; display:none; } 


.main_slider_nav .swiper-pagination-fraction { bottom:revert; left:revert; width:revert; } 
.main_slider_nav .swiper-pagination .swiper-pagination-bullet { display:none; } 

.main_slider_nav .swiper_navigation .swiper-button-prev > span {left:0px; width:40px; height:40px; background:url('/common/theme/layout/images/common/webtoon_prev.png') no-repeat; }
.main_slider_nav .swiper_navigation .swiper-button-next > span {right:0px; width:40px; height:40px;  background:url('/common/theme/layout/images/common/webtoon_next.png') no-repeat;}


.main_slider_nav .swiper-button-prev, .swiper-button-next { top:0; margin-top:0px; } 
.main_slider_nav .swiper-button-prev:after {content: '';}
.main_slider_nav .swiper-button-next:after {content: '';}

.main_slider_nav .swiper_play_state .material-icons { color:#333; font-size:24px; opacity:0.7; } 
.main_slider_nav .swiper_play_state.play .swiper_state_pause {opacity: 1; visibility: visible;}
.main_slider_nav .swiper_play_state.pause .swiper_state_play {opacity: 1; visibility: visible;} 

.main_slider_nav input { position:relative; font-size:1rem; color:#000; font-weight:600; width:40px; height:35px; border:1px solid #bebebe; background:#bebebe; text-align:center; border-radius:5px; padding-left:10px; } 
.main_slider_nav input[type=text]:focus {border-color:#bebebe !important; box-shadow:revert; }

.page_wrap { position:relative; } 
.page_wrap .sharp { position:absolute; left:10px; top:11px; font-size:1rem; color:#000; font-weight:600; z-index:1; }