/*****************************! 전체 영역 !*****************************/
* {
    list-style: none;
    text-decoration: none;
    /* font-family: "Mark Pro"; */
    scroll-behavior: smooth;
}

*::-webkit-scrollbar {
    display: none;
}

section {
    height: 100vh;
    margin: 0;
    padding: 0;
}

div,
article,
aside,
footer,
header,
hgroup,
main,
menu,
nav,
section,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
nav,
a,
button,
label,
input,
select,
textarea,
span {
    box-sizing: border-box;
}

footer {
    box-sizing: border-box;
}

html,
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #111;
    color: #fff;
    cursor: url(img/normal.cur), auto;
    scroll-behavior: auto;
}

html a,
button,
li,
i {
    cursor: url(img/link.cur), auto;
}

span {
    cursor: url(img/normal.cur), auto;
}

/* html button{
    cursor: url(img/link.cur),auto;
} */
/* .snap{
    scroll-snap-align: start;
} */

/*****************************! 헤더 영역 !*****************************/

header {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: fixed;
    z-index: 9999;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

header .content {
    width: 100%;
    margin: 0 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.nav {
    font-family: "Mark Pro";
    width: clamp(0px, 500px, 700px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 0;
    margin: 16px auto 0 0;
}

.sign_in {
    font-family: "Mark Pro Bold";
    display: flex;
    align-items: center;
}

.sign_in a {
    background-color: #fff;
    color: #000;
    border-radius: 50px;
    padding: 7px 25px;
    margin-top: 17px;

}

.menu_toggle{
    display: none;
}

.header_menu {
    display: none;
    flex-direction: column;
}

.header_menu2 {
    display: none;
    flex-direction: column;
}

/* 기본 상태 */
.fullscreen_menu {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* 활성화 상태 */
.fullscreen_menu.active {
    visibility: visible;
    opacity: 1;
}

.fullscreen_menu ul {
    list-style: none;
    text-align: left;
    padding: 0;
    width: 80%;
    margin: 0 auto;
}

.fullscreen_menu ul p{
    border-bottom: 1px solid gray;
    line-height: 3.5;
}

.fullscreen_menu li {
    margin: 20px 0;
}

.fullscreen_menu a {
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    transition: color 0.3s;
}

.fullscreen_menu a:hover {
    color: #e93740;  /* JobSprout 메인 컬러 */
}

/*****************************! 임시로 슬로건과 비디오를 감싼 div !*****************************/

.temporary {
    width: 100%;
    height: 2500px;
    background-color: #000;
}

/*****************************! 슬로건 영역 !*****************************/

.slogan {
    position: sticky;
    width: 100%;
    height: auto;
    top: 0;
    z-index: 100;
    padding-top: 100px;
}

.slogan .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

.slogan .content .upper {
    text-transform: uppercase;
}

.slogan .content .font_size {
    font-size: clamp(60px, 6.8vw, 120px);
}

.slogan .content .font_family {
    font-family: "Mark Pro Bold";
}

.slogan .content button {
    font-family: "Mark Pro";
    font-size: 24px;
    border-radius: 50px;
    padding: 20px 40px;
    background: rgb(209, 54, 57);
    border: none;
}

.slogan .content h2 {
    text-shadow: -3px 0px #000, 0px 3px #000, 3px 0px #000, 0px -3px #000;
}

/* .second_txt{
    margin-top: -100px;
} */

/*****************************! 비디오 영역 !*****************************/

.video_container {
    margin-top: 150px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 88;
}

.video_container .content {
    display: flex;
}

.video_container .content video {
    height: 100%;
    width: clamp(50%, 80%, 90%);
    object-fit: cover;
    background-size: cover;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

/*****************************! 회사소개 영역 !*****************************/

.info {
    scroll-snap-align: start;
    width: 100%;
    height: 100%;
    display: inline-block;
    margin: 0px;
    inset: auto;
    position: relative;
    overflow: visible;
    padding: 100px 0px 0px;
    font-family: "Mark Pro bold";
    background: linear-gradient(180deg, #111 0%, #272727 100%);
    /* padding: 1900px 0px 0px; */
    margin: 1750px 0px 0px;
    scroll-snap-type: y proximity;
}

.spacer {
    height: 300vh;
    /* 기존 높이에서 높이를 늘려서 스크롤 영역을 더 길게 만듬 */
    /* 필요에 따라 더 커지거나 줄어들 수 있습니다 */
}

.info .content {
    width: clamp(240px, 89vw, 1480px);
    height: 100%;
    margin: 0 auto;
}

.info .content .wrap {}

.wrap p {
    word-break: keep-all;
}

.wrap .font_size {
    font-size: clamp(28px, 3.733vw, 72px);
}

i {
    vertical-align: middle;
}

.ico.people {
    width: clamp(36px, 4.8vw, 68px);
    height: clamp(36px, 4.8vw, 68px);
}

/*****************************! work with us 영역 !*****************************/

.work_with_us {
    margin-top: -40px;
    width: 100%;
    height: 100%;
    background-color: #272727;
    font-family: "Mark Pro";
    position: relative;
    z-index: 999;
}

.work_with_us .font_size {
    font-size: 48px;
}

.work_with_us .font_family {
    font-family: "Mark Pro Bold";
}

.work_with_us .content {
    width: 80%;
    height: 100%;
    margin: 0 auto;
}


.work_with_us .content .learn_more {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.learn_box {
    width: 100%;
    height: 150px;
    max-height: 300px;
    /* 기본 높이 설정 */
    border-radius: 25px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: all 0.5s ease;
    overflow: hidden;
    /* 내부 내용이 튀어나오지 않도록 설정 */
}

.learn_box .text_area {
    width: 500px;
    height: 100%;
    margin: 0 auto;
    align-items: center;
}

.learn_box h3 {
    margin: 0px 10px 0px 50px;
}

/*****************************! Riot games info 영역 !*****************************/

.game_info {
    width: 100%;
    height: 100%;
    background-color: #1c1c1c;
    margin-top: -40px;
    /* padding: 0px 0px 1500px; */
    overflow: hidden;
}

.game_info .font_size {
    font-size: 48px;
}

.game_info .font_family {
    font-family: "Mark Pro Bold";
}

.game_info .content {
    width: 100%;
    height: 100%;
}

.game_wrap {
    display: flex;
    flex-direction: row;
}

.game_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 450px;
    height: 100%;
    margin-left: 150px;
    margin-top: 50px;
    position: relative;
}

.operating_system {
    background-color: gray;
    border-radius: 25px;
    width: 70px;
    height: 30px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* 아이콘 간격 조정 */
}

.operating_system .icon {
    display: flex;
    /* flexbox 적용 */
    width: 100%;
    /* 부모 컨테이너 크기에 맞춤 */
    justify-content: space-evenly;
    /* 아이콘을 균등하게 배치 */
    align-items: center;
}

.logo_img a img {
    width: 200px;
    height: auto;
}

.game_description {
    text-align: center;
    color: #E3525A;
}

.game_img {
    position: absolute;
    width: 400px;
    height: 300px;
    bottom: 0px;
}

.box {
    width: 400px;
    height: 250px;
    background-color: #272727;
    border: none;
    border-radius: 10px 80px 10px 80px;
    margin-top: 50px;
}

.game_img a img {
    width: 100%;
    height: 100%;
}

.box1 {
    margin-top: 79px;
}

.box3 {
    margin-top: 33px;
}

.box4 {
    margin-top: 81px;
}

.img3 {
    width: 300px;
}

.img4 {
    width: 200px;
}

/*****************************! Esports 영역 !*****************************/

.min_lol,
.min_val {
    display: none;
}

.esports {
    width: 100%;
    height: 100%;
    display: inline-block;
    background-color: #1c1c1c;
}

.esports .font_size {
    font-size: 48px;
}

.esports .font_family {
    font-family: "Mark Pro Bold";
}

.esports .content {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* 롤 */
.lol_esports {
    width: 35%;
    height: 555px;
    background: rgb(3, 1, 22);
    background: linear-gradient(90deg, rgba(3, 1, 22, 1) 0%, rgba(5, 23, 72, 1) 20%, rgba(3, 19, 145, 1) 40%, rgba(3, 15, 98, 1) 60%, rgba(4, 6, 40, 1) 80%);
    border-radius: 30px;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    transition: transform 0.1s ease-out;
    /* 부드러운 움직임 */
    transform-style: preserve-3d;
    /* 3D 효과 적용 */
    perspective: 1000px;
    /* 원근감 추가 */
}

.lol_esports .lol_esportsLogo_img {
    max-width: 180px;
    margin: 0 auto;
}

.lol_esports .lol_esportsLogo_img img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.lol_esports .lol_esportspeople_img img {
    width: 100%;
    height: 100%;
}

.lol_esports_info {
    padding: 10px;
    margin-left: auto;
    font-family: "Mark Pro";
}

/* 라이엇로고 */
.riot_logo {
    width: 20%;
    margin: 200px auto 0;
}

.riot_logo h1 img {
    max-width: 100%
}

/* 발로란트 */
.val_esports {
    width: 35%;
    height: 555px;
    background: rgb(67, 2, 6);
    background: linear-gradient(90deg, rgba(67, 2, 6, 1) 0%, rgba(106, 9, 18, 1) 20%, rgba(167, 46, 46, 1) 40%, rgba(143, 28, 30, 1) 60%, rgba(97, 12, 20, 1) 80%);
    border-radius: 30px;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.val_esports .val_esportsLogo_img {
    max-width: 180px;
    margin: 0 auto;
}

/* 로고 */
.val_esports .val_esportsLogo_img img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.val_esports .val_esportspeople_img img {
    width: 100%;
    height: 100%;
}

.val_esports_info {
    float: right;
    padding: 20px;
    margin-left: auto;
    font-family: "Mark Pro";
}

/*****************************! 슬라이드 텍스트 영역 !*****************************/

/* .slide_container{
    display: inline-block;
    width: ;
} */

.slide_container {
    overflow: hidden;
    white-space: nowrap;
    max-height: 300px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    background-color: #1c1c1c;
    margin-top: -5px;
}

.slide_wrapper {
    display: flex;
    width: 100%;
}

.slide_track {
    display: flex;
    gap: clamp(35px, 9.333vw, 80px);
    animation: marquee 20s linear infinite;
    width: max-content;
    /* 요소들이 잘리지 않도록 설정 */
}

.slide_box {
    flex: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    color: #fff;
}

.slide_box span {
    font-size: clamp(60px, 6.8vw, 120px);
    font-family: "Mark Pro Bold";
}

/* 애니메이션 */
@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/*****************************! my info 영역 !*****************************/

.my_info {
    width: 100%;
    /* height: 100%; */
    height: 70%;
    display: inline-block;
    background-color: #1c1c1c;
}

.my_info .content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.git_hub {
    width: 40%;
    height: 400px;
    padding: 20px;
    background-color: #fff;
    color: #000;
    border-radius: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.e_mail {
    width: 40%;
    height: 400px;
    padding: 20px;
    background-color: #111;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.my_info_icon {
    font-size: clamp(60px, 8vw, 100px);
    margin-bottom: 38px;
}

.git_hub img {
    width: clamp(155px, 3.733vw, 40px);
    /* height: clamp(40px, 3.733vw, 40px); */
    margin-bottom: 38px;
}

.my_info .content h3 {
    font-size: clamp(28px, 3.733vw, 40px);
    margin: 10px 0;
    font-family: "Mark Pro Bold";
}

.my_info .content a {
    margin-top: calc(71px - 50px);
    font-family: "Mark Pro";
}

.my_info .content p {
    color: #ababab;
    font-family: "Mark Pro";
}

/*****************************! Footer 영역 !*****************************/

/*? footer 공통 요소 ?*/
footer {
    width: 100%;
    height: 100%;
    background-color: #e93740;
    display: inline-flex;
    justify-content: center;
}

footer a {
    color: #fff;
    align-items: center !important;
}

footer ul {
    box-sizing: border-box;
    padding: 0;
}

footer li {
    align-items: center !important;
}

footer .content {
    width: 100%;
    max-width: 1200px;
    padding-top: 77px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer .title {
    width: 100%;
    text-align: center;
}

footer .content .title h1 {
    /* display: inline-block;
    ;
    font-size: 198px;
    justify-content: center;
    margin: 50px auto 0px; */
    font-family: "Mark Pro Bold";
    font-size: clamp(48px, 10vw, 198px);
    margin: 0;
    color: #fff;
}

/* 타이틀을 제외한 contents */
/* .footer_main{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 100px;
    font-family: "Mark Pro";
} */

.footer_main {
    font-family: "Mark Pro";
    width: 100%;
    max-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 50px;
    text-align: center;
}

/* 버튼 및 문구관련 */
.btn_area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

.btn_area button {
    background-color: #333333;
    color: #fff;
    font-family: "Mark Pro";
    font-size: 24px;
    border-radius: 50px;
    padding: 20px 40px;
    border: none;
}

.btn_area button:hover {
    background-color: #fff;
    color: #e93740;
}

/* 맵 or 메뉴 영역 */
.footer_map {
    margin-left: auto;
    text-align: left;
}

.cursor_none {
    display: block;
    z-index: 999;
    cursor: alias;
}

.footer_map span,
a {
    font-size: 16px;
}

.footer_map .list {
    box-sizing: border-box;
}

.footer_menu {
    margin: 20px 0 50px;
}

.footer_menu a {
    position: relative;
}

.footer_menu a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: scale(0);
    transition: transform 1s;
    transform-origin: left;
}

.footer_menu a.underline::after {
    transform: scaleX(1);
}

.footer_nav {
    gap: 40px;
    display: flex;
    flex-direction: row;
}

.footer_nav li span {
    color: #333333;
}

.footer_nav i {
    margin: 0 0 4px 10px;
}

.pack_down ul {
    display: flex;
    flex-direction: column;
}

/*? inline-block을 사용해도 밑 줄이 text 길이 만큼 변하지 않음 ?*/
.pack_down>span,
.pack_down>ul>li a{
    display: inline-block;
    margin: 14px 0;
    position: relative;
    cursor: pointer;
}

.pack_down ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 0;
    height: 1px;
    background-color: #fff;
    transform: scale(0);
    transition: transform 1s;
    transform-origin: left;
}

.pack_down ul li a.underline::after {
    width: 100%;
    transform: scaleX(1);
}

.social_list {
    display: flex;
    justify-content: space-between;
}

.social_list i {
    font-size: 24px;
    line-height: 3.5em;
}

.social_list i:hover {
    color: #333333
}

/*****************************! go to top 영역 !*****************************/

.go_to_top {
    position: fixed;
    bottom: 40px;
    right: 50px;
    background-color: #ca141d;
    border-radius: 50%;
    padding: 15px 15px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.go_to_top i {
    font-size: 24px;
}

/* TODO : 반응형 css */


@media (max-width: 550px) {
    .learn_box .text_area {
        width: 200px;
    }
}

/*! 모바일 !*/
@media (max-width: 767px) {
    .footer_main {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .footer_map {
        margin: 0;
    }

    .footer_menu {
        text-align: center;
    }

    .my_info .content p{
        display: none;
    }

    .esports {
        height: 170%;
    }

    .esports .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .min_lol,
    .min_val {
        display: block;
    }

    .lol_esports,
    .val_esports {
        display: none;
    }

    .min_lol {
        width: 80%;
        margin: 0 auto;
        position: relative;
    }

    .min_lol .lol_esportspeople_img img {
        width: 100%;
    }

    .min_lol .lol_esportsLogo_img {
        max-width: 180px;
    }

    .min_lol .lol_esportsLogo_img img {
        width: auto;
        position: absolute;
        top: 44%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
    }

    .lol_esports_info {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .riot_logo {
        width: 20%;
        margin: 50px auto;
    }

    .min_val {
        width: 80%;
        margin: 0 auto;
        position: relative;
    }

    .min_val .val_esportspeople_img img {
        width: 100%;
    }

    .min_val .val_esportsLogo_img {
        max-width: 180px;
    }

    .min_val .val_esportsLogo_img img {
        width: auto;
        position: absolute;
        top: 44%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
    }

    .val_esports_info {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .info {
        margin: 1525px 0px 0px;
    }

    .video_container .content {
        height: 31%;
    }

    video {
        height: 120%;
    }

}

@media (max-width: 872px) {
    header h3{
        z-index: 999999;
    }
        
    header .content .nav li {
        display: none;
    }

    .nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 50px;
        color: #fff;
    }

    .nav li{
        margin: 10px 0;
    }

    .sign_in {
        display: none;
    }

    .menu_toggle {
        display: block;
        position: relative;
        top: 33px;
        color: #f1f1f1;
        height: 30px;
        font-size: 36px;
        z-index: 999999
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .info {
        margin: 1525px 0px 0px;
    }

    .video_container .content {
        height: 31%;
    }

    video {
        height: 120%;
    }

    .footer_main {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .footer_map {
        margin: 0;
    }

    .footer_menu {
        text-align: center;
    }

    .esports {
        height: 170%;
    }

    .esports .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .min_lol,
    .min_val {
        display: block;
    }

    .lol_esports,
    .val_esports {
        display: none;
    }

    .min_lol {
        width: 80%;
        margin: 0 auto;
        position: relative;
    }

    .min_lol .lol_esportspeople_img img {
        width: 100%;
    }

    .min_lol .lol_esportsLogo_img {
        max-width: 180px;
    }

    .min_lol .lol_esportsLogo_img img {
        width: auto;
        position: absolute;
        top: 44%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
    }

    .lol_esports_info {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .riot_logo {
        width: 20%;
        margin: 50px auto;
    }

    .min_val {
        width: 80%;
        margin: 0 auto;
        position: relative;
    }

    .min_val .val_esportspeople_img img {
        width: 100%;
    }

    .min_val .val_esportsLogo_img {
        max-width: 180px;
    }

    .min_val .val_esportsLogo_img img {
        width: auto;
        position: absolute;
        top: 44%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
    }

    .val_esports_info {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

}

@media (max-width:768px) {
    .learn_box .text_area {
        width: 300px;
    }

    .esports {
        height: 140%;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .video_container .content {
        height: 31%;
    }

    video {
        height: 120%;
    }

    .info {
        margin: 1550px 0px 0px;
    }

    .footer_main {
        justify-content: center;
    }

    .footer_map {
        margin: 0;
    }
}

@media (max-width: 992px) {
    .info {
        margin: 1450px 0px 0px;
    }
}

@media (max-width: 1920px) {
    .info {
        margin: 2200px 0px 0px;
    }
}