/* 반응형 조정 */

.mediaViewInfo {
		@font-face {
    font-family: "LG EI";
src: url('./Fonts/LGEIText-Rg-TTF.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
--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: 90%!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: 4.5vh;
    background-color: #F6F3EB !important;
    border: none !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    border-radius: 10rem !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 0;
}

.back-button:hover {
    background-color: #F4A7AD !important;
}
.back-button img {
height: 40% !important;   /* ? ??: ?? ???? ? ??? */
  width: auto !important;    /* ??? ???? */
  display: block !important; /* ??? ?? ?? */
  object-fit: contain !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 2% 5% 2%;
}
.sidebar .btn > button{
  height: 6vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  border: 0;
}
.sidebar .btn > button > img{
  height:30%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* LG AI ???? ? ?? ? ??? */
.sidebar .btn > button > img[src$="LG AI_b.png"]{
  max-width: 60%;   /* ???? 50~70% ??? ?? */
}
.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;
	
}
	.scroll_im3{
	display: flex;
	flex-direction: column;
  width:100%;
	justify-content: center;
  align-items: center;}
.scroll_im3 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: 100% !important;
		height: 100% !important;
		left: 0 !important;
		display: flex;
        position: relative;
        justify-content: center;
		align-items: flex-start;
		overflow: hidden;

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

.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: 0.3%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
	
  }
	
	.slider1[data-orientation="vertical"]{
    display: grid;
    grid-template-columns: repeat(2, 1fr);  
    width: 95%;
    box-sizing: border-box;
	gap: 2vh 2vw;
    padding: 2vh;

			
}
.slider1[data-orientation="vertical"] .slide1 {
    width: 100%;
	height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 1rem;
    padding: 0.3%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
	.slider2[data-orientation="vertical"]{
     display: grid;
    grid-template-columns: repeat(2, 1fr);  
    width: 95%;
    box-sizing: border-box;
	gap: 2vh 2vw;
    padding: 2vh;
			
    }

.slider2[data-orientation="vertical"] .slide2 {
    width: 100%;
	height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 1rem;
    padding: 0.3%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
	
}
.brand_logo {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 100%;
	height: 10vh;
	padding-top: 10vh;
	padding-bottom: 2vh;
}
.brand_logo img{
	height: 2.5vh;
	
}

.brand_logoP{
	width:  100%;
	height: 3vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 2vh;
	}
.brand_logoP img{
	width:  auto;
	height: 4vh;
	justify-content: center;
	align-items: center;
	}	
.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: 50vw;
	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: 20vw; /* 뷰포트 크기에 따라 조정 */
            max-width: 50vw;
            height: 5vh; /* 높이를 뷰포트 높이에 맞춤 */
            border-radius: 10rem;
            background-color: rgba(0, 0, 0, 0.05);
            border: none;
            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;
        }
	.more_b button img { width: auto;
	height: 2.5vh;}
	.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: 10vh;
  }
.product_sec_l {
  width: 80%;
  height: 35vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0;
	
}
.product_sec_r {
  
  width: 100%;
  display: flex;
	flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(8px, 2vh, 16px) !important;
  padding-top: 0 !important;
}
	.detail_mname{
  display: block !important;
width: clamp(120px, 40vw, 360px) !important;
margin:  auto !important;
		padding-bottom: 1vh;
}

/* ??? ??: ???? ??? ??? ?? ???? */
.detail_box{
position: relative !important;
display: inline-grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
width: fit-content !important; /* override prior width:100% */
max-width: 90vw !important;
margin: 0 auto !important;
padding: 0 !important;
gap: 0 !important;
}

/* ?? ??? � ?? ?? ??, ?? ?? */
.detail_model{
grid-area: 1 / 1 / 2 / 2 !important;
display: block !important;
width: min(70vw, 520px) !important; /* keep your responsive width */
height: auto !important;
object-fit: contain !important;
line-height: 0 !important;
}
.brand_logo_d {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 30vw;
	height: 3vh;
	padding-top: 3vh;
	
}
.brand_logo_d img{
	height: 2.4vh;
}
.brand_img_d {
	width: 70%;
	height: 25vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 1vw;

}
	
.brand_img_d img {
	width: auto;
	height: 20vh;
	display: flex;
	justify-content: center;
	align-items:center;
	top: 0;
}

.brand_img_d1 {
	width: 70%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 1vw;
	
	
	
}
.brand_img_d1 img {
	width: auto;
	height: 20vh;
	display: flex;
	justify-content: center;
	align-items:center;
	top: 0;
}
.product_img_d { width: 60vw;
	height: auto;
	max-height: 25vh;
	margin-top: 4vh;}
.inch_t{
  grid-area: 1 / 1 / 2 / 2 !important;
position: absolute !important; /* override earlier position:static */
top: -10%;
left: 20%;
height: 30% !important; /* 20% of image/container height */
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: clamp(6px, 2vw, 14px) !important;
white-space: nowrap !important; /* single row; scroll if overflow */
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;


z-index: 3 !important;
pointer-events: auto !important;
visibility: visible !important;
opacity: 1 !important;
}	

.inch_B { height: 3vh !important;  /* ?: 6vh ? 4.4vh ?? */
	width: auto !important;
cursor: pointer;
        transition: transform 0.3s ease;}

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


.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 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2? */
    gap: 3vh 3vw !important;
    width: min(90vw, 1000px) !important;  /* ?? ?? ?? */
    margin: 0 auto !important;           /* ???? ???? */
    justify-items: stretch !important;    /* ? ?? ? ?? ??? */
    align-items: center !important;
    padding: 2vh 0 12vh !important;
}

.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;  /* 이미지 비율 유지하면서 잘림 방지 */
	
}