@charset "utf-8";
/* GCP WD_WP Team. Author : Sunmin Koak 2019-10-07. Edit : Sunmin Koak 2023-01-04 */
::-webkit-input-placeholder	{color:#b0baca !important;}
::-moz-placeholder	{color:#b0baca !important;}
:-ms-input-placeholder	{color:#b0baca !important;}
:-moz-placeholder	{color:#b0baca !important;}
input:-ms-input-placeholder	{color:#b0baca !important;}


body {
    background-image:url('../../../img/new/main/bg_social_main.jpg');
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;
}
.social_main_container {
    display:flex;
    /* justify-content: center; */
    width:100%;
    height:100vh;


}
.pc_box {
    display:flex;justify-content: center;
    border:1px solid red;
}
.social_main_container .main_wrap {
    min-width:900px;
    height:100%;
    margin:0 auto;
    /* background-color:rgba(0,0,0,0.5); */
    position:relative;
    padding:340px 30px 0 30px;
    box-sizing:border-box;
    /* overflow-x:auto; */
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.social_main_container .main_wrap .icon_1,
.social_main_container .main_wrap .icon_2,
.social_main_container .main_wrap .icon_3 {
    position:absolute;
}
.social_main_container .main_wrap .icon_1 {
    width:76px;
    height:78px;
    top:132px;
    left:300px;
    animation: float 3s ease-in-out infinite;
}
.social_main_container .main_wrap .icon_2 {
    width:70px;
    height:70px;
    top:172px;
    left:441px;
    animation: float 3.5s ease-in-out infinite;
    animation-delay: -1.2s;
}
.social_main_container .main_wrap .icon_3 {
    width:73px;
    height:73px;
    top:84px;
    left:479px;
    animation: float 2.8s ease-in-out infinite;
    animation-delay: -0.7s;
}

@keyframes twinkle {
    0%, 40%, 100% { opacity: 1; }
    20% { opacity: 0.1; }
}

.social_main_container .main_wrap .star1,
.social_main_container .main_wrap .star2 {
    position:absolute;
    width:23px;
    height:23px;
    background-size:23px;
    background-image:url('../../../img/new/main/icon_social_star.png');
}
.social_main_container .main_wrap .star1  {
    top:116px;
    left:430px;
    animation: twinkle 3s ease-in-out infinite;
}
.social_main_container .main_wrap .star2  {
    top:160px;
    left:392px;
    animation: twinkle 5s ease-in-out infinite;
    animation-delay: -2s;
}
.social_main_container .main_wrap .games_wrap {
    display:flex;
    justify-content: space-between;
}

/* 3D hover 래퍼 — JS mousemove 로 --rx, --ry, --shadow-x, --shadow-y 주입 */
.social_main_container .main_wrap .games_wrap .card_3d_wrap {
    display: inline-grid;
    perspective: 600px;
    filter: drop-shadow(var(--shadow-x, 0rem) var(--shadow-y, 0rem) 0.3rem #00000033)
    drop-shadow(var(--shadow-x, 0rem) var(--shadow-y, 0rem) 0.5rem #00000018);
    transition: filter ease-out 300ms;
}

/* 카드 본체 — rotate3d 적용 대상 */
.social_main_container .main_wrap .games_wrap .card_3d_wrap > .card_com2us,
.social_main_container .main_wrap .games_wrap .card_3d_wrap > .card_holdings {
    grid-area: 1/1/4/4;
    transform: rotate3d(var(--rx, 0), var(--ry, 0), 0, 4deg);
    transition: scale 200ms ease-out;
}
.social_main_container .main_wrap .games_wrap .card_3d_wrap:hover > .card_com2us,
.social_main_container .main_wrap .games_wrap .card_3d_wrap:hover > .card_holdings {
    scale: 1.03;
}

/* 8개 호버 감지 존 — pointer-events: none 으로 클릭 통과 */
.social_main_container .main_wrap .games_wrap .card_3d_wrap > :nth-child(n+2) {
    isolation: isolate;
    z-index: 1;
    scale: 1.2;
    pointer-events: none;
}
.social_main_container .main_wrap .games_wrap .card_3d_wrap > :nth-child(2) { grid-area: 1/1/2/2; }
.social_main_container .main_wrap .games_wrap .card_3d_wrap > :nth-child(3) { grid-area: 1/2/2/3; }
.social_main_container .main_wrap .games_wrap .card_3d_wrap > :nth-child(4) { grid-area: 1/3/2/4; }
.social_main_container .main_wrap .games_wrap .card_3d_wrap > :nth-child(5) { grid-area: 2/1/3/2; }
.social_main_container .main_wrap .games_wrap .card_3d_wrap > :nth-child(6) { grid-area: 2/3/3/4; }
.social_main_container .main_wrap .games_wrap .card_3d_wrap > :nth-child(7) { grid-area: 3/1/4/2; }
.social_main_container .main_wrap .games_wrap .card_3d_wrap > :nth-child(8) { grid-area: 3/2/4/3; }
.social_main_container .main_wrap .games_wrap .card_3d_wrap > :nth-child(9) { grid-area: 3/3/4/4; }
.social_main_container .main_wrap .games_wrap .balloon {
    display:flex;
    align-items: center;
    justify-content: center;
    height:42px;
    border-radius:42px;
    font-size:14px;
    font-weight:bold;
    color:#000;
    position:absolute;
    z-index:1;
    padding:0 26px;
}
.social_main_container .main_wrap .games_wrap .balloon::before {
    content:'';
    position:absolute;
    width:20px;
    height:22px;
    background-size:20px 22px;
    background-repeat: no-repeat;
}
.social_main_container .main_wrap .games_wrap .card_com2us .balloon {
    background-color:#fff;
    transform:rotate(-12deg);
    top:-36px;
    right:60px;
}
.social_main_container .main_wrap .games_wrap .card_com2us .balloon::before {
    background-image:url('../../../img/new/main/icon_social_com2us_arrow.png');
    top:36px;
    right:40px;
    transform:rotate(8deg);
}
.social_main_container .main_wrap .games_wrap .card_holdings .balloon {
    background-color:#00E677;
    transform:rotate(5deg);
    top:-46px;
    left:60px;
}
.social_main_container .main_wrap .games_wrap .card_holdings .balloon::before {
    background-image:url('../../../img/new/main/icon_social_holdings_arrow.png');
    top:36px;
    left:40px;
    transform:rotate(-5deg);
}

.social_main_container .main_wrap .games_wrap .card_com2us,
.social_main_container .main_wrap .games_wrap .card_holdings {
    border-radius:40px;
    width:400px;
    height:420px;
    position:relative;
    border:1px solid rgba(255,255,255,0.3);
    padding: 0 0 0 50px;
    box-sizing:border-box;
}
.social_main_container .main_wrap .games_wrap .card_com2us::before,
.social_main_container .main_wrap .games_wrap .card_holdings::before {
    content:'';
    width:380px;
    height:400px;
    position:absolute;
    top:10px;
    left:10px;
    border-radius:40px;
}
.social_main_container .main_wrap .games_wrap .card_com2us::before {
    background-color:#000000;
}
.social_main_container .main_wrap .games_wrap .card_holdings::before {
    background-color:#750410;
}
.social_main_container .main_wrap .games_wrap .card_com2us::after {
    content:'';
    width:252px;
    height:160px;
    background-image:url('../../../img/new/main/img_social_com2us_icons.png');
    background-size:252px 160px;
    background-repeat: no-repeat;
    position:absolute;
    top:180px;
    right:40px;
}
.social_main_container .main_wrap .games_wrap .card_holdings::after {
    content:'';
    width:200px;
    height:200px;
    background-image:url('../../../img/new/main/img_social_holding_icons.png');
    background-size:200px;
    background-repeat: no-repeat;
    position:absolute;
    top:150px;
    right:40px;
}
.social_main_container .main_wrap .games_wrap .card_com2us .logo {
    width:100px;
    height:16px;
    background-image:url('../../../img/new/main/com2us.svg');
    background-repeat: no-repeat;
    background-size:100px 16px;
    position:relative;
    z-index:1;
    margin:70px 0 20px 0;
}
.social_main_container .main_wrap .games_wrap .card_holdings .logo {
    width:100px;
    height:35px;
    background-image:url('../../../img/new/main/holdings.svg');
    background-repeat: no-repeat;
    background-size:100px 35px;
    position:relative;
    z-index:1;
    margin:60px 0 20px 0;
}
.social_main_container .main_wrap .copyright {
    color:#61B2C2;
    font-size:13px;
    width:100%;
    left:0;
    text-align:center;
    position:absolute;
    bottom:50px;
}
.social_main_container .main_wrap .games_wrap .title {
    font-size:24px;
    font-weight:bold;
    color:#fff;
    position:relative;
    z-index:1;
    line-height:32px;
}
.social_main_container .main_wrap .games_wrap .btn_more {
    padding:0 28px 0 24px;
    height:52px;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size:14px;
    font-weight:bold;
    color:#ffffff;
    position:absolute;
    bottom:50px;
    left:40px;
    background-color:rgba(0,0,0,0.16);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:52px;
    z-index:2;
    transition-duration:0.2s;
    transition-property: background-color, border-color;
}
.social_main_container .main_wrap .games_wrap .btn_more:hover {
    background-color:rgba(0,0,0,0.5);
    border-color:rgba(255, 255, 255,0.4);
}
.social_main_container .main_wrap .games_wrap .btn_more::after {
    content:'';
    width:20px;
    height:20px;
    background-size:20px;
    background-repeat: no-repeat;
    background-image:url('../../../img/new/main/arrow.svg');
    margin-left:6px;
    transform:translateY(1px);

}

@media all and (max-height: 876px) {
    .social_main_container .main_wrap {
        overflow-y:auto;
        padding-bottom:50px;
    }
    .social_main_container .main_wrap::-webkit-scrollbar {
        display:none;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
    }
    .social_main_container .main_wrap .copyright {
        position:static;
        margin-top:50px;
    }
}