@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&display=swap');

/* 초기화 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; font-family: 'Noto Sans KR', sans-serif; }
body { background-color: #323232; }
ul, li, p, input, form { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: inherit }
.black { color: #000; }
.white { color: #000; }
:root { --main-color: #f5f1e9; --bar-color: #dacaad; }

.wrap { width: 1920px; height: 1080px; transform-origin: top left; position: absolute; left: 0; top: 0; transform: scale(1); background-color: var(--main-color); }
.intro-container { width: 100%; height: 100%; max-width: 1920px; margin: 0 auto; position: relative; display: flex;  justify-content: center;  align-items: center; }
.main-logo { position: absolute; width: 920px; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.3); opacity: 0;
    animation: fadeIn 0.8s ease-out forwards, logoAnimation 0.8s ease-out 1s forwards }
.intro-menu { position: absolute; left: 0; top: -100px; width: 100%; height: 100px; opacity: 0;
    animation: slideDown 1s ease-out 1s forwards; }
.intro-sidenav { position: absolute; right: -70px; top:200px; width: 70px; height: 315px; opacity: 0;
    animation: slideLeft 1s ease-out 1.5s forwards; }

.menu-logo { margin: 0 38px 0 80px; }
.menu-logo img { width: 140px; }

#site-header { position: absolute; left: 0; top: 0; width: 100%; height: 100px; border-bottom: 5px solid var(--bar-color); background-color: #fff; z-index: 20; }
.menusection { display: flex; align-items: center; width: 100%; max-width: 1920px; height: 100px; }
.mainmenu { display: flex; height: 100%; }
.mainmenu >  li > a > p { font-family: 'Lato', sans-serif; font-size: 26px; font-weight:500; color: #737273; padding: 0 38px; line-height: 100px; transition: all 0.2s; }
.mainmenu > li:hover > a > p { color: #000; }
.mainmenu > li.active > a > p { color: #000; }
.mainmenu > li:hover > .submenu { height: 50px; }
.mainmenu > li:hover > .submenu ul { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu { position: absolute; left: 0; top: 95px; width: 100%; height: 0; background-color: var(--bar-color); transition: all 0.2s; }
.submenu  ul { display: flex; opacity: 0; visibility: hidden; transition: all 0.2s; }
.submenu  ul > li p { font-size: 15px; font-weight: 300; color: #fff; line-height: 50px; padding: 0 22px; transition: all 0.2s; }
.submenu  ul > li:hover p { font-weight: 400; }
.submenu1 { margin-left: 273px; }
.submenu2 { margin-left: 436px; }
.submenu3 { margin-left: 614px; }
.submenu4 { margin-left: 830px; }

.topbtn { position: absolute; right: 30px; top: 25px; display: flex; column-gap: 16px; z-index: 100; visibility: hidden; }

.sidebtn { position: fixed; right: 0; top: 200px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; z-index: 100; }
.light { background-color: rgba(0,0,0,0.3);  }
.dark { background-color:rgba(0,0,0,0.3);  }
.sidebtn > ul { width: auto; padding: 30px 20px; background-color: rgb}
.sidebtn > ul > li { text-align: center; margin: 20px 0 0 0; }
.sidebtn > ul > li:first-child { margin: 0 0 0 0; }

.main-container { position: absolute; top: 105px; left: 0; width: 100%; height: auto; }
.menu-grid { position: absolute; width: 100%; max-width: 1400px; }

.grid-container { opacity: 1; position: absolute; left: 50%; top: 460px; transform-origin: 50% 0; transform: translateX(-50%); width: 1395px; height: 1320px; font-family: 'Lato', sans-serif;
  /*animation: slideUp 1s ease-out 2.2s forwards;*/ }
.grid-item { position: absolute; overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; }
.grid-item img { width: 100%; transition: all 0.2s; }
.grid-item:hover img {transform: scale(1.03);}

.grid-item span { position: absolute; font-size: 28px; color: #fff; }
.about { left: 320px; top: 0px; width: 100%; max-width: 630px; aspect-ratio: 630 / 354; opacity: 0;
    animation: aboutani 1s ease-out 3.2s forwards;}
.line-up { left: 50px; top: 419px; width: 100%; max-width: 900px; aspect-ratio: 900 / 470; opacity: 0; 
    animation: lineupani 1s ease-out 2.2s forwards, lineupani2 1s ease-out 3.2s forwards;}
.customizing { left: 914px; top: 369px; width: 100%; max-width: 480px; aspect-ratio: 480 / 750; opacity: 0;
    animation: customizeani 1s ease-out 3.2s forwards;}
.customizing img { width: auto; height: 100%; }
.function { left: 235px; bottom: 0px; width: 100%; max-width: 666px; aspect-ratio: 666 / 446; opacity: 0;
    animation: functionani 1s ease-out 3.2s forwards;}
.about span, .line-up span { left: 20px; bottom: 20px;}
.customizing span, .function span { right: 20px; top: 20px;}

.main-bg_video { position: relative; width: 100%; height: 100%; overflow: hidden; }
.main-bg_video  video{ width: 100%; height: 100%; object-fit: cover; }

.snap-container { width: 100%; height: calc(100% - 100px); margin-top: 100px; scroll-snap-type: y mandatory; overflow-y: scroll; scroll-behavior: smooth; }
.screen { scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; scroll-behavior: smooth; }
.screen-image { position: relative; height: 100%; background-color: #000; overflow: hidden; }
.screen-image img { width: 100%; height:100%; object-fit: cover; }
.screen-content { height: 100%; overflow: hidden; background-color: var(--main-color); }
.maincol { background-color: var(--main-color);; }
.whitecol { background-color: #fff; }
.title-text { text-align: center; margin: 0 0 160px 0; }
.title-text_main { text-align: center; margin: 0 0 60px 0; }
.title-text h2, .title-text_main h2 { font-size: 70px; font-weight: 700; margin-bottom: 20px; font-family: 'Lato', sans-serif; opacity: 0; }
.title-text p, .title-text_main p { font-size: 20px; font-weight: 400; opacity: 0; }
.title-text h2 { animation: slidecontUp 1s ease-out 0s forwards; }
.title-text p { animation: slidecontUp 1s ease-out 0.7s forwards; }
.title-text_main h2 { animation: slidecontUp 1s ease-out 2s forwards; }
.title-text_main p { animation: slidecontUp 1s ease-out 2.7s forwards; }
.title-text p > span, .title-text_main p > span { font-family: 'Lato', sans-serif; }
.title-text p > span > font, .title-text_main p > span > font { position: relative; top: -7px; font-size: 9px; }
.screen-last { height: 100px; }

.productsection { width: 100%; margin: 0 auto;}
.productsection ul { display: flex; justify-content: center; align-items: center; row-gap: 30px; }
.productsection ul li { position: relative; overflow: hidden; text-align: center; cursor: pointer; }
.productsection ul.item2 { column-gap: 100px; padding: 0 210px; }
.productsection ul.item3 { column-gap: 40px; padding: 0 140px; }
.productsection ul.item5 { column-gap: 30px; padding: 0 150px; }
.productsection ul.item2 li { width: 700px; height: 623px; }
.productsection ul.item3 li { width: 520px; height: 620px; }
.productsection ul.item5 li { width: 298px; height: 645px; }

.productsection ul li img { width: 100%; height:100%; object-fit: cover; transition: all 0.2s; }
.productsection ul li:hover img { transform: scale(1.05); transition: all 0.2s; }
.productsection ul li p { display: table; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; color: #fff; height: 80px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); }
.productsection ul li p span { display: table-cell; text-align: center; vertical-align: middle; font-size: 34px; font-weight: 500; }
.productsection video { width: 100%; height: 100%; object-fit: cover; }

.productnav ul { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; column-gap: 20px; padding: 0 100px; }
.productnav ul.item4 { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; column-gap: 100px; padding: 0 100px; }
.productnav ul li { height: auto; overflow: hidden; text-align: center; cursor: pointer; }
.productnav ul li img { width: 100%; height:100%; object-fit: cover; transition: all 0.2s; }
.productnav ul li p { font-size: 35px; font-weight: 600; font-family: 'Lato', sans-serif; }
.item5 li { width: calc(100% / 5) }
.item4 li { width: calc(100% / 4) }
/*.item3 li { width: calc(100% / 3) }*/
/*.item2 li { width: calc(100% / 2) }*/
.item1 li { width: calc(75% / 1) }

.sub-container { position: absolute; top: 100px; width: 100%; height: auto; }
.procuct-section { width: 100%; height: 100%; display: flex; }
.producttitle { text-align: center; font-size: 35px; font-weight: 600; margin: 0 0 100px 0; }
.product-description { position: relative; flex: 0 1 610px; background-color: var(--main-color); }
.procuct-text { margin: 130px 0 0 115px; }
.textlogo { width: 5.5rem; }
.procuct-text h3 { font-size: 70px; line-height: 1; font-family: 'Lato', sans-serif; font-weight: 700; margin: 0 0 0 -5px; }
.procuct-text p { font-size: 20px; margin-top: 40px; line-height: 165%; }
.procuct-text p > span { font-family: 'Lato', sans-serif; }
.procuct-text p > span > font { position: relative; top: -7px; font-size: 13px; }
.product-image { position: relative; flex: 1; }
.product-image > img { width: 100%; height: 100%; object-fit: cover; }
.basebtn { position: absolute; left: 115px; bottom: 90px; }
.movedownbtn { position: absolute; left: calc(50% - 29px); bottom: 4%; z-index: 100; }

.product-description2 ul { display: flex; flex-wrap: nowrap; justify-content: center; column-gap: 100px; padding: 0 110px; }
.product-description2 ul li { width: 500px; height: 770px; overflow: hidden; }
.product-description2 ul li div video { width: 100%; height: 100%; object-fit: cover; }
.product-description2 ul li img { width: 100%; height: 100%; object-fit: cover; }
.product-description2 ul li h4 { font-size: 32px; font-weight: 500; margin: 10px 0; font-family: 'Lato', sans-serif; }
.product-description2 ul li p { font-size: 20px; font-weight: 300; letter-spacing: -1px; }
.product-description2 ul li p > span { font-family: 'Lato', sans-serif; }
.product-description2 ul.item2 > li { width: 800px; height: 770px; }

.product-description3 ul { display: flex; flex-wrap: nowrap; justify-content: center; column-gap: 100px; padding: 0 110px; }
.product-description3 ul li { position: relative; overflow: hidden; }
.product-description3 ul li div video { width: 100%; height: 100%; object-fit: fill; }
.product-description3 ul li .gridimg > img { width: 100%; height: 100%; object-fit: cover; }
.product-description3 ul li h4 { font-size: 32px; font-weight: 500; margin: 10px 0; font-family: 'Lato', sans-serif; }
.product-description3 ul li p { font-size: 20px; font-weight: 400; }
.product-description3 ul li p > span { font-family: 'Lato', sans-serif; }
.proimg { position: absolute; }
.product-description3 ul.item2 > li { width: 800px; height: 780px; }

.product-description4 ul { display: flex; flex-wrap: nowrap; justify-content: center; column-gap: 90px; padding: 0 140px; }
.product-description4 ul li .materialdiv { aspect-ratio: 800 / 555; overflow: hidden; }
.product-description4 ul li .aboutdiv { aspect-ratio: 600 / 743; overflow: hidden; }
.product-description4 ul li .aboutdiv2 { aspect-ratio: 1000 / 740; overflow: hidden; }
.product-description4 ul li div video { width: 100%; height: 743px; object-fit: cover; }
.product-description4 ul li div > img { width: 100%; height: 100%; object-fit: cover; }
.product-description4 ul li h4 { font-size: 32px; font-weight: 500; margin: 10px 0; font-family: 'Lato', sans-serif; }
.product-description4 ul li h4.s2 { font-size: 28px; font-weight: 400; margin: 20px 0 5px 0; }
.product-description4 ul li p { font-size: 20px; font-weight: 400; }
.product-description4 ul li p > span { font-family: 'Lato', sans-serif; }
.product-description4 ul li p > span > font { position: relative; top: -7px; font-size: 9px; }
.product-description4 ul li p.s2 { font-size: 18px; font-weight: 300; }
.etc_popbtn { margin-top: 70px; }
.product-description4 ul.about_ul { color: #000; column-gap: 100px; padding: 0 110px; }

.product-base ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 95px; row-gap: 95px; padding: 0 60px; max-width: 1500px; }
.product-base ul li h4 { font-size: 32px; font-weight: 400; margin: 10px 0; font-family: 'Lato', sans-serif; }
.product-base ul li p { font-size: 20px; font-weight: 400; margin-bottom: 20px; }
.product-base ul li p > span { font-family: 'Lato', sans-serif; }
.product-base ul li img { height: 227px }

.scrollcontainer { width: 100%; padding: 100px 0; }
.scrollcontainer img { width: 100%; max-width: 1920px; margin: 0 auto; }

.popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%;  height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; }
.popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; /*max-width: 1400px;*/ height: 95%; background-color: white; border: 1px solid #000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); overflow: hidden; z-index: 1001; transform-origin: center; }
.popup-close2 { position: absolute; top: 25px; right: 25px; cursor: pointer; }
.popup-iframe {  width: 100%; height: 100%; border: none; }

.play-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: url('../images/btn-play.png') no-repeat center center; background-size: contain; cursor: pointer;; }
.play-button.hidden { display: none; }

.main-text { position: absolute; left: 50%; top: calc(50% + 10%); transform: translate(-50%, -50%); text-align: center; }
.main-text h2 { margin: 0; font-family: 'Lato', sans-serif; font-size: 90px; font-weight: 700; color: #fff; opacity: 0;
    animation: slidecontUp 1s ease-out 0s forwards;}
.main-text p { font-size: 24px; font-weight: 300; color: #fff; margin-top: 40px; opacity: 0;
    animation: slidecontUp 1s ease-out 0.7s forwards;}
.main-text p > span { font-family: 'Lato', sans-serif;}
.main-text p > span > font { position: relative; top: -7px; font-size: 9px; }

.main-text2 { position: absolute; left: 50%; top: calc(50% + 30px); transform: translate(-50%, -50%); text-align: center; }
.main-text2 h2 { margin: 0; font-family: 'Lato', sans-serif; font-size: 90px; font-weight: 500; color: #fff; opacity: 0;
    animation: slidecontUp 1s ease-out 0s forwards;}
.main-text2 p { font-size: 24px; font-weight: 300; color: #fff; margin-top: 40px; opacity: 0;
    animation: slidecontUp 1s ease-out 0.7s forwards;}
.main-text2 p > span { font-family: 'Lato', sans-serif; font-size: 26px;}
.main-text2 p > span > font { position: relative; top: -10px; font-size: 14px; }

/* scroll */
.snap-container::-webkit-scrollbar, .wrap::-webkit-scrollbar { width: 5px; }
.snap-container::-webkit-scrollbar-thumb, .wrap::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #9c9c9c; }
.snap-container::-webkit-scrollbar-track, .wrap::-webkit-scrollbar-track { background-color: transparent; }

/*
@media (max-width: 1600px){
    .main-logo { width: 400px; }
    .title-text { margin: 0 0 40px 0;}
    .grid-container { top: 150px; }
    .productsection ul li p span { font-size: 22px; }
    .productsection ul li { height: 340px; }
    .productsection ul li p span { font-size: 22px; }
    .procuct-text h3 { font-size: 46px; }
    .procuct-text p { font-size: 16px; }
    .product-description2 ul li h4 { font-size: 20px;}
    .product-description2 ul li div:nth-child(1)  { height: 380px; }
    .product-description2 ul li p { font-size: 11px; }
    .product-description3 ul li h4 { font-size: 20px;}
    .product-description3 ul li div:nth-child(1)  { height: 380px; }
    .product-description3 ul li p { font-size: 11px; }
    .product-description4 ul li h4 { font-size: 20px;}
    .product-description4 ul li p { font-size: 11px; }
    .proimg > img { height: 80px; }
    .proimg { bottom: -10px; }
    .product-base ul {  column-gap: 50px; row-gap: 50px; }
    .product-base ul li img { height: 160px }
}*/