@charset "utf-8";

/* 사이트 빌더 세팅으로 인한 css 추가 */
#webzineBody div, #webzineBody span, #webzineBody h1, #webzineBody h2, #webzineBody h3, #webzineBody h4, #webzineBody h5, #webzineBody h6, #webzineBody p, #webzineBody a, #webzineBody article, #webzineBody aside, #webzineBody footer, #webzineBody header, #webzineBody nav, #webzineBody section {
    font-family: "NanumSquareRound";
}
.commu-wrap {
    padding: 0;
    width: 100%;
    min-width: 1280px;
}
.commu-content {
    margin: 0;
    width: 100%;
}
.commu-center {
    padding: 0;
    width: 100%;
}
.commu-content header {
    margin: 0;
    height: 77px;
}
.commu-content header h1 {
    margin: 6px 0 0 0;
    width: 100px;
    height: 57px;
}
.commu-content nav {
    background: transparent;
}
.commu-center .commu-body {
    margin: 0;
    width: 100%;
}
.pt-main .topbar::before, .pt-main .topbar::after {
    display: none;
}
.mobile_area .app {
    line-height: 27px;
}

/* gstar css */
html, body {
    height: 100%;
}
body {
    margin:0;
    padding:0;
}
body a {
    text-decoration: none !important;
}
body .container,
body .container a,
header nav a {
    color:#333;
}
#comHeadlink {
    min-width: 1130px;
}
.gstar {
    display: block;
    float: none;
}
.gstar_img {
    background-repeat: no-repeat;
    text-indent: -9999px;
}
.layout01 {
    width: 1130px;
    margin: 0 auto;
}
.gstar_bottom {
    margin-bottom:100px;
}
/*메인페이지*/
.main_title {
    font-family: "NanumSquareRound";
    font-size:62px;
    color:#333333;
    text-align: center;
    margin-top:100px;
    font-weight: 600;
}
.gstar_btn {
    display: block;
    position: relative;
    overflow: hidden;
    float: left;
    margin:0 10px;
    width: 245px;
    height: 55px;
    background-color: rgba(0, 0, 0, 0.5);
    border:2px solid #00b2e4;
    border-radius: 55px;
    box-sizing: border-box;
    color:#00b2e4;
    text-align: center;
    line-height: 55px;
    cursor: pointer;
}
.gstar_btn.notice p {
    margin-left: 25px;
}
.gstar_btn p {margin: 0; float: left; color: #00b2e4; font-size:23px;}
.gstar_btn span {
    display: block;
    float: left;
    margin: 18px 0 0 5px;
    width: 28px;
    height: 17px;
    text-indent: -9999px;
    background-repeat: no-repeat;
}
.gstar_btn.event {
    background: #00b2e4;
}
.gstar_btn.event p {
    margin-left: 28px;
    color:#000000;
}
.gstar_btn.booth p {
    margin-left: 16px;
}
.gstar_btn.IGC p {
    margin-left: 12px;
}
.gstar_btn.booth_P {
    float: right;
    background: #05b28e;
    border:none;
}
.gstar_btn.booth_P p {
    color:#fff;
    margin-left: 18px;
}
.gstar_btn.booth_P span {
    background-position-y: -40px;
}

header {
    overflow: hidden;
    width:100%;
    min-width: 1130px;
    background:linear-gradient(to bottom, #f2f2f2, #d9dada);
    border-top:1px solid #dcdcdc;
}
header h1 {
    float: left;
    margin-top:10px;
}
header nav {
    overflow: hidden;
    float: right;
    margin: 0;
}
header nav a {
    display: block;
    position: relative;
    float: left;
    margin-left: 50px;
    padding: 27px 0;
    font-size: 20px;
}
header nav a:hover::after, header nav a.action::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #1a1a1a;
}

.gstar_main {
    position: relative;
    width: 100%; 
    height: 635px; 
    min-width: 1130px; 
    background: url("//static.inven.co.kr/image_2011/gstar/2019/main_bg.jpg") no-repeat center;
}
.gstar_main .btn_box {
    position: absolute;
    bottom:25px;
    left: 50%;
    margin-left: -530px;
    width: 1060px;
}
.gstar_main .main_img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 1460px;
    text-align: center;
}
.gstar_main .main_img > div {
    transition: all .2s;
}
.gstar_main .main_img .logo {
    position: absolute;
    top: 35px;
    right: 0;
    left: 0;
    z-index: 5;
    margin: auto;
    width: 846px;
    height: 269px;
}
.gstar_main .main_img .ch-le {
    position: absolute;
    left: 0;
    bottom: 45px;
    width: 412px;
    height: 379px;
}
.gstar_main .main_img .ch-ri {
    position: absolute;
    right: 0;
    bottom: 45px;
    width: 383px;
    height: 290px;
}
.gstar_main .main_img .note1 {
    position: absolute;
    top: 150px;
    left: 210px;
    width: 46px;
    height: 35px;
}
.gstar_main .main_img .note1.white {
    top: 235px;
    left: auto;
    right: 230px;
    width: 46px;
    height: 35px;
    /* transform: rotate(-165deg); */
}
.gstar_main .main_img .note2 {
    position: absolute;
    top: 300px;
    right: 350px;
    width: 24px;
    height: 34px;
    transform: rotate(-30deg);
}
.gstar_main .main_img .note2.white {
    position: absolute;
    top: 260px;
    left: 275px;
    width: 24px;
    height: 34px;
    transform: rotate(0deg);
}
.gstar_main .main-tit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 225px;
    margin: auto;
    color: #00b2e4;
    font-size: 58px;
    font-weight: bold;
}
.gstar_main .main-sub-txt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 170px;
    margin: auto;
    color: #fff;
    font-size: 38px;
    font-weight: bold;
    letter-spacing: -1px;
}
/* 메인 캐릭터 위치 반응형 */
@media screen and (max-width: 1449px) {
    .gstar_main .main_img .ch-le {
        width: 365px;
        height: 336px;
    }
    .gstar_main .main_img .ch-ri {
        width: 340px;
        height: 257px;
    }
    .gstar_main .main_img .note1 {
        top: 150px;
        left: 110px;
    }
    .gstar_main .main_img .note1.white {
        top: 235px;
        right: 130px;
    }
    .gstar_main .main_img .note2 {
        top: 300px;
        right: 250px;
    }
    .gstar_main .main_img .note2.white {
        top: 260px;
        left: 200px;
    }
}
.lineup_schedule .sponsor h3 {font-size:25px; color:#dc2e53; text-align: center; position: relative; margin-top: 45px; padding-top: 6px; font-weight: 600; font-family: "NanumSquareRound";}
.lineup_schedule .sponsor h3::after {content: ""; height: 3px; width: 34px; background: #dc2e53; display: block; position: absolute; top: 0; left: 50%; margin-left:-17px;}
.lineup_schedule .sponsor ul {overflow: hidden; text-align: center;}
.lineup_schedule .sponsor ul li {width: 130px; margin-top:25px; display: inline-block; float: none; margin-right: 9px;}
.lineup_schedule .sponsor ul li:nth-child(8n) {margin-right: 0px;}
.lineup_schedule .sponsor ul li .img_area {background: #f5f5f5; width: 130px; height: 130px; border-radius: 20px; overflow: hidden; text-align: center; line-height: 130px;}
.lineup_schedule .sponsor ul li .img_area img {width: 130px; height: 130px;}
.lineup_schedule .sponsor ul li .name {text-align: center; font-size: 17px; margin-top:10px;}
.lineup_schedule .schedule {margin-top:50px;}
.lineup_schedule .schedule img {width: 1130px; height: 810px;}
.lineup_schedule .guide {overflow: hidden; margin-top: 25px;}
.lineup_schedule .guide p.notice {float: left; font-size: 18px; margin: 0; font-weight: 100;}

.schedule {}

.gstar_event {
    position: relative;
    top: -13px;
    z-index: 1;
}
.container.gstar_bottom .gstar_event {
    top: 0;
}
.gstar_event h2 {margin-top: 60px; font-size:43px; text-align: left; overflow: hidden; left: 20px;}
.gstar_event h2 span {display: block; float: left;}
.gstar_event h2 span.tit {
    margin: 40px 0 0 15px;
}
.event_slide {position: relative;}
.slide_box {width:100%; height:400px; position:relative; min-width:1130px; overflow: hidden; background: #fff;}
.slide_box li {width:1920px; height:400px; float:left; position:absolute; top:0; left:50%; background-position:center; display: block; cursor: pointer; display: none; margin-left: -960px;}
.slide_box li:first-child {display: block;}
.slide_box li img {width: 100%; max-width: 1920px; height: 400px;}
.slide_btn{height:37px; position:absolute; bottom:10px; width: 100%;}
.slide_btn .cg {text-align: center;}   
.slide_btn ul {padding:15px 0;}
.slide_btn ul li {float: none; display: inline-block;}
.slide_btn ul li a {display:block; width:10px; height:10px; border-radius:5px; background:#4d4d4d; margin:0 3px; text-align:center;}
.slide_btn ul li a.on {width:40px; background:#fff;}

.gstar_contents p {margin: 0;}
.gstar_contents>article {
    position: relative;
    overflow: hidden; 
    margin-top:50px;
}
.gstar_contents>article>div {float: left; width: 362px; height: 425px; border: 1px solid #d9d9d9; box-sizing: border-box; overflow: hidden; margin:0 22px 20px 0px;
    cursor: pointer;}
.gstar_contents>article>div:nth-child(3n) {margin-right:0;}
.gstar_contents>article>div a {display: block;}
.gstar_contents>article>div img {width: 362px; height: 266px;}
.gstar_contents>article>div .eventPop .x_btn {
    width: 34px;
    height: 34px;
    text-indent: -9999px;
}
.gstar_contents>article>div .eventPop .x_btn::before,
.gstar_contents>article>div .eventPop .x_btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 42px;
    width: 5px;
    background-color: #fff;
}
.gstar_contents>article>div .eventPop .x_btn::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.gstar_contents>article>div .eventPop .x_btn::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.gstar_contents h2 {
    position: relative;
    letter-spacing: -2px;
}
.gstar_contents h2 .subImg {
    display: block;
    position: absolute;
    top: -28px;
    right: 15px;
}
.gstar_contents .con_text {padding: 10px 15px;}
.gstar_contents .con_category {color:#fff; padding:3px; width: max-content;}
.gstar_contents .con_category.cate3 {background: #dc2e53;}
.gstar_contents .con_category.cate2 {background: #2769ba;}
.gstar_contents .con_category.cate1 {background: #eba22f;}
.gstar_contents .con_title {font-size: 23px; margin:10px 0; height: 54px; overflow: hidden;}
.gstar_contents .con_hashtags {font-size: 15px; height: 36px; color: #999999;}

.gstar_contents .con_intro {padding: 10px; text-align: center;
    cursor: default;}
.gstar_contents .con_intro img {width: 340px; height: 190px;}
.gstar_contents .con_intro .con_minor {margin-top: 10px; color: #000; font-size: 21px;}
.gstar_contents .con_intro .con_title {font-size:32px; color:#00b2e4; margin: 32px 0; overflow: visible;}
.gstar_contents .con_intro .con_title.red {color: #e24949; margin-top: 16px;}
.gstar_contents .con_intro .con_hashtags {letter-spacing: -1px; line-height: 20px;}

.gstar_contents .photo_main img {width: 362px; height: 266px;}
.gstar_contents .con_photo {text-align: center; padding: 0 18px;}
.gstar_contents .con_photo .con_title {height: inherit; margin: 20px 0 15px 0;}
.gstar_contents .con_photo .con_title span {color:#f6aa2f;}
.gstar_contents .con_photo .con_hashtags {font-size: 23px;}
.gstar_contents .event_article{ display:none;}
.gstar_contents .event_article.action{ display:block;}

.sponsorBox {text-align: center;}
.cooperation_company {margin-bottom: 120px;}
.cooperation_company ul {width: 100%; text-align: center; overflow: hidden;}
.cooperation_company ul li {float: left; padding: 12px 0; width: 20%;}
.cooperation_company ul li img {max-width: 100%;}

/*서브페event_yellow action이지*/
.streaming_platform {overflow: hidden; margin: 35px 0 0 0;}
.streaming_platform .youtube {float: left;}
.streaming_platform .twitch {float: right;}
.streaming_platform a {text-indent: -9999px; display: block; width: 553px; height: 139px; background: url("//static.inven.co.kr/image_2011/gstar/2019/live_img.png") no-repeat center;}
.streaming_platform .youtube a {background-position: 0px 0px;}
.streaming_platform .twitch a {background-position: 0px -139px; height: 134px; margin-top: 6px;}

.gstar_banner {margin: 80px 0 120px 0;}
.gstar_banner>article {margin-top: 20px;}
.gstar_banner.live_banner img {width: 1130px; height: 305px;}
.gstar_banner.market_banner img {width: 1130px; height: 383px;}

.event_header {overflow: hidden; border-bottom:8px solid #f2f2f2; position: relative;}
.event_header::before {content: ""; display: block; height: 1px; width: 100%; background: #d9d9d9; bottom: 0px; position: absolute;}
.event_header nav {text-align: center; padding: 30px;}
.event_header nav button {font-size: 24px; position: relative; border:none; background:#FFFFFF;cursor:pointer;outline:0; font-family: "NanumSquareRound"; width: 200px;}
.event_header nav button.action {border: 2px solid #bfbebe; border-radius: 30px;  height: 50px; line-height: 48px; box-sizing: border-box;}
.event_header nav button.event_yellow.action, .event_header .event_yellow:hover {color: #eba22f; border-color: #eba22f;}
.event_header nav button.event_green.action, .event_header .event_green:hover {color: #05b28e; border-color: #05b28e;}
.event_header nav button.event_red.action, .event_header .event_red:hover {color: #dc2e53; border-color: #dc2e53;}

.eventPop{display:none;     position: absolute;  top: 0px;  left: 0px;}
.eventPop.action{display:block;}
.gstar_popup {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 10; font-family: "NanumSquareRound"; display:none;}
.gstar_popup.action{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
}
.gstar_popup .x_btn {position: absolute; top: 10px; right: -50px;}
.gstar_popup .booth_img {width: 842px; height: 596px; position: absolute; left: 50%; margin-left: -421px; top: 50%; margin-top: -298px; cursor: pointer;}
.gstar_popup .event_popup {width: 784px; margin: 70px auto 0; position: relative; display:block; height: 100%; z-index: 20;}
.gstar_popup .event_popup .content_wrap {width: 724px; padding: 30px; max-height: 750px; overflow-x: hidden; background: #FFF; height: calc(100% - 200px);}
.gstar_popup .event_popup p {margin: 0;}
.gstar_popup .event_popup .con_title {font-size: 40px; margin: 20px 0; height: auto;}
.gstar_popup .event_popup .con_img img {
    margin-top: 20px;
    max-width: 724px;
    width: 100%;
    height: auto;
}
.gstar_popup .event_popup .con_text {font-size:23px; margin-top: 30px;}
.gstar_popup.action .screen_close {width: 100%; height: 100%; z-index: 10; position: fixed; top: 0;}
.gstar_popup .popup_layout {overflow: hidden; width: 100%;}
.gstar_popup .popup_layout .con_hashtags {float: left; width: 477px;}
.gstar_popup .popup_layout .link {float: right;}
.gstar_popup .popup_layout .link a {width: 230px; height: 51px; text-align: center; background: #e0435e; color: #FFF; border-radius: 15px; line-height: 50px; font-size: 25px;}


/* 마켓인벤 서브페이지 레이아웃 추가 */

.layout01-col4.gstar_contents {

}
.layout01-col4.gstar_contents>article>div {
    position: relative;
    width: 266px;
}
.layout01-col4.gstar_contents>article>div img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -181px;
    max-width: inherit;
}
.layout01-col4.gstar_contents>article>div:nth-child(3n) {
    margin-right: 22px;
}
.layout01-col4.gstar_contents>article>div:nth-child(4n) {
    margin-right: 0;
}

.layout01-col4.gstar_contents .con_text {
    margin: 266px 0 0 0;
}