@charset "utf-8";
@import url('../../assets/css/fonts_a0feae9484.css');
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
nav, output, ruby, section, summary, time, mark, audio, video
{ margin:0;padding:0;border:0;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block;}
html {height:auto;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none; }
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: "";content:none;}
table {border-collapse:collapse;border-spacing:0;}
a {text-decoration:none;color:inherit;}
a:hover {text-decoration:none;}
legend, caption, hr {display:none;}
em {font-style:normal;}
img {vertical-align:top;max-width: 100%;}
input {vertical-align:middle;}
p,h3,h2,h1{letter-spacing: normal;}
input,textarea,button,select{ font-family:"YoonGothic",  sans-serif; color: #222;font-weight: 500}
section{width:100%;text-align: center;}
body{font-family:"YoonGothic",sans-serif;width: 100%;height: 100%; color:#222;background-color: #fff;min-width:1300px;font-weight: 500}

video{object-fit: fill;}
#wrap, .wrap{overflow: hidden;width: 100%;position: relative}
/*#wrap #contents{max-width: 2000px;margin: 0 auto}*/
.fclear{*zoom:1}
.fclear:after{display:block;content:"";clear:both;}
.ir_text {text-indent: -9999px;overflow: hidden;font-size: 0 ;height: 0;}
.ir_text >*{text-indent: -9999px;overflow: hidden;font-size: 0 ;height: 0;}
.cap{text-transform: uppercase !important;}
.en{font-family: "Gotham";}
.eng{font-family: "Gotham";}
.enBold{font-family: "Gotham";font-weight: 900}
.gradation-hor{
    background: rgb(0,102,255);
    background: -moz-linear-gradient(left,  rgba(0,102,255,1) 1%, rgba(145,71,255,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(0,102,255,1) 1%,rgba(145,71,255,1) 100%);
    background: linear-gradient(to right,  rgba(0,102,255,1) 1%,rgba(145,71,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#0066ff", endColorstr="#9147ff",GradientType=1 );
}

.gradation-ver{
    background: rgb(145,72,255);
    background: -moz-linear-gradient(top,  rgba(145,72,255,1) 0%, rgba(0,102,255,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(145,72,255,1) 0%,rgba(0,102,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(145,72,255,1) 0%,rgba(0,102,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#9148ff", endColorstr="#0066ff",GradientType=0 );

}
.gradation-diaT{
    background: rgb(145,72,255);
    background: -moz-linear-gradient(-45deg,  rgba(145,72,255,1) 0%, rgba(0,102,255,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(145,72,255,1) 0%,rgba(0,102,255,1) 100%);
    background: linear-gradient(135deg,  rgba(145,72,255,1) 0%,rgba(0,102,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#9148ff", endColorstr="#0066ff",GradientType=1 );
}


.mot1 {
    -webkit-transition: all 0.01s;
    -moz-transition: all 0.01s;
    -o-transition: all 0.01s;
    transition: all 0.01s;
}

.mot2 {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.mot3 {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.mot4 {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.mot5 {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.mot6 {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.mot30 {
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

#header{position: fixed;width: 100%;height: 88px;z-index: 999;min-width: 1300px}
#header .bg{position: fixed;width: 100%;height: 100%;z-index: 99;background: rgba(0,0,0,.5);display: none;visibility: hidden;opacity: 0}

#header .inner{position: relative}
#header .nav{display: none;position: absolute; top:0; left:0; width:100%;background: #000;

}
#header .nav:before{content: "";position: absolute;width: 100%;height: 1px;background: #fff;left: 0;bottom:0;opacity: 0.12}

#header .nav.active{display: block}
#header .nav .nav_inner>div,#header .nav .nav_inner>h1{float: left}
#header .nav .nav_inner{position: relative}
#header .nav .nav_inner .depth2_bg{float: inherit;position: absolute;top: 88px;width: 100%;height: 64px;background: rgba(255,255,255,.94);border-bottom: 1px solid rgba(0,0,0,.05);visibility: hidden;opacity: 0;
    }
#header .nav .nav_inner .depth2_bg.active{visibility: visible;opacity: 1}
#header .nav .nav_inner .back_home{width: 88px;height: 88px;border-right: 1px solid rgba(255,255,255,.2);text-align: center;
    position:absolute;top: 0;left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
#header .nav .nav_inner .back_home a{display: block;width: 100%;height: 100%;padding: 31px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
#header .nav .nav_inner .back_home a img{width: 24px;height: 24px}
#header .nav .nav_inner h1{padding: 20px 33px;width: 110px;height: 48px;text-align: center;position:absolute;top: 0;left: 88px;}
#header .nav .nav_inner h1 img{height: 100%}
#header .nav .nav_inner .gnb_area{width: 100%;text-align: center;height: 88px}
#header .nav .nav_inner .gnb_area .ul_inner{display: inline-block;height: 100%;margin:0 auto;}
#header .nav .nav_inner .gnb_area ul{display: inline-block;height: 100%;margin:0 auto;}
#header .nav .nav_inner .gnb_area ul li{display: inline-block;position: relative;float: left}
/*#header .nav .nav_inner .gnb_area ul li:after{content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none}*/
#header .nav .nav_inner .gnb_area ul li:before{content: "";position: absolute;width: 100%;left: 0;bottom:0;height: 0;
    -webkit-transition: all 0.2s ;
    -moz-transition: all 0.2s ;
    -o-transition: all 0.2s ;
    transition: all 0.2s ;

}
#header .nav#companyGnb .nav_inner .gnb_area ul li:before{
    background: url('../../assets/images/gnb_line_7a303cc658.png') no-repeat center;background-size: cover;
}
#header .nav#movieGnb .nav_inner .gnb_area ul li:before{
    background: url('../../assets/images/gnb_line_movie_6739b4fa6b.png') no-repeat center;background-size: cover;
}
#header .nav#cineqGnb .nav_inner .gnb_area ul li:before{
    background: url('../../assets/images/gnb_line_cineq_62ce73fd18.png') no-repeat center;background-size: cover;
}
#header .nav#musicGnb .nav_inner .gnb_area ul li:before{
    background: url('../../assets/images/gnb_line_music_f8e0b3da4b.png') no-repeat center;background-size: cover;
}
#header .nav#contentspandaGnb .nav_inner .gnb_area ul li:before{
    background: url('../../assets/images/gnb_line_panda_0d6dbbe4b1.png') no-repeat center;background-size: cover;
}
#header .nav#studioGnb .nav_inner .gnb_area ul li:before{
    background: url('../../assets/images/gnb_line_studio_c945fe8830.png') no-repeat center;background-size: cover;
}
#header .nav#bravoGnb .nav_inner .gnb_area ul li:before{
    background: url('../../assets/images/gnb_line_bravo_86155c8e8a.png') no-repeat center;background-size: cover;
}


#header .nav .nav_inner .gnb_area ul li:hover:before{height: 3px}
#header .nav .nav_inner .gnb_area ul li.active:before{height: 3px}
#header .nav .nav_inner .gnb_area ul li>a{display:inline-block;font-size: 16px;color: #fff;letter-spacing: 1px;padding: 0 20px;line-height: 88px}
#header .nav .nav_inner .gnb_area ul li>.hide{content: "";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer}

#header .nav .nav_inner .gnb_area ul li .depth2_nav{position: absolute;top: 88px;display: none;opacity: 0;visibility: hidden;
   }
#header .nav .nav_inner .gnb_area ul li.dapth1_1 .depth2_nav{left: 50%;margin-left: -220px;width: 440px}
#header .nav .nav_inner .gnb_area ul li.dapth1_2 .depth2_nav{left: 50%;margin-left: -270px;width: 740px}
#header .nav .nav_inner .gnb_area ul li.dapth1_3 .depth2_nav{left: 50%;margin-left: -223px;width: 490px}
#header .nav .nav_inner .gnb_area ul li.dapth1_4 .depth2_nav{left: 50%;margin-left: -205px;width: 450px}
#header .nav .nav_inner .gnb_area ul li.dapth1_5 .depth2_nav{left: 50%;margin-left: -190px;width: 450px}
#header .nav .nav_inner .gnb_area ul li .depth2_nav div{display: inline-block}
#header .nav .nav_inner .gnb_area ul li .depth2_nav div a{display: block;position: relative;font-size: 14px;color: #666;margin-right: 25px;white-space: nowrap;text-transform: capitalize;padding: 25px 0}
#header .nav .nav_inner .gnb_area ul li .depth2_nav div a img{
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#header .nav .nav_inner .gnb_area ul li .depth2_nav div a img.on{position: absolute;top: 0;left: 0;opacity: 0;visibility: hidden;padding: 25px 0}
#header .nav .nav_inner .gnb_area ul li .depth2_nav div a:hover img.on{visibility: visible;opacity: 1}
#header .nav .nav_inner .gnb_area ul li .depth2_nav div a:hover img.off{visibility: hidden;opacity: 0}
#header .nav .nav_inner .gnb_area ul li .depth2_nav div.active a img.on{visibility: visible;opacity: 1}
#header .nav .nav_inner .gnb_area ul li .depth2_nav div.active a img.off{visibility: hidden;opacity: 0}
#header .nav .nav_inner .gnb_area ul li:hover .depth2_nav{visibility: visible;opacity: 1;display: block;}
#header .nav .nav_inner .gnb_area ul li .soon{position: absolute;top: 98px;left:50%;margin-left:-92px;opacity: 0;visibility: hidden;width: 185px;line-height: 44px;color: #fff;font-size: 14px;
    background: rgba(0,0,0,.5);text-align: center;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-transition: all 0.3s ;
    -o-transition: all 0.3s ;
    transition: all 0.3s;}
#header .nav .nav_inner .gnb_area ul li.comingsoon:hover .soon{visibility: visible;opacity: 1}

#header .nav .nav_inner .share_area{height: 88px;float: inherit;position: absolute;right: 215px;top: 0}/* right:240px; */
#header .nav .nav_inner .share_area .ul_inner{display: table;width: 100%;height: 100%}
#header .nav .nav_inner .share_area ul{display: table-cell;vertical-align: middle}
#header .nav .nav_inner .share_area ul li{width: 24px;height:24px;display: inline-block;vertical-align: middle;margin-left: 8px}
#header .nav .nav_inner .share_area ul li a{width:100%;height:100%;display:block;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#header .nav .nav_inner .share_area ul li a.kt {background:url('../../assets/images/ico_kakaoch_nor_9c403aad63.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.kt:hover {background:url('../../assets/images/ico_kakaoch_hov_dfb5e11fdb.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.fb {background:url('../../assets/images/ico_facebook_nor_48aaafde1b.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.fb:hover {background:url('../../assets/images/ico_facebook_hov_27b7af045f.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.in {background:url('../../assets/images/ico_instagram_nor_3773a1849d.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.in:hover {background:url('../../assets/images/ico_instagram_hov_e1531981e3.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.yt {background:url('../../assets/images/ico_youtube_nor_58cbe8699e.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.yt:hover {background:url('../../assets/images/ico_youtube_hov_af9ca17721.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.tw {background:url('../../assets/images/ico_twitter_nor_3a26ae14cf.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.tw:hover {background:url('../../assets/images/ico_twitter_hov_49cdaced5c.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.na {background:url('../../assets/images/ico_naver_nor_260b0a7a90.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.na:hover {background:url('../../assets/images/ico_naver_hov_a078641fbd.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.bl {background:url('../../assets/images/ico_blog_nor_c5f567b58a.png') no-repeat 0;background-size:24px;}
#header .nav .nav_inner .share_area ul li a.bl:hover {background:url('../../assets/images/ico_blog_hov_815290f4b3.png') no-repeat 0;background-size:24px;}

#header .nav .nav_inner .share_area ul li:first-child{margin-left: 0}
#header .nav .nav_inner .share_area ul li.cineq_link{width:168px;height: 41px}
#header .nav .nav_inner .share_area ul li.cineq_link a{opacity: 1;font-size: 13px;color: #fff;display: block;padding: 13px 0;line-height: 1;border: 1px solid rgba(255,255,255,.3);text-align: center;font-weight: 400;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
#header .nav .nav_inner .share_area ul li.cineq_link a:hover{background: #fff;color: #222;opacity: 1}
#header .language_area{position: absolute;right: 145px;text-align: right;top: 34px}
#header .language_area ul li{display: inline-block;margin-left: 10px;}
#header .language_area ul li:first-child{margin-left: 0}
#header .language_area ul li a{color:rgba(255,255,255,.4);font-size: 12px}
#header .language_area ul li.active a{color: #fff}

/* 컴퍼니 */
#header .nav#companyGnb .nav_inner h1{width: 86px;height: 34px;padding: 26px 48px;left: 0}
#header .nav#companyGnb .nav_inner h1 a {display:block;height:34px;}
#header .nav#companyGnb .nav_inner h1 img.logo_w{display: inline-block}
#header .nav#companyGnb .nav_inner h1 img.logo_color{display: none}
#header .nav#companyGnb{
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#80000000", endColorstr="#00000000",GradientType=0 );

}
#header .nav#companyGnb .nav_inner .gnb_area ul li:after{pointer-events: auto;cursor: pointer}

#header .nav#companyGnb .nav_inner .gnb_area ul li:hover:before{height: 2px}
#header .nav#companyGnb .nav_inner .gnb_area ul li.active:before{height: 2px}
/* 컴퍼니 화이트 */
#header.white .nav#companyGnb{background: #fff}
#header.white .nav#companyGnb .nav_inner .gnb_area ul li>a{color: #222}
#header.white .nav:before{background: #000}
#header.white .language_area ul li>a{color: rgba(34,34,34,.5)}
#header.white .language_area ul li.active>a{color: #222}
#header.white .nav#companyGnb .nav_inner h1 img.logo_w{display: none}
#header.white .nav#companyGnb .nav_inner h1 img.logo_color{display: inline-block}
#header.white .nav#companyGnb:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 200px;
    background: url('../../assets/images/gnb_shadow_d6f00865f1.png') no-repeat center top;
    background-size: cover;
    bottom: -200px;
    opacity: 1;
    border-top: 1px solid rgba(0,0,0,.08);
    pointer-events: none;
}

#header .sub_menu{position: absolute;right: 0;top: 0;bottom: 0;z-index: 99}

#header .sub_menu a.menuBtn{display: block;z-index: 100;position: absolute;right:48px;top:15px;width: 52px;height: 52px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;}

#header .sub_menu a.menuBtn .ico_sub_menu{margin:3px;position: relative;width: 46px;height: 46px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;;
    -moz-transition: all 0.2s ;
    -o-transition: all 0.2s ;
    transition: all 0.2s ;
    display: inline-block;
}
#header .sub_menu a.menuBtn .ico_sub_menu>span{position: absolute;top: 0;left: 0;width: 46px;height: 46px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    visibility: hidden;opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -moz-transition: all 0.2s ;
    -o-transition: all 0.2s ;
    transition: all 0.2s ;
}
#header .sub_menu a.menuBtn .ico_sub_menu>span.ico_close svg .cls-1{fill:#fff}
#header .sub_menu a.menuBtn .ico_sub_menu>span.active{
    visibility: visible;opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
#header .sub_menu a.menuBtn .ico_sub_menu>span img{position: absolute;top: 50%;left: 50%;}
#header .sub_menu a.menuBtn .ico_sub_menu>span.ico_open img{width:30px;height:7px;margin-top: -3px; margin-left: -15px;display: inline-block;}
#header .sub_menu a.menuBtn .ico_sub_menu>span.ico_close img{width: 10px;height: 10px;margin-top: -5px; margin-left: -5px;display: inline-block;}

#header .sub_menu a.menuBtn svg{}
#header .sub_menu a.menuBtn .ico_sub_menu .span_svg{display: block;
    -moz-transition: all 0.2s ;
    -o-transition: all 0.2s ;
    transition: all 0.2s ;
}
#header .sub_menu a.menuBtn .ico_sub_menu span.span_svg>img{position: relative;left: 0;top: 0;margin: 0;width: 100%;height: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;}
#header .sub_menu a.menuBtn:hover .ico_sub_menu .span_svg{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);}


#header .sub_menu .menu_area{position: absolute;right: 0;top: 0;width:410px ;height: 100vh;visibility: hidden;opacity: 0}
#header .sub_menu .menu_area:before{content: "";position: absolute;;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.9;
    background: rgb(63,104,166);
    background: -moz-linear-gradient(top,  rgba(63,104,166,1) 0%, rgba(103,80,153,1) 37%, rgba(103,80,153,1) 53%, rgba(163,82,90,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(63,104,166,1) 0%,rgba(103,80,153,1) 37%,rgba(103,80,153,1) 53%,rgba(163,82,90,1) 100%);
    background: linear-gradient(to bottom,  rgba(63,104,166,1) 0%,rgba(103,80,153,1) 37%,rgba(103,80,153,1) 53%,rgba(163,82,90,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#3f68a6", endColorstr="#a3525a",GradientType=0 );
}
#header .sub_menu .menu_area ul{position: relative;top: 88px;height: calc(100% - 88px);overflow:auto}
#header .sub_menu .menu_area ul li{border-top: 1px solid rgba(255,255,255,.08);height: 102px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; overflow: hidden;position: relative}
#header .sub_menu .menu_area ul li:before{content: "";position: absolute;width:4px;height: 100%;top: 0;background: #fff ;left: -4px;-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
#header .sub_menu .menu_area ul li:hover:before{left: 0}
#header .sub_menu .menu_area ul li.active:hover:before{display: none}
#header .sub_menu .menu_area ul li a{display: block;width: 100%;height: 100%}
#header .sub_menu .menu_area ul li a span{font-weight: 700;font-size: 22px;line-height: 1;color: #fff;position: relative;
    display: inline-block;padding: 19px 46px 19px 94px;border-radius: 50px;margin-top: 20px;margin-left: 28px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#header .sub_menu .menu_area ul li a span:before{content: "";width: 50px;height: 36px;left: 28px;position: absolute;top: 13px;display: block}
#header .sub_menu .menu_area ul li.sub_menu0 a span:before{background: url('../../assets/images/ico_sub_menu0_4038f69fb2.png') no-repeat 0 0;background-size: contain}
#header .sub_menu .menu_area ul li.sub_menu1 a span:before{background: url('../../assets/images/ico_sub_menu1_7991844a49.png') no-repeat 0 0;background-size: contain}
#header .sub_menu .menu_area ul li.sub_menu2 a span:before{background: url('../../assets/images/ico_sub_menu2_fd5a9977a7.png') no-repeat 0 0;background-size: contain}
#header .sub_menu .menu_area ul li.sub_menu3 a span:before{background: url('../../assets/images/ico_sub_menu3_e9fa2c1e59.png') no-repeat 0 0;background-size: contain}
#header .sub_menu .menu_area ul li.sub_menu4 a span:before{background: url('../../assets/images/ico_sub_menu4_f678b021ed.png') no-repeat 0 0;background-size: contain}
#header .sub_menu .menu_area ul li.sub_menu5 a span:before{background: url('../../assets/images/ico_sub_menu5_6455df7e15.png') no-repeat 0 0;background-size: contain}
#header .sub_menu .menu_area ul li.sub_menu6 a span:before{background: url('../../assets/images/ico_sub_menu6_1a5d7a4710.png') no-repeat 0 0;background-size: contain}
#header .sub_menu .menu_area ul li.sub_menu7 a span:before{background: url('../../assets/images/ico_sub_menu7_c54eef7fba.png') no-repeat 0 0;background-size: contain}
#header .sub_menu .menu_area ul li.sub_menu8 a span:before{background: url('../../assets/images/ico_sub_menu8_6a99456a14.png') no-repeat 0 0;background-size: contain}
#header .sub_menu .menu_area ul li a:before{content: "";position: absolute;width: 0;height: 100%;opacity: 0.1;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#00ffffff",GradientType=1 );
}
#header .sub_menu .menu_area ul li:hover a:before{width: 100%}
#header .sub_menu .menu_area ul li.active:hover a:before{display: none}
#header .sub_menu .menu_area ul li.active a span{background: #fff;}
#header .sub_menu .menu_area ul li.sub_menu1.active a span{color: #5955a1}
#header .sub_menu .menu_area ul li.sub_menu2.active a span{color: #61519d}
#header .sub_menu .menu_area ul li.sub_menu3.active a span{color: #695097}
#header .sub_menu .menu_area ul li.sub_menu4.active a span{color: #72508f}
#header .sub_menu .menu_area ul li.sub_menu5.active a span{color: #7d5084}
#header .sub_menu .menu_area ul li.sub_menu6.active a span{color: #895077}
#header .sub_menu .menu_area ul li.sub_menu6.active a span{color: #895077}
#header .sub_menu .menu_area ul li.sub_menu1.active a span:before{background-image: url('../../assets/images/ico_sub_menu1_on_127607848e.png')}
#header .sub_menu .menu_area ul li.sub_menu2.active a span:before{background-image: url('../../assets/images/ico_sub_menu2_on_74008c369b.png')}
#header .sub_menu .menu_area ul li.sub_menu3.active a span:before{background-image: url('../../assets/images/ico_sub_menu3_on_68997b8e18.png')}
#header .sub_menu .menu_area ul li.sub_menu4.active a span:before{background-image: url('../../assets/images/ico_sub_menu4_on_1d8ae9f6a3.png')}
#header .sub_menu .menu_area ul li.sub_menu5.active a span:before{background-image: url('../../assets/images/ico_sub_menu5_on_ce0492e274.png')}
#header .sub_menu .menu_area ul li.sub_menu6.active a span:before{background-image: url('../../assets/images/ico_sub_menu6_on_e7af4937cc.png')}


#FLOATING_BTN{position: absolute;top: 117px;right: 37px;z-index: 3;}
#FLOATING_BTN a{display: block;position: relative}
#FLOATING_BTN a img{transition: 0.3s}
#FLOATING_BTN a .on{position: absolute;top: 0;left: 0;opacity: 0}
#FLOATING_BTN.hide{display: none}
#FLOATING_BTN.change a img{opacity: 0}
#FLOATING_BTN.change a .on{opacity: 1}

#footer{background: #000;position: relative; z-index:99;}
#footer .foot_inner{width: 1080px;margin: 0 auto;position: relative}
#footer .foot_inner .foot_info{padding:40px 0 70px 0;}
#footer .foot_inner .foot_info>div{display:inline-block;vertical-align:top;}
#footer .foot_inner .foot_info .foot_logo{margin-right:52px;}
#footer .foot_inner .foot_info .foot_logo>div{display: none}
#footer .foot_inner .foot_info .foot_copy{margin-top:5px;text-align:left;}
#footer .foot_inner .foot_info .foot_copy .copy_area{display: none}
#footer .foot_inner .foot_info .foot_copy .copy_txt {font-size: 15px;line-height: 24px; color: #fff;letter-spacing: -0.4px;color:#999 ;margin-bottom:10px}
#footer .foot_inner .foot_info .copy_company .copy_txt {line-height: 30px;}

#footer .foot_inner .foot_info .foot_copy .copy_txt .gray {color: #999}
#footer .foot_inner .foot_info .foot_copy .copy_txt .dot {color: #454545}
#footer .foot_inner .foot_info .foot_copy .copy_txt .group {color: #666;margin-right:10px;}
#footer .foot_inner .foot_info .foot_copy .copy_txt .ml {margin-left:20px;}
#footer .foot_inner .foot_info .foot_other{width: 284px}
#footer .foot_inner .foot_info .foot_other>div{width: 222px;height: 38px;border: 1px solid #202020;position: relative;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    }
#footer .foot_inner .foot_info .foot_other .family_site a.btn_family_site{display: block;height: 100%;background: #202020;color: #aaaaaa;font-size: 12px;padding: 12px 0 12px 25px;position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;}
#footer .foot_inner .foot_info .foot_other .family_site a.btn_family_site:before{content: "";background: url('../../assets/images/ico_plus_cb06ed6cfd.png') no-repeat 0 0;width: 10px;height: 10px;background-size: contain;position: absolute;right: 24px;top: 13px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}
#footer .foot_inner .foot_info .foot_other .family_site.active a.btn_family_site{background: transparent}
#footer .foot_inner .foot_info .foot_other .family_site.active a.btn_family_site:before{
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#footer .foot_inner .foot_info .foot_other .family_site ul{visibility: hidden;opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: absolute;background: rgba(23,23,23,.9);border: 1px solid #202020;width: 224px;height:0;left: 0;bottom: 60px;padding: 14px 0;overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#footer .foot_inner .foot_info .foot_other .family_site.active ul{height: 224px;visibility: visible;opacity: 1}
#footer .foot_inner .foot_info .foot_other .family_site ul li{height: 28px;line-height: 28px}
#footer .foot_inner .foot_info .foot_other .family_site ul li:hover{background: #292929}
#footer .foot_inner .foot_info .foot_other .family_site ul li a{display: block;font-size: 12px;color: #aaaaaa;padding-left: 24px}
#footer .foot_inner .foot_info .foot_other .sitemap{}
#footer .foot_inner .foot_info .foot_other .sitemap a{display: block;height: 100%;background: #202020;color: #aaaaaa;font-size: 12px;padding: 12px 0 12px 25px;position: relative;
    border:1px solid #202020;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
#footer .foot_inner .foot_info .foot_other .sitemap a:hover{
    background-color:#171717;
}
#footer .foot_inner .foot_info .foot_other .sitemap a span{display: block;background: url('../../assets/images/ico_arrow_e1b40e47f9.png') no-repeat 166px 0;}
#footer .foot_inner .copyright{color: #666666;font-size: 12px}

#footer .foot_inner .foot_info .foot_logo>div {text-align: center}
#footer .foot_inner .foot_info .foot_logo>div span{font-size: 13px;font-weight: 900;display: block;text-align: center;color: #666;letter-spacing:0;margin-top: 7px}
#footer .foot_inner .foot_info .foot_logo>div>img{width: 96px;height: 40px}
#footer.company .foot_inner .foot_info .foot_logo .f_logo_new{display: inline-block;margin-top: 10px}
#footer.company .foot_inner .foot_info .foot_logo .f_logo_new img{width: 108px;height: 45px}
#footer.movie .foot_inner .foot_info .foot_logo .f_logo_movie{display: inline-block;}
#footer.cineq .foot_inner .foot_info .foot_logo .f_logo_cineq{display: inline-block;}
#footer.music .foot_inner .foot_info .foot_logo .f_logo_music{display: inline-block;}
#footer.contentspanda .foot_inner .foot_info .foot_logo .f_logo_contentspanda{display: inline-block;}
#footer.studio .foot_inner .foot_info .foot_logo .f_logo_studio{display: inline-block;}
#footer.bravo .foot_inner .foot_info .foot_logo .f_logo_bravo{display: inline-block;}

#footer.company .foot_inner .foot_info .foot_copy .copy_company{display: block}
#footer.movie .foot_inner .foot_info .foot_copy .copy_movie{display: block}
#footer.cineq .foot_inner .foot_info .foot_copy .copy_cineq{display: block}
#footer.music .foot_inner .foot_info .foot_copy .copy_music{display: block}
#footer.contentspanda .foot_inner .foot_info .foot_copy .copy_contentspanda{display: block}
#footer.studio .foot_inner .foot_info .foot_copy .copy_studio{display: block}
#footer.bravo .foot_inner .foot_info .foot_copy .copy_bravo{display: block}

.btn_top{position: absolute;right: 32px;top: -105px}
.btn_top a{display: block}


/* update */
#about .main_copy .inner .sub_title{    text-transform: uppercase !important;}

/* 모든 어바웃 상단 모션 */
#wrap #contents .content .section.top{
    width: 120%;
    position: relative;
    left: -10%;
    z-index: 2;
    overflow: hidden;
    -webkit-border-radius: 0 0 50% 50%;
    -moz-border-radius: 0 0 50% 50%;
    border-radius: 0 0 50% 50%;
}
#wrap #contents .content .section.top>.top_bg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 480px;
    opacity: 0;
    background-size: cover;
}


/* ============================================================== gradient 컬러 ============================================================== */
/* 메인 */
.gra_new.active , .gra_new:hover {
    background: linear-gradient(to right, #307df0 0%, #7a43f0 50%, #ff5c7c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 영화사업부 */
.gra_movie.active , .gra_movie:hover {
    background: linear-gradient(to right, #1984ff 0%, #9147ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 뮤직앤뉴 */
.gra_music.active , .gra_music:hover {
    background: linear-gradient(to right, #551aff 0%, #ff5273 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 스튜디오앤뉴 */
.gra_studio.active , .gra_studio:hover {
    background: linear-gradient(to right, #aa6bff 0%, #0081d1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 브라보 */
.gra_bravo.active , .gra_bravo:hover {
    background: linear-gradient(to right, #136eeb 0%, #ff3e65 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 컨텐츠판다 */
.gra_panda.active , .gra_panda:hover {
    background: linear-gradient(to right, #ff3b62 0%, #ff5c7c 50%, #aa3dd9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 씨네큐 */
.gra_cineq.active , .gra_cineq:hover {
    background: linear-gradient(to right, #9a27ff 0%, #ff4438 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {
    .gra_new {background: transparent !important;}
    .gra_new.active , .gra_new:hover {color:#5160ff !important;}

    .gra_movie {background: transparent !important;}
    .gra_movie.active , .gra_movie:hover {color:#5551ff !important;}

    .gra_music {background: transparent !important;}
    .gra_music.active , .gra_music:hover {color:#651ff2 !important;}

    .gra_studio {background: transparent !important;}
    .gra_studio.active , .gra_studio:hover {color:#5875e9 !important;}

    .gra_bravo {background: transparent !important;}
    .gra_bravo.active , .gra_bravo:hover {color:#3766d7 !important;}

    .gra_panda {background: transparent !important;}
    .gra_panda.active , .gra_panda:hover {color:#f3598c !important;}

    .gra_cineq {background: transparent !important;}
    .gra_cineq.active , .gra_cineq:hover {color:#cf3697 !important;}
}


/*미디어 탭*/
.depth2_tab{margin-bottom:60px;padding:0 90px;}
.depth2_tab ul{width:100%;display:flex;flex-wrap:nowrap;}
.depth2_tab ul li{flex:1 0 auto;}
.depth2_tab ul li a{display:block;width:100%;height:100%;padding:14px 0;font-size:21px;box-sizing:border-box;color:#424242;border:1px solid #dcdcdc;}
.depth2_tab ul li.active{box-shadow:0 5px 5px rgba(0,0,0,0.04);}
.depth2_tab ul li.active a{border:0;background:linear-gradient(to right, #307df0 0%, #7a43f0 50%, #ff5c7c 100%);color:#fff;font-weight:600;}

/* 모달창 */
.modal_pop{font-size:16px;display:block;width:500px;background:#fff;position:fixed;z-index:200;text-align:center;transform:translateX(-50%);box-shadow:5px 5px 25px rgba(0,0,0,0.1);}
.modal_pop .con{padding:20px;line-height:1.4;}
.modal_pop .con h3{font-size:22px;margin:10px 0 20px 0;}
.modal_pop .con a{display:inline-block;margin:20px 0 0 0;color:#654bf0;font-weight:bold;font-size:20px;}
.modal_pop .close{text-align:right;padding:10px 20px;border-top:1px solid #ddd;}
.modal_pop .close a{color:#222;font-weight:bold;}