@charset "utf-8";
/* CSS Document */

#container													{ position:relative;overflow:hidden;padding-bottom:8em; margin-top:-151px;}
#content													{z-index:3;}

@media all and (max-width:1568px){
    #container														{ padding-bottom:6em;}
}


@media all and (max-width:1268px){
    #container														{padding-bottom:4em; }
}

@media (max-width: 1024px) {
    #container											{margin-top:-100px;}
}


@media all and (max-width:868px){
    #container														{ margin-top:-88px;padding-bottom:3em;  }
}

@media all and (max-width:468px){
    #container														{ margin-top:-80px; }
}


/**********************************************************************

 								비주얼

**********************************************************************/
.visual																				{ position:relative; width:100%; height:560px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; }
.visual::before																		{ position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.45); content:'';  }
.visual.bg1																			{ background-image:url(/resource/strange/images/sub/sub_visual01.jpg); }
.visual.bg2																			{ background-image:url(/resource/strange/images/sub/sub_visual02.jpg); }
.visual.bg3																			{ background-image:url(/resource/strange/images/sub/sub_visual03.jpg); }
.visual.bg4																			{ background-image:url(/resource/strange/images/sub/sub_visual04.jpg); }

.visual .con_inner																	{position:relative;height:100%;z-index:1;}
.visual .text_wrap																	{ position:absolute; top:50%; left:50%;  transform:translate(-50%,-20%);color:var(--color-white); display:flex; flex-flow:column; width:100%;z-index:1;  justify-content:center; align-items:center }
.visual .text_wrap .sub_txt													{font-size:1.25em;font-weight:300;letter-spacing:-0.045em;margin-bottom:.75em;line-height:1;}
.visual .text_wrap .visual_title													{ position:relative; line-height:1; font-size:4em; font-weight:700;letter-spacing:0; text-align: center;}


/* 공유 */
.visual .page_util																	{ position:absolute; right: 0; bottom: 1.25em;z-index:3; display:flex; justify-content:center; align-items:center; --sizeHig:clamp(30px, 2vw + 20px, 40px); gap:6px;  }
.visual .page_util>li																{ position:relative; }
.visual .page_util>li>button														{ display:flex; width:var(--sizeHig); height:var(--sizeHig); border-radius:100%; border:1px solid var(--color-white) }
.visual .page_util>li>button:before													{ content:''; flex:none; display:block; width:100%; height:100%; margin:0 auto; background-repeat:no-repeat; background-position:50% 50%; filter:invert(1);}
.visual .page_util>li .share_bt:before												{ background-image:url(/resource/strange/images/sub/ico_share.svg); background-size:16px; margin-top:-.5px}
.visual .page_util>li>button.copy:before											{ background-image:url(/resource/strange/images/sub/ico_copy_link.svg);}
.visual .page_util>li>button.print:before											{ background-image:url(/resource/strange/images/sub/ico_print.svg); background-size:17px 16px;}
.visual .page_util>li>button.braille:before											{ background-image:url(/resource/strange/images/sub/ico_bx_link.svg); background-size:19px 10px;}
.visual .page_util>li>button.braille_down:before									{ background-image:url(/resource/strange/images/sub/ico_bx_down.svg); background-size:21px 13px; background-position:50% 55%}
.visual .page_util>li.share .share_drop												{ display:none; position:absolute; top:-1px; left:-3px; z-index:10; width:calc(var(--sizeHig) + 6px); box-sizing:border-box; background-color:var(--color-white);
    border:1px solid #e5e5e5;  text-align:center; z-index:1 ; border-radius:25px;}


.visual .page_util>li.share .share_drop ul											{ padding-top:10px; display:flex; flex-flow:column; gap:7px; }
.visual .page_util>li.share .share_drop ul > li a									{ display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.visual .page_util>li.share .share_drop ul > li[data-share] a:before				{ content:''; display:block; width:30px; height:30px; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 100%; border-radius:100%; }
.visual .page_util>li.share .share_drop ul > li[data-share="blog"] a:before			{ background-image:url(/resource/strange/images/sub/icon_blog.svg); background-color:#32b44a;}
.visual .page_util>li.share .share_drop ul > li[data-share="youtube"] a:before		{ background-image:url(/resource/strange/images/sub/icon_youtube.svg); background-color:#e03232;}
.visual .page_util>li.share .share_drop ul > li[data-share="facebook"] a:before		{ background-image:url(/resource/strange/images/sub/icon_facebook.svg); background-color:#385691;}
.visual .page_util>li.share .share_drop ul > li[data-share="instar"] a:before		{ background:url(/resource/strange/images/sub/icon_instar.svg) no-repeat 50% 50% / cover, linear-gradient(to bottom right, #4a48e8 20% , #ee3183 60%, #f0c05c 100%);}
.visual .page_util>li.share .share_drop ul > li[data-share="kakao"] a:before		{ background-image:url(/resource/strange/images/sub/icon_kakaoch.svg); background-color:#ffde00; }
.visual .page_util>li.share .share_drop ul > li[data-share="twitter"] a:before		{ background-image:url(/resource/strange/images/sub/icon_twitter.png); background-color:#000;}
.visual .page_util>li.share .share_drop ul > li[data-share="band"] a:before			{ background-image:url(/resource/strange/images/sub/icon_band.png); background-color:#50b748;}
.visual .page_util>li.share .share_drop ul > li[data-share="copy"] a:before			{ background-image:url(/resource/strange/images/sub/icon_copy.svg); background-color:#555555;}
.visual .page_util>li.share .share_close											{ position:relative; width:30px; height:30px; margin-top:10px; margin-bottom:5px; background:#e5e5e5; border-radius:100%;}
.visual .page_util>li.share .share_close::before									{ position:absolute; width:1px; height:11px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg); content:''; background:var(--color-base); }
.visual .page_util>li.share .share_close::after										{ position:absolute; width:1px; height:11px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-45deg); content:''; background:var(--color-base);}
.visual .page_util>li.share .share_close:hover										{ transform:rotate(90deg); }

.visual .scroll_down 																		{width: 100%;text-align: center;position: absolute;bottom: 0; left: 0;display: flex;justify-content: center;filter: invert(1) brightness(10);mix-blend-mode: difference;margin-bottom: -70px;pointer-events: none;display:none;}
.visual .scroll_down .spinner 															{width: 140px;height: 140px;display: flex;align-items: center;justify-content: center;z-index: 3;}
.visual .scroll_down .spinner i 														{position:absolute;width:100%;height:100%;display:block;background:url("/resource/strange/images/sub/icon_down_arr.svg") no-repeat center center / auto 20px;animation: updown 1s alternate-reverse ease-in-out infinite;}
.visual .scroll_down .spinner img 														{animation: rotate 8s infinite linear;}

@keyframes rotate {
    0% { transform:rotate(0); }
    100% { transform:rotate(360deg); }
}



@media all and (max-width:1468px) {
    .visual 																			{ height: 520px;}
    .visual .text_wrap .visual_title												{font-size:3.75em;}
}

@media all and (max-width:1268px) {
    .visual 																			{ height: 480px;}
    .visual .text_wrap .visual_title												{font-size:3.5em;}
    .visual .text_wrap .sub_txt														{font-size:1.125em;}
    .visual .scroll_down															{margin-bottom:-65px;}
    .visual .scroll_down .spinner 													{width:130px;height:130px;}
}

@media all and (max-width:1024px) {
    .visual 																			{ height: 420px;}
    .visual .text_wrap .visual_title												{font-size:3.25em;}
    .visual .scroll_down															{margin-bottom:-60px;}
    .visual .scroll_down .spinner 													{width:120px;height:120px;}
}


@media all and (max-width:768px) {
    .visual																					{height:340px;}
    .visual > .con_inner																{position: absolute;top: 50%;display: flex;flex-wrap: wrap;flex-flow: column;justify-content: center;left: 50%;transform: translate(-50%, -47%);align-items: center;}
    .visual .text_wrap																		{position:initial;transform:translate(0,0);}
    .visual .text_wrap .sub_txt															{font-size:1.063em;}
    .visual .text_wrap .visual_title												{font-size:2.75em;}
    .visual .page_util																		{position:initial;margin-top:1.25em;}
    .visual .page_util>li .share_bt:before,
    .visual .page_util>li>button.print:before										{ background-size:auto 14px; }
    .visual .page_util>li>button.braille:before										{ background-size:auto 9px; }
    .visual .page_util>li>button.braille_down:before								{ background-size:auto 12px; }
    .visual .scroll_down															{margin-bottom:-50px;}
    .visual .scroll_down .spinner 													{width:100px;height:100px;}
}

@media all and (max-width:468px) {
    .visual																					{height:300px;}
    .visual .text_wrap .sub_txt															{font-size:1em;}
    .visual .text_wrap .visual_title												{font-size:2.5em;}
    .visual .scroll_down															{margin-bottom:-40px;}
    .visual .scroll_down .spinner 													{width:80px;height:80px;}
}

@media all and (max-width:368px) {
    .visual .text_wrap .visual_title												{font-size:2.375em;}
}


/**********************************************************************

 								내용

**********************************************************************/

/* 타이틀 */
.title_h3														{ position:relative;padding-top:6.5em; text-align:center; margin-bottom:60px; }
.title_h3 h3														{font-size:2.813em; line-height:1; margin-bottom:.8em; }
.title_h3 .bullet												{display: inline-flex;gap: 10px; }
.title_h3 .bullet span										{width:10px;height:10px;background:var(--color-point);border-radius:100%;}

.title_h4														 {font-size:1.75em;color:#1e376d;padding-top:0;}
.title_h4::before,
.title_h4::after												{display:none;}

@media all and (max-width:1468px) {
    .title_h3 h3												{font-size:2.5em;}
}

@media all and (max-width:1268px) {
    .title_h3														{padding-top:5.5em;margin-bottom:50px;}
    .title_h3 h3												{font-size:2.375em;margin-bottom:.5em;}
}


@media all and (max-width:1024px) {
    .title_h3													{padding-top:4.5em;margin-bottom:40px;}
    .title_h3 h3												{font-size:2em;}

}


@media all and (max-width:768px) {
    .title_h3														{padding-top:3.5em;margin-bottom:30px;}
    .title_h3 h3												{font-size:1.875em;margin-bottom:.375em;}
    .title_h3 .bullet												{gap:8px;}
    .title_h3 .bullet span										{width:8px;height:8px;}
  
  	.title_h4													{ font-size:1.43em; }
}


/**********************************************************************

 								공통

**********************************************************************/
[data-subarea]													{ overflow:hidden;}
#boardWrap .headList											{padding-top:0;}

/*게시판 카테고리*/
.bd_tabNav														{justify-content: center;gap:12px;border:none;}
.bd_tabNav>li													{flex:none;min-width: initial;border:none;}
.bd_tabNav>li>a													{height:50px;line-height:50px;padding: 0 40px;border-radius:2em;font-size:1.125rem;border: 1px solid #e3e2e1;color:var(--color-base1);}
.bd_tabNav>li>a:focus,
.bd_tabNav>li>a:hover											{color:var(--color-point);}
.bd_tabNav>li>a.active											{background:var(--color-point);color:#fff;font-weight:600;}


@media all and (max-width: 1668px) {
    #boardWrap 													{width:94%;}
}

@media all and (max-width: 868px) {
	.bd_tabNav													{gap:8px;margin-bottom: 10px;}
	.bd_tabNav>li>a												{height:42px;line-height:42px;padding:0 30px;font-size:1rem;}
}


@media all and (max-width: 468px) {
	.bd_tabNav													{gap: 5px;margin-bottom:0;}
	.bd_tabNav>li>a												{height:38px;line-height:38px;padding:0 24px;font-size:0.94rem;}
}

@media all and (max-width: 368px) {
  	.bd_tabNav>li												{width: calc((100% - 10px) / 2);}
	.bd_tabNav>li>a												{padding:0 20px;}
}




/**********************************************************************

 							게시판 모달

**********************************************************************/		
.modal.film											{ position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto; z-index:999; }
.modal.film::before									{ position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.5); backdrop-filter:blur(10px); transition:opacity 0.2s ease; opacity:0; content:''; z-index:100 }
.modal.film											{ display:none; }
.modal.film.active									{ display:block; }
.modal.film.active::before							{ opacity:1; }
.modal.film .modal_box								{ position:absolute; width:90%; border-radius:15px; background:#fff; left:50%; top:50%; transform:translate(-50%,-50%); padding:2.5em 1.5em; z-index:200 }
.modal.film .w1000									{ max-width:1000px; }	
.modal.film .cont									{ width:100%; max-height:80svh; overflow-x:hidden; overflow-y:auto; padding:0 15px; }													
.modal.film .cont.flex								{ display:flex; flex-wrap:wrap; gap:2em; }
.modal.film .cont .img								{ position:relative; width:350px; }
.modal.film .cont .img img							{ width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.modal.film .cont .info								{ flex:auto; max-width:calc(100% - 350px - 2em); }
.modal.film .cont .info .tit						{ font-size:2em; border-bottom:1px solid rgba(0,0,0,.2); line-height:1.3; padding-bottom:.25em; }
.modal.film .cont .info .cast_list					{ margin-top:1.5em; display:flex; flex-flow:column; gap:5px; }
.modal.film .cont .info .cast_list>li>dl			{ display:flex; gap:5px 15px; align-items:baseline; }	
.modal.film .cont .info .cast_list>li>dl>dt			{ display:flex; line-height:1; width:7em; padding:10px 15px; background:rgba(0,0,0,.05); border-radius:50px; align-items:center; justify-content:center; opacity:.74;  } 	
.modal.film .cont .info .cast_list>li>dl>dd			{ font-size:1.03em;  }
.modal.film .cont .info .synopsis					{ margin-top:1.5em; padding:1.5em; background:rgba(0,0,0,.05); width:100%; max-height:20em; overflow-y:auto; overflow-x:hidden; border-radius:10px; font-size:1.03em; line-height:1.4; opacity:.84;
														word-break: break-all; }
.modal.film .modal_close							{ position:absolute; width:42px; height:42px; border-radius:100%; background:#222; right:1em; top:1em }
.modal.film .modal_close::before,
.modal.film .modal_close:after						{ position:absolute; width:1px; height:21px; background:#fff; left:50%; top:50%; content:''; }
.modal.film .modal_close::before					{ transform:translate(-50%,-50%) rotate(45deg); }
.modal.film .modal_close::after						{ transform:translate(-50%,-50%) rotate(-45deg); }

.modal.film .cont::-webkit-scrollbar 				{ -webkit-appearance: none; width:5px;} 
.modal.film .cont::-webkit-scrollbar-thumb 			{ background-color:#7e7e7e; border-radius:10px; border:1px solid #7e7e7e; } 
.modal.film .cont::-webkit-scrollbar-track 			{ border-radius:10px; background-color: #d2d2d2 ; }
@media all and (max-width:1168px) {
	.modal.film .cont.flex							{ gap:2em 2em; }
	.modal.film .cont .info							{ max-width:calc(100% - 350px - 2em); }
}
@media all and (max-width:968px) {
	.modal.film .cont .img							{ width:300px;  }
	.modal.film .cont .info							{ max-width:calc(100% - 300px - 2em); }

}
@media all and (max-width:868px) {
	.modal.film .modal_box							{ padding:2em 1em; }
	.modal.film .cont								{ padding:0 5px; }
	.modal.film .cont .img							{ width:100%;  }
	.modal.film .cont .info							{ width:100%; max-width:inherit; }
	.modal.film .cont .info .synopsis				{ max-height:inherit; overflow:hidden; }
	.modal.film .modal_close						{ width:35px; height:35px; right:inherit; top:.5em; left:50%; transform:translateX(-50%); }
	.modal.film .modal_close::before,
	.modal.film .modal_close:after					{ height:17px; }
	.modal.film .cont .info .tit					{ font-size:1.8em; }
	
}
@media all and (max-width:468px) {
	.modal.film .cont .info .cast_list>li>dl		{ flex-flow:column; }
	.modal.film .cont .info .cast_list>li>dl>dt		{ width:100%; }
	.modal.film .cont .info .cast_list>li>dl>dd		{ padding:0 10px; }
	.modal.film .cont .info .synopsis				{ padding:1em; }
}