@import url(default.css);
@import url(fonts.css);
@import url(common.css);

header {
    position: fixed; /* fixed :: 무조건 body를 기준으로 정렬 */
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: var(--header-h);
    color: #fff;
    fill: #fff; /* svg 아이콘 색상 */
    display: flex; /* logo - gnb - util 좌우 배치 */
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--wrapper-m); /* 위아래 - 좌우 */
}
header .logo a {
    display: block;
    width: 205.75px;
    height: 36.01px;
    background: url(../images/logo_w.svg) no-repeat center center / contain;
}
header .util {
    display: flex;
}
header .util .search .sch_open {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}
header .util .search .sch_open i {
    display: block;
    width: 17.58px;
}
header .util .mypage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}
header .util .mypage i {
    display: block;
    width: 20px;
}

/* header가 fixed되었을때 */
header.fixed {
    background-color: #fff;
    color: #1d1d1d;
    fill: #1d1d1d;
}
header.fixed .logo a {
    background-image: url(../images/logo.svg);
}
/***** 시작 :: pc 버전 *****/
/* 1024이하는 메뉴를 접음 */
@media screen and (min-width:1025px){
    header .gnb .gnb_open {
        display: none; /* 모바일에서만 보임 */
    }
    header .gnb .gnb_wrap .gnb_logo {
        display: none;
    }
    header .gnb .gnb_wrap .gnb_close {
        display: none;
    }
    header .gnb .gnb_wrap ul.depth1 {
        display: flex; /* li를 좌우로 배치 */
    }
    header .gnb .gnb_wrap ul.depth1 > li {
        position: relative; /* depth2 정렬의 기준 */
    }   
    header .gnb .gnb_wrap ul.depth1 > li > a {
        display: block;
        font-size: var(--font-size-tit2);
        font-weight: var(--font-weight-bold);
        line-height: var(--header-h);
        padding: 0 1.3636em;
        white-space: nowrap; /* 행간이 높아서 2줄이 되면 이상함 */
    }
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
        display: none;
        position: absolute;
        left: 50%; /* li 넓이의 50% */
        transform: translateX(-50%); /* depth2 넓이의 50% */
        top: calc(var(--header-h) - 20px);
        background-color: #fff;
        color: #1d1d1d;
        border: 1px solid #1B609B;
        border-radius: 15px;
        min-width: 100%; /* li 넓이의 100% */
        padding: 20px 25px;
    }
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a {
        display: block;
        padding: 4px 0;
        white-space: nowrap; /* 줄바꿈 금지 */
        text-align: center;
    }
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a > span {
        position: relative; /* before 정렬의 기준 */
    }
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a > span::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 1px;
        background-color: var(--color-sub-02);
        transition: 0.3s;
    }
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a:hover > span::before {
        width: 100%;
    }

    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a:hover {
        color: var(--color-sub-02);
    }

    /* 메뉴에 오버했을 때 */
    header.menu_pc {
        background-color: #fff;
        color: #1d1d1d;
        fill: #1d1d1d;
        box-shadow: 0 4px 4px 0 var(--color-black10);
    }
    header.menu_pc .logo a {
        background-image: url(../images/logo.svg);
    }

    header .gnb .gnb_wrap ul.depth1 > li.over > a {
        color: var(--color-sub-02);
    }
    header .gnb .gnb_wrap ul.depth1 > li.over > ul.depth2 {
        /* display: block !important; */
    }

}/* @media */
/* 1025이상 - 1280이하 그 사이값에서 적용 */
@media screen and (min-width:1025px) and (max-width:1280px){
    header .logo a {
        width: 185.75px;
    }
    header .gnb .gnb_wrap ul.depth1 > li > a {
        font-size: 22px;
    }
}
/***** 끝 :: pc 버전 *****/


/***** 시작 :: mobile 버전 *****/
@media screen and (max-width:1024px) {
    header {
        padding-right: 0;
        height: var(--header-var);
    }
    header .logo a {
        /* width: 113.87px;
        height: 20px; */
        width: clamp(113.87px, 18vw, 205.75px); /* 최소, 평소, 최대 */
    }
    header .util {
        display: none;
    }
    header .gnb .gnb_open {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--header-var);
        height: var(--header-var);
    }
    header .gnb .gnb_open i {
        display: block;
        width: 32.14%;
    }
    header .gnb .gnb_wrap {
        /* display: none; */
        position: absolute; /* header를 기준으로 정렬 */
        right: 100%;
        top: 0;
        width: 100%;
        height: 100dvh;
        background-color: #fff;
        color: #1d1d1d;
        fill: #1d1d1d;
        transition: right 0.5s;
    }
    header .gnb .gnb_wrap ul.depth1 {
        margin: var(--header-var) 0 0 0;
        height: calc(100dvh - var(--header-var));
        overflow-y: auto; /* 주어진 높이보다 컨텐츠가 짧으면 스크롤 x, 길면 스크롤 o */
        padding: 16px 0 0 0;
    }
    header .gnb .gnb_wrap ul.depth1 > li > a {
        display: block;
        font-size: 20px;
        padding: 16px 37px 16px var(--wrapper-m);
        position: relative; /* after 정렬의 기준 */
        /* border: 1px solid rebeccapurple; */
    }
    header .gnb .gnb_wrap ul.depth1 > li.open > a {
        color: var(--color-sub-02);
    }
    header .gnb .gnb_wrap ul.depth1 > li > a::after {
        content: "";
        position: absolute; /* a를 기준으로 정렬 */
        right: var(--wrapper-m);
        top: 50%; /* a의 높이 절반 */
        transform: translateY(-50%); /* after 높이의 절반 */
        width: 13px;
        height: 23.59px;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 9' fill='%231D1D1D' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1714 6.65311L14.5015 0.322966C14.7169 0.107655 14.9681 0.00358782 15.2551 0.0107648C15.5422 0.0179419 15.7934 0.129186 16.0087 0.344497C16.224 0.559808 16.3317 0.811004 16.3317 1.09809C16.3317 1.38517 16.224 1.63636 16.0087 1.85167L9.39867 8.48325C9.22643 8.6555 9.03265 8.78469 8.81733 8.87081C8.60202 8.95694 8.38671 9 8.1714 9C7.95609 9 7.74078 8.95694 7.52547 8.87081C7.31016 8.78469 7.11638 8.6555 6.94413 8.48325L0.312548 1.85167C0.0972372 1.63636 -0.00682976 1.38158 0.000347276 1.08732C0.00752431 0.793062 0.118768 0.538278 0.334079 0.322967C0.54939 0.107656 0.800587 9.05315e-08 1.08767 7.79828e-08C1.37475 6.5434e-08 1.62595 0.107656 1.84126 0.322967L8.1714 6.65311Z'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        transition: 0.3s;
    }
    header .gnb .gnb_wrap ul.depth1 > li.open > a::after {
        transform: translateY(-50%) rotate(-180deg);
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 9' fill='%231B609B' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1714 6.65311L14.5015 0.322966C14.7169 0.107655 14.9681 0.00358782 15.2551 0.0107648C15.5422 0.0179419 15.7934 0.129186 16.0087 0.344497C16.224 0.559808 16.3317 0.811004 16.3317 1.09809C16.3317 1.38517 16.224 1.63636 16.0087 1.85167L9.39867 8.48325C9.22643 8.6555 9.03265 8.78469 8.81733 8.87081C8.60202 8.95694 8.38671 9 8.1714 9C7.95609 9 7.74078 8.95694 7.52547 8.87081C7.31016 8.78469 7.11638 8.6555 6.94413 8.48325L0.312548 1.85167C0.0972372 1.63636 -0.00682976 1.38158 0.000347276 1.08732C0.00752431 0.793062 0.118768 0.538278 0.334079 0.322967C0.54939 0.107656 0.800587 9.05315e-08 1.08767 7.79828e-08C1.37475 6.5434e-08 1.62595 0.107656 1.84126 0.322967L8.1714 6.65311Z'/%3E%3C/svg%3E%0A");
    }
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
        margin: 9px var(--wrapper-m) 9px calc(var(--wrapper-m) + 16px);
        display: none; /* 1차 메뉴를 클릭할 때만 나옴 */
    }
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li {
        border-bottom: 1px solid #ededed;
    }
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li:last-child {
        border-bottom: none;
    }
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a {
        display: block;
        padding: 7px 0 7px 8px ;
    }


    header .gnb .gnb_wrap .gnb_logo {
        position: absolute; /* gnb_wrap을 기준으로 정렬 */
        left: var(--wrapper-m);
        top: 0;
        width: clamp(113.87px, 18vw, 205.75px); /* 최소, 평소, 최대 */
        height: var(--header-var);
        background: url(../images/logo.svg) no-repeat center center / contain;
    }
    header .gnb .gnb_wrap .gnb_close {
        position: absolute; /* gnb_wrap을 기준으로 정렬 */
        right: 0;
        top: 0;
        width: var(--header-var);
        height: var(--header-var);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .gnb .gnb_wrap .gnb_close i {
        display: block;
        width: 28.57%;
    }


    /* 메뉴가 열렸을 때 */
    header.menu_mo .gnb .gnb_wrap {
        /* display: block; */
        right: 0;
    }
    
}


.visual{
    position: relative; /* ctrl_btn 정렬의 기준 */
}
.visual .swiper-slide {
    height: 100dvh; /* 브라우저 높이와 동일 */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;

    display: flex;
    align-items: flex-end;
}
.visual .swiper-slide.pop1 {
    background-image: url(../images/visual_bg1.jpg);
}
.visual .swiper-slide.pop2 {
    background-image: url(../images/visual_bg2.jpg);
}
.visual .swiper-slide.pop3 {
    background-image: url(../images/visual_bg3.jpg);
}
.visual .swiper-slide p {
    font-size: clamp(28px, 5vw, 60px);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tit);
    margin: 0 0 16dvh 0;
    transition: translate 0.4s, opacity 0.3s;
    transition-delay: 0.3s;
    transform: translate(0, 50px);
    opacity: 0;
}
.visual .swiper-slide.swiper-slide-active p {
    transform: translate(0, 0);
    opacity: 1;
}
.visual .ctrl_btn {
    position: absolute; /* visual을 기준으로 정렬 */
    left: calc(50% - 630px);
    bottom: 13%;
    z-index: 10;
    display: flex;
}
.visual .ctrl_btn .paging {
    display: flex;
    align-items: center;
    gap: 0 6px;
    color: #fff;
    font-weight: var(--font-weight-bold);
}
.visual .ctrl_btn .paging .bar {
    width: 70px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    position: relative; /* before 정렬의 기준 */
}
.visual .ctrl_btn .paging .bar span {
    content: "";
    position: absolute; /* bar를 기준으로 정렬 */
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #fff;
}
.visual .ctrl_btn button {
    display: flex;
    justify-content: center;
    align-items: center;
}
.visual .ctrl_btn .stop,
.visual .ctrl_btn .play {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin: 2px 0 0 0;
}
.visual .ctrl_btn .play {
    display: none;
}
.visual .ctrl_btn .stop i {
    display: block;
    width: 14px;
}
.visual .ctrl_btn .play i {
    display: block;
    width: 11px;
}

@media screen and (max-width:1335.6px){
    .visual .ctrl_btn {
        left: 3%
    }
}
@media screen and (max-width:768px){
    .visual .swiper-slide {
    height: 400px; /* 브라우저 높이와 동일 */
    }
    .visual .swiper-slide p {
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-tit);
        margin: 0 0 76px 0;
        transform: translate(0, 30px);
    }
    .visual .ctrl_btn {
        left: 16px;
        bottom: 45px;
    }
    
    .visual .ctrl_btn .paging .bar {
        width: 48px;
        height: 2px;
    }
    .visual .ctrl_btn .stop,
    .visual .ctrl_btn .play {
        display: block;
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .visual .ctrl_btn .play {
        display: none;
    }
    .visual .ctrl_btn .stop i {
        display: block;
        width: 14px;
        margin: 2px 0 0 0;
    }
    .visual .ctrl_btn .play i {
        display: block;
        width: 11px;
    }
}
.find {
    background-color: var(--color-main);
    color: #fff;
    padding: clamp(75px, 11vw, 141px) 0 clamp(53px, 10vw, 131px) 0;
}
.find h2 {
    font-size: var(--font-size-tit);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tit);
    text-align: center;
}
.find .tab_list {
    margin: 32px 0 0 0;
}
.find .tab_list ul {
    display: flex; /* li 좌우 */
    justify-content: center;
    gap: 0 10px;
}
.find .tab_list ul li button {
    display: block;
    padding: 0.25em 1.0833em 0.2916em 1.0833em;
    border: 1px solid var(--color-white60);
    border-radius: 30px;
    color: var(--color-white60);
    font-size: var(--font-size-tit2);
    font-weight: var(--font-weight-bold);
}
.find .tab_list ul li.active button {
    background-color: var(--color-sub-01);
    border: 1px solid var(--color-sub-01);
    color: #fff;
}
.find .tab_content {
    margin: 22px 0 0 0;
}
.find .tab_content .tab_item {
    position: relative; /* 버튼 정렬의 기준 */
    display: none; /* active 클래스가 있는 요소만 보임 */
}
.find .tab_content .tab_item.active {
    display: block; /* active 클래스가 있는 요소만 보임 */
}
.find .tab_content .tab_item .ctrl_btn {
    position: absolute;
    right: 0;
    top: -65px;
    z-index: 10;
    display: flex;
    gap: 0 5px;
}
.find .tab_content .tab_item .ctrl_btn .prev,
.find .tab_content .tab_item .ctrl_btn .next,
.find .tab_content .tab_item .ctrl_btn .more {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--color-white40);
    border-radius: 50%;
    fill: #fff;    
}
.find .tab_content .tab_item .list .swiper-slide {
    width: 297px;
}
.find .tab_content .tab_item .list .swiper-slide a {
    display: block;
}
.find .tab_content .tab_item .list .swiper-slide a .photo {
    overflow: hidden;
    height: 400px;
    border-radius: 25px;
}
.find .tab_content .tab_item .list .swiper-slide a .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.find .tab_content .tab_item .list .swiper-slide a .txt h4 {
    display: flex;
    gap: 0 11px;
    align-items: flex-end;
    margin: 24px 0 0 0;
}
.find .tab_content .tab_item .list .swiper-slide a .txt h4 strong {
    font-size: var(--font-size-tit2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tit);    

    /* 1줄 제한*/
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.find .tab_content .tab_item .list .swiper-slide a .txt ul {
    margin: 11px 0 0 0;
}
.find .tab_content .tab_item .list .swiper-slide a .txt ul li {
    display: flex;
    gap: 0 11px;
}
.find .tab_content .tab_item .list .swiper-slide a .txt ul li span {
    /* 1줄 제한*/
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.find .tab_content .tab_item .ctrl_btn .prev i,
.find .tab_content .tab_item .ctrl_btn .next i {
    display: block;
    width: 15.57px;
}
.find .tab_content .tab_item .ctrl_btn .more i {
    display: flex;
    width: 14px;
}
@media screen and (max-width:768px){

    .find .tab_list {
        margin: 16px 0 0 0;
    }
    .find .tab_list ul {
        gap: 0 8px;
    }
    .find .tab_content {
        margin: 16px 0 0 0;
    }
    .find .tab_content .tab_item .list .swiper-slide a .photo {
        height: 250px;
        border-radius: 10px;
    }
    .find .tab_content .tab_item .list .swiper-slide a .txt h4 {
        margin: 16px 0 0 0;
    }
    .find .tab_content .tab_item .list .swiper-slide a .txt ul {
        margin: 8px 0 0 0;
    }
    .find .tab_content .tab_item .list .swiper-slide a .txt ul li {
        display: flex;
        gap: 0 8px;
    }
   
    .find .tab_content .tab_item .ctrl_btn .prev,
    .find .tab_content .tab_item .ctrl_btn .next,
    .find .tab_content .tab_item .ctrl_btn .more {
        width: 40px;
        height: 40px;
        background-color: transparent;
        fill: #fff;    
    }
    .find .tab_content .tab_item .ctrl_btn .prev,
    .find .tab_content .tab_item .ctrl_btn .next {
        display: none;
    }
    
    .find .tab_content .tab_item .ctrl_btn .more i {
        width: 12px;
    }
}/* @media */

.slogan {
    margin: clamp(75px, 11vw, 141px) 0 clamp(53px, 10vw, 131px) 0;
    text-align: center;
}
.slogan span {
    font-size: var(--font-size-tit);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tit);
    text-align: center;
    background-color: #1B609B;
    color: #fff;
    border-radius: 200px;
    padding: 21px 51px 17px 51px;
}
.slogan h2 {
    font-size: clamp(24px, 5vw, 60px);
    font-weight: var(--font-weight-bold);
    line-height: 2;
    color: #1d1d1d;
    margin: clamp(9px, 7vw, 86px) 0 0 0;
}
.slogan h2 br.mo_only {
    display: none;
}
.slogan h2 strong {
    display: inline-block;
    vertical-align: middle; /* 위 아래 가운데 */
    position: relative; /* before 정렬의 기준*/
}
.slogan h2 strong::before {
    content: "";
    position: absolute; /* strong을 기준으로 정렬 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%); /* 좌우의 가운데 위아래 가운데 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 85%;
    height: 3em;
}
.slogan h2 strong.place {
    width: 2.6166em;
}
.slogan h2 strong.place::before {
    background-image: url(../images/slogan_place.png);

}
.slogan h2 strong.animal {
    width: 2.7em;
}
.slogan h2 strong.animal::before {
    background-image: url(../images/slogan_animal.png);

}
.slogan h2 strong.center {
    width: 2.6em;
}
.slogan h2 strong.center::before {
    background-image: url(../images/slogan_center.png);

}
.slogan h2 strong.call {
    width: 2.516em;
}
.slogan h2 strong.call::before {
    background-image: url(../images/slogan_call.png);

}
.slogan p {
    margin: 24px 0 0 0;
    color: #666;
}
@media screen and (max-width:768px){
    .slogan span {
        text-align: center;
        background-color: transparent;
        color: var(--color-sub-02);
        border-radius: 0;
        padding: 0;
    }
} /* @media */
@media screen and (max-width:640px){
    .slogan h2 br.mo_only {
        display: block;
    }
    .slogan h2 br.pc_only {
        display: none;
    }
    .slogan p {
        display: none;
    }
} /* @media */

.adopt {
    overflow-x: hidden; /* rolling 가로 스크롤바 삭제 */
    background-color: var(--color-main);
    color: #fff;
    fill: #fff;
    padding: clamp(84px, 11vw, 141px) 0 clamp(132px, 24vw, 318px) 0;
    position: relative; /* ctrl_btn 정렬의 기준 */
}
.adopt h2 {
    font-size: var(--font-size-tit);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tit);
    text-align: center;
}
.adopt .list {
    margin: clamp(22px, 4vw, 42px) 0 0 0;
}
.adopt .list .swiper-slide {
    width: 300px;
}
.adopt .list .swiper-slide a {
    display: flex;
    flex-direction: column;
    align-content: center; /* 가운데 */
    text-align: center;
}
.adopt .list .swiper-slide a .photo {
    overflow: hidden;
    height: 300px;
    border-radius: 50%;
}
.adopt .list .swiper-slide a .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.adopt .list .swiper-slide a .cate {
    background-color: #1B609B;
    border-radius: 30px;
    padding: 7px 12px;
    margin-top: -0.8095em; /* margin은 마이너스 값이 가능함 */
    align-self: center;
    width: auto;
}
.adopt .list .swiper-slide a .cate.female {
    background-color: #9B1B1D;
}
.adopt .list .swiper-slide a h3 {
    font-size: var(--font-size-tit);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tit);
    text-align: center;
    margin: 0.6818em 0 0.3333em 0;
}
.adopt .list .swiper-slide a p {
    overflow: hidden;
    line-height: 1.5;
    height: 4.5em;
    margin: 0 10% 0 10%;    
}
.adopt .ctrl_btn {
    position: absolute; /* adopt를 기준으로 정렬 */
    left: 50%;
    bottom: clamp(110px, 19.3vw, 258px);
    transform: translateX(-50%);
    margin: 24px 0 0 0;
    display: flex;
    gap: 24px;
}
.adopt .ctrl_btn .prev,
.adopt .ctrl_btn .next {
    display: flex;
    justify-content: center;
    text-align: center; /* i태그 가운데 정렬*/

    width: 44px;
    height: 44px;
    background-color: #fff;
    border-radius: 50%;
    fill: #1d1d1d;
}
.adopt .ctrl_btn .prev i,
.adopt .ctrl_btn .next i {
    display: flex;
    width: 10.45px;
    vertical-align: top;
}
.adopt .ctrl_btn .next i {
    transform: rotate(-180deg);
}
.adopt .more {
    position: absolute;
    right: calc(50% - 630px);
    top: clamp(89px, 12vw, 152px);
}
.adopt .more a {
    display: flex;
    align-items: center;
    gap: 0 5px;
}
.adopt .more a i {
    display: block;
    width: 10px;
}
.adopt .rolling {
    position: absolute; /* adopt를 기준으로 정렬 */
    left: 0;
    bottom: 5%;
    width: 100%;
    font-size: clamp(32px, 9vw, 120px);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tit);
    color: var(--color-white20);
    white-space: nowrap;
}
.adopt .rolling p {
    position: absolute;
    left: 0;
    bottom: 0;
    /* animation: adopt_roll 60s linear infinite; */
}
@keyframes adopt_roll {
    0% { transform: translateX(0);}
    100% {transform: translateX(-50.287%);}
}


@media screen and (max-width:1335.6px){
    .adopt .more {
        right: var(--wrapper-m);
    }
}/* @media */

@media screen and (max-width:768px){
    .adopt .ctrl_btn .prev,
    .adopt .ctrl_btn .next {
        display: none;
    }
    .adopt .more a span {
        display: none;
    }
    .adopt .more a i {
        width: 18px;
    }
}/* @media */

.review {
    background-color: #ededed;
    padding: clamp(60px, 10vw, 128px) 0 clamp(48px, 7vw, 87px) 0;
}
.review .wrapper {
    position: relative; /* prev / next / more 정렬의 기준 */
}
.review h2 {
    font-size: var(--font-size-tit);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tit);
    position: relative; /* before 정렬의 기준 */
}
/* .review h2::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -9px;
    width: 100vw; /* 브라우저의 넓이 *//*
    height: 1px;
    background-color: var(--color-black10);
} */
.review h2 span {
    position: relative;
}
.review h2 span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background-color: var(--color-sub-01);
}
.review .list {
    margin: clamp(27px, 4vw, 50px) 0 0 0;
}
.review .list .swiper-slide {
    width: 297px;
}
.review .list .swiper-slide a {
    display: block;
}
.review .list .swiper-slide a .photo {
    overflow: hidden;
    height: clamp(250px, 25vw, 330px);
}
.review .list .swiper-slide a .photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.review .list .swiper-slide h3 {
    margin: 14px 0 11px 0;
    font-size: var(--font-size-tit2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tit);

    /* 1줄제한 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.review .list .swiper-slide p {
    /* 2줄제한 */
    overflow: hidden;
    line-height: 1.5;
    height: 3em;

    /* 브라우저마다 일부는 적용 될 수도 있고 안 될 수도 있음.*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.review .list .swiper-slide a .date {
    margin: clamp(11px, 2vw, 14px) 0 0 0;
    display: flex;
    gap: 0 33px;
}
.review .list .swiper-slide a .date strong {
    color: var(--color-sub-02);
    position: relative;
}
.review .list .swiper-slide a .date strong::after {
    content: "";
    position: absolute;
    right: -17px;
    top: 7px;
    width: 1px;
    height: 10px;
    background-color: var(--color-black10);
}
.review .list .swiper-slide a .date span {
    color: var(--color-black60);
}
.review .prev,
.review .next {
    position: absolute; /* wrapper를 기준으로 정렬 */
    left: 0;
    top: 43%;
    width: 44px;
    height: 44px;
    border: 1px solid #1d1d1d;
    border-radius: 50%;
    fill: #1d1d1d;
    z-index: 1;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.review .prev {
    transform: translateX(-50%);
}
.review .next {
    left: auto;
    right: 0;
    transform: translateX(50%);
}
.review .prev i,
.review .next i {
    width: 10.45px;
    margin: 5px 0 0 0;
}
.review .next i svg {
    transform: rotate(180deg);
}
.review .more {
    position: absolute; /* wrapper를 기준으로 정렬 */
    right: 0;
    top: 0;
}
.review .more a {
    display: flex;
    align-items: flex-end;
}
.review .more a strong {
    color: var(--color-sub-02);
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tit);
}
.review .more a span {
    padding: 0 0 4px 0;
}
.review .more a i {
    width: 11px;
    padding: 0 0 4px 0;
    margin: 0 0 0 6px;
}
@media screen and (max-width:768px){
    .review .list .swiper-slide p {
        display: none;
    }
    .review .prev,
    .review .next {
        display: none;
    }
    .review .more a strong {
        display: none;
    }
    .review .more a span {
        display: none;
    }
    .review .more a i {
        width: 18px;
        padding: 5px 0 0 0;
        margin: 0;
    }
}/* @media */

footer {
    background-color: #1D1D1D;
    color: var(--color-white80);
    padding: clamp(45px, 5vw, 56px) 0 clamp(30px, 5vw, 59px) 0;
}
footer .wrapper {
    position: relative; /* top 정렬의 기준 */
}
footer .top {
    position: absolute; /* wrapper를 기준으로 정렬 */
    right: 0;
    top: clamp(-56px, -5vw, -45px);
    transform: translate(50%, -46%);
    width: clamp(47px, 6vw ,73px);
    height: clamp(47px, 6vw ,73px);
    fill: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode: difference;
    z-index: 1;
}
footer .top::after {
    content: "";
    position: absolute;
    right: -8px;
    top: -8px;
    background-image: url(../images/spin.png);
    width: clamp(60px, 7vw, 88px);
    height: clamp(60px, 7vw, 88px);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    animation: spin 15s linear infinite;
    mix-blend-mode: difference;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {transform: rotate(360deg);}
}
footer .top i {
    display: block;
    width: clamp(14px, 2vw, 24px);
}
footer .f_nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125em 2.823em;
}
footer .f_nav ul li {
    position: relative; /* after 정렬의 기준 */
}
footer .f_nav ul li::after {
    content: "";
    position: absolute;
    right: -1.4em;
    top: 0.38em;
    width: 1px;
    height: 0.7058em;
    background-color: var(--color-white20);
}
footer .f_nav ul li:last-child::after {
    display: none;
}
footer .f_info {
    margin: clamp(8px, 2vw, 24px) 0 16px 0;
}
footer .f_info span,
footer .f_info address {
    display: inline-block;
    margin: 0 1em 0.3em 0;
}
footer .copyright {
    color: var(--color-white40);
}