알림
뒤로

<!--상세페이지-->

<style>


.option_wrap:nth-of-type(1) .option_title,

.option_wrap:nth-of-type(1) .option_data,

.option_wrap:nth-of-type(2) .option_title,

.option_wrap:nth-of-type(2) .option_data,

.option_wrap:nth-of-type(6) .option_title,

.option_wrap:nth-of-type(6) .option_data {

    display: none; /* '원산지', '제조사', '무게' 텍스트를 숨김 */

}

  

.option_wrap:nth-of-type(1)::before {

    content: "배송방법"; 

    font-weight: bold; /* 굵게 표시 */

    margin-right: 10px; /* 오른쪽 여백 추가 */

    display: inline; /* 인라인으로 표시하여 가로로 나란히 */

}


.option_wrap:nth-of-type(1)::after {

    content: "LG전자 직접배송\a무료배송"; /* 줄바꿈 문자 사용 */

    display: block; /* 블록으로 표시하여 아래에 위치 */

    white-space: pre-wrap; /* 줄바꿈 문자 인식 */

    margin-left: 80px; /* 왼쪽 여백 추가 */

    margin-top: -25px; /* 위쪽 여백 추가 */

}



.option_wrap:nth-of-type(2)::before {

    content: "*일부 상품의 경우 상품별, 지역별 보유 물량에 따라 배송이 지연될 수 있습니다.\a*도서산간(제주 포함)의 경우 추가 배송비가 발생하거나 물류 사정에 따라 배송이 불가할 수 있습니다.";

    display: block; /* 블록으로 표시하여 아래에 위치 */

    white-space: pre-wrap; /* 줄바꿈 문자 인식 */

    font-size: 14px; /* 폰트 크기 조정 */

    margin-top: 3px; /* 위쪽 여백 추가 */

}


.option_wrap:nth-of-type(6)::before {

    content: "해당 상품은 예약 상담 후 구매 가능합니다."; /* 내용 추가 */

    width: 100%;

    display: block; /* 블록으로 표시하여 아래에 위치 */

    border: 1px solid #ccc; /* 테두리 추가 */

    padding: 15px; /* 안쪽 여백 추가 */

    background-color: #F0ECE4; /* 배경색 추가 */

    margin-top: 50px; /* 위쪽 여백 추가 */

    font-weight: bold; /* 굵게 표시 */

    text-align: center;

    font-size: 16px; /* 폰트 크기 조정 */

}

</style>

<!-- 상단으로 이동하기 버튼 -->

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link

      rel="stylesheet"

      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"

    />

    <title>TOP & DOWN</title>

    <style>

        .btn_gotop, .btn_godown {

            display: none; /* 초기에는 숨김 */

            position: fixed;

            bottom: 15px; /* 버튼의 위치를 15px로 설정 */

            right: 30px;

            z-index: 999;

            border: 1px solid #ccc;

            outline: none;

            background-color: white;

            color: #333;

            cursor: pointer;

            padding: 15px 20px;

            border-radius: 100%;

            transition: background-color 0.3s, color 0.3s; /* 부드러운 색상 변화 */

            text-decoration: none; /* 링크의 기본 스타일 제거 */

        }


        .btn_gotop:hover, .btn_godown:hover {

            background-color: #a50034;

        }


        .btn_gotop:hover > i, .btn_godown:hover > i {

            color: #ffffff;

        }


        .btn_godown {

            right: 30px; /* 다운 버튼의 위치 설정 */

        }


        .btn_gotop {

            right: 30px; /* 탑 버튼의 위치 설정 */

            bottom: 80px;

        }


        html {

            scroll-behavior: smooth; /* 부드러운 스크롤 효과 */

        }

    </style>

</head>

<body>

    <a href="#" class="btn_godown">

        <i class="fa-solid fa-arrow-down"></i>

    </a>

    <a href="#" class="btn_gotop">

        <i class="fa-solid fa-arrow-up"></i>

    </a>


    <script>

        // 스크롤 이벤트 리스너

        window.addEventListener('scroll', function() {

            const scrollTop = window.scrollY; // 현재 스크롤 위치


            // 탑 버튼 표시

            const btnGoTop = document.querySelector('.btn_gotop');

            if (scrollTop > 200) {

                btnGoTop.style.display = 'block';

            } else {

                btnGoTop.style.display = 'none';

            }


            // 다운 버튼 표시

            const btnGoDown = document.querySelector('.btn_godown');

            if (scrollTop > 200) {

                btnGoDown.style.display = 'block';

            } else {

                btnGoDown.style.display = 'none';

            }

        });


        // 탑 버튼 클릭 이벤트

        document.querySelector('.btn_gotop').addEventListener('click', function(event) {

            event.preventDefault();

            window.scrollTo({ top: 0, behavior: 'smooth' });

        });


        // 다운 버튼 클릭 이벤트

        document.querySelector('.btn_godown').addEventListener('click', function(event) {

            event.preventDefault();

            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });

        });

    </script>

</body>

</html>



<!-- 스크롤 제거-->

   <style>

body{

 -ms-overflow-style: none;

 }

 

::-webkit-scrollbar {

  display: none;

}

    </style>