/* font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap'); */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
/* @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');


/* icon */
/* @import url('https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");*/
html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    /* font-family: 'Roboto', 'Noto Sans KR', sans-serif, 'DM Serif Display', serif; */
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.inner {
    max-width: 144.0rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.sec {
    padding: 10.0rem 0;
}

.bg {
    background: #f9f9f9;
}

.bg_g {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 90%, #f9f9f9 100%);
}

p {
    font-size: 1.6rem;
    line-height: 2.0rem;
}

.footer {
    font-size: 1.4rem;
    color: #bbb;
}

.footer .st {
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
}

.footer .copyright {
    color: #aaa;
    font-weight: 300;
}


/* 테두리 동그라미에 > 버튼 */
.btn_type02 {
    position: absolute;
    width: 7.2rem;
    height: 7.2rem;

    border: 1px solid #fff;
    border-radius: 50%;

    text-align: center;
    user-select: none;
}

.btn_type02 .arrows {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 4.0rem;
    height: 4.0rem;

    background: rgba(255, 255, 255, 0.5);
    transition: 0.5s;
    border-radius: 50%;
}

.btn_type02 .arrows>* {
    font-size: 2.4rem;
    line-height: 3.9rem;
}

.btn_type02 .arrows:hover {
    background: rgba(255, 255, 255, 1);
}

/* < 버튼 > */
.btn_type03 {
    position: absolute;
    bottom: 6.0rem;
    left: 50%;
    transform: translate(-50%, 0);
    max-width: 24.0rem;
    width: 100%;
    user-select: none;
}

.btn_type03 .arrows>* {
    position: absolute;
    font-size: 2.4rem;
    cursor: pointer;
    font-weight: 300;
}

.btn_type03 .arrows .left {
    left: 0;
}

.btn_type03 .arrows .right {
    right: 0;
}

@media (max-width: 768px) {

    /* 테두리 동그라미에 > 버튼 */
    .btn_type02 {
        width: 5.6rem;
        height: 5.6rem;
    }

    .btn_type02 .arrows {
        width: 3.2rem;
        height: 3.2rem;
    }

    .btn_type02 .arrows>* {
        line-height: 3.2rem;
    }

    .btn_type02 .arrows:hover {
        background: rgba(255, 255, 255, 1);
    }

    /* < 버튼 > */
    .btn_type03 {
        bottom: 6.0rem;
    }
}