@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

html, body {
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
    /* overflow-y: none; */
}
html {
    scroll-behavior: smooth;
}
::-webkit-scrollbar {
    display: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

body * {
    /* outline: 1px dashed darkred; */
}

.page_home {
    background-color: #b8b8b8;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

header {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: space-between;
    /* width: 93.05vw; */
    width: 93.9%;
    height: 70px;
    /* fixed 중앙정렬 */
    transform: translateX(-50%);
    left: 50%;
    z-index: 9999;
    transition: top .2s ease-in-out;
    background-color: #0000003b;
}
.nav-up {
    top: -70px;
}
.nav-down {
    top: 0px;
}

.logo {
    background-color: gray;
    width: 150px;
    height: 50px;
}
.nav_logo {
    height: 3.77vh;
}
.navbar {
    position: absolute;
    display: flex;
    top: 23px;
    right: 0;
}
.nbtn{
    margin-left: 40px;
}
.nbtn:first-child {
    margin: 0;
}
.tnav {
    /* position: relative; */
    font-size: 20px;
    font-weight: bold;
}

/* 햄버거버튼 */
.ham {
    position: absolute;
    width: 50px;
    height: 44px;
    right: 0;
}
.ham span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
}
.ham, .ham span {
    display: inline-block;
    transition: all .4s;
}
.ham span:nth-of-type(1) {
    top: 0;
}
.ham span:nth-of-type(2) {
    top: 20px;
}
.ham span:nth-of-type(3) {
    bottom: 0;
}

.ham.hon span:nth-of-type(1) {
    transform: translateY(20px) rotate(-45deg);
}
.ham.hon span:nth-of-type(2) {
    opacity: 0;
}
.ham.hon span:nth-of-type(3) {
    transform: translateY(-20px) rotate(45deg);
}


.gnb-nav {
    position: relative;
    /* width: 86vw; */
    width: 0;
    height: 100%;
    right: 5%;
    overflow: hidden;
    transition: width .4s;
}
.gnb-nav.hon {
    width: 80vw;
    overflow: visible;
}
/* .gnb-nav.hon .gnb_ul {
    left: 0;
} */


.gnb {
    position: absolute;
    width: 630px;
    height: 70px;
    /* background-color: #b8b8b8; */
    left: 43%;
    transform: translateX(-50%);
    top: 0;
    /* padding-right: 88px; */
}
.gnb_ul {
    display: flex;
    justify-content: space-around;
    position: absolute;
    text-align: center;
    width: 100%;
    left: -50%;
}
.gnb_li {
    width: 100%;
}
.gnb_li>a {
    display: block;
    position: relative;
    width: 100%;
    height: 70px;
    line-height: 70px;
    /* background-color: red; */
    font-size: 18px;
}
.smenu {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height .5s ease-out;
}
.smenu>ol {
    padding-top: 5px;
    background-color: #b8b8b8;
}
.smenu>ol>li a {
    display: block;
    padding: 10px 0;
}

.gnb_li:hover .gla {
    font-weight: bold;
    background-color: #302e2e2f;
    color: white;
}
.smenu li:hover {
    background-color: #999;
    font-weight: bold;
}
.gnb_li:hover .smenu {
    height: 128px;
}

.mgnb-nav {
    display: none;
}



/* 메인영역 */

/* header 설정중 방해 X */
.intro_page {
    /* display: none; */
    outline: 1px dashed red;
}
.intro {
    position: relative;
    padding: 7vw 3vw
}

.sin {
    width: 44.7vw;
    /* margin-left: 57px; */
    /* padding-top: 152px; */
}
.sin_s {
    display: block;
    font-size: 6rem;
    letter-spacing: 4px;
    line-height: 121px;
    font-family: 'Russo One', sans-serif;
    
}
.sin h1 {
    font-weight: 400;
}

/* sin 밑에 있는 그림 3개 총박스 */
.intro_icon_box {
    display: flex;
    position: relative;
    width: 100%;
    background-color: darkorange;
    margin-top: 5vw;
}
.intro_icon {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #b8b8b8;
    justify-content: center;
    align-items: center;
}
.intro_icon img {
    width: 200px;
}

.intro_text_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 131px;
    margin: 100px 0;
}
.intro_h2_box {
    text-align: center;
    line-height: 35px;
}
.intro_h2_box h2 {
    font-size: 2.5rem;
    font-weight: normal;
}
.intro_span_box {
    display: flex;
    width: 100%;
}
.tspan {
    width: 50%;
    text-align: center;
}
.intro_span_box span {
    font-size: 2rem;
}


.intro_list_box {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.intro_list_tbox1 {
    font-size: 20px;
    text-transform: uppercase;
    line-height: 20px;
    word-spacing: -2px;
    text-align-last: justify;
    width: 100%;
    /* outline: 2px solid darkblue; */
}
.intro_list_text1 {
    display: block;
    width: 23vw;
}

.intro_list_tbox1-2 {
    display: flex;
    position: relative;
}

.intro_listtboxs {
    position: relative;
    margin-top: 5px;
}
.intro_list_tbox_img {
    position: relative;
    width: 220px;
    height: 260px;
    /* outline: 1px solid blue; */
}
.intro_list_tbox_img img {
    /* display: ; */
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    /* opacity: 0; 페이드 인아웃 다른버전 트랜지션도
    transition: opacity .6s ease-in-out; */
}
/* .intro_list_tbox_img img.on {
    opacity: 1;
    z-index: 1;
} */

.intro_list_text2 {
    display: block;
    text-align: center;
    width: 24vw;
    text-align-last: center;
    padding: 0 5px;
    box-sizing: border-box;
}
.intro_list_tbox1_btmt {
    width: 100%;
    position: absolute;
    bottom: 0;
    font-size: 12px;
    transform: translateY(100%);
}

/* ul 리스트 박스 */
.intro_list_tbox2 {
    width: 100%;
    /* outline: 2px solid darkred; */
}
.intro_list_tbox2_box {
    position: relative;
    display: flex;
    /* padding: 0 10px; */
}
.intro_list_tbox2_box ul {
    width: 100%;
}
.intro_list_tbox2_box ul li {
    border-top: 1px solid black;
    cursor: pointer;
    text-transform: uppercase;
    overflow: hidden;
}
.intro_list_tbox2_box ul li:last-child {
    border-bottom: 1px solid black;
}
.abox {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 15px 0;
}
.bbox:first-child {
    font-weight: bold;
}
.bbox {
    position: relative;
    /* width: 100%; */
    /* div 박스가 총 세개  */
    flex: 1;
    transition: .2s ease-out;
    /* transform-origin: top; */
}
.bbox:first-child {
    flex: 2;
}
.box1 {
    /* width: 100%; */
}
.box2 {
    /* flex: 1; */
}
.box3 {
        text-align: right;
}

.acbox {
    /* width: 100vw; */
    position: absolute;
    /* display: flex; */
    /* overflow: hidden;   */
}
.acbox2 {
    position: relative;
    display: flex;
    /* flex: 1; */
    flex-direction: row;
    left: 0;
    flex-wrap: nowrap;
}
.cbox {
    /* position: absolute; */
    font-size: 5vh;
    width: 50vw;
    transition: transform .2s ease-out;
    overflow: hidden;
    transform: translateY(100%);
    white-space: nowrap;
    /* margin-left: 5px; */
}

.abox:hover .acbox2_ani {
    animation: acani 5s linear infinite;
}
@keyframes acani {
    to {
        /* left: calc(-50vw - 5px); */
        left: -50vw;
    }
}

/* 오버시 처리 체크 */
.abox:hover .bbox {
    transform: translateY(-200%);
}
.abox:hover .cbox {
    transform: translateY(-40%);
}

.abox_img {
    /* background-color: #fff; */
    position: fixed;
    display: flex;
    top: 0;
    left: 12.8vh;
    width: 42.6vw;
    height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
.abox_iimg {
    position: absolute;
    width: 31.25vw;
    height: 70vh;
    object-fit: contain;
    transform: translateY(-100vh);
    /* transition: transform 0.5s ease-out; */
}
.on {
    transform: translateY(-100vh);
}

/* 카운터 숫자박스 */
.counter_box {
    display: flex;
    position: sticky;
    width: 100%;
    height: 100vh;
    margin-top: 100px;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}
/* 글자설정 */
.cbtxt {
    font-size: 20px;
    line-height: 1em;
    text-transform: uppercase;
    /* letter-spacing: -1px; */
    pointer-events: none;
}

.counter_boxI {
    display: flex;
    flex-direction: column;
    /* width: 50%; */
}
.counter_boxR {
    justify-content: flex-end;
    text-align: right;
}
.cbir {
    visibility: hidden;
}
.cbirn {
    visibility: visible;
}

.counter_box_num {
    font-size: 41vw;
    text-align: center;
    /* width: 50%; */
}
.cbnum {
    display: none;
    /* overflow: hidden; */
    /* opacity: 0; */
    pointer-events: none;
}
.non {
    display: block;
}

/* _____________________________ */
/* 10 위치 1900 */

.itpgWrap{
    position: fixed;
    top: 100%;
    width: 100%;
    height: 1000px;
    box-sizing: border-box;
    padding: 0 50px;
    background-color: #b8b8b8;
    z-index: 99999;
}


/* 이후 나옴 */
.itpg2 {
    height: 1000px;
    position: relative;
}
.itpg2_box {
    width: 100%;
    height: 100%;
    margin: 7vh 0;
    position: absolute;
}
.i2b {
    color: #fff;
    position: relative;
    width: 100%;
    height: calc(100vh - 6.25vw);
    background-color: #fff;
    margin: 0 auto;
    border-radius: 25px;
}

.i2b_top {
    position: relative;
    display: flex;
    /* justify-content: space-between; */
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100px;
    top: 20px;
}

.i2b_top span {
    position: absolute;
    font-size: 22px;
    padding: 10px 40px;
}
.i2b_top span:first-of-type {
    left: calc(100% - 93vw);
    font-weight: bold;
}
.i2b_top span:last-of-type {
    right: calc(100% - 93vw);
    font-size: 18px;
}

.i2bimg {
    display: flex;
    position: absolute;
    justify-content: center;
    /* top: 30px; */
}
.i2bimg img {
    width: 100px;
    border-radius: 100%;
}

/* 중간 */
.i2b_cb {
    position: relative;
    width: 100%;
    height: calc(100% - 200px);
    overflow: hidden;
}
.watch_box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* 중앙설정 */
    /* z-index: 999; */
}
.watch_box img {
    width: 640px;
    height: 678px;
}

/* 글자애니설정 */
.i2btb {
    position: absolute;
    display: flex;
    top: calc(100% - 41vh);
    left: 0;
}
.i2btb2 {
    position: absolute;
    display: flex;
    top: calc(100% - 41vh);
    left: calc(-70vw - 570px); /* left와 right는 서로 반대로 설정 */
}
.txt-ani {
    animation: tani 7s linear infinite;
}
.txt-ani2 {
    animation: tani2 7s linear infinite;
}
@keyframes tani {
    to {
        left: calc(-70vw - 570px);
    }
}
@keyframes tani2 {
    to {
        left: 0;
    }
}
.i2bimg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.i2bimg .i2blo {
    position: absolute;
    top: -25px;
    width: 200px;
    height: 103px;
    scale: 0.5;
}

.i2btbL {
    height: 100%;
    position: absolute;
    display: flex;
    top: 0;
    flex-direction: column;
    justify-content: space-between;
}
.L-i2btb {
    position: relative;
    top: 0;
}
.i2btbR {
    height: 100%;
    position: absolute;
    display: flex;
    top: 0;
    flex-direction: column;
    justify-content: space-evenly;
}
.R-i2btb {
    position: relative;
    top: 0;
}
.i2btxt {
    width: 70vw;
    font-size: 7vw;
    white-space: nowrap;
    margin-right: 570px;
}




.i2b_bt {
    position: relative;
    display: flex;
    font-size: 1.4vw;
    /* font-size: 26px; */
    width: 100%;
    height: 100px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.edition-sw {
    display: flex;
    position: absolute;
    width: 100%;
    justify-content: space-between;
}
.edition {
    margin-left: 70px;
}
.sw {
    margin-right: 70px;
}

.buylink {
    position: absolute;
    width: 184px;
    height: 52px;
    z-index: 1;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.buynow {
    position: relative;
    width: 184px;
    height: 52px;
    background-color: red;
    border-radius: 50px;
    transition: width .1s ease-out;
    margin: -30px;
    /* z-index: 1; */
    cursor: pointer;
    top: 20px;
}
.buy {
    position: relative;
    display: block;
    color: #fff;
    pointer-events: none;
    text-align: center;
    line-height: 52px;
}
.buynow:hover{
    width: 230px;
}

.i2b4 {
    background-color: rgb(58, 187, 206);
}
.i2b3 {
    overflow: hidden;
}
.i2b_cb3 {
    position: static;
}
.i2bi3 {
    /* z-index: 999; */
}
.i2b9 {
    background-color: rgb(58, 187, 206);
    overflow: hidden;
}
.i2b_cb9 {
    position: static;
}

/* 하단페이지 */
footer {
    position: fixed;
    top: 100%;
    z-index: 9999999;
    background-color: black;
    width: 100%;
    height: 50%;
}
.footer_box {
    color: #b8b8b8;
    padding: 3.125vw;
    width: 100%;
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
}
.fbox {
    display: flex;
}

/* 왼쪽 */
.fbs1 {
    display: flex;
    width: 300px;
    height: 200px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}
.fbs1_f1 {
    display: flex;
    width: 240px;
    padding: 25px 0;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    height: 100%;
    margin-right: 100px;
}
.fbs1_f2 {
    position: absolute;
}
.fbs1_f2 a {
    text-decoration: none;
    color: inherit;
}

/* 오른쪽 */
.fbs2 {
    display: flex;
    align-items: flex-end;
    padding: 25px 0;
    width: 100%;
    justify-content: space-between;
}
.fbspan span {
    display: block;
}





/* .itpg2_box:first-child {
    animation: itpg2Ani 10s ease-in-out 1s;
} */
@keyframes itpg2Ani {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -100%, 0);
    }
    100% {
        transform: translate3d(0, -100%, 0) rotate(3deg) scale(0.8, 0.8);
    }
}