/* 공통 옮길수도있음! */
main{letter-spacing: -0.025em;}


._subVisual{position: relative;padding-top: 200px;}
@media screen and (max-width: 1280px) {._subVisual{padding-top: 120px;}}
@media screen and (max-width: 820px) {._subVisual{padding-top: 80px;}}

._subVisual > .wrap {position: relative;z-index: 10;}
._subVisual .titBx{overflow: hidden;}
._subVisual h1{
    font-size: 130px;
    color: #000000;
    font-family: 'Roboto';
    font-weight: 500;
    line-height: 1.3;
    /* margin-bottom: calc(100 / 130 * 1em); */
}
._subVisual .flxBx .scrollBx{
    display: flex;flex-direction: column;
    align-items: center;justify-content: center;
    width: 30px;height: 65px;
    border: 1px solid rgba(0,0,0,0.2);border-radius: 15px;
}
._subVisual .flxBx .scrollBx span{display: flex;align-items: center;justify-content: center;flex-direction: column;}
._subVisual .flxBx .scrollBx span i{font-size: 18px;color: #000000;}

._subVisual .flxBx .scrollBx span i {
    margin: -3px 0;
    animation: arrow 1.5s linear infinite forwards;
}
._subVisual .flxBx .scrollBx span i:nth-child(1) {animation-delay: 0s;}
._subVisual .flxBx .scrollBx span i:nth-child(2) {animation-delay: 0.1s}
._subVisual .flxBx .scrollBx span i:nth-child(3) {animation-delay: 0.15s;}

@keyframes arrow {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}
._subVisual .flxBx{display: flex;align-items: center;justify-content: space-between;margin-top: 100px;}

.contact ._subVisual .flxBx{margin-top: 20px;justify-content: flex-end;}


._subVisual .flxBx .txtBx p{font-size: 24px;line-height: calc(42/24);font-weight: 600;}
._subVisual .flxBx .txtBx p span{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
.mo_br{display: none;}
/* 블랙일때 별도 */
main.black ._subVisual {background-color: #000;}
main.black ._subVisual h1{color: #fff;}
main.black ._subVisual .flxBx .scrollBx span i{color: #fff;}
main.black ._subVisual .flxBx .scrollBx{border-color: rgba(255, 255, 255, 0.2);}

/* ._subVisual .bg{
    position: absolute;top: -20vw;left: 0;
    width: 100%;height: 100%;
    object-fit: cover;
    z-index: -1;
} */

._subVisual .bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    height: 100%;
    /* z-index: -1; */
}
@media only screen and (max-device-width: 480px) {
/* iPhone only CSS here */
    ._subVisual .bg {
        filter: saturate(120%) blur(20px);
    }
}
._subVisual .bg canvas {
    width: 100%; height: 100%;
    display: block;

    border: 1px solid black;
}


@media screen and (max-width: 1680px) {
    ._subVisual h1{font-size: clamp(100px, 100 / 1440 * 100vw, 130px);}
    ._subVisual .flxBx .txtBx p{font-size: clamp(22px, 22 / 1440 * 100vw, 24px);}

}
@media screen and (max-width: 1440px) {
    ._subVisual h1{font-size: clamp(90px, 90 / 1280 * 100vw, 100px);}
    ._subVisual .flxBx .txtBx p{font-size: clamp(20px, 20 / 1280 * 100vw, 22px);}
}
@media screen and (max-width: 1280px) {
    ._subVisual h1{font-size: clamp(80px, 80 / 1024 * 100vw, 90px);}
    ._subVisual .flxBx .txtBx p{font-size: clamp(18px, 18 / 1024* 100vw, 20px);}

    ._subVisual .flxBx{margin-top: 60px;}
}
@media screen and (max-width: 1024px) {
    ._subVisual h1{font-size: clamp(70px, 70 / 820 * 100vw, 80px);}
}
@media screen and (max-width: 820px) {
    ._subVisual h1{font-size: clamp(58px, 58 / 500 * 100vw, 70px);}
    .mo_br{display: block;}
}
@media screen and (max-width: 500px) {
    ._subVisual h1{font-size: clamp(48px, 48 / 360 * 100vw, 58px);}
    ._subVisual .flxBx .txtBx p{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}

    ._subVisual .flxBx .scrollBx {width: 20px;height: 55px;}
    ._subVisual .flxBx .scrollBx span i {font-size: 16px;}

}
@media screen and (max-width: 360px) {
    ._subVisual h1{font-size: clamp(42px, 42 / 360 * 100vw, 48px);}
    ._subVisual .flxBx .txtBx p{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}

}


.paging{display: flex; align-items: center;gap: 35px;justify-content: center;margin-top: 100px;}
.paging ul{display: flex; gap: 25px;}
.paging ul li a{position: relative; display: flex; align-items: center; justify-content: center;}
.paging ul li a span{
    position: relative;
    display: inline-block;
    z-index: 2;
    color: rgba(0,0,0,0.4);
    font-weight: 400;
}
.paging ul li a.on span{color: #fff;}
.paging ul li a.on span::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-color: #e22c20;
    border-radius: 50%;
    z-index: -1; /* 숫자 위로 안 덮어지게 */
}

.paging i{font-size: 16px;}
.paging .prevBx, .paging .nextBx{display: flex;align-items: flex-start;gap: 10px;}
.paging .prevBx .go_frist, .paging .nextBx .go_last{display: flex;}
.paging .prevBx .go_frist i, .paging .nextBx .go_last i{
    margin: 0 -5px;
}


@media screen and (max-width: 500px) {
    .paging{gap: 20px;margin-top: 60px;}
    .paging ul li a.on span::after {width: clamp(20px, 20 / 360 * 100vw, 25px);height: clamp(20px, 20 / 360 * 100vw, 25px);}
    .paging i{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}
    .paging ul li a span{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}
}


/* contactus */

.contact_us{background: #000;padding: 80px 0;box-sizing: border-box;}
.contact_us .wrap{position: relative;}
.contact_us .top, .contact_us .bottom{position: relative;z-index: 10;}
.contact_us .top h2{
    font-size: 100px;color: #fff;font-weight: 500;
    font-family: 'Roboto';
    line-height: 1.3;
}
.contact_us .top > div{overflow: hidden;}
.contact_us .top p{
    font-size: 18px;color: rgba(255, 255, 255, 0.7);font-weight: 400;
    line-height: calc(30/18);
    /* margin-top: calc(15 / 18 * 1em); */
}

.contact_us .top .btnBx{max-width: 131px;width: 100%;}
.contact_us .top .btnBx a{
    display: flex;align-items: center;justify-content: space-between;
    font-size: 16px;color: #fff;font-weight: 600;
    background-image: linear-gradient(-50deg, rgb(227, 45, 33) 0%, rgb(227, 45, 33) 100%);
    border-radius: 22px;
    padding: .8em 1.5em;box-sizing: border-box;
    width: 100%;
    margin-top: calc(25 / 16 * 1em);
}
.contact_us .bottom > div{overflow: hidden;}
.contact_us .bottom p{
    font-size: 34px;color: #fff;font-weight: 600;
    line-height: calc(46/34);
    margin-top: calc(10 / 34 * 1em);
    text-align: right;
}




.contact_us .bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);object-fit: cover;z-index: 1;pointer-events: none;width: 100%;
    display: flex;align-items: center;justify-content: center;
}
/* .contact_us .bg img{width: 100%;} */



@media screen and (max-width: 1440px) {
    .contact_us .top h2{
        font-size: clamp(80px, 80 / 1280 * 100vw, 100px);
    }
    .contact_us .bottom p{
        font-size: clamp(30px, 30 / 1280 * 100vw, 34px);
    }
}
@media screen and (max-width: 1280px) {
    .contact_us .top h2{
        font-size: clamp(60px, 60 / 1024 * 100vw, 80px);
    }
    .contact_us .bottom p{
        font-size: clamp(24px, 24 / 1024 * 100vw, 32px);
    }
}
@media screen and (max-width: 820px) {

    .contact_us .top h2 {
        font-size: clamp(40px, 40 / 500 * 100vw, 60px);
    }
    .contact_us .top p{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .contact_us .bottom p {
        font-size: clamp(20px, 20 / 500 * 100vw, 24px);
    }
}
@media screen and (max-width: 500px) {
    .contact_us .top h2 {
        font-size: clamp(34px, 34 / 360 * 100vw, 40px);
    }
    .contact_us .top p{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}
    .contact_us .top .btnBx {max-width: 120px;}
    .contact_us .top .btnBx a{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}

    .contact_us .bottom p {
        font-size: clamp(16px, 16 / 360 * 100vw, 20px);
    }
}
@media screen and (max-width: 360px) {
    .contact_us .top p{word-break: keep-all;}
    .contact_us .top p br{display: none;}

}




/* 리드트보기 버튼 공통 */
._listBtn{}
._listBtn a{
	width: calc(130/16*1em); height: calc(44/16*1em); font-size: 16px;
	border: 1px solid #e22c20; box-sizing: border-box;
	display: flex; align-items: center; justify-content: space-between; color: #e22c20;
	border-radius: 100px; font-weight: 600; padding: 0 1em;
	transition: background-color 0.4s,color 0.4s;
	margin-left: auto;
}
._listBtn a:hover{background-color: #e22c20; color: #fff;}
._listBtn a p{}
._listBtn a i{}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	._listBtn a{font-size: 14px; }
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	._listBtn a{font-size: 12px; }
}
@media screen and (max-width:320px) {}



/* 줄바꿈 */
.mo{display: none;}

@media screen and (max-width: 820px) {
    .mo {display: block;}
}