@charset "utf-8";
/* common */
.inner {width:1240px;margin:0 auto;}

/* header */
#wrap {overflow: hidden;min-width: 1240px;}
#wrap header {position:fixed;top:0;left:0;right:0;z-index:999;}
#wrap header.pc .headTop {border-bottom:1px solid rgba(255, 255, 255, 0.15);}
#wrap header.pc .headTop .inner h1 a {display:block;width:200px;height:24px;text-indent:-9999px;background:url("../images/common/logo01.svg") no-repeat center center / 100% auto;}
#wrap header.pc .headTop .inner {display: flex;justify-content:space-between;align-items: center;}
#wrap header.pc .headTop .inner .btnGnb {display: none;}
#wrap header.pc .headTop .inner .gnbWrap .gnb {display: flex;}
#wrap header.pc .headTop .inner .gnbWrap .gnb > li {position:relative;width: 140px;text-align: center;}
#wrap header.pc .headTop .inner .gnbWrap .gnb > li > a {display: inline-block;font-weight: 500;font-size: 18px;line-height: 79px;color: #fff;}
#wrap header.pc .headTop .inner .gnbWrap .gnb > li:hover > a,
#wrap header.pc .headTop .inner .gnbWrap .gnb > li.active > a {position: relative;color:#000;}
#wrap header.pc .headTop .inner .gnbWrap .gnb > li:hover > a:before,
#wrap header.pc .headTop .inner .gnbWrap .gnb > li.active > a:before {content:'';position: absolute;bottom:0;left:50%;height: 3px;background-color: #FC0;animation: lnbMotion .3s ease-out both;}
#wrap header.pc .headTop .inner .gnbWrap .gnb li .snb {position: absolute;top:79px;left:0;right:0;z-index:999;padding:30px 0;overflow: hidden;opacity: 0;}
#wrap header.pc .headTop .inner .gnbWrap .gnb li .snb li a {display:block;font-size: 15px;line-height:33px;color: #777;text-align: center;transition: all .3s;}
#wrap header.pc .headTop .inner .gnbWrap .gnb li .snb li:hover a,
#wrap header.pc .headTop .inner .gnbWrap .gnb li .snb li a.active {color:#FC0;}
#wrap header.pc .gnbBg {position: absolute;top:0;left:0;right:0;z-index:-1;height: 0;background-color: #fff;transition:all 0.3s ease-out;}

#wrap header.pc.active .headTop {border-color:#EBEBEB;background-color: #fff;}
#wrap header.pc.active .headTop .inner h1 a {background-image:url("../images/common/logo02.svg");}
#wrap header.pc.active .headTop .inner .gnbWrap .gnb > li > a {color:#000;}
#wrap header.pc.active .headTop .inner .gnbWrap .gnb li .snb { animation: gnbSub .5s .3s ease-out both;}
#wrap header.pc.active .gnbBg {height: 272px;}

#wrap header.pc.subHeader .headTop,
#wrap header.mobile.subHeader .headTop {border-color:#EBEBEB;background-color: #fff;}
#wrap header.pc.subHeader .headTop .inner h1 a,
#wrap header.mobile.subHeader .headTop .inner h1 a {background-image:url("../images/common/logo02.svg");}
#wrap header.pc.subHeader .headTop .inner .gnbWrap .gnb > li > a,
#wrap header.mobile.subHeader .headTop .inner .gnbWrap .gnb > li > a {color:#000;}
#wrap header.pc.subHeader .headTop .inner .btnGnb,
#wrap header.mobile.subHeader .headTop .inner .btnGnb {background:url("../images/icon/ico_menu_02.png") no-repeat center center / 32px 32px;}

    
/* header */
#wrap header.mobile .gnbBg {display: none;}
#wrap header.mobile .headTop .inner {padding:21px 24px;}
#wrap header.mobile .headTop .inner h1 a {display:block;width:145px;height:18px;text-indent:-9999px;background:url("../images/common/logo01.svg") no-repeat center center / 100% auto;}
#wrap header.mobile .headTop .inner .btnGnb {display: block;}
#wrap header.mobile .headTop .inner .btnGnb { position:absolute; top:50%; right:24px; transform:translateY(-50%); width: 32px; height: 32px; background:url("../images/icon/ico_menu_01.png") no-repeat center center / 32px 32px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); }
#wrap header.mobile .headTop .inner .btnGnb.open {background-image:url("../images/icon/ico_close_01.png");}
#wrap header.mobile .headTop .inner .gnbWrap {position: fixed; top:60px;bottom:0; right:-100%; width:100%; padding-top:50px; background-color: #fff;transition: all .3s;}
#wrap header.mobile .headTop .inner .gnbWrap.open {right:0;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb {flex-direction: column;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb > li {width: 100%;text-align: left;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb > li > a {position:relative;display: block;font-weight: 500;color: #000;padding:24px;font-size:18px;line-height:1.16;width: 100%;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb > li > a:before {content:'';position: absolute;top:50%;right:24px;transform: translateY(-50%);width:24px;height: 24px;background: url("../images/icon/ico_arrow_bottom_01.png") no-repeat center center / 24px 24px;animation: none;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb li .snb {max-height:0;overflow: hidden;background-color:rgba(217, 217, 217, 0.2);box-sizing: border-box;transition: all .3s ease;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb li .snb li a {padding:0 50px;display:block;font-size: 15px;line-height:42px;color: #777;text-align: center;text-align: left;transition: all .3s;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb li .snb li a.active {color:#FC0;}
/* #wrap header.mobile .headTop .inner .gnbWrap .gnb li.active .snb {padding:16px 0;max-height:none;transition: all .3s ease;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb > li.active > a {color:#FC0;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb > li.active > a:before {content: '';left:inherit;right:24px;background-image: url("../images/icon/ico_arrow_top_01.png");} */
#wrap header.mobile .headTop .inner .gnbWrap .gnb li.active .snb {padding:16px 0;max-height:none;transition: all .3s ease;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb > li.active > a {color:#FC0;}
#wrap header.mobile .headTop .inner .gnbWrap .gnb > li.active > a:before {content: '';left:inherit;right:24px;background-image: url("../images/icon/ico_arrow_top_01.png");}

#wrap header.mobile.active .headTop {border-color:#EBEBEB;background-color: #fff;}
#wrap header.mobile.active .headTop .inner h1 a {background-image:url("../images/common/logo02.svg");}
@keyframes gnbSub {
    0% { transform:translateY(30px); opacity:0; }
    100% { transform:translateY(0); opacity:1; }
}
@keyframes lnbMotion {
    0% { left:50%; width:0; opacity:0; }
    100% { left:0%; width:100%; opacity:1; }
}

/* header scroll시 */
#wrap header.scroll .headTop {border-color:#EBEBEB;background-color: #fff;}
#wrap header.scroll .headTop .inner h1 a {background-image:url("../images/common/logo02.svg");}
#wrap header.scroll .headTop .inner .gnbWrap .gnb > li > a {color:#000;}
#wrap header.scroll .headTop .inner .btnGnb {background:url("../images/icon/ico_menu_02.png") no-repeat center center / 32px 32px;}

/* container, subContainer */
#wrap #container {overflow: hidden;}
#wrap #subContainer {overflow: hidden;padding-top:80px;} 

/* footer */
#wrap footer {background-color:#23211B;}
#wrap footer .inner {padding:52px 0;text-align: center;}
#wrap footer .inner .address {margin-top:15px;}
#wrap footer .inner .address p {display: flex;gap:18px;justify-content: center;}
#wrap footer .inner .address p span {font-weight: 300;font-size: 15px;line-height: 1.8;color: #DDD;}
#wrap footer .inner .address .bar {position: relative;}
#wrap footer .inner .address .bar:before {content:'';position:absolute;top:0;bottom:0;left:-9px;margin:auto 0;width:1px;height:15px;background-color:#999;}
#wrap footer .inner .copyRight {margin-top: 23px;font-weight: 300;font-size: 13px;line-height: 20px;color: #777;}

/* subVisual */
.subVisual {padding:180px 0;text-align: center;}
.subVisual.about {background: url("../images/img/img_about.jpg") no-repeat center center / cover;background-attachment: fixed;}
.subVisual.ci {background: url("../images/img/img_ci.jpg") no-repeat center center / cover;background-attachment: fixed;}
.subVisual.soulgames {background: url("../images/img/img_soulgames.jpg") no-repeat center center / cover;background-attachment: fixed;}
.subVisual h3 {font-weight: 700;font-size: 52px;line-height: 1.17;color: #000;}
.subVisual h3 span {margin-bottom:16px;display: block;font-weight: 500;font-size: 26px;line-height: 1;color: #FC0;}
.subVisual p {margin-top:36px;font-size: 20px;line-height: 1.5;color: #000;}
.subVisual.about h3, 
.subVisual.ci h3, 
.subVisual.soulgames h3 {color: #FFF;}
.subVisual.about p,
.subVisual.ci p,
.subVisual.soulgames p {color: #FFF;}

@media (max-width: 1240px) {
    
    /* common */
    .inner {width:100%;}

    /* layout */
    #wrap {min-width: 100%;}
    
    /* container, subContainer */
    #wrap #subContainer {padding-top:60px;} 

    /* subVisual */
   .subVisual { padding:120px 24px; } 
}
@media (max-width: 768px) { 

    /* subVisual */
    .subVisual { padding:123px 24px; } 
    .subVisual h3 { font-size: 34px; } 
    .subVisual h3 span { margin-bottom:6px; font-size: 18px; } 
    .subVisual p { margin-top:30px; font-size: 16px; } 
    .subVisual p br {display: none;}

    /* footer */
    #wrap footer .inner {padding:50px 0;}
    #wrap footer .inner .address {margin-top:20px;}
    #wrap footer .inner .address p {gap:0;flex-direction: column;}
    #wrap footer .inner .address p span {display: block;font-size: 13px;line-height:1.7;color:#999;}
    #wrap footer .inner .address .bar:before {content:none;}
    #wrap footer .inner .copyRight {margin-top: 20px;font-size: 11px;line-height: 1.4;}
}