@font-face {
    font-family: 'TTTogether';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
#main section {width: 100%;margin: 0 auto;}
.contetns {padding: 110px 20px;}
/* 배너 슬라이드 */
#slide {
    /* height: auto; */
    overflow: hidden;
    position: relative;
}
.slide01 {
    width: 100%;
    height: auto;
}

.swiper-slide {
    /* height: auto !important; */
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination {margin-bottom: 1.5%;}

/* ====================== video ============================ */
#video .video_wrap {
    text-align: center;
    margin: 0 auto;
}
#video .video_wrap p {
    color: #444;
    margin-top: 1.19rem;
}

#video .video_wrap {
    margin: 0 auto;
    text-align: center;
    padding: 0 16%;
}
/* iframe */
.iframeContainer {
    position: relative;
    width: 100%;
    height: 0;
    margin: 0 auto;
  }
  
  /* 16:9 */
  .iframe16To9 {
    padding-top: 56.25%;
  }
  /* 4:3 */
  .iframe4To3 {
    padding-top: 75%;
  }
  .iframeContainer .iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  #video p {
    margin-bottom: 5%;
  }

/*========================== serie =========================*/
#serie .serie_wrap {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, auto));
    grid-template-rows: repeat(3, 1fr);
    row-gap: 20px;
    column-gap: 20px;
}
#serie .serie_wrap li {
    border-radius: 0.94138rem;
    border: 1px solid #EDEDED;
    padding: 2.22rem 2.22rem 2rem;
    box-shadow: 4.707px 4.707px 14.12px 0px rgba(0, 0, 0, 0.10);
    background-color: #FBFBFB;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#serie .serie_wrap li .mokup {
    width: 100%;
    height: 16.54838rem;
    margin: 0 auto;
    overflow: hidden;
}
#serie .serie_wrap li .mokup img {
    width: -webkit-fill-available;
    height: 100%;
    margin: 0 auto;
    object-fit: scale-down;
}

#serie .serie_wrap li .name {
    display: flex;
    flex-direction: column;
    height: 50%;
    gap: 1rem;
}
#serie .serie_wrap li .name .logo,
#game .game-slide li .name .logo {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#serie .serie_wrap li .name .logo.company {
    width: 8.75rem;
    height: 6rem;
    background-image: url(/connectPlay/img/company.svg);
    background-size: cover 100%;
    background-repeat: no-repeat;
}
#serie .serie_wrap li .name h4 {
    font-weight: 600;
}

/* =========== game logo ============ */
#serie .serie_wrap li .name .teamQ {
    width: 50%;
    height: 6rem;
    background-image: url(/connectPlay/img/teamQ.svg);
}
#serie .serie_wrap li .name .xzit {
    width: 50%;
    height: 6rem;
    background-image: url(/connectPlay/img/xzit.png);
}
#serie .serie_wrap li .name .race {
    width: 50%;
    height: 6rem;
    background-image: url(/connectPlay/img/race.png);
}
#serie .serie_wrap li .name .money {
    width: 50%;
    height: 6rem;
    background-image: url(/connectPlay/img/Money.svg);
}

/* ============= coming soon ================= */
#serie .serie_wrap li.coming {
    width: 100%;
    height: 100%;
    padding: 8rem 2.22rem 8rem;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    
}
#serie .serie_wrap li.coming .mokup img {
    width: 100%;
    object-fit: contain;
}
#serie .coming h4 {
    font-family: 'TTTogether';
    text-align: center;
    letter-spacing: 0rem;
    color: #7A7A7A;
    margin-top: 1rem;
    line-height: 130%; /* 4.04981rem */
    letter-spacing: -0.06231rem;
}
#serie .serie_wrap li.coming::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.94138rem;
    backdrop-filter: blur(10px);
}
#serie .serie_wrap li.coming .gameHover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#serie .serie_wrap li.coming .gameHover h4 {
    color: #0047FF;
}
#serie .serie_wrap li.coming:hover::before {
    display: none;
    opacity: 1;
    transition: opacity 2s ease;
}
#serie .serie_wrap li.coming:hover .gameHover {
    display: none;
    opacity: 1;
    transition: opacity 2s ease;
}

/* 주사위 */
#serie .serie_wrap li.sauce {
    justify-content: flex-end;
}
#serie .serie_wrap li.sauce .mokup {
    width: auto;
    height: auto;
}
#serie .serie_wrap li.sauce .mokup img {
    width: 100%;
    object-fit: contain;
}
#serie .serie_wrap li.c01 .ft-18 {
    margin-bottom: 1rem;
}
#serie .serie_wrap li.c01 {
    border: none;
    background-color: #fff;
    box-shadow: none;
}

/* ================== eduLat ====================*/
#eduList {
    padding: 110px 0px;
}
#eduList article {
    /* width: 1340px;  */
    margin: 0 auto;
    text-align: center;
    padding: 60px 20px;
}
#eduList article p {color: #444;}
.edubox {
    margin-right: 20px;
    width: 300px;
    height: auto !important;
    /* display: table-caption !important; */
}
.edubox:last-child {
    margin-right: 00px;
}
.wrap #eduList .edubox .thumbnail-img{
    max-width: 100%;
    border-radius: 15px 15px 0px 0px;
}
.wrap #eduList .edubox h6{
   height: 3.5rem;
}


/* ================== game ====================*/
#game {
    width: 100%;
    margin: 0 auto;
    background-color: #fbfbfb;
    padding-bottom: 50px;
}
#game article {
    position: relative;
    overflow: hidden;
}
#game h4 {
    color: var(--MainColor);
    text-align: center;
    margin-bottom: 3.75rem;
}
#game .game-slide {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* gap: 3rem; */
    background-color: #fbfbfb;
}
#game .game-slide .name {
    width: 30%;
}
#game .logo {
    margin-bottom: 2rem;
}
#game .game-slide .name .ft-30 {
    text-align: left;
}

/* ---------- mokup ----------------*/
#game .game-slide .imgWrap {
    width: auto;
    height: 23.9rem;
    overflow: hidden;
}
#game .game-slide .imgWrap img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ----------- game logo -------------- */
#game .game-slide .name .company {
    width: 8.75rem;
    height: 6rem;
    background-image: url(/connectPlay/img/company.svg);
    background-size: cover 100%;
    background-repeat: no-repeat;
}

#game .game-slide .name .teamQ {
    height: 6rem;
    background-image: url(/connectPlay/img/teamQ.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
#game .game-slide .name .xzit {
    height: 4rem;
    background-image: url(/connectPlay/img/xzit.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#game .game-slide .name .race {
    height: 4rem;
    background-image: url(/connectPlay/img/race.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#game .game-slide .name .money {
    height: 4rem;
    background-image: url(/connectPlay/img/Money.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

/* 스와이퍼 슬라이드바 */
.swiper-pagination { top: 95% !important;}

/* =========== process ============ */
#process {
    width: 100%;
    margin: 0 auto;
    background-color: #F0F8FF;
    text-align: center;
}
#process h4 {
    margin-bottom: 4.31rem;
}
/* ------------- tab ----------- */
.container{
	width: 100%;
	margin: 0 auto;
}

ul.tabs{
	margin: 0px;
	padding: 0px;
}
ul.tabs {
    display: flex;
    width: 27.125rem;
    height: auto;
    border-radius: 3.125rem;
    margin: 0 auto 5.07rem;
    background: #DDEEFE;

}
ul.tabs li{
    width: 13.5625rem;
    background: #DDEEFE;
	color: #BEDFFF;
	padding: 1.125rem 2.98013rem;
    border-radius: 3.125rem;
    font-weight: 700;
    text-align: center;
	cursor: pointer;
}

ul.tabs li.current{
	background: var(--MainColor);
	color: #fff;
}

.tab-content{
	display: none;
    height: 14.85713rem;
}
/* -----// tab button */
.tab-content img {
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.tab-content img.pc {display: block;}
.tab-content img.mo {display: none;}
.tab-content.current{
	display: inherit;
}

/* =========== process ============ */
#client {
    width: 100%;
    margin: 0 auto;
    padding: 110px 20px;
    background-color: #000;
}
#client .inner {
    width: 1340px;
    margin: 0 auto;
}
#client h4 {
    color: #fff;
    margin-bottom: 4rem;
    text-align: center;
}
/* --------- 이미지 흘러가기 ---------- */
#client article {
    width: 100%;
    overflow: hidden;
    position: relative;
}
#client article .img {
    width: 100%;
    height: 80px;
    margin-bottom: 30px;
}
#client article .client01 {
    background: url(/connectPlay/img/client01.png) 0 top/ 177% repeat-x;
    animation: movebg 18s linear infinite;
}
#client article .client02 {
    background: url(/connectPlay/img/client02.png) 0 top / 177% repeat-x;
    animation: movebg 18s linear reverse infinite; /* 역방향 진행*/
}
#client article .client03 {
    background: url(/connectPlay/img/client03.png) 0 top / 177% repeat-x;
    animation: movebg 18s linear infinite;
}
#client article .client04 {
    background: url(/connectPlay/img/client04.png) 0 top / 177% repeat-x;
    animation: movebg 18s linear reverse infinite; /* 역방향 진행*/
}
@keyframes movebg {
    0%{
      background-position: 0 center;
    }
    100%{
        background-position: -100% center; /* 텍스트 width와 동일 */
    }
}

/* 사이드 그라데이션 */
#client article .L-gradation {
    position: absolute;
    top: 0;
    left: 0;
    width: 32.625rem;
    height: 500px;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 29.02%, #000 89.94%);
}
#client article .R-gradation {
    position: absolute;
    top: 0;
    right: 0;
    width: 32.625rem;
    height: 500px;
    background: linear-gradient(270deg, #000 13.57%, rgba(0, 0, 0, 0.00) 72.96%);
}

/* =========== ask ============ */
#ask {
    width: 100%;
    margin: 0 auto;
    background-color: #FAFAFA;
}
#ask h4 {
    text-align: center;
    margin-bottom: 5.07rem;
}
#ask .askwrap {
    display: flex;
    align-items: center;
    box-shadow: 4.55px 4.55px 13.65px 0px rgba(0, 0, 0, 0.10);
}
#ask .askwrap li {
    width: calc(100%/4);
    height: 400px;
    background-color: #fff;
    
    
}
/* --------------- textWrap ------------ */
#ask .askwrap .textWrap {
    padding: 2.8125rem 1.6875rem;
}
#ask .askwrap .textWrap .ft-16 {
    margin-bottom: 0.03rem;
}
#ask .askwrap .textWrap .ft-20 {
    font-weight: 700;
}
/* --------------- imgWrap ------------ */
#ask .askwrap .imgWrap .arrow-circle {
 margin-left: 1.6875rem;
 margin-bottom: 2rem;
 width: 32px;
 height: 32px;
 background-image: url(/connectPlay/img/icons/arrow-circle.svg);
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

#ask .askwrap .imgWrap .imgInner {
    background-color: #ADD3FF;
    padding: 2.5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
#ask .askwrap .imgWrap .imgInner div {
    height: 7rem;
    
}
#ask .askwrap .imgWrap .imgInner div img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#ask .askHover{cursor: pointer;}
#ask .askHover:hover .textWrap { 
    padding-top: 2.8125rem; /* 상단 패딩을 유지 */
    padding-bottom: 1.8rem; /* 하단 패딩 줄임 */
}
#ask .askHover:hover .imgInner { 
    padding-top: 3.5rem; /* 상단 패딩을 늘림 */
    padding-bottom: 2.5rem; /* 하단 패딩 유지 */
}

#ask .free .imgWrap .imgInner {
    background-color: #63ABFF;
}
#ask .est .imgWrap .imgInner {
    background-color: #0082FF;
}
#ask .guide .imgWrap .imgInner {
    background-color: #0047FF;
}

/* =========== main_inquiry ============ */
#main_inquiry {
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(251deg, #55D6FF 13.28%, #0082FF 46.3%, #0036C2 87.47%);
}
#main_inquiry p {
    font-weight: 700;
    background: linear-gradient(90deg, #E2F4FF 0%, #04F3FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: 0.87rem;
}
#main_inquiry div {
    margin-bottom: 3.19rem;
    background-image: url(/connectPlay/img/circle.svg);
    background-position: left 40% bottom;
    background-repeat: no-repeat;
    background-size: 8.3rem;
}
#main_inquiry div h1 {
    color: #fff;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    
}
#main_inquiry button {
    margin: 0 auto;
    width: 20.125rem;
}
#main_inquiry button:hover {
    background-color: #63ABFF;
    border: 2px solid var(--MainColor);
    color: #fff;
}

@media only screen and (min-width: 1924px) {
    #client article .img {
        height: 120px;
    }
}

@media only screen and (max-width: 1500px) {
    #client article .img {
        margin-bottom: 24px;
    }
}
@media only screen and (max-width: 1340px) {
    #serie .serie_wrap {
        grid-template-rows: auto;
    }
    /* #serie .serie_wrap li .name {
        height: none;
    } */
    #serie .serie_wrap li.coming {
        padding: 2.22rem;
    }
    /* #serie .serie_wrap li.coming .gameHover {
        top: 30%;
        left: 20%;
    } */
    #client article .img {
        height: 67px;
        margin-bottom: 24px;
    }
}
@media only screen and (max-width: 1024px) {
    .iframeContainer {
        width: auto;
    }

    #serie .serie_wrap {
        grid-template-columns: 1fr 1fr;
    }
    #serie .serie_wrap li .mokup img {
        width: inherit;
    }
    #serie .serie_wrap li.coming .name {
        height: 50%;
        /* display: block; */
    }
    #main #eduList article {padding: 60px 0;}
    #game .game-slide .imgWrap {
        height: 16.9rem;
    }
  
    #client .inner {
        width: 90%;
    }
    #client article .img {
        margin-bottom: 16px;
    }

    

}
@media only screen and (max-width: 768px) {
    /* 배너 */
    #slide {display: none;}

    /* 영상 */
    #main #video .contetns {padding: 60px 20px 110px;}
    #video .video_wrap {padding: 0;}

    /* 게임소개 */
    #serie .serie_wrap {
        grid-template-columns: 1fr;
    }

    /* 게임 캐러셀 */
    #main #eduList article h1 {margin-bottom: 16px;}
    #game .game-slide {width: auto;height: 300px;}
    #game .next,#game .prev {top: 54%; display: none;}
    #game .game-slide .name {width: 40%;}
    #game .game-slide .imgWrap {height: auto;width: 50%;}
    #game .game-slide .heigthSize {
        height: auto;
        width: 40%;
    }
    #game .game-slide .imgWrap img {height: auto;}


    /* 프로세스 */
    ul.tabs {
        width: max-content;
    }
    ul.tabs li {
        width: 11.5rem;
        padding: 1.125rem 16px;
    }
    .tab-content img.pc {display: none;}
    .tab-content img.mo {display: block;}
    #tab-1 {width: 65%; height: auto; margin: 0 auto;height: fit-content;}
    #tab-2 {width: 24%; height: auto; margin: 0 auto;height: fit-content;}
    .tab-content img {
        width: 100%;
        margin: 0 auto;
    }

    /* 고객사 */
    #client article .L-gradation {
        width: 18.625rem;
    }
    #client article .R-gradation {
        width: 18.625rem;
    }
    #client article .client01 {
        background: url(/connectPlay/img/client01.png) 0 top / 300% repeat-x;
    }
    #client article .client02 {
        background: url(/connectPlay/img/client02.png) 0 top / 300% repeat-x;
    }
    #client article .client03 {
        background: url(/connectPlay/img/client03.png) 0 top / 300% repeat-x;
    }
    #client article .client04 {
        background: url(/connectPlay/img/client04.png) 0 top / 300% repeat-x;
    }

}
@media only screen and (max-width: 500px) {
    /* 게임 후기 캐러셀 */
    #eduList {padding: 80px 0;}
    #main #eduList article {
        padding: 0 0 30px;
    }
    .wrap #eduList .edubox h6{
        height: 3.2rem;
     }
    /* 게임소개 */
    #serie .serie_wrap li.c01 { background-color: #fafcfc;}
    #serie .serie_wrap li.sauce {
        display: none;
    }
    #game h4 {margin-bottom: 30px;}
    #game .game-slide {
        width: 100%;
        height: 500px !important;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #game .game-slide .name {width: 100%;margin-bottom: 24px;}
    #game .game-slide .imgWrap {height: auto;width: 100%;}
    #game .game-slide .heigthSize {
        height: 50%;
        width: auto;
    }
    #game .game-slide .heigthSize img {
        object-fit: contain;
        height: 100%;
    }
    .swiper-pagination {top: 99% !important;}

    /* 프로세스 */
    #process h4 {margin-bottom: 30px;}
    ul.tabs li {
        width: 10rem;
        padding: 16px 12px;
        font-weight: 400;
    }
    ul.tabs {
        margin-bottom: 30px;
    }
    #tab-1 {
        width: 90%;
    }
    #tab-2 {
        width: 34%;
    }
    /* 고객사 */
    #client {
        padding: 80px 0;
    }
    #client h4 {margin-bottom: 30px;}
    #client article .L-gradation,
    #client article .R-gradation {
        width: 11.625rem;
    }
    #client article .client01 {
        background: url(/connectPlay/img/client01.png) 0 top / 463% repeat-x;
        animation: movebg 20s linear infinite;
    }
    #client article .client02 {
        background: url(/connectPlay/img/client02.png) 0 top / 463% repeat-x;
        animation: movebg 20s linear reverse infinite;
    }
    #client article .client03 {
        background: url(/connectPlay/img/client03.png) 0 top / 463% repeat-x;
        animation: movebg 20s linear infinite;
    }
    #client article .client04 {
        background: url(/connectPlay/img/client04.png) 0 top / 463% repeat-x;
        animation: movebg 20s linear reverse infinite;
    }
    #client article .img {
        height: 53px;
    }
    
}