/* 반응형 조정 */

.mediaViewInfo {
		@font-face {
    font-family:"LG EI";
	src: url('./Fonts/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;}
@media screen and (orientation: portrait) {
    html,body {
		margin: 0;
		padding: 0;
        display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important; /* 수정: 요소들이 균등 배치되도록 */
    width: 100% !important;
    height: 100vh !important;
    background-color: #f0f0f0 !important;
    font-family: "LG EI", sans-serif !important;
		overflow: visible;
}
    



/* 세로형(Vertical) 레이아웃 스타일 */



.header {
    width: 100% !important;
    height: 12vh !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 0 0 4% !important;
}

.header_left {
    width: 25% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.LGlogo {
    width: 80%!important;
   
   }

.header_right {
    width: 75% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.back-button {

	width: 20%;
	height: 5.5vh;
    font-size: 4vw !important;
    background-color: #F6F3EB !important;
    border: none !important;
    color: #707070 !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    border-radius: 10rem !important;
}

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

.main {
    width: 100% !important;
    height: auto !important; /* 수정: sidebar 보이도록 조정 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
	flex-grow: 1;
	
	
}

.main_img {
    width: 80% !important;
    height: auto !important;
    max-height: 100% !important;
	align-items: center;
	justify-content: center;
	left: 1.5%;
}
 .container {
            display: flex;
            flex-direction: column;
            width: 100%;
			height: 100vh;
            align-items: center;
			justify-content:flex-start;
	 position: relative;
        }
.sidebar {
    width: 100% !important;
    height: 12vh !important;
    display:flex !important;
    justify-content:space-evenly!important;
    align-items: center !important;  
    position:absolute;
	bottom: 0;
	margin-top: auto!important;
        z-index: 9999;
	padding: 0 4% 5% 4%;
}
.sidebar button {
        width: 85%;
        max-width: 280px;
        height: 6vh;
        font-size: 3vw;
        border-radius: 5rem;
        align-items: center;
        display: flex;
        justify-content: center;
        text-align: center;
    }
.conb{
	width: 98%;
	height: 70%;
	display: flex;
    justify-content: center;
    align-items: center;
	padding: 0;
	}
.pbuttons{
	display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto); /* 2행 구조 */
        gap: 4%;
        width: 90%;
        justify-items: center;
        align-items: center;
	padding-top: 25%;
	}
.pb {
        width: 42vw;
        height: 17vh;
        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.06);
		background-color: rgba(255, 255, 255, 0.7);
    }
 .pb img {
        height: 2.5vh;
		width: auto;
		max-height: 30px;
		align-content: center;
		align-items: center;
		margin: 3%;
    }
	
.w_conb {
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: 25px 25px 0 0;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        width: 100%;
	height: 88vh;
        display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
    }
.b_conb {
        background-color: black;
        border-radius:25px 25px 0 0;
        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: 100%;
	height: 88vh;
        display: flex;
	position: relative;
	bottom: 0;
	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 25px 0 0;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: 0.5vw;;
  scrollbar-color: white #F0ECE4;
    width: 100%;
	height: 88vh;
        display: flex;
	position: relative;
	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: 95%;
		height: 5vh;
        display: flex;
		flex-display: column;	
        justify-content:space-between;
		align-items: center;
		padding: 1vh 1vw 0 1vw;
    }

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

    #p_topmenu div img:hover {
        transform: scale(1.1);
    }
	 #p_topmenu_p {
		width: 60%;
		height: 5vh;
        display: flex;
		flex-display: column;	
        justify-content:space-between;
		align-items: center;
		padding: 1vh 1vw 0 1vw;
    }

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

    #p_topmenu div img:hover {
        transform: scale(1.1);
    }
 .scroll-container {
  overflow: auto;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  background-color: transparent;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  touch-action: pan-y;
  pointer-events: auto;
  z-index: 1;
  padding-bottom: 10vh;  /* ✅ 이 부분 추가 */
}
    .slider-container {
        width: 95vw;
		height: 100vh;
		display: flex;
        position: relative;
        justify-content: center;
		align-items: center;
		left:-1.5%;

    }
	
    .slider[data-orientation="vertical"]{
    display: grid;
		grid-template-columns: repeat(2, 1fr);  
    width: 95%;
    box-sizing: border-box;
	gap: 2vh 2vw;
    padding: 2vh;
		margin-top: 165vh;
			
    }

.slider[data-orientation="vertical"] .slide {
	width: 100%;
	height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 1rem;
    padding: 1%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
	
  }
	
	.slider1[data-orientation="vertical"]{
    display: flex;
    flex-direction: column;  /* ✅ 세로 정렬 */
    justify-content:flex-start;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    width: 100vw;
    height: 90vh;
    padding-top:120vh;
    gap: 0 !important;
			
}
.slider1[data-orientation="vertical"] .slide1 {
    width: 100vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    scroll-snap-align: start;
	margin-top: 4vh;
}
	.slider2[data-orientation="vertical"]{
    display: flex;
    flex-direction: column;  /* ✅ 세로 정렬 */
    justify-content:flex-start;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    width: 100vw;
    height: 90vh;
    padding-top: 310vh;
		padding-right: 35vw;
    gap: 0 !important;
			
    }

.slider2[data-orientation="vertical"] .slide2 {
    width: 90vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    scroll-snap-align: start;
	margin-top: 1vh;
	
}
.brand_logo {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 100%;
	height: 10vh;
	padding-top: 10vh;
}
.brand_logo img{
	height: 3vh;
	
}

.brand_logoP{
	width:  100%;
	height: 3vh;
	font-size: 1vh;
	font-style: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #333;
	padding-top: 2vh;
	
	}
.brand_logo1 {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 70vw;
	height: 7vh;
	top: 0;
	
}
.brand_logo1 img{
	height: 3.5vh;	
}

.brand_img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	
}
.brand_img img {
	width: 50vw;
	height: auto;
	display: flex;
	justify-content: center;
	align-items:center;
	padding-top: 4%;
}
.brand_img1 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.brand_img1 img {
	width: 40vw;
	height: auto;
	display: flex;
	justify-content: center;
	align-items:center;
}
.more_b{width: 100%;
	height: 13vh;
        display: flex;
    justify-content: center; /* 가로 정렬 */
    align-items: center; /* 세로 정렬 */
    padding-top: 0;}
.more_b button{
			min-width: 15vw; /* 뷰포트 크기에 따라 조정 */
            max-width: 50vw;
            height: 5vh; /* 높이를 뷰포트 높이에 맞춤 */
            border-radius: 10rem;
            font-size: 2vh; /* 화면 크기에 맞춰 조정 */
            background-color: rgba(0, 0, 0, 0.05);
            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;
	        bottom: 0;
        }

        .more_b button:hover {
            background-color: #F4A7AD;
        }
	.product_dbox {
	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
  width: 100%;
  height: auto;
	overflow: auto;
	position: relative;
    background-color: transparent;
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    cursor: grab; /* 기본 상태에서 드래그 가능 커서 *
	touch-action: pan-y; /* 세로 스크롤 허용 */
    pointer-events: auto; 
	z-index: 1; /* 스크롤 컨테이너를 위로 올림 */
		margin-bottom: 12vh;
  }
.product_sec_l {
  width: 80%;
  height: 100vh;
  color: white;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10%;
	
}
.product_sec_r {
  
  width: 98%;
  height: 95%;
  color: white;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4vw auto;
}
.brand_logo_d {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 30vw;
	height: 5vh;
	top: 10vh;
}
.brand_logo_d img{
	height: 4vh;
}
.brand_img_d {
	width: 80%;
	height: 30vh;
	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: 70vw;
	height: auto;
	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;
}
.product_img_d { width: 60vw;
	height: auto;
	max-height: 25vh;
	margin-top: 5vh;}
	
.spec_table {
  width: 90%;
height: 100%;
  color: #707070;
  border-collapse: collapse;
	margin: 1%;
	padding-top: 5%;
}

.spec_table th {
  text-align: center;
  font-size: 8vw;
	padding: 0 0 8% 5%;
	vertical-align: bottom;

	
}

.spec_table td {
  padding: 1%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 2.6vw;
}
.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: 2.6vw;
	width: 8vw;
	padding: 0 4vw 0 1vw;
}
.inch_B { height: 6vh;
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; /* 요소를 인라인 블록으로 설정 */}

}
 .p_slider[data-orientation="vertical"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 가로 2개 */
    grid-auto-rows: auto;
    justify-items: center;
    align-items: center;
    width: 90%;
    box-sizing: border-box;
	gap: 1vh 1vw; /* 상하 간격만 1vh로 줄이기 */
	 padding-bottom: 12vh;
	 margin: 0% 15% 5% 0%;
	 
}

.p_slider[data-orientation="vertical"] .p_slide {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
	
}
.promo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
	padding-top: 0;
	border-radius: 20px;
   
}
.promo_img {
    width: 100%;/* 👉 원하는 비율로 조절: 80%, 60%, 40% 등 */
    height: auto;
    display: block;
    object-fit: contain;  /* 이미지 비율 유지하면서 잘림 방지 */
	
}