@import url('sub.css'); 




.dark .header {background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.50) 100%); backdrop-filter: blur(5px);}
.dark .header .header_in h1 a svg {filter: brightness(0) invert(1);}
.dark .header .header_in .top_util ul.util-list li a svg path {stroke: var(--white);}
.dark .header .header_in .top_util ul.util-list li a svg line {stroke: var(--white);}
.dark .header .gnb ul li > a {color:var(--white);}
.dark .header .header_in .top_util ul.top-btn li a {background:rgba(255, 255, 255, 0.20);color: var(--white);}
.dark .header .header_in .top_util ul.top-btn li a.recruit {background:rgba(255, 255, 255, 0.20);color: var(--white);}


.dark {background:var(--black2);}
.dark .footer {background:var(--black2);}
.dark .footer .foot_top .logo svg {filter: brightness(0) invert(1);}
.dark .footer .foot_top .foot_info li::after {background:rgba(255,255,255,0.2);}
.dark .footer .foot_top .foot_info li a {color:var(--white);}
.dark .footer address {}
.dark .footer address .fs14 {color:rgba(255,255,255,0.5);}
.dark .footer address .fs14 b {color:var(--white);}
.dark .footer .copyright {border-color:rgba(255,255,255,0.2);}
.dark .footer .copyright .copy {color:var(--white);}
.dark .footer .copyright .privacy {color:var(--white);}
.dark #subtitle {display:none !important;}
.dark #contents::before {content:''; width:100%; height:100%; background:url("/contents/img/intro_bg.png")no-repeat center / cover; position:absolute; top:0; left:0; z-index:-1;}
.dark .basic_cont {padding-bottom:0;}


.header.active {background:transparent;    backdrop-filter: blur(0);}
.header.active .header_in h1 a svg {filter:unset;}
.header.active .header_in .top_util ul.top-btn li a {background:var(--grayBg); color:var(--black);}
.header.active .header_in .top_util ul.top-btn li a:hover {background:var(--main); color:var(--white);}
.header.active .header_in .top_util ul.top-btn li a.recruit {background:var(--black); color:var(--white);}
.header.active .header_in .top_util ul.top-btn li a.recruit:hover {background:var(--lime); color:var(--black);}
.header.active .header_in .top_util ul.util-list li a svg path {stroke:var(--black);}
.header.active .header_in .top_util ul.util-list li a svg line {stroke:var(--black);}




.intro-content {display:flex; flex-wrap:wrap; align-items:center; height:var(--vh); gap:0 150px;}
.intro-content .tBox {width:510px;}
.intro-content .tBox .fs70 {color:var(--white);}
.intro-content .tBox .fs16 {color:var(--white);}
.intro-content .tBox .fs16 b {display:block; width:100%; color:var(--white); margin:15px 0 10px;}
.intro-content .tBox .moreBtn {margin-top:60px; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px);}
.intro-content .tBox .moreBtn span {color:var(--white);}
.intro-content .tBox .moreBtn span::after {background:var(--white);}
.intro-content .tBox .moreBtn span i::before {background:var(--white);}
.intro-content .tBox .moreBtn span i::after {background-color:var(--white);}
.intro-content .tBox .moreBtn:hover span small::before, .intro-content .tBox .moreBtn:hover span small::after {color:var(--black) !important;}
.intro-content .tBox .moreBtn:hover span i::before {background:var(--black);}


.intro-content .intro-list {flex:1; display: flex; justify-content: space-between; gap: 20px;   overflow: hidden; height: 100%;}
.intro-content .marquee_list {flex: 1; overflow: hidden; position: relative;}
.intro-content .marquee_list li.items {position:relative; border-radius:var(--borderR20); overflow:hidden; margin:10px 0 0;}
.intro-content .marquee_list li.items a {display:block;}
.intro-content .marquee_list li.items .img {}
.intro-content .marquee_list li.items .img img {aspect-ratio: 440 / 629;  transition:var(--trans); width:100%;}
.intro-content .marquee_list li.items .img::after {content:''; width:100%; height:100%; background:rgba(0,0,0,0.75); position:absolute; top:0; left:0; z-index:2; opacity:0; visibility:hidden; transition:var(--trans);}
.intro-content .marquee_list li.items .cover {position:absolute; top:0; left:0; width:100%; height:100%; z-index:3; text-align: center; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; padding:0 50px; box-sizing:border-box; opacity:0; visibility:hidden; transform:translateY(20%); transition:var(--trans);}
.intro-content .marquee_list li.items .cover .fs30 {width:100%; color: var(--white); font-size: 1.666rem; font-weight: 700; line-height: 133.333%; letter-spacing: -0.9px;}
.intro-content .marquee_list li.items .cover .fs16 {width:100%; margin:5px 0 0; color:rgba(255,255,255,0.7);}
.intro-content .marquee_list li.items .cover .plus {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width: 60px; flex-shrink: 0; aspect-ratio: 1/1; background:var(--white); font-style:normal; border-radius:100%; margin:35px 0 0;}
.intro-content .marquee_list li.items .cover .plus::before {content:'\e145'; font-size:24px; color:var(--black); font-family:var(--icon); line-height:1;}

.intro-content .marquee_list li.items:hover .img img {transform:scale(1.15); transition:var(--trans);}
.intro-content .marquee_list li.items:hover .img::after {opacity:1; visibility:visible; transition:var(--trans);}
.intro-content .marquee_list li.items:hover .cover {opacity:1; visibility:visible; transform:translateY(0); transition:var(--trans);}



/* 팝업 */
body.popup-open {overflow:hidden;}
.popUp {/* display:none; */ position:fixed; top:0; left:0; width:100%; height:var(--vh); background:var(--white); z-index:9999999; overflow-y:auto; min-width:320px; opacity:0; visibility:hidden; transform:translate(100%); transition:all 1s ease;}
.popUp.active {opacity:1; visibility:visible; transform:translate(0%); transition:all 1s ease;}
.popUp .head {position:fixed; top:0; left:0; width:100%; padding:40px 0; box-sizing:border-box; background:linear-gradient(180deg, #fff 0%, rgba(255,255,255, 0.50) 100%); backdrop-filter: blur(5px); z-index:99;}
.popUp .head .basic_in {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.popUp .head .basic_in h1 {line-height:1;}
.popUp .head .basic_in .pop_close {display:flex; flex-wrap:wrap; align-items:center; color: var(--black); font-family: var(--eng); font-size: 12px; font-weight: 700; line-height: 1;; gap:0 10px;}
.popUp .head .basic_in .pop_close::after {content:'\e5cd'; font-family:var(--icon); line-height:1; display:block; font-size:28px; font-weight:500;}
.popUp .popUp-inner {padding:140px 0; box-sizing:border-box;}
.popUp .popUp-inner .basic_in {display:flex; align-items:flex-start; gap:0 60px;}
.popUp .popUp-inner .basic_in .pop_roll {width:530px; max-width:42%;}
.popUp .popUp-inner .basic_in .pop_roll .slick-list {overflow:hidden; border-radius:var(--borderR20);}
.popUp .popUp-inner .basic_in .pop_roll .slick-list li img {width:100%;}

/* 도트 */
.popUp .popUp-inner .basic_in .pop_roll .slick-dots {display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; margin:15px 0 0; width:100%; justify-content:center; position:relative;  z-index: 9999;}
.popUp .popUp-inner .basic_in .pop_roll .slick-dots li {width:12px; aspect-ratio: 3 / 3; border:1px solid var(--black); box-sizing:border-box; border-radius:100%; background:var(--white);}
.popUp .popUp-inner .basic_in .pop_roll .slick-dots li.slick-active{background:var(--black);}
.popUp .popUp-inner .basic_in .pop_roll .slick-dots li button{border:0; padding:0; font-size:0; outline:none; cursor:pointer; display:block; width:100%; height:100%; background:transparent;}

.popUp .popUp-inner .basic_in .pop_infoBox {flex:1; padding-top:60px; box-sizing:border-box;}
.popUp .popUp-inner .basic_in .pop_infoBox .genre {display:inline-flex; color: var(--main); font-size: 12px; font-weight: 700; line-height: 183.333%; letter-spacing: -0.36px; padding:2px 8px; box-sizing:border-box; border-radius: 5px; background: rgba(71, 66, 151, 0.10); margin-bottom:10px;}
.popUp .popUp-inner .basic_in .pop_infoBox .fs46 {color: var(--black); font-size: 2.875rem; font-weight: 700; line-height:121.739%; letter-spacing: -1.84px;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_info {display:flex; flex-wrap:wrap; margin:15px 0 0;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_info .fs16 {}
.popUp .popUp-inner .basic_in .pop_infoBox .page_info .fs16.year {display:flex; flex-wrap:wrap; align-items:center; flex-shrink: 0; }
.popUp .popUp-inner .basic_in .pop_infoBox .page_info .fs16.year::after {content:''; width:1px; height:9px; background:var(--border); position:relative; margin:0 10px;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_info .fs16.name {flex:1;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox {padding:15px 0; border-radius: var(--borderR10); background: var(--grayBg); display:flex; flex-wrap:wrap; margin:35px 0 0;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li {color: var(--black);  flex:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 5px; letter-spacing: -0.48px; position:relative;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li::before {content:''; width:1px; height:18px; background:var(--border); position:absolute; top:50%; left:0; transform:translateY(-50%); opacity:0;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li+li::before {opacity:1;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li a {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li b {display:flex; flex-wrap:wrap; align-items:center; gap:0 5px; color: var(--black); font-family: var(--eng); font-size: 0.875rem; font-weight: 700; line-height:171.429%;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li b::before {content:''; width:20px; aspect-ratio: 3 / 3; position:relative; display:block;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.view b::before {background:url("/contents/img/view_ico.svg")no-repeat center / 100% auto;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.rating b::before {background:url("/contents/img/star_ico.svg")no-repeat center / 100% auto;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.type_ico a {font-weight: 600; color: var(--black); gap:0 15px;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.type_ico a::before {content:''; width:40px; aspect-ratio: 3 / 3; /* background:url("/contents/img/kakao_svg.svg")no-repeat center / 100% auto; */}

.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.kakaopage a::before {background:url("/contents/img/kakao_svg.svg")no-repeat center / 100% auto;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.ridi a::before {background:url("/contents/img/ridi_svg.svg")no-repeat center / 100% auto;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.naverseries a::before {background:url("/contents/img/series_svg.svg")no-repeat center / 100% auto;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.naverwebtoon a::before {background:url("/contents/img/webtoon_svg.svg")no-repeat center / 100% auto;}


.popUp .popUp-inner .basic_in .pop_infoBox .dep-tit {color: var(--black); font-family: var(--eng); font-size: 1rem; font-weight: 600; line-height: 162.5%; margin:30px 0 10px;}
.popUp .popUp-inner .basic_in .pop_infoBox .global-list {display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.popUp .popUp-inner .basic_in .pop_infoBox .global-list li {}
.popUp .popUp-inner .basic_in .pop_infoBox .tag_list {display:flex; flex-wrap:wrap; gap:5px;}
.popUp .popUp-inner .basic_in .pop_infoBox .tag_list li {font-weight: 600; padding:2px 7px 1px; box-sizing:border-box; border:1px solid var(--border); border-radius: 5px;}

.popUp .popUp-inner .basic_in .pop_story_content {padding-top:40px; margin-top:60px; border-top:1px solid var(--border);}
.popUp .popUp-inner .basic_in .pop_story_content .dep-tit.fs20 {display:flex; flex-wrap:wrap; align-items:center; gap:0 6px;  font-size: 1.25rem; font-style: normal; font-weight: 700; line-height: 150%; margin:0 0 15px;}
.popUp .popUp-inner .basic_in .pop_story_content .dep-tit.fs20::before {content:'';  width:20px; aspect-ratio: 3 / 3; position:relative; display:block; background:url("/contents/img/story_ico.svg")no-repeat center / 100% auto;}






 

/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

.intro-content {gap:0 5%;}
.intro-content .tBox {width:35%;}
.intro-content .tBox br {display:none;}

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

.intro-content {flex-wrap:wrap; display:block;}
.intro-content .tBox {width:100%; padding:150px 0 40px; text-align:center;}
.intro-content .tBox .moreBtn {margin-top:30px; margin-left:auto; margin-right:auto;}
.intro-content .intro-list {height:calc(var(--vh) - 450px); position:relative;}
.intro-content .intro-list::after {content:''; width:100%; height:100px; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%); position:absolute; top:0; left:0;}
.intro-content .marquee_list li.items .cover .plus {width:40px;}

.popUp .head {padding:25px 0;}
.popUp .popUp-inner .basic_in {flex-wrap:wrap;}
.popUp .popUp-inner .basic_in .pop_roll {width:100%; max-width:100%;}
.popUp .popUp-inner .basic_in .pop_infoBox .fs46 {font-size:2.222rem;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.type_ico a::before {width:30px;}


}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

.dark .footer .copyright .privacy {background:rgba(255,255,255,0.2);}

.intro-content  {height:auto;}
.intro-content .tBox {padding:100px 0 30px;}
.intro-content .intro-list {height:600px; position:relative;}
.intro-content .marquee_list li.items .cover {padding:0 15px;}
.intro-content .marquee_list li.items .cover .fs30 {font-size:1.444rem;}
.intro-content .marquee_list li.items .cover .plus {width:30px; margin:15px 0 0;}
.intro-content .marquee_list li.items .cover .plus::before {font-size:18px;}

.popUp .popUp-inner {padding:90px 0;}
.popUp .head .basic_in .pop_close::after {font-size:24px;}
.popUp .popUp-inner .basic_in .pop_roll .slick-dots {gap:0 6px;}
.popUp .popUp-inner .basic_in .pop_roll .slick-dots li {width:8px;}
.popUp .head .basic_in h1 img {width:130px; height:auto;}
.popUp .popUp-inner .basic_in .pop_infoBox {padding-top:30px;}
.popUp .popUp-inner .basic_in .pop_infoBox .fs46 {font-size:1.666rem;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_info {margin:10px 0 0;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox {margin:15px 0 0; padding:6px 12px; }
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li {width:100%; flex:none; justify-content:flex-start;  padding:10px 0}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li::before {display:none;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li+li {border-top:1px dashed var(--border);}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.type_ico a {justify-content:flex-start; gap:0 5px;}
.popUp .popUp-inner .basic_in .pop_infoBox .page_grayBox li.type_ico a::before {width:20px;}
.popUp .popUp-inner .basic_in .pop_infoBox .dep-tit {margin:20px 0 5px;}
.popUp .popUp-inner .basic_in .pop_infoBox .global-list {gap:4px;}
.popUp .popUp-inner .basic_in .pop_infoBox .global-list li img {max-height:30px;}
.popUp .popUp-inner .basic_in .pop_story_content {padding-top:20px; margin-top:30px;}
.popUp .popUp-inner .basic_in .pop_story_content .dep-tit.fs20::before {width:16px;}

}