/* 반응형 조정 */

.mediaViewInfo {
		@font-face {
    font-family:"LG EI";
	src: url('./Fonts/LG EI_LGEIText-Rg-TTF.woff') format('truetype');
		
    font-weight: normal; /* Adjust if there are other weights */
    font-style: normal;
}
--web-view-name: Main;
--web-view-id: Main;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
:root {
	--web-view-ids: Main;
	}
*{
		margin: 0;
		padding: 0;
	box-sizing: border-box;}
html, body{
	width: 100%;
    height: 100%;
    overflow: hidden; /* 스크롤 제거 */
	font-family: "LG EI", sans-serif;
 display: flex;
    flex-direction: column;
    justify-content: center;
            align-items: center;
	
	background-image: url("images/bg.png"); /* 배경 이미지 추가 */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

	}


.header{width: 100%;
            height: 20vh;
            display: flex;
                 
           
        }
.header_left{
	width: 20%;
    height: 50%;
	display: flex;
	justify-content:center;
	align-items: center;
	padding-top: 5%;
	
}
 .LGlogo {
     width: 80%;
	 justify-content: center
	 
	
        }
.header_right {width: 80%;
            height: 70%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 5%;
	padding-top: 3%;
            }

        .back-button {
			padding: 12px 20px;
			width: 7vw;
			height: 7vh;
            font-size: 3vh;
            background-color: #F6F3EB;
            border: none;
            color: #707070;
            font-family: "LG EI";
            cursor: pointer;
            transition: 0.3s;
            border-radius: 10rem;
			filter: drop-shadow(0rem 0.3125rem 0.375rem rgba(0, 0, 0, 0.161));
			display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .back-button:hover {
            background-color: #F4A7AD;
        }

        .container {
            display: flex;
            flex-direction: row;
            width: 100%;
			height: 80%;
            align-items: center;
			justify-content: center;
    
        }

.sidebar {
    display: flex;
	width: 25vw;
	height: 100%;
	 flex-direction: column;
            justify-content: center; /* 아래쪽으로 이동 */
            align-items:center; /* 왼쪽으로 이동 */
            color: #707070;
           top: 15vh;}

.sidebar a {
            width: 80%;
            max-width: 280px;
        }	
	
        

        .sidebar button {
			
			width: 15vw; /* 뷰포트 크기에 따라 조정 */
            max-width: 280px;
            height: 7vh; /* 높이를 뷰포트 높이에 맞춤 */
            border-radius: 10rem;
            margin: 1vw;
            padding: 1vh 2vw;
            font-size: 4vh; /* 화면 크기에 맞춰 조정 */
            background-color: #F6F3EB;
            border: none;
            color: #707070;
            font-family: "LG EI";
            cursor: pointer;
            transition: 0.3s;
            filter: drop-shadow(0rem 0.3125rem 0.375rem rgba(0, 0, 0, 0.161));
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .sidebar button:hover {
            background-color: #F4A7AD;
        }
.main {
            width: 75%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
	        padding: 1%;
        }
        .main_img {
			width: 80%; /* 가로 크기에 따라 자동 조정 */
            max-width: 1200px; /* 최대 너비 설정 */
			left: -4%;
			padding: 2% 0 5% 0;
			position: relative;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
      	
        }
  .main_img img {
            width: 100%;
            height: auto;
            display: block;
            margin: auto;
        }

.scroll-container{
	overflow: auto;
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
    background-color: transparent;
	flex-direction: column;
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    cursor: grab; /* 기본 상태에서 드래그 가능 커서 *
	touch-action: pan-y; /* 세로 스크롤 허용 */
    pointer-events: auto; 
	z-index: 1; /* 스크롤 컨테이너를 위로 올림 */
	
}
.conb{
	width: 100%;
	padding: 2% 0% 2% 5%;
}
	

.pbuttons{
	display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto); /* 2행 구조 */
        gap: 4%;
        width: 83%;
        max-width: 1200px;
        justify-items: center;
        align-items: center; }

    .pb {
        width: 34vw;
        height: 15vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color:  rgba(255, 255, 255, 0.4) ;
        border-radius: 10px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .pb:hover {
        transform: scale(1.05);
		background-color: rgba(255, 255, 255, 0.7);
    }

    .pb img {
        height: 5vh;
		width: auto;
		max-height: 50px;
        margin-bottom: 10px;
		align-content: center;
		align-items: center;
		margin: 5%;
    }
.w_conb {
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: 25px 0 0 25px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        width: 80vw;
	height: 80vh;
        display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	right: 0;
	top: 58vh;
	transform: translateY(-50%);
    }
.b_conb {
        background-color: black;
        border-radius: 25px 0 0 25px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: 0.5vw;
  scrollbar-color: #707070 black;
    width: 80vw;
	height: 80vh;
        display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	top: 58vh;
	transform: translateY(-50%);
    }
.b_conb::-webkit-scrollbar {
  width: 5vw;
}

.b_conb::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.9);
  border-radius: 5vw;
}

.b_conb::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #F4A7AD, #f88295);
  border-radius: 5vw;
  border: 1vw solid black;
}
.g_conb {
        background-color: #F0ECE4;
        border-radius: 25px 0 0 25px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: white #F0ECE4;
    width: 80vw;
	height: 80vh;
        display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	top: 58vh;
	transform: translateY(-50%);
    }
.g_conb::-webkit-scrollbar {
  width: 0.4vw;
}

.g_conb::-webkit-scrollbar-track {
  background: white;
  border-radius: 1vw;
}

.g_conb::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 1vw;
  border: 0.5vw solid #F0ECE4;
}
.scroll_im1{
	display: flex;
	flex-direction: column;
  width:100%;
	justify-content: center;
  align-items: center;}
.scroll_im1 img{
max-width: 80%;
  height: auto;
  border-radius: 10px;
	display: block;
}
.scroll_im2{
	display: flex;
	flex-direction: column;
  width:100%;
	justify-content: center;
  align-items: center;}
.scroll_im2 img{
max-width: 100%;
  height: auto;
  border-radius: 10px;
	display: block;
	
}
    #p_topmenu {
		width: 92%;
		height: 10%;
        display: flex;
        justify-content:space-between;
		align-items: center;
        gap: 0.5%;
		padding: 1% 6% 0 5%;
    }

    #p_topmenu div img {
        width: auto;
        height: 5.5vh;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    #p_topmenu div img:hover {
        transform: scale(1.1);
    }
#p_topmenu_p {
		width: 70%;
		height: 10%;
        display: flex;
        justify-content:space-between;
		align-items: center;
        gap: 0.5%;
		padding: 1% 6% 0 6%;
	
    }

    #p_topmenu_p div img {
        width: auto;
        height: 5.5vh;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    #p_topmenu_p div img:hover {
        transform: scale(1.1);
    }

    .slider-container {
		display: flex;
        width: 80vw;
		height: 85vh;
        overflow: hidden;
        position: relative;
        justify-content: center;
		align-items: center;
		
    }

    .slider {
        display: flex;
		justify-content: flex-start;
        transition: transform 0.3s ease-in-out;
	    width: 95%;
		height: 100%;
		padding-top: 3%;
		padding-left: 10vw;

		
	 }
   .slider1 {
        display: flex;
	   justify-content: space-between;
	   align-items: center;
	    width: 50vw;
		height: 100%;
		padding-top: 3%;
	   padding-left: 5vw;
}
.p_slider {
        display: flex;
	   justify-content: space-between;
	align-items: center;
	    width: 95%;
		height: 100%;
	   gap: 6%;
		padding:1% 0 0 18%;
	overflow: hidden;
	
	 }

.slide {
	flex:0 0 25%;
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	margin-left: 2%;
	
}
.slide1 {
	flex:0 0 25%;
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
}
.slider2 {
        display: flex;
		justify-content: flex-start;
        transition: transform 0.3s ease-in-out;
	    width: 95%;
		height: 100%;
		padding-top: 3%;
		padding-left: 40vw;
}
.slide2 {
	flex:0 0 20%;
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	
}
.promo_img {
  width: 100%;
  height: auto;
  object-fit: contain; /* 또는 cover (채우는 스타일 차이) */
  border-radius: 0; /* 이미지 둥글게 하고 싶다면 25px */
align-item: center;
	justify-content: center;
}
.promo {display: flex;
width: 50%;
height: auto;
	justify-content: center;
  align-items: center;
	border-radius: 25px; 
	background-color: rgba(255, 255, 255, 0.9); /* 보기 좋게 */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 이미지 넘침 방지 */
}


.brand_logo {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 20vw;
	height: 10vh;
	top: 0;
}
.brand_logo img{
	height: 3vh;
}

.brand_logoP{
	width: 100%;
	height: 5vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #333;
	padding-top: 6%;
	}
.brand_logoP p{text-align: center;
               font-size: 4vh;}
.brand_logo1 {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 20vw;
	height: 6vh;
	top: 0;
	
}
.brand_logo1 img{
	height: 3.5vh;	
}

.brand_img {
	width: 19vw;
	height: 30vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 1vw;
	
	
}
.brand_img img {
	width: auto;
	height: 30vh;
	display: flex;
	justify-content: center;
	align-items:center;
	top: 0;
}
.brand_img1 {
	width: 19vw;
	height: 30vh;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.brand_img1 img {
	width: auto;
	height: 25vh;
	display: flex;
	justify-content: center;
	align-items:center;
	top: 0;
}
#xt7_img{width: 12vw;
height: auto;}
.more_b{width: 100%;
	height: 15vh;
        display: flex;
    justify-content: center; /* 가로 정렬 */
    align-items: center; /* 세로 정렬 */
    padding-top: 3vh;}
.more_b button{
			width: 7vw; /* 뷰포트 크기에 따라 조정 */
            max-width: 280px;
            height: 6vh; /* 높이를 뷰포트 높이에 맞춤 */
            border-radius: 10rem;
            font-size: 3vh; /* 화면 크기에 맞춰 조정 */
            background-color: #F6F3EB;
            border: none;
            color: #707070;
            font-family: "LG EI";
            cursor: pointer;
            transition: 0.3s;
            filter: drop-shadow(0rem 0.3125rem 0.375rem rgba(0, 0, 0, 0.161));
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
	top: 0.1vh;
        }

        .more_b button:hover {
            background-color: #F4A7AD;
        }
 .product_dbox {
	display:flex;
	justify-content: center;
	align-items: center;
  width: 90%;
  height: 85%;
  }
.product_sec_l {
  width: 35vw;
  height: 95%;
  color: white;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 2vw auto;
}
.product_sec_r {
  
  width: 35vw;
  height: 95%;
  color: white;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2vw auto;
}
.brand_logo_d {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 30vw;
	height: 10vh;
	top: 0;
}
.brand_logo_d img{
	height: 4vh;
}
.brand_img_d {
	width: 20vw;
	height: 45vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 1vw;
	
	
}
.brand_img_d img {
	width: auto;
	height: 45vh;
	display: flex;
	justify-content: center;
	align-items:center;
	top: 0;
}

.brand_img_d1 {
	width: 20vw;
	height: 45vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 1vw;
	
	
}
.brand_img_d1 img {
	width: auto;
	height: 35vh;
	display: flex;
	justify-content: center;
	align-items:center;
	top: 0;
}

.spec_table {
  width: 90%;
height: 100%;
  color: #707070;
  border-collapse: collapse;
	margin: 1%;
	padding-top: 2%;
}

.spec_table th {
  text-align: left;
  font-size: 3vw;
	padding: 5% 0 0 5%;
	vertical-align: bottom;
}

.spec_table td {
  padding: 0.5% 0.5%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 36%;
}
.spec_table .row_inch {
	vertical-align: bottom;
}
.spec_table .row_inch .title_b {padding-bottom: 0.3vw;}
.spec_table .title_b {
  font-weight: bold;
	font-size: 40%;
	width: 8vw;
	padding: 0 0 0 1vw;
}
.inch_B { height: 5vh;
padding-left: 0.5vw;
	padding-right: 0.5vw;
cursor: pointer;
        transition: transform 0.3s ease;}

.inch_B:hover {
        transform: scale(1.1);}


 .spec_table td.t_remark {
  border-bottom: none !important;
  font-size: 28% !important;
 text-align: center;
}
.soundbar_d {
	text-align: center;
  vertical-align: middle;
}
.sb_d {
  display: block;
  margin: 0 auto;
}
.circle_color1 {
	width: 1.8vw; /* 원의 가로 길이 */
	height: 100%;
     /* 원의 세로 길이 */
    background-color: rgba(246,243,235,1); /* 배경색 베이지 */
	border: 0.005rem solid #555;
    border-radius: 100%; /* 원 모양으로 만들기 */
    display: inline-block; /* 요소를 인라인 블록으로 설정 */}

 /* 가로가 좁고 세로가 넓을 때 버튼을 상단에 배치 */
        @media (max-aspect-ratio: 1/1) {
            .container {
                flex-direction: column;
                align-items: center;
            }

            .sidebar {
                width: 100%;
                flex-direction: row;
                justify-content: space-around;
				top: -80px;
				position: relative;
                padding: 0px;
            }
			.sidebar button{
				width: 80%;
				max-width: 300px;
				height: 50%;
				margin: 0 2%;
				font-size: 70%;
				border-radius: 2rem;
				align-items: center;
				display: flex;
				justify-content: center;
				text-align: center;
			}
		

}