@font-face {
    font-family: '프리텐다드';
    src: url("../fonts/Pretendard-Light.otf") format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: '프리텐다드';
    src: url("../fonts/Pretendard-Regular.otf") format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: '프리텐다드';
    src: url("../fonts/Pretendard-SemiBold.otf") format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: '프리텐다드';
    src: url("../fonts/Pretendard-Bold.otf") format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Helvetica75';
    src: url("../fonts/Helvetica Neue LT Std 75 Bold.otf") format('opentype');
}
@font-face {
    font-family: 'Helvetica95';
    src: url("../fonts/Helvetica Neue LT Std 95 Black.otf") format('opentype');
}


body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #6A0C0F;
    overflow: hidden;
    position: relative;
    visibility: hidden;
}
.container{
    width: 1920px;
    height: 1080px;
    flex-shrink: 0;
    aspect-ratio: 1920/1080;
    background-size: contain;
    background: url("../images/background.png") no-repeat center center;
    transform-origin: top left;
    position: absolute;
    transform: scale(0);
    letter-spacing: 0.1em;
    font-family: '프리텐다드';
    font-weight: 300;
    color:#000000;
    transition: background-color 1s ease-in-out;
}

main {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    flex-shrink: 0;
}

.index_title{
    width: 855px;
    height: 258px;
    flex-shrink: 0;
    aspect-ratio: 855/258;
    background: url("../images/title.png") no-repeat center center;
    background-size: contain;
    transform-origin: center center;
    position: absolute;
    top: 438px;
    left: 531px;
    animation: zoomInOut 5s infinite ease-in-out;
    cursor: pointer;
    contain: content;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.058);
    }
    100% {
        transform: scale(1);
    }
}

.bg_overlay{
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    aspect-ratio: 1920/1080;
    background: url("../images/overlay.png") repeat center center;
    background-size: 1920px 1080px;
    transform-origin: top left;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 30%;
    pointer-events: none;
    contain: content;
}

.index_lT{
    position: absolute;
    left: 55px;
    top:57px;
    font-family: "Helvetica75";
    font-size: 24px;
    letter-spacing: 0;
}

.index_RT{
    position: absolute;
    left: 1684px;
    top:57px;
    font-family: "Helvetica75";
    font-size: 24px;
    letter-spacing: 0;
}




/*메인*/
.main_container, .index_container{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    left: 0px;
}

.main_header1{
    width: 407px;
    height: 147px;
    flex-shrink: 0;
    aspect-ratio: 407/147;
    background: url("../images/main1.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 69px;
    left: 63px;
    contain: content;
}
.main_header2{
    width: 882px;
    height: 202px;
    flex-shrink: 0;
    aspect-ratio: 882/202;
    background: url("../images/main2.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 48px;
    left: 512px;
    contain: content;
}
.main_header3{
    width: 411px;
    height: 162px;
    flex-shrink: 0;
    aspect-ratio: 411/162;
    background: url("../images/main3.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 55px;
    left: 1446px;
    contain: content;
}

.main_bar{
    width: 1793px;
    height: 39px;
    flex-shrink: 0;
    aspect-ratio: 1793/39;
    background: url("../images/main4.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 265px;
    left: 63px;
    contain: content;
}

.main_left1{
    width: 567px;
    height: 171.09px;
    flex-shrink: 0;
    aspect-ratio: 567/171.09;
    background: url("../images/main5.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 341px;
    left: 63px;
    contain: content;
}

.main_left2{
    width: 567px;
    height: 469px;
    flex-shrink: 0;
    aspect-ratio: 567/469;
    background: url("../images/main6.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 540px;
    left: 63px;
    contain: content;
}

.main_slog{
    position: absolute;
    left: 685px;
    top: 335px;
    width: 1171px;
    height: 152px;
    aspect-ratio: 1171/152;
    background-color: #000000;
}

.main_sT{
    position: absolute;
    left: 52px;
    top:29px;
    font-family: "Helvetica95";
    font-size: 52px;
    color: #6a0c0f;
    line-height: 56px;
    letter-spacing: 0;
    width: 1100px;
}

.main_MsT{
    opacity: 0;
}
.main_sB{
    position: absolute;
    left: 572px;
    top: 102px;
    width: 572px;
    height: 19px;
    aspect-ratio: 572/19;
    background-color: #6a0c0f;
}

.main_fiction2, .main_art2, .main_film2, .main_behind2{
    opacity: 0;
}

.main_fiction{
    width: 458px;
    height: 83px;
    flex-shrink: 0;
    aspect-ratio: 458/83;
    background: url("../images/main_fiction.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 538px;
    left: 691px;
    contain: content;
    cursor: pointer;
    transition: ease-in-out 0.2s;
}

.main_fiction:hover{
    background: url("../images/main_fiction2.png") no-repeat center center;
}

.main_art{
    width: 231px;
    height: 79px;
    flex-shrink: 0;
    aspect-ratio: 231/79;
    background: url("../images/main_art.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 670px;
    left: 684px;
    contain: content;
    cursor: pointer;
    transition: ease-in-out 0.2s;
}

.main_art:hover{
    background: url("../images/main_art2.png") no-repeat center center;
}

.main_film{
    width: 267px;
    height: 79px;
    flex-shrink: 0;
    aspect-ratio: 267/79;
    background: url("../images/main_film.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 798px;
    left: 691px;
    contain: content;
    transition: ease-in-out 0.2s;
    cursor: pointer;
}

.main_film:hover{
    background: url("../images/main_film2.png") no-repeat center center;
}

.main_behind{
    width: 438px;
    height: 79px;
    flex-shrink: 0;
    aspect-ratio: 438/79;
    background: url("../images/main_behind.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 927px;
    left: 691px;
    contain: content;
    transition: ease-in-out 0.2s;
    cursor: pointer;
}

.main_behind:hover{
    background: url("../images/main_behind2.png") no-repeat center center;
}

.main_img{
    width: 553px;
    height: 386px;
    flex-shrink: 0;
    aspect-ratio: 553/386;
    background: url("../images/main_img.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 538px;
    left: 1247px;
    contain: content;
}

.main_img2{
    width: 430px;
    height: 167px;
    flex-shrink: 0;
    aspect-ratio: 430/167;
    background: url("../images/main_img2.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: absolute;
    top: 870px;
    left: 1446px;
    contain: content;
}

/*fiction*/
.fiction_container{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    left: 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

.fiction_container::-webkit-scrollbar{
    width: 0;
    height: 0;
}

.fiction_title{
    left: 50%;
    transform: translateX(-50%);
    width: 603px;
    height: 139px;
    flex-shrink: 0;
    aspect-ratio: 603/139;
    background: url("../images/fiction_title.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: relative;
    margin-top: 88.44px;
    contain: content;
    cursor: pointer;
}

.fiction_bar{
    left: 50%;
    transform: translateX(-50%);
    width: 1793px;
    height: 39px;
    flex-shrink: 0;
    aspect-ratio: 1793/39;
    background: url("../images/main4.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: relative;
    margin-top: 38px;
    contain: content;
}

.fiction_name{
    left: 50%;
    width:max-content;
    transform: translateX(-50%);
    margin-top: 55px;
    position: relative;
    font-family: "Helvetica95";
    font-size: 60px;
    color: #111010;
    line-height: 64px;
    white-space: nowrap;
    letter-spacing: 0;
}

.fiction_block{
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    margin-top: 44px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fb{
    width: 100%;
    padding: 22px 0;
    background: #00000050;
    display: flex;
    flex-direction: row;
    gap: 26px;
    cursor: pointer;
}

.fb_title{
    width: 300px;
    margin-left: 34px;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0;
    font-size: 18px;
}

.fb_name{
    font-weight: 400;
    width: 86px;
    line-height: 25px;
    letter-spacing: 0;
    font-size: 18px;
    text-align: right;
    color: #adadad;
}

/*fiction 세부*/

.fiction_content{
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    padding: 0 0 50px 0;
    width: 630px;
    background-color: #00000050;
    margin-top: 55px;
}

.fcT{
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    width: 340px;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0;
    text-align: center;
    font-size: 18px;
    padding-top: 50px;
}

.fcN{
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    width: 100%;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0;
    text-align: center;
    font-size: 16px;
    margin-top: 80px;
}

.fcC{
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    width: 522px;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0;
    text-align: left;
    font-size: 14px;
    margin-top: 90px;
    text-indent: 0.8em;
}

.fcI{
    flex-shrink: 0;
    object-fit: cover;
    object-position: top;
    margin-left: 54px;
    contain: content;
    margin-top: 90px;
    aspect-ratio: 16/9;
    width: 522px; 
    height:378px;
}

/*art*/
.art_container{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    left: 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

.art_container::-webkit-scrollbar{
    width: 0;
    height: 0;
}

.art_title{
    left: 50%;
    transform: translateX(-50%);
    width: 603px;
    height: 139px;
    flex-shrink: 0;
    aspect-ratio: 603/139;
    background: url("../images/fiction_title.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: relative;
    margin-top: 88.44px;
    contain: content;
    cursor: pointer;
}

.art_bar{
    left: 50%;
    transform: translateX(-50%);
    width: 1793px;
    height: 39px;
    flex-shrink: 0;
    aspect-ratio: 1793/39;
    background: url("../images/main4.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: relative;
    margin-top: 38px;
    contain: content;
}

.art_name{
    left: 50%;
    transform: translateX(-50%);
    margin-top: 55px;
    position: relative;
    font-family: "Helvetica95";
    font-size: 60px;
    color: #111010;
    line-height: 64px;
    white-space: nowrap;
    letter-spacing: 0;
    width: max-content;
}

.art_block{
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    margin-top: 44px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 39px;
}

.ab_ilust{
    margin-top: 53px;
    position: relative;
    font-family: "Helvetica95";
    font-size: 40px;
    color: #111010;
    line-height: 34px;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0;
}

.ab_comic{
    margin-top: 53px;
    position: relative;
    font-family: "Helvetica95";
    font-size: 40px;
    color: #111010;
    line-height: 34px;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0;
}

.ab{
    width: 100%;
    padding: 24px 0;
    background: #00000050;
    cursor: pointer;
}

.ab_img{
    width: 412px;
    height: 210px;
    flex-shrink: 0;
    aspect-ratio: 412/210;
    transform-origin: top left;
    object-fit: cover;
    object-position: top;
    margin-left: 34px;
    contain: content;
}

.ab_title{
    width: 270px;
    margin-top: 20px;
    margin-left: 39px;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0;
    font-size: 18px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.ab_name{
    font-family: "프리텐다드";
    line-height: 25px;
    letter-spacing: 0;
    font-size: 18px;
    position: relative;
    margin-top: 20px;
    font-weight: 400;
    width: 116px;
    text-align: right;
    color: #adadad;
    display: inline-block;
    vertical-align: top;
}

/*art 세부*/

.art_content{
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    padding: 0 0 50px 0;
    width: 780px;
    background-color: #00000050;
    margin-top: 55px;
}

.acT{
    width: 100%;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0;
    text-align: center;
    font-size: 18px;
    padding-top: 50px;
}

.acN{
    width: 100%;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0;
    text-align: center;
    font-size: 16px;
    margin-top: 80px;
}

.acI{
    width: 672px;
    height: auto;
    flex-shrink: 0;
    object-fit: cover;
    transform-origin: top left;
    object-position: top;
    margin-left: 54px;
    contain: content;
    margin-top: 90px;
}

.acIC{
    width: 672px;
    height: auto;
    flex-shrink: 0;
    object-fit: cover;
    transform-origin: top left;
    object-position: top;
    margin-left: 54px;
    contain: content;
    margin-top: 90px;
    aspect-ratio: 800/2000;
}

#acI1{
    aspect-ratio: 2300/3200;
}

#acI2{
    aspect-ratio: 1246/1948;
}

#acI3{
    aspect-ratio: 8838/9938;
}

#acI4{
    aspect-ratio: 3900/2800;
}

#acI5{
    aspect-ratio: 1000/1253;
}

#acI6{
    aspect-ratio: 1459/1990;
}

#acI7{
    aspect-ratio: 1805/2236;
}

#acI8{
    aspect-ratio: 1735/2037;
}

#acI9{
    aspect-ratio: 2732/2048;
}


/*film*/
.film_container{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    left: 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

.film_container::-webkit-scrollbar{
    width: 0;
    height: 0;
}

.film_title{
    left: 50%;
    transform: translateX(-50%);
    width: 603px;
    height: 139px;
    flex-shrink: 0;
    aspect-ratio: 603/139;
    background: url("../images/fiction_title.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: relative;
    margin-top: 88.44px;
    contain: content;
    cursor: pointer;
}

.film_bar{
    left: 50%;
    transform: translateX(-50%);
    width: 1793px;
    height: 39px;
    flex-shrink: 0;
    aspect-ratio: 1793/39;
    background: url("../images/main4.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: relative;
    margin-top: 38px;
    contain: content;
}

.film_name{
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin-top: 55px;
    position: relative;
    font-family: "Helvetica95";
    font-size: 60px;
    color: #111010;
    line-height: 64px;
    white-space: nowrap;
    letter-spacing: 0;
}

.film_block{
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    margin-top: 44px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 39px;
}

.fib{
    width: 100%;
    padding: 24px 0;
    background: #00000050;
    cursor: pointer;
}

.fib_img{
    width: 412px;
    height: 210px;
    flex-shrink: 0;
    aspect-ratio: 412/210;
    transform-origin: top left;
    object-fit: cover;
    object-position: center;
    margin-left: 34px;
    contain: content;
}

.fib_title{
    width: 270px;
    margin-top: 20px;
    margin-left: 39px;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0;
    font-size: 18px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.fib_name{
    margin-top: 20px;
    font-weight: 400;
    width: 116px;
    text-align: right;
    color: #adadad;
    display: inline-block;
    vertical-align: top;
}

/*art 세부*/

.film_content{
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    padding: 0 0 50px 0;
    width: 780px;
    background-color: #00000050;
    margin-top: 55px;
}

.ficT{
    width: 100%;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0;
    text-align: center;
    font-size: 18px;
    padding-top: 50px;
}

.ficN{
    width: 100%;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0;
    text-align: center;
    font-size: 16px;
    margin-top: 80px;
}

.ficI{
    flex-shrink: 0;
    object-fit: cover;
    object-position: top;
    margin-left: 54px;
    contain: content;
    margin-top: 90px;
    aspect-ratio: 16/9;
    width: 672px; 
    height:378px;
}

/*behind*/
.behind_container{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    left: 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

.behind_container::-webkit-scrollbar{
    width: 0;
    height: 0;
}

.behind_title{
    left: 50%;
    transform: translateX(-50%);
    width: 603px;
    height: 139px;
    flex-shrink: 0;
    aspect-ratio: 603/139;
    background: url("../images/behind_title.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: relative;
    margin-top: 88.44px;
    contain: content;
    cursor: pointer;
}

.behind_bar{
    left: 50%;
    transform: translateX(-50%);
    width: 1793px;
    height: 39px;
    flex-shrink: 0;
    aspect-ratio: 1793/39;
    background: url("../images/main4.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    position: relative;
    margin-top: 38px;
    contain: content;
}

.behind_name{
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin-top: 55px;
    position: relative;
    font-family: "Helvetica95";
    font-size: 60px;
    color: #111010;
    line-height: 64px;
    white-space: nowrap;
    letter-spacing: 0;
}

.behind_block{
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    margin-top: 44px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bb{
    width: 100%;
    padding: 27px 0;
    background: #00000050;
    display: flex;
    flex-direction: column;
    gap: 15px;
    cursor: pointer;
}

.bb_name{
    width: 300px;
    margin-left: 34px;
    color: #adadad;
    font-family: "프리텐다드";
    font-weight: 300;
    line-height: 25px;
    letter-spacing: 0;
    font-size: 18px;
}

.bb_content{
    font-weight: 300;
    margin-left: 34px;
    width: 411px;
    text-align: left;
    color: #adadad;
}

/*부가*/

.btn_up{
    position: fixed;
    top: 935px;
    left: 1796px;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: url("../images/btn_up.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    contain: content;
    cursor: pointer;
    z-index: 1000;
}

.btn_back{
    position: fixed;
    top: 1005px;
    left: 1796px;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: url("../images/btn_back.png") no-repeat center center;
    background-size: contain;
    transform-origin: top left;
    contain: content;
    cursor: pointer;
    z-index: 1000;
}

.line_bottom{
    opacity: 0;
}

.page_bottom{
    width: 100%;
    color: #000000;
    font-family: "Helvetica75";
    line-height: 56px;
    letter-spacing: 0;
    text-align: center;
    font-size: 14px;
    position: relative;
    margin-top: 53px;
    margin-bottom: 100px;
}

.pink { 
    color: rgb(255, 53, 147); 
}

.text_plus{
    font-size: 20px;
    font-weight: 700;
}

.text_plus2{
    font-size: 24px;
    font-weight: 700;
}



@media screen and (max-width: 720px) {
    .container{
        width: 402px;
        height: 874px;
        flex-shrink: 0;
        aspect-ratio: 402/874;
        background: url("../images/background.png") repeat center center;
        transform-origin: top left;
        transform: scale(0);
        letter-spacing: 0.1em;
        font-family: '프리텐다드';
        font-weight: 300;
        color:#000000;
        transition: background-color 1s ease-in-out;
        background-size: 402px auto;
        position: fixed;
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }

    main {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 402px;
        height: 874px;
        flex-shrink: 0;
        overflow-x: hidden;
    }

    .index_title{
        width: 153.06px;
        height: 329.15px;
        flex-shrink: 0;
        aspect-ratio: 307/659;
        background: url("../images/m_title.png") no-repeat center center;
        top: 272.71px;
        left: 125px;
        background-size: contain;
    }

    @keyframes zoomInOut {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.058);
        }
        100% {
            transform: scale(1);
        }
    }

    .bg_overlay{
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        aspect-ratio: 1920/1080;
        background: url("../images/overlay.png") repeat center center;
        background-size: 402px auto;
        transform-origin: top left;
        position: fixed;
        top: 0px;
        left: 0px;
        opacity: 30%;
        pointer-events: none;
        contain: content;
    }

    .index_lT{
        position: absolute;
        left: 115px;
        top:830px;
        font-family: "Helvetica75";
        font-size: 13px;
        letter-spacing: 0;
    }

    .index_RT{
        /* position: absolute;
        left: 1684px;
        top:57px;
        font-family: "Helvetica75";
        font-size: 24px;
        letter-spacing: 0; */
        opacity: 0;
    }




    /*메인*/
    .main_container, .index_container{
        width: 402px;
        height: 874px;
        position: absolute;
        top:0px;
        left: 0px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .main_container::-webkit-scrollbar{
        width: 0;
        height: 0;
    }

    .main_header1{
        opacity: 0;
    }
    .main_header2{
        width: 235px;
        height: 48px;
        top: 101px;
        left: 83.5px;
    }
    .main_header3{
        opacity: 0;
    }

    .main_bar{
        height: 23px;
        top: 164px;
        left: -29px;
        width: 460px;
        height: 22px;
        aspect-ratio: 460/22;
        background: url("../images/m_bar.png") no-repeat center center;
        background-size: contain;
        transform-origin: top left;
        contain: content;
    }

    .main_left1{
        width: 338.05px;
        height: 98.05px;
        top: 214px;
        left: 32px;
    }

    .main_left2{
        opacity: 0;
    }

    .main_slog{
        left: 30px;
        top: 573px;
        width: 342px;
        height: 111px;
        aspect-ratio: 342/111;
    }

    .main_sT{
        opacity: 0;
    }

    .main_MsT{
        opacity: 1;
        position: absolute;
        left: 15.5px;
        top:15.29px;
        font-family: "Helvetica95";
        font-size: 26.89px;
        color: #6a0c0f;
        line-height: 28.9px;
        letter-spacing: 0;
        width: 340px;
    }

    .main_sB{
        position: absolute;
        left: 255.73px;
        top: 54px;
        width: 70.78px;
        height: 9.82px;
        aspect-ratio: 70.78/9.82;
        background-color: #6a0c0f;
    }

    .main_sB2{
        position: absolute;
        left: 282.07px;
        top: 82px;
        width: 44.43px;
        height: 9.82px;
        aspect-ratio: 44.43/9.82;
        background-color: #6a0c0f;
    }
    .main_fiction{
        opacity: 0;
    }

    .main_art{
        opacity: 0;
    }

    .main_film{
        opacity: 0;
    }

    .main_behind{
        opacity: 0;
    }

    .main_fiction2:hover, .main_art2:hover, .main_film2:hover, .main_behind2:hover{
        color: #ffffff7c;
    }

    .main_fiction2{
        opacity: 1;
        position: absolute;
        left: 50.58px;
        top:507.8px;
        font-family: "Helvetica95";
        font-size: 10px;
        color: #FFFFFF;
        line-height: 17px;
        letter-spacing: 0;
        z-index: 600;
        cursor: pointer;
    }

    .main_art2{
        opacity: 1;
        position: absolute;
        left: 150.01px;
        top:507.8px;
        font-family: "Helvetica95";
        font-size: 10px;
        color: #FFFFFF;
        line-height: 17px;
        letter-spacing: 0;
        z-index: 600;
        cursor: pointer;
    }

    .main_film2{
        opacity: 1;
        position: absolute;
        left: 228.44px;
        top:507.8px;
        font-family: "Helvetica95";
        font-size: 10px;
        color: #FFFFFF;
        line-height: 17px;
        letter-spacing: 0;
        z-index: 600;
        cursor: pointer;
    }

    .main_behind2{
        opacity: 1;
        position: absolute;
        left: 310.87px;
        top:507.8px;
        font-family: "Helvetica95";
        font-size: 10px;
        color: #FFFFFF;
        line-height: 17px;
        letter-spacing: 0;
        z-index: 600;
        cursor: pointer;
    }

    .main_img{
        width: 342px;
        height: 197.31px;
        top: 341px;
        left: 30px;
        position: absolute;
        z-index: 500;
        flex-shrink: 0;
        aspect-ratio: 553/386;
        background: url("../images/m_img.png") no-repeat center center;
        background-size: contain;
        transform-origin: top left;
        contain: content;
    }

    .main_img2{
        opacity: 0;
    }

    .fiction_container::-webkit-scrollbar{
        width: 0;
        height: 0;
    }

    .fiction_title, .art_title, .film_title, .behind_title{
        width: 200.16px;
        height: 46px;
        margin-top: 54px;
    }

    .fiction_bar, .art_bar, .film_bar, .behind_bar{
        margin-top: 18px;
        width: 460px;
        height: 23px;
        width: 460px;
        height: 22px;
        aspect-ratio: 460/22;
        background: url("../images/m_bar.png") no-repeat center center;
        background-size: contain;
        transform-origin: top left;
        contain: content;
    }

    .fiction_name, .art_name, .film_name, .behind_name{
        margin-top: 50px;
        position: relative;
        font-family: "Helvetica95";
        font-size: 45px;
        color: #111010;
        line-height: 50px;
        white-space: nowrap;
        letter-spacing: 0;
    }

    .fiction_block{
        width: 343px;
        margin-top: 50px;
    }

    .fb{
        width: 100%;
        padding: 16px 0;
        background: #00000050;
        display: flex;
        flex-direction: row;
        gap: 12px;
        cursor: pointer;
    }

    .fb_title{
        width: 200px;
        margin-left: 24px;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0;
        font-size: 13px;
    }

    .fb_name{
        font-weight: 400;
        line-height: 25px;
        letter-spacing: 0;
        width: 85px;
        font-size: 13px;
        text-align: right;
        color: #adadad;
    }

    /*fiction 세부*/

    .fiction_content{
        position: relative;
        padding: 0 0 10px 0;
        width: 343px;
        background-color: #00000050;
        margin-top: 55px;
    }

    .fcT{
        width: 340px;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0;
        text-align: center;
        font-size: 16px;
        padding-top: 50px;
    }

    .fcN{
        width: 100%;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 400;
        line-height: 25px;
        letter-spacing: 0;
        text-align: center;
        font-size: 16px;
        margin-top: 30px;
    }

    .fcC{
        width: 310px;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 400;
        line-height: 25px;
        letter-spacing: 0;
        text-align: left;
        font-size: 14px;
        margin-top: 90px;
        text-indent: 0.8em;
    }

    .fcI{
        flex-shrink: 0;
        object-fit: cover;
        object-position: top;
        margin-left: 30px;
        contain: content;
        margin-top: 90px;
        aspect-ratio: 16/9;
        width: 283px; 
        height:auto;
    }

    .art_container::-webkit-scrollbar{
        width: 0;
        height: 0;
    }

    .art_block{
        width: 402px;
        margin-top: 44px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ab_ilust{
        margin-top: 0px;
        position: relative;
        font-family: "Helvetica95";
        font-size: 30px;
        color: #111010;
        line-height: 34px;
        white-space: nowrap;
        text-align: center;
        letter-spacing: 0;
    }

    .ab_comic{
        margin-top: 53px;
        position: relative;
        font-family: "Helvetica95";
        font-size: 40px;
        color: #111010;
        line-height: 34px;
        white-space: nowrap;
        text-align: center;
        letter-spacing: 0;
    }

    .ab{
        width: 343px;
        padding: 24px 0;
        background: #00000050;
        cursor: pointer;
        margin-left: 29.5px;
    }

    .ab_img{
        width: 295px;
        height: 155px;
        margin-left: 24px;
        contain: content;
    }

    .ab_title{
        width: 193px;
        margin-top: 16px;
        margin-left: 24px;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0;
        font-size: 13px;
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

    .ab_name{
        font-family: "프리텐다드";
        line-height: 25px;
        letter-spacing: 0;
        font-size: 13px;
        position: relative;
        margin-top: 14px;
        font-weight: 400;
        width: 88px;
        text-align: right;
        color: #adadad;
        display: inline-block;
        vertical-align: top;
    }

    /*art 세부*/

    .art_content{
        position: relative;
        padding: 0 0 50px 0;
        width: 342px;
        background-color: #00000050;
        margin-top: 55px;
    }

    .acT{
        width: 340px;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0;
        text-align: center;
        font-size: 16px;
        padding-top: 50px;
    }

    .acN{
        width: 100%;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 400;
        line-height: 25px;
        letter-spacing: 0;
        text-align: center;
        font-size: 16px;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .acI{
        width: 310px;
        height: 100%;
        flex-shrink: 0;
        object-fit: cover;
        object-position: top;
        margin-left: 16px;
        contain: content;
        margin-top: 20px;
    }

    .acIC{
        width: 310px;
        height: 100%;
        flex-shrink: 0;
        object-fit: cover;
        object-position: top;
        margin-left: 16px;
        contain: content;
        margin-top: 20px;
    }


    /*film*/

    .film_container::-webkit-scrollbar{
        width: 0;
        height: 0;
    }

    .film_block{
        width: 402px;
        margin-top: 44px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .fib{
        width: 343px;
        padding: 24px 0;
        background: #00000050;
        cursor: pointer;
        margin-left: 29.5px;
    }

    .fib_img{
        width: 295px;
        height: 155px;
        margin-left: 24px;
        contain: content;
    }

    .fib_title{
        width: 193px;
        margin-top: 16px;
        margin-left: 24px;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0;
        font-size: 13px;
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

    .fib_name{
        font-family: "프리텐다드";
        line-height: 25px;
        letter-spacing: 0;
        font-size: 13px;
        position: relative;
        margin-top: 14px;
        font-weight: 400;
        width: 88px;
        text-align: right;
        color: #adadad;
        display: inline-block;
        vertical-align: top;
    }

    /*art 세부*/

    .film_content{
        position: relative;
        padding: 0 0 50px 0;
        width: 342px;
        background-color: #00000050;
        margin-top: 55px;
    }

    .ficT{
        width: 340px;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0;
        text-align: center;
        font-size: 16px;
        padding-top: 50px;
    }

    .ficN{
        width: 100%;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 400;
        line-height: 25px;
        letter-spacing: 0;
        text-align: center;
        font-size: 16px;
        margin-top: 30px;
    }

    .ficI{
        width: 310px;
        height: 100%;
        flex-shrink: 0;
        object-fit: cover;
        object-position: top;
        margin-left: 16px;
        contain: content;
        margin-top: 90px;
        aspect-ratio: 16/9;
    }

    /*behind*/

    .behind_container::-webkit-scrollbar{
        width: 0;
        height: 0;
    }

    .behind_block{
        width: 342px;
        margin-top: 44px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .bb{
        width: 100%;
        padding: 27px 0;
        background: #00000050;
        display: flex;
        flex-direction: column;
        gap: 15px;
        cursor: pointer;
    }

    .bb_name{
        width: 300px;
        margin-left: 34px;
        color: #adadad;
        font-family: "프리텐다드";
        font-weight: 300;
        line-height: 25px;
        letter-spacing: 0;
        font-size: 13px;
    }

    .bb_content{
        font-weight: 300;
        font-size: 13px;
        margin-left: 34px;
        width: 411px;
        text-align: left;
        color: #adadad;
    }

    /*부가*/

    .btn_up{
        position: fixed;
        top: 739px;
        left: 346px;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        background: url("../images/btn_up.png") no-repeat center center;
        background-size: contain;
        transform-origin: top left;
        contain: content;
        cursor: pointer;
        z-index: 1000;
    }

    .btn_back{
        position: fixed;
        top: 787px;
        left: 346px;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        background: url("../images/btn_back.png") no-repeat center center;
        background-size: contain;
        transform-origin: top left;
        contain: content;
        cursor: pointer;
        z-index: 1000;
    }

    .line_bottom{
        width: 100%;
        color: #000000;
        font-family: "Helvetica75";
        line-height: 56px;
        letter-spacing: 0;
        text-align: center;
        font-size: 9px;
        position: absolute;
        opacity: 1;
        top: 709px;
    }

    .page_bottom{
        width: 100%;
        color: #000000;
        font-family: "Helvetica75";
        line-height: 56px;
        letter-spacing: 0;
        text-align: center;
        font-size: 9px;
        position: relative;
        margin-top: 38px;
        margin-bottom: 70px;
    }

    .pink { 
        color: rgb(255, 53, 147); 
    }

    .text_plus{
        font-size: 18px;
        font-weight: 700;
    }

    .text_plus2{
        font-size: 20px;
        font-weight: 700;
    }
}