@charset "utf-8";

/* ------------------------------------------------------- HEADER ------------------------------------------------------- */
.header_top, .svips, .util {display:none; }

#hd {position:relative;margin:0 auto;width:100%;border-bottom:0px solid rgba(255,255,255,0);background:#151515;z-index:1000;}
#hd:before, #hd:after {clear:both;content:'';display:block;}
#hd.fixed-top {position:fixed !important;top:0;left:0;right:0;animation:header_fix .3s ease-in-out forwards} /* Header Fixed */
#hd.fixed-top .header_top {display:none; animation:header_fix2 .3s ease-in-out forwards}
.header_top {justify-content: space-between;align-items: flex-start;padding:2rem 0; border-bottom:solid 1px #aaaaaa20;  }
.header_top a {color:#888888}
/* Family site Link */
.other_home {float:left}
.other_home > ul > li {float:left;padding:0 15px; position:relative;}
.other_home ul li a {line-height:38px; font-size:15px; color:#888}
.other_home ul li a:hover {color:#bbb}
.other_home ul li:after { content:""; transition: transform 0.3s; position:absolute; left:0; top:13px; width: 2px; height: 14px; background:#2a2a2a; z-index: -1; }
.other_home ul li:first-child:after { border:none; background:none;}

.other_home ul li.on:first-child {padding-left:0}
.other_home ul li.on a{color:red; font-weight:bold;}
.other_home ul ul {display:inline; padding:0 ;}
.other_home ul ul li {display:inline; padding:0px 6px;}
.other_home ul ul li:first-child {display:inline; padding:0px 6px 0 0;}
.other_home ul ul li:last-child {display:inline; padding:0px 0 0 6px;}

/* Logo */
#hd .logo {display:inline-block;}
#hd .logo a { display:inline-block;height:100%;}
#hd .logo a img {width:180px;margin-top:-10px}

/* Naviation */
.main_nav {display: flex;justify-content: space-between;align-items: center;padding: 25px 0;}

/* 네비게이션 */
#hd .gnb {display:none;}
#hd .gnb {position: relative;}
#hd .gnb nav {position:relative;}
#hd .gnb nav > .depth1 {display: flex;flex-wrap: nowrap margin-left:-1.2rem;margin-right:-1.2rem;}
#hd .gnb nav > .depth1 > li {padding:0 1rem; }
#hd .gnb nav > .depth1 > li > a {position:relative;display:inline-block;font-size:1.9rem; white-space:nowrap;font-weight:bold;color:var(--text-white);padding:7px 0}
#hd .gnb nav > .depth1 > li.on > a:after { content:""; transition: transform 0.3s; position:absolute; left:0; bottom:17px;  border:none;width: 100%; height: 7px; background:#0072e8; z-index: -1;opacity: 0.5;}
	
/* Button - All menu */
.btn_menu{width:40px;height:21px;display:inline-block;z-index:99999;position:relative;}
.btn_menu:focus,
.btn_menu:visited {color:#111}
.btn_menu .inner {position:relative;display:inline-block;width:24px;height:16px;vertical-align:middle;}
.btn_menu .line {position:absolute;right:0;width:100%;height:2px;background-color:#fff;transition:0.3s all ease-out;-webkit-transition:0.3s all ease-out;font-size:0;line-height:0;}
.btn_menu .tline{top:0px;}
.btn_menu .mline{top:50%;margin-top:-1px;}
.btn_menu .bline{bottom:0px;}

/* Button - All menu Close */
.modal_open .btn_menu .tline,
.modal_open .btn_menu:focus .tline{top:7px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.modal_open .btn_menu .mline{display:none;}
.modal_open .btn_menu .bline,
.modal_open .btn_menu:focus .bline{bottom:7px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}


/* All menu layer */
#menu {opacity:0;display:none;z-index:-1;}
.menu #menu {display:block;opacity:1;z-index:9999;animation:menu_on0 .4s ease-in-out forwards;}

#menu {position:fixed;top:0;left:0;bottom:0;right:0;margin:auto auto;transition:all .3s ease;overflow-y:scroll;width:100%;height:100%;background-color:#151515;}
#menu .allmenu {padding:2.2rem}
#menu .allmenu .title {font-size:1.2rem;font-weight:bold}

#menu .allmenu .menu_top {border-bottom:1px solid #ffffff30; padding-bottom:1.2rem}
#menu .allmenu .menu_top .login_wrap .mlogo { display:inline-block; overflow:hidden; width:40px; height:40px; vertical-align:middle; margin-right:15px; padding:0; }
#menu .allmenu .menu_top .login_wrap .mlogo img {height:100%;  max-width: initial;}
#menu .allmenu .menu_top .login_wrap a { color:#fff; font-size:1.4rem; display:inline-block; padding:0 10px; } 
#menu .allmenu .menu_top ul {display: flex;justify-content: center;align-items: center;margin-top:2.6rem}
#menu .allmenu .menu_top ul li {width:25%}
#menu .allmenu .menu_top ul li a {display: flex;flex-direction: column;align-items: center;justify-content: center}
#menu .allmenu .menu_top ul li a .icon {margin-bottom:1.2rem}

#menu .allmenu .menu_all {margin-top:2rem}
#menu .allmenu .depth1 > li {position:relative;color:var(--text-gray1);display:block;padding-bottom:0.4rem;padding-top:1rem;padding-bottom:1rem;  }
#menu .allmenu .depth1 > li > a {position:relative;display:inline-block;font-size:2.0rem;;color:var(--text-white);font-weight: bold; padding-left:10px;}
#menu .allmenu .depth1 > li.on > a { color:#ed1f2e;}
#menu .allmenu li .depth2 { position: relative; border:solid 1px #2a2a2a; border-width:1px 0; padding:20px 0 25px 10px; margin-top:0; display:none;  }
#menu .allmenu li.on .depth2 { display:block; margin-top:15px;}
#menu .allmenu .depth2:before,
#menu .allmenu .depth2:after {clear:both;display:block;content:'';}
#menu .allmenu .depth2 > li {float:left;width:50%}
#menu .allmenu .depth2 > li > a {display:block;padding-top:1rem;color:var(--text-white);font-size:1.7rem;}

#menu .allmenu .mtopguick span.icons { display:block;width:24px;height:24px;vertical-align:middle;background-image:url('/eng/img/layout/ico_quickmenu3.png');
					background-repeat:no-repeat;background-position:0 50%;margin-top:-2px; }
#menu .allmenu .mtopguick span.icons.i_film {background-position:-56px 50%}
#menu .allmenu .mtopguick span.icons.i_calendar {background-position:-126px 50%}
#menu .allmenu .mtopguick span.icons.i_ticket {background-position:-28px 50%}
#menu .allmenu .mtopguick span.icons.i_catalog {background-position:-103px 50%}
#menu .allmenu .mtopguick span.label3 {color:#fff;display:block;padding:10px 0}

#menu .allmenu .m_family { margin: 20px 0;}
#menu .allmenu .family_list li {padding:5px; }
#menu .allmenu .family_list li, #menu .allmenu .family_list li a { display:inline-block; color:#777; font-size:1.5rem; }
#menu .allmenu .family_list li.acfm { display:block; }
#menu .allmenu .family_list li.acfm ul, #menu .allmenu .family_list li.acfm li {display:inline;}

/* sub navigation */
#snb {background:#1d1d1d;text-align:center; }
#snb .snb_ul {padding:15px 0;}
#snb .snb_ul li {padding:0px;}
#snb .snb_ul li a {display:inline-block;color:#fff;color:rgba(255,255,255,.8);font-size:16px;line-height:40px;padding:0 10px;letter-spacing:-0.5px}
#snb .snb_ul li.current a { color:#ffffff;font-weight:bold}
#snb .snb_ul li.current i { color:#ffffff;font-weight:bold}
/*#snb #snbul2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5%, auto));	}*/
	
	@media (max-width:1280px) {
		.hd_menu {width:100%;padding-left:15px;padding-right:15px;}	
		#snb #snbul2 { display: block}
	}
	
	@media (max-width:768px){
		
		#snb:before,
		#snb:after,
		#snb .snb_ul:before,
		#snb .snb_ul:after {clear:both;content:'';display:block;}
		
		#snb {overflow-x:scroll}
		#snb .snb_ul {display:table;overflow-x:scroll;padding-left:10px;padding-right:10px}
		#snb .snb_ul li {display:table-cell;white-space:nowrap;float:none;padding:0px 5px}
		#snb .snb_ul li a {line-height:46px;font-size:14px;padding:0 10px;color:#ffffff;font-weight:bold;}
		#snb .snb_ul li.current a {position:relative;background:#ffffff;color:#1d1d1d;}
		#snb .snb_ul li.current a:after {content:'';display:inline-block;position:absolute;left:0;bottom:0;width:100%;height:3px;background:#ffffff}
		#snb #snbul2 { grid-template-columns: repeat(auto-fill, minmax(20%, auto));	}

		#cont .con_tit_wrap .con_tit {font-size:24px;letter-spacing:-1px;}


	}



.sub_title_wrap {position:relative;padding:50px 0 60px 0  ;}
.sub_title_wrap:before,
.sub_title_wrap:after {clear:both;display:block;content:'';}
.sub_title_wrap h2.en {font-size:5.6rem;font-weight:700 !important;color:#111; text-align:center; letter-spacing:-2px;}
.sub_title_wrap h2.en i{font-size:5.6rem;font-weight:700 !important;color:#111; text-align:center; letter-spacing:-2px;}
.sub_title_wrap h2.kor {font-size:38px;line-height:1.5;font-weight:bold;letter-spacing:-1.8px; }


.d3tab_basic  {margin:0 0 50px}
.d3tab_basic ul {text-align:center;}
.d3tab_basic li {padding:5px 3px; display:inline-block; margin:0 5px;}
.d3tab_basic li:before{ content: " ";  position: relative; width: 5px; height: 5px; display: inline-block; vertical-align: super; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; background-color:#aaa; }
.d3tab_basic li:first-child:before {content:"";display:none;}
.d3tab_basic li a {display:inline-block; font-weight:700; color:#aaa;font-size:2.2rem;line-height:1.5; padding: 10px 0 10px 18px; }
.d3tab_basic li.on a {color:#111;  }


@media only all and (max-width:414px) {
	.d3tab_basic ul { overflow-x: scroll; display: flex;}
	.d3tab_basic li { white-space: nowrap; }

	.sub_title_wrap h2.en{font-size:40px;}
}



@media (min-width: 768px) {
	.header_top {display:flex;}
}

.loc_box { margin:20px 0;}
.loc_box .loc_bul { position: relative; width: 3px; height: 3px; display:  inline-block; margin: 0 7px; vertical-align: middle; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; background-color:#aaa; }


/*------------------------------- PC -------------------------------*/
@media (min-width: 1200px) {
	
	.svips {display:inline-block; text-align:right; }
	.svips a:nth-child(1){display:inline-block; margin-bottom:1.5rem; padding-right:0.2rem}
	.btn_menu {display:none;}
	.header_top {padding:1.5rem 0;}
	
 	/* Logo */
	#hd .logo a img {width:250px} 
	
	/* Naviation */
	.main_nav {position:relative;display: flex;justify-content:space-between;flex-grow: 1;padding-bottom:2.2rem}
	.main_nav .main_nav_left {display: flex;flex-direction: row;justify-content:flex-start;align-items: center}
	.main_nav .main_nav_center{padding-left:3.2rem;}

	.util {display: flex;justify-content: flex-end;align-items:center;}
	.util_list {position:relative;display:flex;align-items:center;justify-content: flex-start;margin-left:-1.3rem;margin-right:-1.3rem}
	.util_list li {position:relative;padding:0 1.3rem;}
	.util_list li:not(:last-child) {padding-right:1.3rem}
	.util_list li a {display:block;color:var(--text-gray3);font-size: 15px; line-height:38px}	
	.util .lang_btn {border-radius:50px;-webkit-border-radius:50px;margin-left:2.4rem}

	
/* 네비게이션 */
	#hd .gnb {position: relative;padding-right:2.4rem; display:block;}
	#hd .gnb nav {position:relative;}
	#hd .gnb nav > .depth1 {display: flex;flex-wrap:wrap;width:auto; }
	#hd .gnb nav > .depth1 > li {padding:0.5rem 1.5rem; position: relative; text-align: center; border-bottom:solid 4px transparent; }
	#hd .gnb nav > .depth1 > li.active { border-bottom:solid 4px #e81e2d; }
	#hd .gnb nav > .depth1 > li > a {display:inline-block;font-size:1.8rem;white-space:nowrap;font-weight:600;color:var(--text-white);}

	

.nav_depth2_wrap {display:none; position:absolute;top:54px; padding: 0;margin:0 auto; left: 50%; right: auto; transform: translate(-50%,0); z-index:100;}
.nav_depth2_wrap h2 {display:none;float:left;width:15%;font-size:38px;line-height:48px;font-weight:bold;letter-spacing:-1px;color:#5bc1c6;text-align:left;} 
.nav_depth2_wrap .btn_gnb_cls {position:absolute;bottom:0;right:0}

.gnb nav .depth2 { margin:0; border:solid 1px #010101; background:#272727; padding:25px 50px; min-width:250px; }
.gnb nav .depth2.grid3 { display: grid;grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 700px; }


.gnb nav .depth2 > li { margin:0;padding:0; }
.gnb nav .depth2 > li:hover {border-color:#e81e2d;}
.gnb nav .depth2 > li > a {font-size:17px;display:table-cell;vertical-align:middle;padding:7px 0px;color:#fff;font-weight:500; white-space: nowrap;position:relative;}
.gnb nav .depth2 > li > a:hover,
.gnb nav .depth2 > li > a.on {cursor:pointer;}
.gnb nav .depth2 > li > a:hover:after,
.gnb nav .depth2 > li > a.on:after { content:url(/eng/img/cmm/icon_gnb_arr.png);position: absolute; right: -20px; top: 8px;}





	.quick {display:block;padding-left:2.4rem;border-left:1px solid var(--line-gray1);}
	.quick .depth1 li {padding-left:2rem;padding-right:2rem;}
	.quick .depth1 li a {font-size: 1.8rem;}
	

	/* All menu layer */		
	#menu {position:absolute;top:60px;left:auto;right:0;bottom:auto;height:auto;border:1px solid var(--line-gray1); box-shadow:var(--shadow1); border-radius:var(--radius-s);width:370px}
	#menu .allmenu {max-height: 640px;overflow-y: scroll}
	
	
	
}






#bannerzone {border-top:solid 1px #cccccc50; padding:20px 0; margin:0; background:#f5f5f5 }
/*.logo_fixed { position: absolute; padding-left:30px }
.logo_scroll {padding: 0 30px 0 10%;}*/

#bannerzone .sponsor {position:relative;width:100%; margin:auto; padding:25px 0 }
#bannerzone .sponsor:after {display:block;content:'';clear:both}
#bannerzone .sponsor ul {position:relative; }
#bannerzone .sponsor ul li { float:left; padding:0 15px; }
#bannerzone .sponsor ul li img {}



#scroller li { display:inline-block;}

/* ------------------------------------------------------- FOOTER ------------------------------------------------------- */

#ft {position:relative;margin:0;padding:0;color:var(--text-gray3);text-align:left;background:#222}

.footer_top {display: flex;justify-content: space-between;align-items: center;padding:4.8rem 0; border-bottom:solid 1px #393939; }
.footer_top .fnb {display: none}
.footer_top .fnb h3 {font-size: 1.6rem;line-height: 100%;font-weight: bold;color:var(--text-gray1)}
.footer_top .fnb .depth2 li {margin-top:2rem;line-height: 100%;}


.footer_top .ft_newsletter { color:#fff; text-align:center; margin-top:45px;}
.footer_top .ft_newsletter .nslt1 {font-size:4.0rem; padding-bottom:1.0rem;}
.footer_top .ft_newsletter .nslt2 {font-size:1.7rem; padding-bottom:1.5rem;}
.footer_top .ft_newsletter .btn_nslt { color:#fff; font-size:1.5rem; display:inline-block; padding:9px 60px; border-radius:25px; border:solid 2px #fff; vertical-align: top; }
.footer_top .ft_newsletter .btn_nslt2 {font-size:1.5rem; display:inline-block; height:45px; width:45px; border-radius:50%; border:solid 2px #fff; background:url(/eng/img/cmm/btn_nslt2.png) no-repeat 50% 50%;}

.footer_middle { padding:7rem 0;}
.footer_middle .fm {}
.footer_middle .fm li {  position:relative; display:inline-block; width:auto; float: left;}
.footer_middle .fm li a {color:#cccccc; font-size:1.5rem; padding:10px 15px;}
.footer_middle .fm li:first-child a { padding-left:0; }
.footer_middle .fm li:before {content:'';position:absolute;top:3px;right:0;width:1px;height:14px;background:#444}
.footer_middle .fm li:last-child:before {content:none}

.footer_middle {display: flex;  justify-content: flex-start;align-items: flex-start;}
.ft_newsletter .ft_sns {display: flex;justify-content: space-around;align-items: center; }
.ft_newsletter .ft_sns a {padding-left:0.7rem;padding-right:0.7rem; padding-bottom:1.0rem; }
.ft_newsletter .ft_sns a:hover {   }
.ft_newsletter .ft_sns a svg {fill:#888; border-bottom:solid 2px transparent; padding-bottom:8px; }
.ft_newsletter .ft_sns a svg:hover { fill: #f11925; border-bottom:solid 2px #f11925; }

.footer_btm address > span { display:block; font-size:1.6rem; padding-bottom:5px;}
.footer_btm address > span > span { font-weight:500;}
.footer_btm .copyright { display: flex;justify-content: flex-start; font-size:1.6rem; padding:50px 0}

@media (min-width: 1200px) {
	
	.footer_middle .ft_sns {display: flex;justify-content: flex-end;align-items: center;margin-left:-1.2rem;margin-right:-1.2rem; margin-top:0px; }
	.footer_top .fnb {display: block}
	.footer_btm {display: flex; flex-direction: row; justify-content:space-between;align-items: flex-end;padding-top:0;padding-bottom:4.8rem}
	.address {padding-top:3.2rem; }
	.footer_top .ft_newsletter {  margin-top:0px;}
	.footer_btm .copyright { display: flex;justify-content: flex-end; font-size:1.6rem; padding: 0}
}



.fixed_button {position: fixed;right:24px;bottom:24px}




/* 드래그 블록 색상 */
::selection {background:#111;color:#FFF;text-shadow:none;}
::-moz-selection {background:#111;color:#FFF;text-shadow:none;}
::-webkit-selection {background:#111;color:#FFF;text-shadow:none;}

/* animate */
@keyframes header_fix{0%{opacity:0}100%{opacity:1}}
@keyframes header_fix2{100%{opacity:1}0%{opacity:0}}
@keyframes menu_on0{0%{opacity:0}100%{opacity:1}}
@keyframes menu_on1{0%{transform:translateY(50%) rotateX(90deg)}100%{transform:translateY(0) rotateX(0)}}




.quickmenu_wrap {position:fixed;z-index:500;right:0;bottom:0}


.btn_floating {display:block;width:108px;height:108px;position:fixed;right:80px;bottom:60px;background:#e90819;border-radius:50%;cursor:pointer;z-index:499;
					-webkit-transition:all 300ms;transition:all 300ms;}
.btn_floating button { display: block;position: absolute;left: 0;right: 0;height: 100%;width: 100%;top: 0;bottom: 0;text-align: center;color:#fff; border:none; background:none; font-weight:600; }
.btn_floating:hover{background: #e10011; }
.btn_floating .quickmenu_control_txt {display: block;padding:0;font-size:14px; text-align: center;color: #fff;-webkit-transition: opacity 250ms;transition: opacity 250ms;}
.btn_floating .quickmenu_control_icon { left:0px; font-size:24px;-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);opacity: 0;}
.btn_floating .quickmenu_control_icon span { position:relative; padding:0;}
.btn_floating .quickmenu_control_txt:before {content:'';display:block;
							width:108px;height:108px;background:url(/kor/img/layout/ico_quickmenu_btn.png) no-repeat center center;}

.btn_floating.active{background:#151515;}
.btn_floating.active .quickmenu_control_txt {opacity: 0; -webkit-transition: none;transition: none;}
				 /*.btn_floating.active .quickmenu_control_icon {opacity: 1; top:-2px;
				-webkit-transition: opacity 120ms, -webkit-transform 500ms;transition: opacity 120ms, -webkit-transform 500ms;transition: transform 500ms, opacity 120ms;transition: transform 500ms, opacity 120ms, -webkit-transform 500ms;} */
.btn_floating.active .quickmenu_control_icon span { position:relative; padding:0;}
.btn_floating.active .quickmenu_control_txt{opacity: 1; -webkit-transition: opacity 120ms, -webkit-transform 500ms;transition: opacity 120ms, -webkit-transform 500ms;transition: transform 500ms, opacity 120ms;transition: transform 500ms, opacity 120ms, -webkit-transform 500ms;}
.btn_floating.active .quickmenu_control_txt:before {content:'';display:block;
							width:108px;height:108px;background:url(/kor/img/layout/ico_quickmenu_close.png) no-repeat center center; }

#quickmenu_box {position:fixed;width:210px;right:30px;top:inherit;bottom:190px;border-radius:6px;
				overflow:hidden;opacity:0;visibility:hidden;-webkit-transition:color 300ms;transition:color 300ms;
				box-shadow:1px 1px 10px rgba(0,0,0,.4);}
#quickmenu_box.on {transform: matrix(1, 0, 0, 1, 0, 0); visibility: inherit; opacity: 1;}
#quickmenu > li {background-color:#fff; padding:0 20px; height:57px; line-height:57px; border-bottom:1px solid #eee;}
#quickmenu > li:last-child{border-bottom:0;}
#quickmenu > li:hover{background:#eee;}
#quickmenu > li:before {content:'';display:inline-block;width:30px;height:30px;vertical-align:middle;
					background-repeat:no-repeat;background-position:0 50%;margin-right:15px;}

/* #quickmenu > li.quick_soldout:before {background-image:url('/kor/img/layout/ico_quickmenu3.png');} */
#quickmenu > li.quick_ticketing:before {background-image:url('/kor/img/layout/ico_quickmenu_ticket.png');} 
#quickmenu > li.quick_online:before {background-image:url('/kor/img/layout/ico_quickmenu_online.png');}
#quickmenu > li.quick_check:before {background-image:url('/kor/img/layout/ico_quickmenu_check.png');}
#quickmenu > li.quick_tica:before {background-image:url('/kor/img/layout/ico_quickmenu_tica.png');}
#quickmenu > li.quick_faq:before {background-image:url('/kor/img/layout/ico_quickmenu_faq.png');}
#quickmenu > li.quick_chant:before {background-image:url('/kor/img/layout/ico_quickmenu_chant.png');}
#quickmenu > li.quick_kakao:before {background-image:url('/kor/img/layout/ico_quickmenu_kakao.png');}
#quickmenu > li.quick_onair:before {background-image:url('/kor/img/layout/ico_quickmenu_onair.png');}

#quickmenu > li a {display:inline-block;color:#111;font-size:16px;font-weight:700;letter-spacing:-0.5px;}



@media (max-width:1024px) { 
	.btn_floating{right:20px; bottom:20px;}
}

@media (max-width:768px) { 
	.btn_floating{width:70px; height:70px;}
	.btn_floating .quickmenu_control_txt:before{width:70px; height:70px; background-size:35px;}
	.btn_floating.active .quickmenu_control_txt:before{width:70px; height:70px; background-size:20px;}
	#quickmenu_box{right:20px; bottom:100px;}
}