@charset "utf-8";
/* ------------------------- */
/* Common ------------------- */
/* ------------------------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

img {
    height: auto;
    max-width: 100%;
}

.clear {
   clear: both;
}

/* 강조 작지만 굵은 글자 */
.tb {
   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;
   font-weight: 700;
   letter-spacing: 1.2px;
   word-spacing: 1;
}

.smalls { 
   font-family:'tahoma', 'Small Fonts', Sans-serif;
   font-size:10px;
   font-weight:bold;
   transition: 0.5s;
   text-align: center;
}
a.smalls:link, a.smalls:visited, a.smalls:active {
   color:#2B3748 !important;
   Text-decoration:none;
}
a.smalls:hover {
   color:#F366DA !important;
   text-decoration:none;
}

.link_related {
   border-bottom: 0 !important;
   text-decoration:none !important;
}
a.link_related:link, a.link_related:visited, a.link_related:active {
   border-bottom: 0 !important;
   text-decoration:none !important;
}
a.link_related:hover {
   border-bottom: 0 !important;
   text-decoration:none !important;
}

.brands {
   color: #179C7E;
   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;
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 1.2px;
   word-spacing: 1;
}




/* 이미지 모션 */
.pic {
    max-width: 100%;
    max-height: none;
    position: relative;
    overflow: hidden;
    margin: 3px;
    display: inline-block;
    border-radius: 5px;
    animation: anima 2s;
    backface-visibility: hidden;
}

.pic-caption {
    cursor: default;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(73, 252, 212, 0.72);
    padding: 10px;
    text-align: center;
    opacity: 0;
    transform: translateY(100%); /* 기본적으로 아래로 이동 */
    transition: opacity 0.5s ease, transform 0.5s ease; /* opacity와 transform에 모두 transition 적용 */
}

.pic-date {
    color: #B4BCC6;
    font-size: 13px;
    /* font-family: 'Montserrat', Sans-serif; */
    font-family: Pretendard-Black, AppleSDGothicNeo-Regular, Malgun Gothic, 맑은 고딕, dotum, 돋움, sans-serif;
    font-weight: 400;
    line-height: 0.84em;
    padding: 0% 0px 0% 0%;
    margin: 8px 0px 11px 0px;
    text-align: center;
    text-transform: uppercase;
}

.pic-image {
    border-radius: 7px;
    transform: scale(1.1);
    transition: transform 0.5s ease;
}

.pic:hover .pic-image {
    transform: scale(1);
}

.pic:hover .pic-caption {
    opacity: 1; /* 내용 표시 */
    transform: translateY(0); /* 원래 위치로 이동하면서 나타남 */
}

/* 새로운 모션 효과: 아래에서 위로 뒤집히며 나타나는 효과 */
.open-down {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    top: 0;
    left: 0;
}

.pic:hover .open-down {
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -o-transform: rotateX(0);
    -ms-transform: rotateX(0);
    transform: rotateX(0);
}

.open-left {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    top: 0;
    left: 0;
}

.pic:hover .open-left {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.open-right {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    top: 0;
    left: 0;
}

.pic:hover .open-right {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

        /* 모바일 대응 */
        @media (max-width: 560px) {
            .pic-container {
                max-width: 100%;
            }
        }

@media (max-width: 768px) { /* 768px 이하의 화면에서 적용 */
    .pic-title br {
        display: none; /* <br> 요소 숨기기 */
    }
}




/* ------------------------- */
/* footer ------------------ */
/* ------------------------- */
footer address {
    margin-bottom: 3px;
}

footer p {
    margin: 0;
}